The post thumbnail

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

add_theme_support( 'post-thumbnails' ); 

в мой файл functions.php и да, я установил изображение и включил the_post_thumbnail(); в петле.

Что я делаю неправильно? Я дошел до фактической функции и обнаружил, что у нее возникают проблемы с переменной $image в функции wp_get_attachment_image(), ссылаясь на функцию wp_get_attachment_image_src(). $image пуст, когда я предполагаю, что этого не должно быть. Он получает идентификатор post_thumbnail, но я знаю, что он знает, что есть набор изображений. Он просто не покажет чертову вещь.

Я пишу собственную тему с нуля, поэтому functions.php имеет только add_theme_support ( «пост-эскизы» ); в нем прямо сейчас, если вам интересно.

Edit:

Здесь мой цикл:

   
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class="home-entry clearfix" id="post-<?php the_ID(); ?>"> <a href="<?php the_permalink() ?>" rel="bookmark" > <?php if (has_post_thumbnail()) { the_post_thumbnail(); } else { echo '<img class="home-thumb trans-border" src="' . catch_first_image() . '" width="200px" height="150px" title="' . the_title() . '" />'; } ?> </a> <div class="home-post"> <div class="home-meta">Posted <?php the_time('M j, Y'); ?> - <?php the_category(' , ') ?> - <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div> <h2 class="post-title"> <a href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>" rel="bookmark" class="title"><?php the_title(); ?></a> <a class="read" href="<?php the_permalink(); ?>" title="Read More">Read More</a> </h2> <div class="home-excerpt"> <?php the_excerpt(); ?> </div> </div> </div> <?php endwhile; ?> <?php echo paginate_links() ?> <?php else : ?> <h2>Nothing Found</h2> <?php endif; ?>

Продолжение:

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

   
<?php if(has_post_thumbnail()) { echo '<span class="thumbnail"><a href="'; the_permalink(); echo'">';the_post_thumbnail(array(100,100)); echo '</a></span>'; } else { $image = evlget_first_image(); if ($image): echo '<span class="thumbnail"><a href="'; the_permalink(); echo'"><img src="'.$image.'" alt="';the_title();echo'" /></a></span>'; endif; } ?>

И что это такое? Я так смущен…

qaru.site

Добавление поддержки миниатюр в WordPress

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

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}

После этого при создании страницы в правой колонке появится новый блок «Миниатюра записи».

Блок WordPress - Миниатюра записи

Чтобы задать миниатюру для записи, достаточно нажать на ссылку и выбрать нужное изображение, после чего нажать «Задать миниатюру». При этом вы можете выбирать изображение как с общей библиотеки файлов, так и загрузить отдельно, используя стандартный загрузчик.


Выбор изображения для создания миниатюры

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

Блок с миниатюрой

Если же блок добавления миниатюр не появился  на странице добавления/редактирования записи, то зайдите в пункт «Настройки экрана» в правом верхнем углу рядом с кнопкой «Помощь» и отметьте чекбокс «Миниатюра записи».

Меню настроек экрана

Если и это не помогло – проверяйте корректность добавления функции активации миниатюр.

Функция вывода миниатюр в WordPress

Для вывода миниатюр в теме оформления WordPress используется специальная функция the_post_thumbnail(). Она используется внутри цикла WordPress и может принимать два параметра – размер миниатюры и массив атрибутов.

   
the_post_thumbnail( $size, $attr );
  • $size – название миниатюры (стандартные thumbnail, medium, large, full) или массив, содержащий ширину и высоту изображения, например, array(64, 64). Также в качестве значения можно передавать название миниатюр с произвольными размерами, созданными при помощи функции  add_image_size().
  • $attr – массив атрибутов. Например, чтобы задать класс для изображения достаточно прописать array(‘class’ => ‘thumb-class’). Поскольку другие параметры используются очень редко, то мы их рассматривать не будем. Более подробно обо всех значениях можно прочесть в кодексе WordPress.

Код вывода миниатюр разных размеров

