Доброго времени суток, друзья. Сегодня на SdelaemBlog.ru, мы поговорим о миниатюрах 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, в нужном месте код:
<?php the_post_thumbnail(); ?>
Если вы испытываете затруднения в поиске нужного места, то просто найдите вот такой код:
<?php the_content(); ?>
Или же, такой:
<?php the_excerpt(); ?>
И перед ним вставьте код вывода миниатюры wordpress.
После этих действий и назначения мини картинки в редакторе записей wordpress, на главной странице появятся уменьшенные копии изображений. Плюс ко всему, мы можем сделать это изображение ссылкой на продолжение статьи. Для этого, заменим стандартный код, на вот этот:
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>
Немного подробнее о том, из чего состоит данный код:
- 1. открывающий тег <a>, и закрывающий </a> — тег предназначенный для создания ссылок. Именно он сделает миниатюру ссылкой.
- 2. href="<?php the_permalink(); ?>" — ссылка на статью.
- 3. title="<?php the_title(); ?>" — тайтл (заголовок) ссылки, который будет виден, при наведении на нее курсора. Берется из заголовка статьи.
- 4. <?php the_post_thumbnail(); ?> — функция вывода мини картинки.
Теперь, должно быть немного понятней, как это работает. Нам останется только оформить внешний вид картинки, в зависимости от наших потребностей. Для этого, необходимо в 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, после ?> добавим функцию:
<?php
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
return $first_img;
}
?>
Теперь, чтобы вывести миниатюру в анонсе статьи, то есть на главной, открываем файл index.php или loop.php и добавляем код с функцией вывода миниатюры (функцию из предыдущего примера можно удалить), в то же место, что и при стандартном выводе:
<img title="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="150" />
Теперь, немного разберемся, из чего состоит данный код.
- 1. Тег <img> — собственно именно этот тег и будет выводить картинку, так как сама функция только выдергивает ссылку на первое изображение из поста.
- 2. title="<?php the_title(); ?>" — тайтл (заголовок) изображения, который можно увидеть при наведении курсора на миниатюру записи wordpress.
- 3. src="<?php echo catch_that_image(); ?>" — ссылка на изображение, которое будет выводиться. Как можно заметить, именно здесь находится функция, которая и отвечает за ссылку на мини картинку.
- 4. alt="<?php the_title(); ?>" — альтернативный текст изображения. В случаях, когда в браузере отключена загрузка изображений, будет появляться alt, как бы описывая, что здесь должно быть за изображение.
- 5. width="150" — задается ширина миниатюры. В данном случае изображение будет уменьшаться прямо пропорционально, ориентируясь на указанную ширину.
Вполне возможно, что при вставке данного кода, на главной странице появится по два изображения, к каждому анонсу. Результатом этой ошибки может быть использование стандартного вывода анонса:
<?php the_content(); ?>
А чтобы данная ошибка исчезла, достаточно заменить его, на:
<?php the_excerpt(); ?>
После этого, данная проблема должна исчезнуть.
Последнее, что мы можем сделать сегодня, это сделать миниатюру wordpress, ссылкой. Для этого, просто обернем код тегом <a> с ссылкой на статью:
<a href="<?php the_permalink(); ?>" ><img title="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="150" /></a>
По использованию миниатюры wordpress в анонсе статьи, в принципе все. Но ведь нам еще может понадобится оформить внешний вид картинки, с помощью файла style.css. Возможно, у некоторых возникнет проблема, связанная с тем, какие селекторы использовать, для оформления.
Для оформления мини картинки, выводимой данным способом, можно просто добавить класс для тега <img>. Например, чтобы код выглядел так:
<a href="<?php the_permalink(); ?>" ><img class="mini" title="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="150" /></a>
Здесь мы добавили класс mini, который выглядит так: class="mini". Вы можете добавить любой другой. После данной манипуляции, стили для миниатюры можно будет прописать вот так:
img.mini{
здесь стили миниатюры
}
Вот и все. Теперь вы сможете подключить поддержку миниатюр к вашему шаблону и использовать их, для вывода анонсов статей. А также, оформить миниатюры wordpress по своему желанию.
Самое главное! Перед любым редактированием кода, обязательно делайте резервную копию сайта, чтобы у вас всегда была возможность его восстановить.
У меня на этом все. Удачи!
Привет, большое спасибо за статью, написал очень доходчиво, что даже у меня все получилось, единственное что интересует это, что нужно прописать в слиле, чтобы картинка отображалась с лева возле текста, а не под текстом. Заранее спасибо.
В loop прописал ()
в functions ничего прописывать не стал, поскольку там уже была прописана строчка.
в стаил прописал
img.mini{
float:left;
margin: 0 5px 5px 0;
}
но картинка отображается либо над текстом либо под текстом зависит от того где разместить этот код (. скорей всего где-то в стиле указаны условия для вывода анонса.
@ Wasilij:
Достаточно прописать одинаковые стили, если я Вас правильно понял.
стиль меняется.. тогда и там и там проблема..
@ Wasilij:
Почему же?
Спасибо. Это не выход из ситуации.
@ Wasilij:
Вот о CSS я и говорил :!:
Вопрос очень интересный. дело в том что существует довольно много решений по этому поводу и не одно из них не впишется в комментарии — только отдельная статья.
Но если коротко: Можно в index.php убрать строку:
А вместо нее вставить полное содержимое файла header.php !!!
И там же в index.php определить уровень заголовка, в Вашем случае H1.
И сохранить файл.
Затем, в файле header.php определить уровень заголовка для всех остальных страниц.
И сохранить.
Вот, как-то так. Желаю удачи.
С картинками решил проблему, просто добавил стиль в CSS. Просба подсказать как сделать чтобы логотип сайта был в теге H1 только на главной, а на остальных просто ссылкой. Спасибо.
@ Wasilij:
Я так понял Вы уже разобрались? все изображения на указанном сайте одинаковые.
Михаил вы мне подскажете??
Михайл, мне надо чтобы чтобы выводились не миниатюры, а первые изображения из статей с заданными размерами. Например на главной, в рубриках и т.д. На сайте, к примеру выводится в рубриках 10 анонсов с первой картинкой в тексте. Надо им задать размер и распсположить всех одинаково справа или слева. Михайл я еще совсем как говорится чайник, вот и прошу поподробнее. Ссылка на сайт в строчке комментариев «Сайт». Заранее благодарен!
@ Wasilij:
Эмммм…
Чтобы выводились миниатюры из статей одинакового размера на главной нужно прописать свойства CSS для селектора, который используют миниатюры на главной. И всего-то. Не знаю, что было не понятно в прошлом моем ответе? Ничего нового Вы от меня не услышите.
Добрый день. Где не зайдешь все про эти миниатюры. А кто знает
, как можно сделать, чтобы на сайте в анонсах статей выводились первые изображения из статей одинакового размера? Спасибо.
@ Wasilij:
Здравствуйте.
Для этого достаточно указать ширину и высоту миниатюры на главной. А вообще, проще было бы сказать посмотрев на сам сайт.
Cпасибо очень полезная статья, ну очень! у меня просьба может вы знаете, как сделать, чтобы в анонсах статей, первые картинки имели одинаковый размер и располагались с права или слева. Например на главной показывается 10 анонсов статей с первой картинкой в статье. Как сделать эти первые картинки одинаковыми? Никто ничего подсказать не может, наверное сами не знают. Надеюсь на вас. Спасибо!
@ Артём:
Здравствуйте.
Если вставлена в библиотеку, то должна. Точнее сказать не могу, так как не проверял.
Здравствуйте, скажите будет ли миниатюра создаваться если картинка в посте не загружена в библиотеку сайта, а просто вставлена по внешней url ?
@ Владимир:
Здравствуйте. А есть возможность увидеть это в живую?
Как сделать, чтобы не выводилась подпись к миниатюре, а только к полному изображению?
У меня получается так, что если указывать подпись к полному изображению, то в анонсе справа от миниатюры появляется подпись от полного изображения, хотя в миниатюре поле «Подпись» пустое.
Использую такую функцию:
@ Андрей:
Здравствуйте. Да, есть.
Думаю, Вам вполне подойдет плагин manual related posts — он предназначен как раз для таких целей. Другие решения, на данный момент, мне не известны.
Добрый день ! Михаил, помогите с анонсами в статьях. На главной я сделал анонс с миниатюрами на новые статьи (последние 5 добавленных),тут вопросов нет. Мне нужно сделать так, чтобы в самой статье внизу были 3-5 анонсов с миниатюрами на другие статьи, но не динамические (похожие статьи), как делает, например, плагин Related posts, а статические, те которые я сам укажу для каждой статьи. Подскажите, если есть такое решение, что и куда вставить. Буду очень благодарен!