Автоматическое управление картинками в постах на WordPress

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

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

Скачать исходники

Использование настраиваемого изображения или фотоснимка в ваших постах и страницах для сайта на WordPress - уже хорошо известное дополнение. Вы можете пользоваться данной "фишкой" для создания слайдеров из фотографий к постам или похожих функций, которые существенно дополнят общее оформление сайта на основе WordPress…

Но применение таких дополнительных инструментов может вызвать и определенные проблемы в работе сайта (по крайней мере, я столкнулся именно с такими трудностями), особенно если речь идет о добавлении новых материалов в блог при помощи мобильного телефона, использование версий WordPress для Android или BlackBerry.

Картинки в постах на WordPress

Прежде чем мы приступим, важно сказать, что я не буду использовать официальную "post thumbnails" функциональность в данном конкретном руководстве. Само собой, что стандартно надо задавать для поста поле "featured image" (Миниатюра)… но есть несколько технических причин, по которым вам, возможно, также не следует этого делать. Возможные причины перечислены ниже:

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

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

Шаг №1: "Прикрепляем" настраиваемое поле

Первым делом мы будем пользоваться настраиваемым полем для того, чтобы задать картинку предпросмотра. Вы можете почитать дополнительно о создании такого поля при помощи  "настраиваемой meta-формы"… но давайте исходить из того, что вы уже создали и настроили это поле. Для данного пользовательского руководства используется настраиваемое поле  "wpt_image" для картинки. Помимо применения the_post_thumbnail(); это - самый простой способ для того, чтобы задать настраиваемую картинку.

$related_thumbnail =  get_post_meta($post->ID, 'wpt_image', $single = true);

Шаг №2: "Подхватываем" прикрепленные файлы изображения в посте

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

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

$attachments = get_children( array(
'post_parent'    => get_the_ID(),
'post_type'      => 'attachment',
'numberposts'    => 1,
'post_status'    => 'inherit',
'post_mime_type' => 'image',
'order'          => 'ASC',
'orderby'        => 'menu_order ASC'
) );

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

if(!empty($attachments)):       //check if there an attachment or not
foreach ( $attachments as $attachment_id => $attachment ) {
if(wp_get_attachment_image($attachment_id) != ""):
$related_thumbnail = wp_get_attachment_url( $attachment_id );
endif;
}

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

Шаг №3: Определяем любое изображение, найденное в публикации

А что, если не найдено настраиваемого поля или прикрепленного к посту файла? Мы попытаемся совместить любую картинку из поста, которая была добавлена без применения функции загрузки. Это полезно, когда мы используем изображение из медиа-библиотеки, потому что id прикрепленного файла будет назначено к другому посту.

$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
</img.+src=['"]([^'"]+)['"].*>

Шаг №4: Задаем картинку по умолчанию

А что если все вышеупомянутые условия не выполняются?

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

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

$related_thumbnail = "images/default_thumbnail.jpg";	//define default thumbnail, you can use full url here.

Загрузите свою картинку, помеченную как "default_thumbnail", в папку с темой или же пропишите полный адрес к картинке вместо этого.

Использование: Как применять данную функцию

Для использования созданной функции, поместите код всей функции в файл functions.php, и затем вы сможете применять ее так, как показано далее:

<img src="<?php get_attachment_picture();?>">

Либо, если вы хотите применять эту функцию вместе с изменением размеров картинки (вроде плагинов TimThumb или WordThumb), загружайте файлы в папки timthumb / wordthumb в директории вашей темы и используйте вместо приведенного выше следующий код:

<img src="<?php bloginfo('template_directory'); ?>/thumb.php?src=<?php get_attachment_picture();?>&h=90&w=255&zc=1">

Соединяем все вместе: Полный исходный код

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

<!--?php

/* Function to process your thumbnail & image
Copy and paste the code below to your functions.php */

function get_attachment_picture(){
global $post, $posts;
$related_thumbnail =  get_post_meta($post--->ID, 'image', $single = true);                          //read post meta for image url

if($related_thumbnail == ""):
$attachments = get_children( array(
'post_parent'    => get_the_ID(),
'post_type'      => 'attachment',
'numberposts'    => 1,
'post_status'    => 'inherit',
'post_mime_type' => 'image',
'order'          => 'ASC',
'orderby'        => 'menu_order ASC'
) );
if(!empty($attachments)):                                               //check if there an attachment or not
foreach ( $attachments as $attachment_id => $attachment ) {
if(wp_get_attachment_image($attachment_id) != ""):
$related_thumbnail = wp_get_attachment_url( $attachment_id );
endif;
}
else:                                                           // if no attachment
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

if(!empty($first_img)):
$related_thumbnail = $first_img;
else:
$related_thumbnail = "images/default_thumbnail.jpg";                            //define default thumbnail, you can use full url here.
endif;
endif;
endif;

echo $related_thumbnail;
}
</img.+src=['"]([^'"]+)['"].*>

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

Источник: WP.tutsplus.com

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/