the_post_thumbnail();                  // Передается параметр -> 'post-thumbnail'
the_post_thumbnail('thumbnail');       // Размер по умолчанию: 150px x 150px max
the_post_thumbnail('medium');          // Размер по умолчанию: 300px x 300px max
the_post_thumbnail('large');           // Размер по умолчанию: 640px x 640px max
the_post_thumbnail('full');            // оригинальный размер загруженного файла
the_post_thumbnail( array(100,100) );  // Произвольный размер (100px x 100px)

Пример готового кода для вывода миниатюр в шаблоне WordPress

В качестве примера, давайте рассмотрим код вывод миниатюры-ссылки на большое изображение. Это особенно удобно, если на сайте используются всплывающие изображения. Поскольку отдельно расписывать код довольно неудобно, то напротив каждой строчки будет комментарий с объяснениями.

<?php
if ( has_post_thumbnail()) { /* Проверка наличия прикрепленной к посту миниатюры */
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); /* Получаем ссылку на большое изображение */
echo '<a class="highslide" href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >'; /* Формируем ссылку на большое изображение с использованием классов CSS и атрибута Title */
the_post_thumbnail('thumbnail', array('class' => 'single-thumb')); /* Выводим миниатюру thumbnail с классом single-thumb */
echo '</a>'; /* Добавляем закрывающий тег для ссылки */
} else { /* Если у поста нет миниатюры */ ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" > <?php /* Формируем ссылку на текущую страницу с заголовком, равным заголовку текущей страницы */ ?>
<img src="<?php bloginfo('template_directory'); ?>/images/noimage.jpg" width="180" height="180" alt="No image" /> <?php /* Вручную задаем код вывода альтернативного изображения */ ?>
</a><?php } /* Добавляем закрывающий тег для ссылки */ ?>

Изменение размеров миниатюр

По умолчанию размеры стандартных миниатюр можно изменять непосредственно через административную панель сайта в разделе Настройки – Медиафайлы. К ним относятся миниатюры thumbnail, medium и large.

Настройка медиафайлов

Кроме того, вы можете изменить/установить размер миниатюры поста, выводимой функцией the_post_thumbnail(), при помощи функции set_post_thumbnail_size(), которую необходимо добавить в файл functions.php:

set_post_thumbnail_size($width, $height, $crop);
  • $width – ширина миниатюры в пикс (по умолчанию. 0).
  • $height – высота миниатюры в пикс. (по умолчанию 0).
  • $crop – кадрирование или уменьшение изображения. true — будет взята часть изображения с указанными размерами, false – изображение будет уменьшено пропорционально, а все лишнее обрезано (по умолчанию: false).

Добавление миниатюр с произвольными размерами

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

add_image_size( $name, $width, $height, $crop );
  • $name – название миниатюры.
  • $width – ширина миниатюры в пикселях.
  • $height – высота миниатюры в пикселях.
  • $crop – кадрирование (true) или уменьшение (false) изображения (по умолчанию false).

Пример:

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'my-thumb', 180, 210 ); //180 в ширину и 210 в высоту
}

В этом случае при загрузке изображения WordPress будет дополнительно создавать еще один файл изображения с максимальным размером 180 пикс в ширину и 210 пикс в высоту. Подгонка всегда ведется по большей стороне. Например, если исходное изображение имело размер 500×1000 пикс., то миниатюра будет размером 105×210 пикс.

Использование произвольных миниатюр

Использование миниатюр произвольных размеров ничем не отличается от использования стандартных. Разница лишь в названии миниатюры.

the_post_thumbnail('my-thumb');    

Вышеприведенный код выведет миниатюру my-thumb, созданную при помощи кода, приведенного чуть выше. Аналогичным образом выводятся миниатюры и с другими названиями.

На этом данная статья подошла к концу. Удачи вам и успехов в создании сайтов!

dmitriydenisov.com

