Оригинальное оформление виджетов на wordpress без плагинов

Оригинальное оформление виджетов на 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. Оформление виджета "Рубрики" или "Категории", кому как больше нравится.

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

Оригинальное оформление виджетов на wordpress без плагинов.

Первое что необходимо сделать, так это прописать в файл 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. Оформление виджета "Свежие комментарии" без плагина.

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

Оригинальное оформление виджетов на wordpress без плагинов.

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

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

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

<?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. Оформление виджета "Календарь".

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

Оригинальное оформление виджетов на wordpress без плагинов.

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

/* =Стили виджета календаря в сайтбаре
-------------------------------------------------------------- */
#wp-calendar{width: 100%;text-align: center;}
#wp-calendar caption{font-size: 20px;font-weight: bold;}
#wp-calendar a{color: #0163dd;}

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

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

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

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

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

ПОНРАВИЛОСЬ?


Чтобы не пропускать новые статьи, подпишитесь на их рассылку по email:

Комментарии к записи «Оригинальное оформление виджетов на wordpress без плагинов»

Добавить комментарий для Артем Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Подписка на новости

twitter vk rss

Введите свой email:

Свежие комментарии

Календарь

Сентябрь 2017
Пн Вт Ср Чт Пт Сб Вс
« Ноя    
 123
45678910
11121314151617
18192021222324
252627282930  

Я в Вконтакте


Мои партнеры

Интересное видео