Привет! Сегодня я расскажу вам о супер плагинах для вывода записей WordPress. Данные плагины помогут вам вывести на любую страницу или запись вашего сайта – Стильные анонсы записей. В анонсе можно показать изображение записи, заголовок, отрывок, автора, дату, категорию. Вы сможете выводить анонсы не только записей, но и страниц.

Отличный плагин для вывода анонсов записей и страниц. Вывод по категориям или меткам. 4 стиля отображения на выбор. Возможность настроить внешний вид. Можно вывести название категорий на странице анонсов, чтобы при нажатии на категорию, отображались только записи из данной категории. Как настроить плагин –

Супер виджет для вывода анонсов записей. Вывод по категориям, меткам, авторам. Настройка внешнего вида, размер изображений. Можно добавить дату, автора, категорию. Широкие и гибкие настройки. Лучший виджет для вывода записей! Как настроить плагин –

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

5. Post Grid

Супер стильная, адаптивная, сетка записей! Выбор эффектов при наведении, выбор цвета фона записей. Вывод по категориям и т.д. Как настроить плагин –

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

Откройте файл functions.php , он находится внутри вашей темы. В конце перед знаком?> добавляем следующий код:

//автом. миниатюра if (function_exists("add_theme_support")) add_theme_support("post-thumbnails"); function catch_first_image() {global $post, $posts;$first_img = ""; ob_start(); ob_end_clean(); $output = preg_match_all("//i", $post->post_content, $matches); $first_img = $matches ; if(empty($first_img)){ $first_img = bloginfo("template_url"). "/images/default.jpg"; } return $first_img; }

Как это работает: если запись не будет содержать в себе миниатюру, то с помощью функции preg_match_all выполняется поиск на наличие картинки в статье. После чего, первое найденное изображение подставляется как миниатюра поста. Но если вдруг у статьи не окажется ни одного изображения тогда используется заглушка, находящаяся по адресу "/images/default.jpg" .

Теперь осталось добавить вывод выше заданной функции в определенном месте. Открываем файл, к примеру, index.php и остальные, которые могут содержать показ миниатюр (search.php , categories.php , archive.php и т.д.). Вставляем одну строчку кода:

" alt=""/>

Куда нужно вставить? возле стандартной функции вывода миниатюр.

"> " alt=""/>

Случайная миниатюра