The post thumbnailВо всех обзорах WP 2.9 говориться о том, что в новой версии появилась возможность использовать миниатюры (thumbnails). В некоторых темах для более ранних версий активно использовался данный функционал. Например, Arthemia Free. Не так давно я переделал дизайн своего блога для использования миниатюр. Хочу поделиться своим опытом — показать, как в Вашу тему добавить миниатюры с помощью уже имеющегося функционала. Кстати, он годится в том числе и для отображения в RSS.

Добавление поддержки миниатюр в тему

Чтобы в редактировании статьи (под выбором рубрики) появился блок “Миниатюра записи”, нужно в файле function.php Вашей активной темы добавить следующий текст.

if ( function_exists( ‘add_theme_support’ ) ) add_theme_support( ‘post-thumbnails’ );

Для отображения миниатюры в Вашей теме нужно вставить:

the_post_thumbnail();

the_post_thumbnail()

К моему большому удивлению, я не обнаружил в кодексе описания данной функции. У нее два аргумента:

  • размер изображения (или в пикселях, или словами);
  • атрибуты картинки.

// миниатюра, слева
the_post_thumbnail('thumbnail', array('class' => 'alignleft'));
// средний, справа
the_post_thumbnail('medium', array('class' => 'alignright'));
// большой, по центру
the_post_thumbnail('large', array('class' => 'aligncenter'));
// справа и свой класс 'my_own_class'
the_post_thumbnail(array(400,345), array('class' => 'alignright my_own_class'));

* This source code was highlighted with Source Code Highlighter.

Таким не хитрым образом, можно налету масштабировать изображения, причем пропорции сохраняются. Типовые размеры в пикселях задаются в “Настройки/Медиафайлы”. Еще стоит отметить, что ни один из параметров не является обязательным.

Лично я сделал в своем блоге на главной странице “Миниатюра” + цитату статьи, в теле самой статьи “Средний размер”.


// В index.php
  <div class="thumbnail">
    <a href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
  </div>
  <?php the_excerpt(); ?>
// В single.php
  <div class="thumbnail">
    <?php the_post_thumbnail('medium'); ?>
  </div>
  <?php the_content('<p>Read the rest of this entry »</p>'); ?>

* This source code was highlighted with Source Code Highlighter.

Вставка миниатюры в RSS

Очевидно, что картинка в RSS ленте увеличивает шансы, что статью прочтут полностью. В файл function.php добавляем следующий код:

function insertThumbnailRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$add_thumbnail = "
<div style="
float: left; padding: 0 10px 5px 0;">".get_the_post_thumbnail( $post->ID, 'thumbnail' )."</div>
"
;
$content = $add_thumbnail . $content;

}
return $content;
add_filter('the_excerpt_rss', 'insertThumbnailRSS');
add_filter('the_content_feed', 'insertThumbnailRSS');
}

* This source code was highlighted with Source Code Highlighter.

Ну вот теперь на написание одной статьи Вы будете тратить минут на 5 больше. А как же иначе? Картинку-то для миниатюры надо найти, подготовить, залить.
Первоисточник.
Приятного блогинга!

habr.com

В последнее время я хотел обновить свой блог с помощью избранных изображений / эскизов сообщений. Я использую настраиваемую тему, основанную на теме корней (я считаю, это не проблема с корневыми темами). Загружаемое изображение 1024×768 и обрезается в формат почтового ящика 1024×512.

Это код, который я использую в файле темы:

  • Я создал WordPress с помощью xampp, и все кажется прекрасным ИСКЛЮЧЕНИЕ не вся информация есть
  • Multisite на localhost с помощью xampp
  • Ошибка установки WordPress локально — Файл 'wp-config.php' уже существует
  • Проблемы с копированием сайта на локальную машину
  • Невозможно включить файл в дочернюю тему
  • WordPress на XAMPP по моей домашней сети
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(array(1024, 512), array('class' => 'img-responsive')); // add post thumbnail } ?> 

Теперь проблема в том, что на моем локальном ящике XAMPP он работает отлично. Но на веб-сервере изображения не обрезаются и не охватывают всю ширину основной области содержимого, как это делается при локальной установке. Проверяя код с Firebug, изображение имеет ширину 682 пикселей и высоту 512 пикселей (1024 x 512 пикселей в поле XAMPP). Так что происходит, что изображение масштабируется, а не обрезается.

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

