Главная › Новости

Блок популярных статей в сайдбаре

Опубликовано: 05.09.2018

На заметку копирайтеру. Популярные и востребованные виды статей

Приветствую, посетители моего скромного блога!

Наконец-то пишу статью на эту тему. Почему наконец-то? Да дело в том, что давно хотел установить на свой блог в боковую панель на главной блок популярных статей.

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

Вывод популярных постов на сайте Wordpress (плагин)

Если вы хотите такой же как у меня блок популярных статей, то читайте этот пост и делайте все по шагам. Сразу хочу отметить, что вывод статей я осуществил без помощи каких-либо плагинов. Использовал только чистый HTML код и даже CSS не подключал!

Анонсы постов с картинками в сайдбар. Wordpess. Chironova.ru

Также сразу хочу сказать тем, кто начал сомневаться в своих способностях:

Все работы будут производиться в виджетах системы WordPress без изменения файлов движка. Да и код наипростейший. Так что каждый новичок в нем разберется без труда!

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

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

Я же захотел вывести именно те статьи своего блога, которые занимают перспективные позиции в результатах поисковой выдачи с целью дальнейшего роста этих позиций. Кроме того, все эти статьи оптимизированы (заточены) под средне- и низкочастотные запросы ( СЧ и НЧ запросы ).

Зачем нужен блок популярных статей?

Некоторые могут не понять. «При чем тут позиции в выдаче и популярные статьи в сайдбаре?», — спросят они. Сейчас все объясню.

Вся фишка в том, что в последнее время поисковые системы все чаще обращают внимание на поведенческий фактор. И не только обращают, но и включают этот показатель в алгоритмы, с помощью которых производится расчет позиции сайта в поисковой выдаче.

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

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

Способы создания блока актуальных статей

Само собой, как вы уже догадались, имеется достаточно большое количество различных плагинов, которые могут выводить популярные записи. Выводят, например, в виде миниатюр, или без них. Вот одни из них:

Плагин WP-PostViews.  Один из распространенных плагинов, который высчитывает статьи на популярность, исходя из числа просмотров того или иного поста. Однако этот плагин имеет один большой минус — он не выводит миниатюры.

Плагин Featured Posts with thumbnails . Включает в себя большее количество функций, а также выводит миниатюры. Однако присутствует недостаток — плагин берет в обработку самое первое изображение поста и уменьшает его до размера миниатюры с помощью сжатия. Из-за этого создается приличная нагрузка на сервер.

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

Итак, надеюсь, вы хотите попробовать мой способ вывода статей. Тогда приступим.

Популярные статьи в сайдбаре с помощью HTML

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

Можно сразу создать миниатюры необходимого размера. Тем самым исключается сжатие изображения, а это существенный плюс. Можно применять для создания блока миниатюры, которые сгенерировала система WordPress. В блок популярных статей есть возможность включить абсолютно любую статью. Для этого не обязательно, чтобы запись имела большое количество просмотров или комментариев. Если вы будите использовать ссылки-надписи наряду с миниатюрами, то есть возможность использовать для этих ссылок абсолютно любой анкор, который отличен от заголовка поста. Это будет способствовать улучшению  анкор-листа вашего блога. Простой HTML код не будет существенно влиять на работу сервера.

Ну а для начала работы вам нужно будет подумать о том, как лучше оформить и расположить свой будущий блок популярных статей.

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

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

Да, кстати, со временем, может быть, я захочу внести какие-либо изменения в данный блок. Ну, а пока на сегодняшний день он будет выглядеть чисто в виде изображений — ссылок.

Итак. Когда вы продумали, как расположить блок популярных статей, можно приступить к созданию основы (скелета) блока — таблицы HTML. Такую таблицу можно создать в каком-нибудь редакторе для текста, но я вам рекомендую воспользоваться редактором Notepad++ . Это отличный помощник для редактирования HTML и CSS!

Вы уже видели, что мой блок популярных статей состоит из шести миниатюр-ссылок, которые ведут на шесть статей блога. Из-за этого моя таблица имеет вот такую начальную структуру в виде кода HTML:

<table> <tbody> <tr> <td>Ячейка №1</td> <td>Ячейка №2</td> </tr> <tr> <td>Ячейка №3</td> <td>Ячейка №4</td> </tr> <tr> <td>Ячейка №5</td> <td>Ячейка №6</td> </tr> </tbody> </table>

Эта таблица будет являться каркасом блока статей, и состоять из двух ячеек в ширину и трех ячеек в высоту. По идее в высоту можете сделать любое количество ячеек, например, 1, 2 или 4, 5 и т.д. В ширину можно одну, но это будет не очень хорошо выглядеть. Три и более в ширину — будет слишком мелко, не рекомендую так делать. Вот так выглядит скелет моего блока популярных статей в виде таблицы:

