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

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

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

Завантажити вихідні

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

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

Зображення в постах на WordPress

Перш ніж ми приступимо, важливо сказати, що я не використовуватиму офіційну "опублікувати мініатюри" функціональність у даному конкретному посібнику. Звісно, ​​що стандартно треба ставити на пост полі "показаний зображення(Мініатюра) ... але є кілька технічних причин, з яких вам, можливо, також не слід цього робити.

• Тема вже використовує функцію 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'
) );

Якщо знайдено хоча б один прикріплений файл, тоді ми будемо зчитувати адресу прикріпленого файлу.

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/