Любые идеи получили высокую оценку.

Solutions Collecting From Web of «the_post_thumbnail масштабирование не жесткого обрезки»

www.wordpressask.com

На многих блогах рядом с описанием постов можно встретить небольшую (большую) миниатюру, которая должна передавать содержание поста. До некоторых пор создать такое было нелегко. С появлением же WordPress 2.9 осуществить такое стало намного легче.

В этом уроке я покажу Вам как добавить подобный функционал к Вашим шаблонам оформления WordPress.

The post thumbnail

Включение Post-Thumbnail функции в шаблонах

Включение происходит очень просто. Все что от Вас требуется — добавление одной строки в файле functions.php:

add_theme_support('post-thumbnails');

Вставка миниатюр к постам

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

The post thumbnail

Заметьте, что новый отдел может находится вне видимости и Вам придется опуститься немного ниже. После нажатия Set thumbnail появляется новое диалоговое окно

The post thumbnail

Нажмите Use as thumbnail и миниатюра будет добавлена к Вашему сообщению:

The post thumbnail

Отображение миниатюр

После того как мы написали новость, давайте добавим ее. Для того, чтобы миниатюра отображалась необходимо добавить строку в цикл WordPress. Откройте файл index.php и добавьте следующее:

<?php the_post_thumbnail(); ?>

Это позволит вывести изображение используя классы attachment-post-thumbnail и wp-post-image. C помощью этих классов мы сможем оформить внешний вид миниатюр с помощью CSS. В картинке ниже мы можем увидеть миниатюру с границей и отступом.

The post thumbnail

На картинке выше миниатюра довольно большая. Ее размер можно менять из админки Settings > Media.

The post thumbnail

Другой способ определение размеров миниатюры — это изменение файла functions.php. Для этого нам понадобится добавить еще одну строку:

add_theme_support('post-thumbnails');  set_post_thumbnail_size(588, 250, true);

Теперь нам необходимо сообщить WordPress, чтобы использовался именно этот размер. Требуется немного видоизменить наш цикл в index.php:

<?php the_post_thumbnail('thumbnail'); ?>

Теперь WordPress точно знает какую версию миниатюры использовать. Вот что у нас получилось:

The post thumbnail

Теперь добавим еще немного PHP в файл single.php, чтобы при открытии сообщения миниатюра была в самом верху:

The post thumbnail

Добавление больше размеров миниатюр

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

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

add_image_size('loopThumb', 588, 125, true);

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

— loopthumb — название нового размера миниатюр
— 588 — ширина в пикселях
— 125 — высота
— true — настройка, которая сообщает WordPress следует ли использовать средства движка для изменения размеров изображения

Нам необходимо будет изменить наш код в файле index.php:

<?php the_post_thumbnail('loopThumb'); ?>

The post thumbnail

Также следует заметить, что у нас появятся два новых стиля для управления внешним видом миниатюры нового размера: attachment-loopThumb и wp-post-image. Может быть полезно обращаться к классу wp-post-image в таблице стилей или же добавить собственный класс при обращении к миниатюре:

<?php the_post_thumbnail('loopThumb', array('class'=>'loopyThumbs')); ?>

Это выдаст тег img со следующими классами: loopyThumbs и wp-post-image.

Допустим мы хотим сделать квадратные миниатюры, тогда нужно создать новый размер:

add_image_size('squareThumb', 125, 125, true);

Также, возможно, Вы захотите, чтобы миниатюры была слева и был небольшой отступ справа:

.attachment-post-thumbnail {  	float: left;  	margin-right: 10px;  }

Теперь мы меняем код в index.php для отображения нашего квадрата:

<?php the_post_thumbnail('squareThumb'); ?>

Вот что у нас получится:

The post thumbnail

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

Но есть выход и в этой ситуации. Нам поможет плагин Regenerate Thumbnails. После установки плагина — зайдите Tools > Regen и сгенерируйте новые миниатюры (Regenerate all Thumbnails). После этого у нас будут ровные квадраты.