Итак. Теперь необходимо во все ячейки таблицы вставить заранее подготовленные миниатюры с ссылками а статьи. Миниатюры, которые вы можете увидеть в моем блоке, я делал сам. Просто брал тематические изображения из своих статей и уменьшал их до нужного размера. Ну а вот и стандартный код для каждой ячейки:

<a href="Ссылка на статью"><img title="Название статьи" alt="Название статьи для робота (по англ.)" src="ссылка на изображение (миниатюру)" /></a>

Да кстати, думаю, многие новички могут задать один вопрос: «А для чего нужна вообще таблица-каркас?» Поясню. Она необходима для того, чтобы удерживать каждую миниатюру и текст-ссылку в заданной области (ячейке) для их визуального разделения между собой. Без использования четких границ у вас ничего не получится. Изображения просто будут «плясать» по всему блогу.

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

<table> <tbody> <tr> <td><a href="http://saranchinsergey.ru/monetizatsiya/registratsiya-koshelka-webmoney-vebmani-i-popolnenie-schyota/"><img title="Регистрация Webmoney" alt="registratsiya-koshelka-webmoney" src="http://saranchinsergey.ru/wp-content/uploads/2015/03/registratsiya-koshelka-webmoney.png" /></a></td> <td><a href="http://saranchinsergey.ru/saitostroenie/kak-proverit-tekst-na-unikalnost/"><img title="Уникальность статьи" alt="unikalnost-statey" src="http://saranchinsergey.ru/wp-content/uploads/2015/03/unikalnost-statey.png" /></a></td> </tr> <tr> <td><a href="http://saranchinsergey.ru/optimizatsiya/kak-uvelichit-skorost-zagruzki-sayta/"><img title="Ускоряем блог" alt="uskorenie-bloga" src="http://saranchinsergey.ru/wp-content/uploads/2015/03/uskorenie-bloga.png" /></a></td> <td><a href="http://saranchinsergey.ru/optimizatsiya/chto-takoe-trast-sayta-i-kak-ego-proverit/"><img title="Проверка траста сайта" alt="proverit-trast-sayta" src="http://saranchinsergey.ru/wp-content/uploads/2015/03/proverit-trast-sayta.png" /></a></td> </tr> <tr> <td><a href="http://saranchinsergey.ru/optimizatsiya/kak-proverit-relevantnost-statey/"><img title="Проверяем релевантность" alt="proverit-relevantnost" src="http://saranchinsergey.ru/wp-content/uploads/2015/03/proverit-relevantnost.png" /></a></td> <td><a href="http://saranchinsergey.ru/saitostroenie/kak-zashhitit-sayt-na-wordpress-ot-vzloma/"><img title="Защита WordPress" alt="zashhita-wordpress" src="http://saranchinsergey.ru/wp-content/uploads/2015/03/zashhita-wordpress.png" /></a></td> </tr> </tbody> </table>

Теперь нужно просто перенести этот код из редактора Notepad++ в виджет административной панели блога. Для этого перейдите в админ панели по вкладкам Внешний вид—Виджеты:

Затем перетащите один из пустых виджетов «Произвольный текст или HTML-код» из колонки «Доступные виджеты» в «Боковую колонку».  Потом просто вставьте в него скопированный код из Notepad++ и сохраните изменения:

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

Итак. Хочу еще раз повторить. Миниатюры для блока популярных статей подготовьте заранее: уменьшите до нужного размера под вашу боковую панель блога. Самое главное не сжимайте изображение с обычного размера до нужного вам, чтобы вставить в блок. Это создаст дополнительную нагрузку на сервер.

Также вы всегда сможете использовать для своих миниатюр в блоке популярных статей миниатюры, которые система WordPress генерирует автоматически. В этом случае не забудьте прописать правильный путь до нужного вам изображения. Обычно созданные WordPress миниатюры имеют в ссылках следования размерности. Например:

Вот эти цифры как раз и отличают ссылку на миниатюру от ссылки на основное изображение. В вашем случае могут быть прописаны иные цифры, но смысл остается прежним.

Чтобы подробнее разобраться в том, как вывести блок статей в боковой панели сайта советую посмотреть мой видеоурок (измените качество видео перед просмотром):

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

Если есть вопросы — задавайте в комментариях. Увидимся в новых статьях!

Успехов Вам и Удачи С Уважением,

Другие интересные статьи:

МИНИ-КНИГА ПО ЗАРАБОТКУ В ИНТЕРНЕТЕ: КАК БЫСТРО ВЫУЧИТЬ АНГЛИЙСКИЙ: