INT 21h

Hi, I am Vladimir Smagin, SysAdmin and Kaptain. Telegram Email / GIT / RSS / GPG

WordPress: featured image (picture of post)

№ 6463 В разделе "Programming" от June 1st, 2014,
В подшивках: ,

Если вы обладатель блога в котором вы хотите сделать иллюстрации более яркими, то можно использовать относительно новую функцию WordPress под названием Featured image. Вместо обычного текста вы можете представить запись в списке записей с помощью картинки, а по нажатию на картинку уже появится само содержимое записи. Кроме того, с помощью дополнительных полей (их ввод есть под редактором новых записей) вы можете создавать описание совершенно отличное от текста записи и с помощью CSS накладывать его поверх картинки. Например, у меня сделано так:

thumbler

Чтобы чудо произошло необходимо внести изменения в шаблоны относительно размеров этих самых картинок, т.к. стандартные вам 100% не подойдут. Создайте в директории шаблонов файл functions.php:

<?php
        add_theme_support( 'automatic-feed-links' );
        add_theme_support( 'post-thumbnails' );
        set_post_thumbnail_size( 640, 300, true );

        // Add support for featured content.
        add_theme_support( 'featured-content', array(
                'featured_content_filter' => 'get_featured_posts',
                'max_posts' => 3,
        ) );

?>

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

query_posts($query_string . '&cat=-123');
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if(has_post_thumbnail()) { ?> //проверили пост на featured image
<p id="post-thumb"> //выводим как картинку
    <div id='postpic'>
        <div id='postpictitle'><h1><a href="/?p=<?=$post->ID?>" rel="bookmark" title="Прямая ссылка на запись"><?php the_title(); ?></a></h1>
        .......
    </div>
</p>
<? } else { ?> //выводим как текст
      <h1 id="post" class="head"> <a href="/?p=<?=$post->ID?>" rel="bookmark" title="Прямая ссылка на запись">
        <?php the_title(); ?>
        </a> </h1>
      .......

Теперь когда программирование завершено можно закачать картинку через кнопку Add media, а потом выбрать ее с помощью Set featured image в колонке справа.

featured image

Ничего сложного, правда? Однако, никто из вебразработчиков вордпресса или сторонних так и не описал нормально эту тему (ну или просто мне гугл не хочет показывать). Как добавить Custom fields с отличным от основной записи содержимым можно прочитать здесь. Это часто нужно для краткого описания статьи (ну или товара, если у вас блог-магазин). Не забудьте с помощью CSS разместить текст поверх картинки и дело в шляпе 🙂 И есть один важный момент. Картинки нового размера будут создаваться только для новых загрузок. Если вы хотите установить картинку для старых записей, то используйте плагины для регенерации файлов предпросмотра (thumbs).

Нет комментариев »

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Яндекс.Метрика

Fortune cookie: Hear about... the secretary that got fired because she had one too mini?