Wordpress – Widgety a jejich ostylovaní

« Nastavení orientace paletky nástrojů – InDesign

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.

PLAIN TEXT

PHP:

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.

PLAIN TEXT

CSS:

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

PLAIN TEXT

PHP:

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:

PLAIN TEXT

PHP:

$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

PLAIN TEXT

PHP:

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> (<a href="http://acci.cz/wordpress" title="Stáhněte si WordPress v češtině">česká verze</a>)</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.

PLAIN TEXT

PHP:

/** 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?

Share and Enjoy:

6. 9. 2007 9.00

This entry was posted on Thursday, September 6th, 2007 at 9.00 and is filed under CSS, Developer, Tips, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

If you like this post, you can grab our RSS or you can subscribe by Email.