The post thumbnail

И помните — для отображения миниатюр у Вас должен стоять WordPress 2.9.

Надеюсь, Вам понравился урок. До следующих встреч!

ruseller.com

WordPress-Christmas-18WordPress 2.9 RC1 is released and the new post thumbnail function will not change until the final version hopefully.
I was chatting a little bit with Sergej Müller last night and we were trying some things out. We found out the following things:

Edit: Some little changes, see Matt’s comment.

You can provide 4 picture formats to the function (change the width and height values to your need):

  // the thumbnail   the_post_thumbnail(array(100,100));     // medium resolution  the_post_thumbnail(array(300,200));    // large resolution  the_post_thumbnail(array(600, 400));    // original  the_post_thumbnail();  

You can set how the images should align. It is also possible to assign an own class:

  // left align  the_post_thumbnail(array(100,100), array('class' => 'alignleft'));    // right align  the_post_thumbnail(array(100,100), array('class' => 'alignright'));    // center  the_post_thumbnail(array(100,100), array('class' => 'aligncenter'));    // align right and the class 'my_own_class'  the_post_thumbnail(array(100,100), array('class' => 'alignright my_own_class'));   

The 3rd possibility is the control of the images size with an array of height and width:
For this purpose we suppose that the settings for thumbnail is 150×150, for medium 300×200 and for large 600×400.

  // thumbnail scaled to 60x60 pixel  the_post_thumbnail(array(60,60), array('class' => 'alignleft'));     // original thumbnail  the_post_thumbnail(array(150,150), array('class' => 'alignleft'));    // medium resolution scaled to 200x133 pixel  the_post_thumbnail(array(200,200), array('class' => 'alignleft'));    // large resolution scaled to 400x266 Pixel  the_post_thumbnail(array(400,345), array('class' => 'alignleft'));  

We see that the image proportions are always maintained, even if one specifies crooked values.

For the Theme Designers is this not necessarily easier, because no one knows what the user will put in his settings o his library. One way to approach this problem, to query the options for the various sizes:

  // width of the thumbnails  get_option('thumbnail_size_w');    // height of the thumbnails  get_option('thumbnail_size_h');    // height of the medium resolution  get_option('medium_size_h');    // width of the large resolution  get_option('large_size_w');    // 1 = Crop thumbnail to exact dimensions, 0 = Crop off  get_option('thumbnail_crop')  

You can change these values in your theme.

  $w = get_option('thumbnail_size_w') / 2;  $h = get_option('thumbnail_size_h') /2;    the_post_thumbnail(array($w, $h), array('class' => 'alignleft'));  

Here another example: If the size of a thumbnail is bigger than 100×100 and crop is activated, then the thumbnail should be resized to 100×100, otherwise use the original thumbnail.

  if(get_option('thumbnail_size_w') > 100 && get_option('thumbnail_crop') == 1) {   the_post_thumbnail(array(100,100));  }else{   the_post_thumbnail('thumbnail');  }  

Have fun with post thumbnails! But be aware, that each post thumbnail requires 2 data base queries. On a page with 10 posts that would be 20 more queries.

wpengineer.com

Фильтр post_thumbnail_size

Фильтр позволяет задать размер миниатюр, используемых на блоге (везде на блоге).

$size
(строка|массив) — аналогичен параметру $size из самой функции.

В следующем примере мы устанавливаем размер для всех миниатюр на блоге medium:

А теперь пример со следующим условием: для всех миниатюр на блоге, которые выводятся через функцию get_the_post_thumbnail() с параметром $size равным thumbnail заменяем размер на medium, остальные размеры миниатюр не трогаем:

Фильтр post_thumbnail_html

О, а вот этот фильтр — уже что-то интересное, он позволяет нам модифицировать HTML миниатюры непосредственно перед тем, как функция его возвращает.

Количество параметров данного фильтра не может не радовать, это означает, что мы можем творить с возвращаемым HTML-кодом всё, что нам угодно.

