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

Опубликовано: 01.09.2018

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

Основы WordPress. Серия девятая. Миниатюры

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

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

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

Плагин оптимизации WordPress – Clearfy инструкции по настройке

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

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

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

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

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

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

Первым делом мы будем пользоваться настраиваемым полем для того, чтобы задать картинку предпросмотра. Вы можете почитать дополнительно о создании такого поля при помощи ""… но давайте исходить из того, что вы уже создали и настроили это поле. Для данного пользовательского руководства используется настраиваемое поле " 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 , и затем вы сможете применять ее так, как показано далее:

Либо, если вы хотите применять эту функцию вместе с изменением размеров картинки (вроде плагинов 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 :

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() .