If (function_exists("add_theme_support")) add_theme_support("post-thumbnails"); function catch_first_image() {global $post, $posts;$first_img = ""; ob_start(); ob_end_clean(); $output = preg_match_all("//i", $post->post_content, $matches); $first_img = $matches ; if(empty($first_img)){ $random = mt_rand(1, 10); //количество рандомных картинок от 1 до 10 echo get_bloginfo ("stylesheet_directory"); echo "/images/random/".$random.".jpg"; } return $first_img; }

Этот вариант аналогичен первому только, за исключением, случайной миниатюры. То есть вместо одной картинки, которая выводится как заглушка, генерируется в случайном порядке изображения из указанной папки. Просто создайте папку с названием «random » в уже имеющей папке вашей темы «images ». Затем подберите любые картинки в формате jpg, дайте имена числами (для удобства), и загрузите в ранее созданную папку «random».

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

И чтобы не затягивать, сразу начнем разбирать все вопросы, перечисленные выше.

Что такое миниатюра wordpress и где ее можно использовать?

Миниатюра wordpress — это уменьшенная копия изображения на сайте, использующем для администрирования движок wordpress, по другому ее можно назвать превью изображения или мини картинка.

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

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

Проверка поддержки миниатюры wordpress темой.

Итак, если мы не уверены в подключении миниатюр в теме, это можно легко проверить. Для этого, необходимо перейти в админку wordpress и зайти в редактор любой из записей, или же выбрать пункт «добавить новую» запись.

Если миниатюры wordpress подключены, то в правой колонке мы увидим окошко под названием «Миниатюра записи», со ссылкой «Задать миниатюру».

Если этого окошка мы не видим, следует проверить отсутствие возможности добавлять миниатюру в настройках экрана. Для этого, в правом верхнем углу, необходимо кликнуть на вкладку «Настройки экрана». И проверить отсутствие пункта «Миниатюра записи».

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

И обратите внимание, что из-за особенностей перевода тем, данная опция может называться по другому, например «Характерное изображение», и ссылка на создание миниатюры может быть такой: «Установить специальное изображение».

Подключение миниатюры wordpress и вывод ее в анонсе статьи.

Чтобы подключить миниатюры wordpress к нашей теме, необходимо в админке, или с помощью текстового редактора NotePad++ , открыть файл functions.php и в самом низу, перед?>, добавить следующий код:

Add_theme_support("post-thumbnails");

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

А как теперь использовать ее в анонсе статьи? Чтобы вывести миниатюру на главной странице, необходимо прописать в файле index.php или loop.php , в нужном месте код:

Если вы испытываете затруднения в поиске нужного места, то просто найдите вот такой код:

Или же, такой:

И перед ним вставьте код вывода миниатюры wordpress.

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

" title="">

Немного подробнее о том, из чего состоит данный код:

• 1. открывающий тег , и закрывающий — тег предназначенный для создания ссылок. Именно он сделает миниатюру ссылкой.
• 2. href="" — ссылка на статью.
• 3. title="" — тайтл (заголовок) ссылки, который будет виден, при наведении на нее курсора. Берется из заголовка статьи.
• 4. — функция вывода мини картинки.

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

Img.wp-post-image{ здесь стили миниатюры }

И между скобками, вместо «здесь стили миниатюры», добавить необходимые стили. Это, что касается обычного, стандартного вывода, без использования, каких-либо параметров.

Параметры миниатюры wordpress.

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

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

The_post_thumbnail(); // стандартный вывод, без параметров, о котором мы говорили выше. the_post_thumbnail("thumbnail"); // уменьшенная копия изображения (по умолчанию 150px x 150px). Есть возможность настройки из админки, но при этом размер не должен превышать 150px the_post_thumbnail("medium"); // средний размер (по умолчанию 300px x 300px). Возможность настройки из админки. the_post_thumbnail("large"); // крупный размер (по умолчанию 640px x 640px). Возможность настройки из админки. the_post_thumbnail("full"); // полный размер (оригинальный размер изображения). the_post_thumbnail(array(100,100)); // свои размеры. Возможно назначить любые размеры ширины и высоты.

Для, использования одного из вариантов, достаточно заменить стандартный код (без параметров) на любой из предложенных.

И соответственно, для каждого параметра, есть свои селекторы, для файла стилей css.

Img.wp-post-image img.attachment-thumbnail img.attachment-medium img.attachment-large img.attachment-full

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

Автоматическое назначение миниатюры wordpress и вывод ее в анонсе статьи.

А как быть, если на сайте довольно внушительный список контента и задавать миниатюру вручную, будет довольно проблематично. Для этого мы можем использовать другую функцию, которая автоматически будет создавать мини картинку из первого изображения статьи. Для этого, в файле functions.php , после?> добавим функцию:

/i", $post->post_content, $matches); $first_img = $matches ; return $first_img; } ?>

Теперь, чтобы вывести миниатюру в анонсе статьи, то есть на главной, открываем файл index.php или loop.php и добавляем код с функцией вывода миниатюры (функцию из предыдущего примера можно удалить), в то же место, что и при стандартном выводе:

" src="" alt="" width="150" />

Теперь, немного разберемся, из чего состоит данный код.

• 1. Тег — собственно именно этот тег и будет выводить картинку, так как сама функция только выдергивает ссылку на первое изображение из поста.
• 2. title="" — тайтл (заголовок) изображения, который можно увидеть при наведении курсора на миниатюру записи wordpress.
• 3. src="" — ссылка на изображение, которое будет выводиться. Как можно заметить, именно здесь находится функция, которая и отвечает за ссылку на мини картинку.
• 4. alt="" — альтернативный текст изображения. В случаях, когда в браузере отключена загрузка изображений, будет появляться alt, как бы описывая, что здесь должно быть за изображение.
• 5. width="150" — задается ширина миниатюры. В данном случае изображение будет уменьшаться прямо пропорционально, ориентируясь на указанную ширину.

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

А чтобы данная ошибка исчезла, достаточно заменить его, на:

После этого, данная проблема должна исчезнуть.

Последнее, что мы можем сделать сегодня, это сделать миниатюру wordpress, ссылкой. Для этого, просто обернем код тегом с ссылкой на статью:

" >" src="" alt="" width="150" />

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

Для оформления мини картинки, выводимой данным способом, можно просто добавить класс для тега . Например, чтобы код выглядел так:

" >" src="" alt="" width="150" />

Img.mini{ здесь стили миниатюры }

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

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

У меня на этом все. Удачи!

//Вывод первой картинки с поста function first_post_image() { global $post, $posts; $first_img = ""; ob_start(); ob_end_clean(); $output = preg_match_all("//i", $post->post_content, $matches); $first_img = $matches ; if(empty($first_img)){ $first_img = "/wp-content/themes/НАЗВАНИЕТЕМЫ/images/noimages.jpg"; // укажите путь к изображению, которое будет выводится по умолчанию. } return $first_img; }

Скрипт вытягивает первое изображение из записи, но если его нет, то он ставит картинку по умолчанию. Чтобы вывести изображение по умолчанию вы должны создать его, назвав noimages.jpg и поместить в папку images . В 11 строке укажите путь к изображению.

1. Подключаем функцию вывода первой картинки в теме

Миниатюра подключается во всех файлах где в цикле выводятся записи - это index.php, content.php, archive.php, category.php, single.php и тд,
Для подключения нужно вставить следующий код после определения цикла, который выглядит примерно так:

Сам код вывода нашей функции:

" title=""> " alt="" />

А вот в записи нужно вывести некликабельную картинку. Для этого нужно в single.php добавить код без ссылки

" alt="" />

Теперь в Вашей теме не будет записей без миниатюр.

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

Еще небольшое дополнение к статье.

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

" alt="" />

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

На этом все, спасибо за внимание 🙂

Продолжая тему wordpress миниатюр (thumbnail), хочу рассмотреть очень полезный плагин, который здорово может облегчить работу в некоторых ситуациях. Представьте, что вы вели блог несколько лет, скажем, начали где-то в 2009, а теперь хотите модернизировать внешний вид (шаблон), добавив современных опций на сайте, например, те же . Учитывая, что поддержка thumbnail в wordpress была введена значительно позже, картинки у вас, судя по всему, находятся внутри статьи прямо в тексте.

Получается, что у вас есть 2 варианта решения задачи — использовать либо вручную для каждой статьи создавать миниатюры. В первом случае появляется ощущение «вынужденного» и не совсем оптимального решения, второй и вовсе может заставить вас потратить 4-5 часов на возню с картинками. К счастью, недавно нашел еще и третий вариант — плагин Auto Post Thumbnail .

Данный модуль позволяет генерировать миниатюры (thumbnails) из первой картинки в тексте для любых постов блога или записей пользовательских типов. Если первое изображение не найдено, плагин автоматически продолжит поиск пока миниатюра не будет создана. В том случае, если для записи thumbnails уже установлено, просто ничего не произойдет. Короче говоря, принцип работы предельно прост и логичен. Кстати, если же по каким-то причинам вы хотите запретить формирование миниатюры для того или иного поста, тогда создаете произвольное поле (custom field) skip_post_thumb в соответствующей записи.

Установка плагина элементарна и выполняется как всенла: классический метод путем скачивания файлов модуля с официального сайта , его распаковки и загрузки на ФТП в директорию /wp-content/plugins/ с последующей активацией в разделе «Плагины» из админки; либо в пункте меню «Добавить плагин» ищите модуль по названию «Auto Post Thumbnail», где скачиваете и активируете его. Вот и все!

После установки у вас появится новый пункт меню — Auto Post Thumbnail , где имеется всего одна кнопка для начала работы — Generate Thumbnails. Там же указано примечание, о котором я говорил выше — перед запуском просят установить произвольные поля skip_post_thumb для постов, где не хотите ничего генерировать. Если таковых нет, просто кликаем по кнопке.

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

Можете пройтись по постам дабы убедиться в правильности работы данного плагина. Также советую проверить внешний вид блога и насколько корректно отображаются посты. Есть вероятность что для выбранного wordpress шаблона у вас по умолчанию в коде было добавлено отображение миниатюр. В итоге получится что-то вроде этого (когда выводится и картинка из поста, и thumbnail):

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

Во-первых, открываете файлы, которые отвечают за отображение списка постов блога — index.php, home.php либо archive.php, catagory.php, tag.php, где находим функцию отображения текста the_content (я упоминал о ней в посте про ) и меняем ее на:

Этот код отобразит краткий анонс поста блога без выделений и картинок исключительно в текстовом виде. Дальше в файле шаблона для отображения полного текста заметки (single.php) мы наоборот находим функцию миниатюр the_post_thumbnail и удаляем уже ее. Как правило, она выводится со следующим кодом:

"alignleft post_thumbnail" ) ) ; } ?>

"alignleft post_thumbnail")); } ?>

В итоге должно получится, что на всех страницах со списками новостей будут отображать миниатюры + краткий текст, а на полных записях — все то оформление и изображения, которые вы задаете в редакторе. Решение, я считаю, достаточно гибкое, а плагин Auto Post Thumbnail работает на отлично! Кстати, если вы покупаете сайты и приходится иногда переделывать откровенные ГС в более-менее красивые проекты, данный модуль точно пригодится — могу сказать по личному опыту. Хотя, в принципе, есть еще один вариант решения задачи — это но там больше кода и нужно в нем ориентироваться получше.

Поделись статьей: