Оригинальное оформление виджетов на wordpress без плагинов
Всем привет. С вами на связи Игорь Бочаров и сегодня я расскажу вам как оригинально оформить виджеты на 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;}
Результат смотрите на моем блоге в правом сайтбаре.
Как оформить виджеты "Свежие записи", "Архивы", "Мета" я описывать не буду. Там можно сделать все по аналогии с оформлением виджета "Рубрики".
Самое главное помните, что оформление вашего сайта ограничивается только на вашей фантазии.
Если есть какие то вопросы, задавайте в комментариях, будем разбираться вместе.
С уважением, Игорь Бочаров.
Комментарии к записи «Оригинальное оформление виджетов на wordpress без плагинов»