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






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

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

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

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

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

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

Все работы будут производиться в виджетах системы 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 миниатюры имеют в ссылках следования размерности. Например:

вид ссылок на миниатюру

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

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

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

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

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


Книга о заработке в интернете:
Книга о заработке в интернете

Комментариев к статье: 55

  1. Юлия:

    Интересный вариант Вы предложили.
    Я у себя вывела с помощью плагина. Он, действительно, нагружает хостинг. Надо подумать о замене на код. :oops:

    Ответить

    • Сергей Саранчин:

      Да, Юлия, мне тоже очень нравится этот вариант! Реализуйте подобный у себя, это же так просто :smile:

      Ответить

    • Alexandr:

      Один плагин несильно нагружает хостинг. На какие то копейки. Но вариант предложеный Сергеем лучше плагина. Соглашусь с Вами Юля.

      Ответить

      • Игорь:

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

        Ответить

  2. Юлия:

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

    Ответить

    • Сергей Саранчин:

      Ну можно и со ссылками сделать. Так думаете лучше? На сколько же упала посещаемость Вашего блога, Юлия? :grin:

      Ответить

      • Alexandr:

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

        Ответить

    • Alexandr:

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

      Ответить

  3. Юлия:

    Если бы я делала себе такой виджет с кодом, то сделала в таком виде, как у меня сейчас выводит плагин. Мне так больше нравится.
    Посещаемость в последние несколько недель упала процентов на 20-30%. Она и до этого меня не баловала. Но все же…
    Грусть сплошная :o

    Ответить

    • Сергей Саранчин:

      С блоком популярных статей понятно.
      Ну 20-30% я думаю это не много, учитывая что на улице весна, а потом и лето. Обычно счётчик падает и заметно уменьшается количество посетителей в теплый сезон года :oops:

      Ответить

      • Алексей Иванов:

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

        Ответить

  4. Alexandr:

    Картинка на Главной странице отличается от картинки в статье. Нет слов Популярные статьи

    Ответить

    • Сергей Саранчин:

      Ну да, всё правильно! Так я и сделал. В боковой панели нет текста

      Ответить

      • Alexandr:

        Зря убрали! Я видел рисованые картинки и не догадывался что они ведут на Популярные статьи. Я без слов Популярные статьи прокручивал картинки.

        Ответить

        • Сергей Саранчин:

          Ок, прописал название блока для Популярных статей! :cry:

          Ответить

          • Alexandr:

            Мне непонятен смысл убирания надписи «Популярные статьи». Вы думаете все пользователи могут сообразить, что рисунки это не только рисунки? Я до этой статьи не знал что это Популярные статьи.

            Ответить

          • Виталий Охрименко:

            главное чтобы рисунки были заманчивыми. Ну а при наведении появляется надпись и там уже все становится на свои места. Мне кажется что этот вариант просто идеален. Хотел себе его поставить, но решил сделать это на новом шаблоне. Так что со временем сделаю

            Ответить

  5. Алиса:

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

    Ответить

    • Сергей Саранчин:

      Здравствуйте, Алиса! Рад Вас видеть!
      Работаем помаленьку, вносим новшества. Мне это нравится :smile:
      Да, статьи на эту тему нет, нужно написать! Спасибо за идею. По-моему мнению главное отличие блога от сайта состоит в том, что блог это авторский проект и регулярно наполняемый новыми материалами, что нельзя сказать о сайтах.
      Но это поверхностное высказывание. Нужно будет подробнее осветить эту тему в новом посте :oops:

      Ответить

      • Alexandr:

        Сергей, чем сайт отличается от портала? По сути портал то же сайт, но размерами побольше. Или не так?

        Ответить

        • Сергей Саранчин:

          Я тоже имею такое мнение. Но ещё мне кажется портал включает в себя большое многообразие различных опций для всевозможных онлайн-развлечений :smile:

          Ответить

          • Alexandr:

            Портал не ограничен одной тематикой как блог. На портале обсуждаются разные темы. Есть спец. раздел «О разном».

            Ответить

          • Виталий Охрименко:

            Забавно, сам задал вопрос и сам на него ответил

            Ответить

    • Alexandr:

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

      Ответить

  6. Алиса:

    Буду с нетерпением ждать, просто возник вопрос, что создавать именно в том случае, в котором задумала, а информацию на эту тему найти не смогла особо. Так что буду очень благодарна.. :smile:

    Ответить

    • Alexandr:

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

      Ответить

      • Виталий Охрименко:

        Если тема интересна нужно ее на форумах разбирать. Лично для меня блог это тот же сайт, только с внедрением в личную жизнь

        Ответить

        • Игорь:

          Короче получается блог,как мини сайт :lol:

          Ответить

  7. Юлия Иванова:

    Красиво иконки смотрятся. Вы иконки в папке uploads размещаете. Буду знать. Код очень простой, кстати. Как раз для новичка.

    Ответить

    • Сергей Саранчин:

      Да, мне тоже они нравятся и самое главное сделать их проще простого :smile:

      Ответить

      • Виталий Охрименко:

        Да, отличная статья. Нет, все таки сделаю их себе до нового шаблона

        Ответить

  8. Алексей Иванов:

    На многих блогах замечал, за место надписей делают картинки, но при том их ещё подписывают, чтобы было понятней…Первая картинка понятна, а вот вторая, где уникальность статьи, мне кажется картинка не совсем этому соответствует..На самой картинке сыщик по моему мнению. Сергей объясните пожалуйста сыщик и уникальность статьи в чём-то по смыслу совпадают?
    Или можно так сказать , сыщик ищет уникальную статью..

    Ответить

    • Сергей Саранчин:

      Сыщик? А на вора совсем не похож???
      Картинки подписаны, после того как курсор мыши подведёте к изображению миниатюры, появится надпись :grin:

      Ответить

      • Алексей Иванов:

        Понятно, Сергей. Вор тырит уникальный контент. Я почему то на вора сразу не подумал..А всё равно сыщик больше подходит чем вор!
        Про надпись я сразу понял, когда мышкой наводишь. Если чайник, юзер, новичок зайдёт на блог, он сразу не определит что к чему.

        Ответить

        • Сергей Саранчин:

          Тоже верно, нужно доработать, когда появится свободное время!

          Ответить

        • Виталий Охрименко:

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

          Ответить

  9. NI4KA:

    Не совсем поняла по какому принципу статьи попадают в блок популярных. По количеству комментариев?

    Ответить

    • Сергей Саранчин:

      NI4KA, ответ в принципе есть в этой статье. Я вывел именно эти статьи в разряд популярных из-за того, что они занимают перспективные позиции в выдаче. Просто назвал их «Популярные» :cry:

      Ответить

      • Виталий Охрименко:

        А насколько это влияет на ранжирование этих статей. По идее с каждой странице получается ссылка на перспективные для выдачи статьи. Это же большой плюс для перелинковки!

        Ответить

        • Сергей Саранчин:

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

          Ответить

    • Виталий Охрименко:

      Я себе сделал блок по количеству комментариев, так это скажу я Вам не самая лучшая идея. В большинстве случаев выводятся результаты или анонсы конкурсов. Это конечно не плохо, но и не хорошо

      Ответить

  10. NI4KA:

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

    Ответить

    • Сергей Саранчин:

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

      Ответить

      • Виталий Охрименко:

        АГа, я понял кажется, выходит от количества внутренних переходов повышается ранжирование статьи поисковиками?

        Ответить

        • Сергей Саранчин:

          Именно! :cry:

          Ответить

  11. Виталий Охрименко:

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

    Ответить

    • Сергей Саранчин:

      Применяйте, Виталий! Способ достаточно простой и эффективный :cry:

      Ответить

      • Виталий Охрименко:

        А главное красивый и систему не грузит

        Ответить

    • Виталий Охрименко:

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

      Ответить

  12. Barbus:

    Вот искал себе на тревел блог вывод стран по флагам в два ряда и нашёл у вас! :lol: Спасибо за информацию, помогло оформить сайдбар.

    Ответить

    • Сергей Саранчин:

      Отлично! Рад, что информация помогла :smile:

      Ответить

  13. Игорь:

    Супер,не хочу с помощью плагина устанавливать,буду пытаться с помощью кода.

    Ответить

  14. Артем:

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

    Ответить

  15. Сергей:

    У меня блок связанных записей на плагине Related Post.

    Кроме названия похожих статей ещё и миниатюры на основе картинок из тех статей выводятся.

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

    Ответить

    • Сергей Саранчин:

      Согласен с тобой, Сергей. Действительно стоящая модернизация, приносит свои плоды!

      Ответить


НАПИШИТЕ СВОЙ ПЕРВЫЙ КОММЕНТАРИЙ НА ЭТОМ БЛОГЕ И ПОЛУЧИТЕ ПОДАРКИ!

Нажимая кнопку "ОТПРАВИТЬ" комментарий, Вы принимаете пользовательское соглашение и подтверждаете, что ознакомлены и согласны с политикой конфиденциальности этого сайта.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: