Боковое содержимое и полезные элементы меню в WordPress

Одна из самых веселых задач — это построить сайдбар сайта, чтобы это не было хаотичным набором блоков. Давайте посмотрим, что может быть полезным и привлекательным для посетителей.

Отображение свежих комментариев

Есть три способа сделать это, давайте пройдем от самого легкого к сложному:

  • Виджет — если сайдбар поддерживает вставку виджетов, то просто перетащите на него встроенный виджет «Свежие комментарии», укажите заголовок и количество отображаемых комментариев. Сохраните, готово 🙂
  • Плагин — есть огромное количество плагинов для вывода комментариев, например Get Recent Comments (https://wordpress.org/plugins/get-recent-comments/), для настройки и вывода комментариев. Он создает виджет, который как мы видели выше, прекрасно заменяется встроенным виджетом. Именно поэтому данный плагин заброшен и не развивается и показан только для примера.
  • Пользовательская функция — Т.к. комментарии хранятся в базе данных, достать их оттуда труда не составит. Мы создадим свою собственную функцию и добавим ее в functions.php для создания и обработки SQL запроса, который будет собирать самые последние одобренные комментарии. А затем мы создадим цикл для вывода результатов запроса к базе данных и отображения их один за одним.
<?php // display recent comments
function dp_recent_comments($no_comments = 10, $comment_len = 35) {
global $wpdb;
$request = "SELECT * FROM $wpdb->comments";
$request .= " JOIN $wpdb->posts ON ID = comment_post_ID";
$request .= " WHERE comment_approved = '1' AND post_status = 'publish'
AND post_password =''";
$request .= " ORDER BY comment_date DESC LIMIT $no_comments";
$comments = $wpdb->get_results($request);
if ($comments) {
foreach ($comments as $comment) {
ob_start(); ?>
<li>
<a href="<?php echo get_permalink( $comment->comment_post_ID
) . '#comment-' . $comment->comment_ID; ?>">< ?php echo dp_get_author($comment); ?>:</a>
< ?php echo strip_tags(substr(apply_filters('get_comment_
text', $comment->comment_content), 0, $comment_len)); ?>
</li>
< ?php
ob_end_flush();
}
} else {
echo '<li>No Comments</li>';
}
}
function dp_get_author($comment) {
$author = "";
if ( empty($comment->comment_author) )
$author = 'Anonymous';
else
$author = $comment->comment_author;
return $author;
} ?>

Чтобы использовать эту функцию, достаточно вставить в нужное место

<?php dp_recent_comments(6); ?>

что отобразит 6 последних комментариев.

Отображение последних записей

Давайте так же пройдем от самого простого способа к сложному.

  • Виджет — Добавляем виджет «Свежие записи», улыбаемся и машем.
  • Пользовательская функция — в этот раз нам не придется писать с нуля свою собственную функцию, можно просто использовать wp_get_archives, которая уже нами рассматривалась. И для отображения 5 последних записей используем
<?php wp_get_archives('type=postbypost&limit=5'); ?>
  • Пользовательский цикл — в конце концов мы можем делать все, что угодно и напишем свой собственный цикл для вывода последних записей. Также ранее уже приводились примеры подобного использования циклов, сделать можно таким способом
<?php $home_brew = new WP_Query('showposts=10&orderby=date');
while($home_brew->have_posts()) : $home_brew->the_post();
// здесь поиграемся и настроим вывод заголовков, контента, пользовательских полей и т.д.
endwhile;
wp_reset_postdata();
?>

Обращаем внимание! Чтобы убедиться, что все последующие функции будут работать корректно, обязательно добавляем тег wp_reset_postdata(); после пользовательского цикла.

Отображение популярных записей

Популярность — понятие еще более широкое, нежели «недавность». Как вы определите популярность записи? На основании числа просмотров? Количества комментариев? Обратных ссылок? Если вы хотите собрать все сразу и в одном флаконе, то попробуйте плагин WordPress Popular Posts (https://wordpress.org/plugins/wordpress-popular-posts/) который как раз и занимается сбором различной информации, чтобы на ее основании определить популярность и вывести список популярных записей в вашем шаблоне:

<?php if (function_exists('get_mostpopular')) get_mostpopular(); ?>

Если же вы хотите оценивать популярность на основании только одного критерия, к примеру, количества комментариев к записи, то этого можно достичь с помощью такого запроса к базе данных:

<ul class="popular-posts">
<?php $popular_posts = $wpdb->get_results("SELECT id,post_title FROM
{$wpdb->prefix}posts ORDER BY comment_count DESC LIMIT 0,10");
foreach($popular_posts as $post) {
print "<li><a href='". get_permalink($post->id) ."'>".
$post->post_title."</a></li>n";
} ?>
</ul>

Отображение недавно измененных записей

Можно подумать, что для этого нам опять понадобится какой-то хитрый запрос к базе данных. Мы, конечно, можем, но все гораздо проще и WP_Query с определенным параметром (orderby=modified) может все значительно упростить:

<?php // display recently modified posts
$home_brew = new WP_Query('showposts=5&orderby=modified');
while($home_brew->have_posts()) : $home_brew->the_post();
// тут все как обычно- выводим титле и контент
endwhile;
wp_reset_postdata();
?>

Отображение случайных записей

И тут все просто. Опять же, WP_Query с параметром orderby=rand обеспечивает случайное отображение серии случайных записей блога:

<?php // display random posts
$home_brew = new WP_Query('showposts=3&orderby=rand'); while($home_brew->have_posts()) : $home_brew->the_post();
// тут все как обычно- выводим титле и контент endwhile;
wp_reset_postdata();
?>

Хитрый пример использования этой техники вот какой — можно выводить только одну случайную запись и сохранить функцию в специальный файл шаблона. А затем использовать Ajax для вызова этого шаблона и отображения, например, в сайдбаре. И в результате у вас будет милый блок, в котором будут самостоятельно перегружаться и отображаться разные случайные записи вашего сайта без перезагрузки страницы. (Подробнее тут https://digwp.com/2009/07/display-a-random-post- with-aj ax-refresh/)

Отображение записей из Твиттера

А кто сказал, что мы должны ограничиваться только содержимым нашего сайта? Импортировать свежие твиты из Твиттера может оказаться веселым способом общения с посетителями и всегда оставаться актуальным. У Твиттера есть добротная API система для получения и использования данных. Но, т.к. твиттер периодически падает и бывает недоступен, нельзя становиться в зависимость от него, т.к. это вызовет задержки в загрузке страниц нашего сайта. Поэтому, используя API для получения и отображения различных данных на своих страницах, нужно сделать все так, чтобы это не влияло на загрузку страниц сайта и не выглядело ужасным в результате проблем с API.

Соединение с Twitter API можно целиком сделать с помощью JavaScript, что предпочтительно по нескольким соображениям:

  • Соединение с твиттером происходит на клиентской стороне (в браузере посетителя) и не нагружает наш серверхостинг
  • Если все сделать правильно — это никак не влияет (отрицательно) на скорость загрузки страниц
  • Данные обрабатываются и выводятся на страницу только в случае успеха.

Так давайте это сделаем. Мы будем использовать jQuery, что очень удобно и легко.

Шаг 1. Подключаем jQuery

Добавляем в functions.php этот код. Он загрузит библиотеку jQuery на страницу через вставку кода в секцию <head>

if(!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js"), false, '1.3.2');
wp_enqueue_script('jquery');
}

Шаг 2. Загружаем скрипт

Нужно использовать специальную библиотеку, которую скачиваем и подключаем в шаблон

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/twitterjs"></script>

Шаг 3. Плагин jQuery

Этот плагин выполняет всю грязную работу по связи с Твиттером и вытягиванием последних твитов. Кроме этого он делает прикольные штучки, типа преобразования сокращенных ссылок в реальные адреса, хеш-тегов в ссылки поиска и @реплаи превращает в ссылки на профиля.

(function($){
$.fn.lastTwitterMessage = function(username){
var $base = this;
if(!username || username == "") return this;
var url = "https://twitter.com/statuses/user_timeline.json?callback=?";
$.getJSON(url,{count:10,screen_name:username
},
function(data){
if(data && data.length >= 1){
try{
var item = null;
for(var i = 0; i < data.length; i++){
if(/^@/i.test(data&#91;i&#93;.text)) continue;
item = data&#91;i&#93;; break;
}
if(!item) return;
var $tweet = $("<p></p> ").text(item.text);
$tweet.html(
$tweet.html()
.replace(/((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi,
'<a href="$1">$1</a>')
.replace(/(^|s)#(w+)/g,'$1<a href="https://search.twitter.com/search?q=%23$2">#$2</a>')
.replace(/(^|s)@(w+)/g,'$1<a href="https://twitter.com/$2">@$2</a>')
)
$tweet.append(" &nbsp;<a href='https://twitter.com/" + username + "'>(&#8734;)</a>&nbsp; 
").wrapInner("<span>");
$base.empty().append($tweet).show();
} catch(e) { };
};
});
return this; 
};
})(jQuery);

Wordpress и Twitter
WordPress и Twitter

А полученный твит можно как-то так оформить, например, всплывающим облаком в профиле автора в футере сайта.

Шаг 4. Вызов плагина

Вы можете вставить этот код в отдельный JavaScript файл или вписать в существующий (в этом примере мы создаем отдельный файл twitter.js в папке js шаблона). Этим кодом нужно лишь создать элемент для вызова и отображения содержимого плагина

$(function() {
$("<div id='tweet'></div>").hide().appendTo("#footer").lastTwitterMessage('chriscoyier');
});

В результате после загрузки страницы, внутрь нового скрытого <div id='tweet'></div> в футере будет записан последний твит аккаунта @chriscoyier и отобразится на странице. Если же не получится — то элемент останется пустым.

А вот тут пример того, как можно встроить на страницу Facebook, Twitter и Google+ https://wp.smashingmagazine.com/2012/01/19/facebook-twitter-google-wordpress/

Импорт и отображение содержимого RSS лент

Ранее в вордпресс был встроен парсер RSS лент MagpieRSS, однако в связи с прекращением его развития, сейчас Вордпресс переключился на SimplePie. И спустя некоторое время разработка SimplePie остановилась. Такое ощущение, что включение библиотеки в WordPress равносильно поцелую смерти для любого парсера фидов.

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

<?php // Import & Display Feed
if(function_exists('fetch_feed')) {
$feed = fetch_feed('https://digwp.com/feed/');  //адрес для парсинга
if (!is_wp_error($feed)) :
$feed->set_cache_duration(1200); // задаем время кеширования
$feed->init();  // выполняем запрос
$limit = $feed->get_item_quantity(7); // определяем количество элементов
$items = $feed->get_items(0, $limit); // создаем массив
endif;
}
if ($items) { ?>
<ul>
<?php foreach ($items as $item) { ?>
<li>
<div>
<strong>
<a href="<?php echo $item->get_permalink(); ?>">
<?php echo $item->get_title(); ?></a>
<strong>
<em><?php echo $item->get_author(); ?></em>
</div>
<div><?php echo $item->get_description(); ?></div>
<div><?php echo $item->get_date('j F Y'); ?></div>
</li>
<?php } ?>
</ul>
<?php } ?>

Разместив этот код в sidebar.php или в любом другом нужном месте, мы сможем наслаждаться несколькими последними записями с другого сайта, отображаемыми на нашем сайте.

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

Конечно же, все настраивается любым нужным способом, документацию по Simplepie можно посмотреть тут http ://simplepie.org/wiki/ reference/start

Добавить комментарий

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

Scroll Up