Всем привет. С вами на связи Игорь Бочаров и сегодня я расскажу вам как оригинально оформить виджеты на wordpress без плагинов.

Движок wordpress (далее для удобства буду писать - вордпресс) в своем арсенале имеет очень удобные способы организации вывода различной информации. Это так называемые виджеты. С помощью них можно вывести например: Рубрики, Свежие комментарии, Свежие записи и т.д.

Однако стоит заметить что имея такие широкие возможности в функциональном плане, стилевое оформление стандартных виджетов оставляет желать лучшего. Так давайте же вместе разберемся с данной проблемой и постараемся красиво оформить виджеты на wordpress без плагинов...

И так приступим...

1. Добавление уникального селектора Id для каждого виджета.

Все что нам для этого потребуется, так это открыть файл - functions.php и в то место, где мы регистрировали сайтбар добавить id="%1$s". Смотрите ниже как это должно выглядеть у вас.

/**

* сайтбар

**/

register_sidebar(array(

'name' => 'Виджеты сайтбара',

'id' => 'sidebar',

'description' => 'Размещайте здесь виджеты сайтбара',

'before_widget' => '<div id="%1$s" class="block">',

'after_widget' => '</div>',

'before_title' => '<h3>',

'after_title' => '</h3>',

));

Каждый наш виджет будет иметь одинаковый class="block" и свой уникальный селектор id. Теперь можно приступать к внешнему оформлению.

2. Оформление виджета "Рубрики" или "Категории", кому как больше нравится.

Посмотрите как отображались "Рубрики" на моем сайте до оформления.

Первое что необходимо сделать, так это прописать в файл style.css одинаковые для всех виджетов стилевые правила, используя class="block".

.block a{font:14px Tahoma, Geneva, sans-serif;font-weight:600;text-decoration:none;}

.block a:hover{text-decoration:underline;}

.block ul{text-align: left;}

.block li{margin-top:5px;}

Далее украсим наши категории используя селектор id="categories-3".

#categories-3 li{background: url('./images/category-icon.png') no-repeat 0 2px;}

#categories-3 a{color: #0163dd;margin: 5px 0 0 34px;line-height: 30px;}

Результат смотрите на моем блоге в правом сайтбаре.

3. Оформление виджета "Свежие комментарии" без плагина.

Посмотрите как отображались свежие комментарии на моем сайте до оформления.

Согласитесь, что смотреть тут не на что. Не хватает аватарки и текста самого комментария.

Немного поломав голову было решено убрать стандартный виджет свежих комментариев. Вместо него я создал свой собственный виджет используя стандартные функции вордпресс и текстовый виджет.

Добавьте в сайтбар текстовый виджет и скопируйте в него следующий код.

<?php $comments = get_comments('status=approve&number=5'); ?>

<div id="recent-comments-3">

<ul>

<?php foreach ($comments as $comment) { ?>

<li>

<span class="comments_author_widget"><?php

$title = get_the_title($comment->comment_post_ID);

echo get_avatar( $comment, $size = '60');

echo get_comment_author_link($comment);

?></span> к посту:

<br/>

<a href="<?php echo get_permalink($comment->comment_post_ID); ?>"><?php echo $title; ?></a>

<br/>

<?php

echo '"'.wp_html_excerpt( $comment->comment_content, 255 ).' ..."';

?>

</li>

<?php } ?>

</ul>

</div>

Сохраните и обновите страницу сайта. Как видно, ничего не работает. Это связано с тем, что вордпресс не умеет выполнять команды PHP в виджетах и его нужно этому научить.

Это можно сделать с помощью плагинов, но я покажу вам как обойтись и без них.

Откройте файл - functions.php и добавьте в него следующий код

/**

* заставляем вордпресс выполнять PHP в виджетах

**/

function vebmaster24_widget_php($widget_content) {

if (strpos($widget_content, '<' . '?') !== false) {

ob_start();

eval('?' . '>' . $widget_content);

$widget_content = ob_get_contents();

ob_end_clean();

}

return $widget_content;

}

add_filter('widget_text', 'vebmaster24_widget_php', 99);

Теперь наши комментарии отображаются, выводится аватарка, имя автора, название статьи, и текст комментария.

Добавим стилевое оформление:

/* =Стили виджета последних комментариев в сайтбаре

-------------------------------------------------------------- */

#recent-comments-3 li{margin: 0 0 10px 0;border: 1px dashed #986b01;padding: 10px;}

#recent-comments-3 .avatar{float: left;margin: 0 10px 10px 0;}

#recent-comments-3 a{color: #0163dd;}

.comments_author_widget{color: #644700;font-family:Tahoma, Geneva, sans-serif;font-weight:600;font-size:14px;}

Результат смотрите на моем блоге в правом сайтбаре.

4. Оформление виджета "Календарь".

Посмотрите как отображался календарь на моем сайте до оформления.

Добавим в файл style.css следующий код:

/* =Стили виджета календаря в сайтбаре

-------------------------------------------------------------- */

#wp-calendar{width: 100%;text-align: center;}

#wp-calendar caption{font-size: 20px;font-weight: bold;}

#wp-calendar a{color: #0163dd;}

Результат смотрите на моем блоге в правом сайтбаре.

Как оформить виджеты "Свежие записи", "Архивы", "Мета" я описывать не буду. Там можно сделать все по аналогии с оформлением виджета "Рубрики".

Самое главное помните, что оформление вашего сайта ограничивается только на вашей фантазии.

Если есть какие то вопросы, задавайте в комментариях, будем разбираться вместе.

С уважением, Игорь Бочаров.