$html
(строка) HTML-код, возвращаемый функцией по умолчанию,
$post_id
(целое число) ID поста, миниатюру которого нужно получить,
$post_thumbnail_id
(целое число) ID миниатюры,
$size
(строка|массив) размер миниатюры,
$attr
(массив) массив HTML-атрибутов, которые были заданы при вызове функции, если не заданы, то пустой массив;

А теперь несколько интересных примеров.

Пример 1. Автоматическое проставление ссылок на пост

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

Круто, да? А главное — всё очень просто.

Пример 2. Возвращаем только URL миниатюры

Ещё одна полезная вещь, которую можно сделать при помощи фильтра post_thumbnail_html. Допустим, нам не нужен весь HTML-код с тегом <img>, допустим, нам нужен только URL. В таком случае:

misha.blog

Всем привет! Сегодня на seo-mayak.com урок на тему: миниатюра записи в анонсе WordPress. Заодно мы разберем работу функции the_post_thumbnail() и поговорим о размерах миниатюр.

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

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

miniatiura zapisi

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

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

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

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

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

Размеры изображений WordPress

В настройках WordPress ( Настройки -> Медиафайлы ) по умолчанию заданны следующие размеры:

Размер миниатюры — 150х150 пикселей;
Средний размер — 300х300 пикселей;
Крупный размер — 640х640 пикселей;
Исходный размер не задается.

Каждому указанному размеру WordPress присваивает обозначение или название, как угодно:

150х150 — thumbnail;
300х300 — medium;
640х640 — large;
Исходный размер — full.

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

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

В данной ситуации есть два решения.

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

Решение №2. Можно обойтись без перезаливки изображений, тем самым забив на рекомендации PageSpeed и изменить размеры в самой функции.

Итак, самое время познакомить Вас с функцией вывода изображений, которая называется the_post_thumbnail().

Функция the_post_thumbnail()

Скажу сразу, функция the_post_thumbnail() — это тег шаблона, который работает только внутри цикла WordPress.

На заметку! Функция the_post_thumbnail() работает на основе get_the_post_thumbnail().

Единственное отличие функции the_post_thumbnail() от get_the_post_thumbnail() в том, что в ней нельзя указать ID записи, в качестве параметра, так как функция всегда берет миниатюру с текущего поста в цикле.

Функция the_post_thumbnail() может принимать один или два параметра. Первым параметром всегда идет размер изображения, например:

<?php the_post_thumbnail('medium'); ?>  

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

Также можно изменить размер миниатюры заданный в настройках, но при этом пропорции сторон уже созданного изображения не изменятся:

<?php the_post_thumbnail(array(50,50)); ?>

Где 50,50 — новые размеры для миниатюры.

Вторым параметром функция может принимать CSS класс, например:

<?php the_post_thumbnail('medium', array('class' => 'miniature')); ?>  

В файле style.css, для класса .miniature, можно прописать следующие стили:

.miniature{   background: #D2D2D2; /* задний фон */   border: 1px solid #888888; /* рамка */   border-radius: 8px; /* закругление углов */   float: left; /* Выравнивание по левому краю */   height: 181px; /* Высота изображения */   width: 250px; /* Ширина изображения */   margin-bottom: 5px; /* Внешний отступ снизу */   margin-right: 15px; /* Внешний отступ справа */   padding: 5px; /* Внутренние отступы */   }  

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

Но прописывать свой CSS класс в функции вовсе не обязательно, так как всем миниатюрам, созданными функцией get_the_post_thumbnail(), WordPress присваивает общий класс .wp-post-image, но кроме того, миниатюры получают отдельный класс, в зависимости от их размера:

.attachment-thumbnail — размер миниатюры;
.attachment-medium — средний размер;
.attachment-large — крупный размер;
.attachment-full — исходный размер.

Итак, с функцией и ее параметрами мы немного разобрались, осталось выяснить, как с помощью the_post_thumbnail() миниатюра записи выводится в анонс.

seo-mayak.com


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector