WordPress – Widgety a jejich ostylovaní

Widgety (zápis platí pro WordPress v2.2.2)
V této verzi jsou již integrovány widgety pro sidebar (postraní lišta), podíváme se podrobněji na způsob jejich použití a popíšeme si jak je správně ostylovat pomocí CSS. V adresáři tématu máte soubor functions.php otevřete jej, hned na začátku vydíme definici co bude před a za widgetem, titulkem widgetu.

if ( function_exists('register_sidebar') ) register_sidebar(array('before_widget' => '<li id="%1$s" class="widget %2$s">','after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>',

1) Pokud vystačíte s tím že všechny prvky postraní lišty budou stylovány jedinou definicí, upravte následující nastavení a vložte definici třídy .bar do souboru style.css.

Definice třídy .bar, přidejte do souboru style.css.

.bar {	padding: 5px 5px 5px 5px;
	background: url('images/bar.jpg') no-repeat;
	color: White;
  }

if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div class="bar">',
'after_widget' => '</div>', 'before_title' => '<h2>',
'after_title' => '</h2>',
));

Přejděte k adresáři /wp-includes/ otevřete soubor widgets.php a výše provedené změny reflektujte i zde:

$defaults = array(
'name' => sprintf(__('Sidebar %d'), $i ),
'id' => "sidebar-$i",
'before_widget' => '<div class="bar">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
);

2) Pokud potřebujeme některé prvky postraní lišty ostylovat jinou definicí, budeme muset tato nastavení reflektovat jak v souboru widgets.php tak v jednotlivých souborech widgetů daných pluginů. Následuje příklad, jednotlivé funkce ze souboru widgets.php upravíme rovnou, přidáme CSS třídu .bar

function wp_widget_meta($args) {
	extract($args);
	$options = get_option('widget_meta');
	$title = empty($options['title']) ? __('Meta') : $options['title'];
?>
<?php echo $before_widget; ?>
<div class="bar"><?php echo $before_title . $title . $after_title; ?>
<ul><?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php echo attribute_escape(__('Syndicate this site using RSS 2.0')); ?>"><?php _e('Entries <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php echo attribute_escape(__('The latest comments to all posts in RSS')); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="http://wordpress.org/" title="<?php echo attribute_escape(__('Powered by WordPress, state-of-the-art semantic personal publishing platform.')); ?>">WordPress.org</a> <small>(<a href="http://acci.cz/wordpress" title="Stáhněte si WordPress v češtině">česká verze</a>)</small></li>
<?php wp_meta(); ?>
</ul>
</div>
<?php echo $after_widget; ?>
<?php
}>

Podobně učiníme s externími widgety, jedině tak budeme moci například pro Event Calendar použít třídu jinou.

  /** Event Calendar widget. */
  function ec3_widget_cal($args)
  { extract($args);
    $options = get_option('ec3_widget_cal');
    echo '<div class="otherbar">';
    echo $before_widget . $before_title;
    echo ec3_default_string($options['title'],'Kalendář');
    echo $after_title;
    ec3_get_calendar();
    echo '</div>';
    echo $after_widget;
  }

Související:

Jak vložit obrázek / odkaz do widgetu?