Вывод новых статей в сайдбар WordPress с миниатюрами без плагина

Без плагина WordSmall

Сегодня рассмотрим одну простую функцию, но довольно полезную, которая избавит от необходимости устанавливать лишний плагин. Подобным путем мы выводили последние комментарии также в обход различных плагинов. И формально, таким методом установки сократили несколько нежелательных запросов к серверу. При тех условиях, что плагины подключают свои стили, а многие из них и JavaScript. Если это кажется незначительным весом, то следует подумать сколько плагинов у вас установлено в общем. К примеру, около 30 шт. и каждый из них использует свои файлы (style, JavaScript.) для оформления, которые внедряет в систему.

Можете посмотреть по сервису PageSpeed Insights где рекомендуется, что именно сократить, оптимизировать и т.д. Немного отвлекся, теперь по делу. Для вывода новых статей в сайдбаре нужно сделать следующее:

  1. Подключить поддержку PHP в сайдбаре. (если не хотите редактировать файлы)
  2. В текстовый виджет добавить нужную функцию.
  3. Оформить, прописав необходимые стили в файл style.css

После выполнения первого пункта перейдите во вкладку «Внешний вид-Виджеты». Добавьте текстовый виджет, а в поле ввода вставьте код:

      <ul class="newpost">
        <?php $the_query = new WP_Query('showposts=5'); ?>
                <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
        <li>
            <a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post->ID, 'thumbnail'); ?></a>
        <a class="title" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?>        </a><br/>
        </li>
        <?php endwhile; ?>
        <?php wp_reset_query(); ?>
        </ul>

Сохраняем изменения и открываем файл style.css и в конце прописываем стили:

ul.newpost img {
    border: 5px solid #EAF3FB;
    float: left;
    height: 50px;/*размер миниатюры*/
    margin-bottom: 11px !important;
    padding: 5px;
    width: 50px;/*размер миниатюры*/
}

ul.newpost li {
    clear: both;
    margin: 0;
    overflow: hidden;
    border-bottom: 1px solid #dae3eb!important;
}

ul.newpost li a:hover {
    text-decoration: underline;
}
ul.newpost .title{
        width:135px;
        float:left;
        padding:5px 5px 5px 0px;
}

Результат.

Вывод новых статей в сайдбар WordPress с миниатюрами без плагина

В принципе все, но только можете стили отредактировать по-своему чтобы новые записи соответствовали вкусам.

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 34
  • Денис

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

    • WordSmall

      Добрый вечер. В конце перед тегом <br /> добавьте следующий код:

      <?php echo get_the_date('Y-m-d'); ?>

      • Денис

        Спасибо. То что надо.

      • WordSmall

        Не за что. Приходите еще)

      • Алексей

        WordSmall, Как изменить цвет даты ?

      • WordSmall

        Оберните функцию даты в див или спан с определенным классом. Затем задайте любые стили, в том числе, цвет.

  • Галина

    Спасибо!

  • Дарья

    У меня не получается убрать точки от списка — они черного цвета и отображаются справа от списка, портят всю картину(

    • WordSmall

      Добавьте в стили следующее:

      ul.newpost li { list-style:none; }

  • Алексей

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

    • WordSmall

      Прежде чем заявлять «неправильный код», потрудились бы прочитать комментарии выше! Если размер картинок не меняется, то добавьте !important.

      • Алексей

        WordSmall, Не хотел обидеть, Но комментарий я прочел и добавил код ul.newpost li {

        list-style:none;} этот код !important. добавить как я понял напротив где изменяется размер миниатюр.Хотел показать скриншот что получилось но не знаю как и куда его прикрепить.

  • WordSmall

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

  • Алексей

    Не понял ссылку на сайт

    • WordSmall

      Алексей, скриншот вы хотели показать.

  • Алексей

    а ну вот посмотрите

    • WordSmall

      Не, скрина там нет. Да, в любом случае, !important должен исправить эту проблему.

      • Алексей

        WordSmall, Да как нет ссылка в браузер вставьте и по центру там про кошек.

      • WordSmall

        Да, теперь увидел. Так попробуйте импортант. Или давайте ссылку на сайт, гляну что там.

  • Алексей

    Не получается, нечего не редактируется, все равно картинка не меняется заголовки у картинок вверху, точки так и стоят. Ссылку кинул она на модерации.

  • WordSmall

    Еще раз киньте ссылку.

    • Алексей

      WordSmall, Я же дал вам ссылку на сайт на она модерации

  • WordSmall

    Просто ваша тема добавляет чуток своих стилей. Импортант работает! Насчет обтикания, то измените эти стили:

    ul.newpost .title { clear: none; float: left; padding: 5px 5px 5px 0; width: 135px; }

    А миниатюру сделайте хотябы 40 px

    • Алексей

      WordSmall, Да нет вообще не чего не меняется а миниатюру я разную делал она тоже не меняется не больше не меньше.

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