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

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

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

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

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

5. Post Grid

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

//Вывод первой картинки с поста 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!

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

Предположим, у вас есть какая-то категория, и на странице этой категории перед некоторыми записями (а может быть и перед каждой) есть какая-то картинка, которая по сути и является превьюшкой поста, т.е. миниатюрой. Если мы перейдем на страницу одной из записей, то можем найти эту картинку в её содержимом, а можем и не найти.

В общем ладно, в двух словах, миниатюра — это изображение-превью к постам, которое:

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

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

Шаг 1. Включение поддержки миниатюр для вашей темы WordPress

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

Всё, что нам потребуется для активации миниатюр — это вставить следующую строчку кода в ваш файл functions.php (файлов с таким названием может быть много — нам нужен именно тот, который находится непосредственно в папке с вашей текущей темой).

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

или только для записей и только для страниц:

Можно ли назначить миниатюру таксономии WordPress?

Стандартными средствами — нет. Вы можете использовать какой-нибудь из плагинов, добавляющих для (рубрик и меток в том числе), либо прописать URL изображения в описании вашего конкретного элемента таксономии.

Шаг 2. Как установить миниатюру для поста?

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

Способ 1. Метабокс «Миниатюра записи»

Он вот такой:

Этот пример выводит заголовки (функция ) и миниатюры постов со ссылками (функция ) на сам пост.

Тот же самый пример для функции :

Получение URL миниатюры при помощи функции wp_get_attachment_image_src() и get_post_thumbnail_id()

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля - .

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