Сегодня рассмотрим одну простую функцию, но довольно полезную, которая избавит от необходимости устанавливать лишний плагин. Подобным путем мы выводили последние комментарии также в обход различных плагинов. И формально, таким методом установки сократили несколько нежелательных запросов к серверу. При тех условиях, что плагины подключают свои стили, а многие из них и JavaScript. Если это кажется незначительным весом, то следует подумать сколько плагинов у вас установлено в общем. К примеру, около 30 шт. и каждый из них использует свои файлы (style, JavaScript.) для оформления, которые внедряет в систему.
Можете посмотреть по сервису PageSpeed Insights где рекомендуется, что именно сократить, оптимизировать и т.д. Немного отвлекся, теперь по делу. Для вывода новых статей в сайдбаре нужно сделать следующее:
- Подключить поддержку PHP в сайдбаре. (если не хотите редактировать файлы)
- В текстовый виджет добавить нужную функцию.
- Оформить, прописав необходимые стили в файл 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; }
Результат.
В принципе все, но только можете стили отредактировать по-своему чтобы новые записи соответствовали вкусам.
Здравствуйте. Спасибо вам, отлично всё работает без всяких плагинов. Вопрос возник, как сделать чтоб выводились даты записей?
Добрый вечер. В конце перед тегом
<br />
добавьте следующий код:<?php echo get_the_date('Y-m-d'); ?>
Спасибо. То что надо.
Не за что. Приходите еще)
WordSmall, Как изменить цвет даты ?
Оберните функцию даты в див или спан с определенным классом. Затем задайте любые стили, в том числе, цвет.
Спасибо!
У меня не получается убрать точки от списка — они черного цвета и отображаются справа от списка, портят всю картину(
Добавьте в стили следующее:
ul.newpost li { list-style:none; }
У меня не получается картинки уменьшить они не уменьшаются и точки от списка убрать тоже не фига. Что то не так. Не правильный код.
Прежде чем заявлять «неправильный код», потрудились бы прочитать комментарии выше! Если размер картинок не меняется, то добавьте !important.
WordSmall, Не хотел обидеть, Но комментарий я прочел и добавил код ul.newpost li {
list-style:none;} этот код !important. добавить как я понял напротив где изменяется размер миниатюр.Хотел показать скриншот что получилось но не знаю как и куда его прикрепить.
Да, вы все правильно поняли. По большой части, оформление идет от самой темы, вам нужно лишь чуть подредактировать. Скриншот, просто вставьте ссылку.
Не понял ссылку на сайт
Алексей, скриншот вы хотели показать.
а ну вот посмотрите
Не, скрина там нет. Да, в любом случае, !important должен исправить эту проблему.
WordSmall, Да как нет ссылка в браузер вставьте и по центру там про кошек.
Да, теперь увидел. Так попробуйте импортант. Или давайте ссылку на сайт, гляну что там.
Не получается, нечего не редактируется, все равно картинка не меняется заголовки у картинок вверху, точки так и стоят. Ссылку кинул она на модерации.
Ссылку дал
Еще раз киньте ссылку.
WordSmall, Я же дал вам ссылку на сайт на она модерации
Просто ваша тема добавляет чуток своих стилей. Импортант работает! Насчет обтикания, то измените эти стили:
ul.newpost .title { clear: none; float: left; padding: 5px 5px 5px 0; width: 135px; }
А миниатюру сделайте хотябы 40 px
WordSmall, Да нет вообще не чего не меняется а миниатюру я разную делал она тоже не меняется не больше не меньше.