Як отримати посилання на перше зображення запису WordPress

Привіт:) У цьому пості розгляну робоче рішення як отримати URL-посилання на перше зображення у пості WordPress.

Такий функціонал може знадобитися у різних ситуаціях, наприклад:

• автоматичне виведення мініатюри запису, якщо вона не задана вручну;
• формування Open Graph зображення для соцмереж;
• створення preview картки посту у блозі;
• використання зображення у структурованих даних або JSON-LD.

Функція отримання першого зображення посту

У своєму файлі functions.php розмістіть PHP-код

function mp_get_first_post_image() {
    global $post;

    preg_match_all( '/<img[^>]+src=([\'"])?((?(1).+?|[^\s>]+))(?(1)\1)/', $post->post_content, $result );
    
	if ( isset( $result[2][0] ) ) { 
        $first_img = $result[2][0];
    }
 
    if ( empty( $first_img ) ) {
        $first_img = "https://placehold.co/600x400.png";
    }

    return $first_img;
}

Як працює цей код

1. Функція отримує доступ до змінної $post.
2. Регулярний вираз знаходить усі теги <img> у контенті посту.
3. Якщо хоча б одне зображення знайдено — повертається URL першого з них.
4. Якщо зображень у записі немає — використовується зображення-заглушка.

до змісту ↑

Як використати функцію у шаблоні теми

Для виклику цієї функції, наприклад, у потрібному місці коду файлу-шаблону вашої активної WordPress-теми використовуйте код

if ( has_post_thumbnail() ) { 
	the_post_thumbnail( 'thumbnail' );
} else {
	echo '<img src="' . mp_get_first_post_image() . '" />';
} 

У результаті:

• якщо для запису задана мініатюра (Featured Image) — виведеться вона;
• якщо мініатюри немає — виведеться перше зображення з контенту;
• якщо у пості немає картинок — відобразиться зображення-заглушка.

до змісту ↑

Де це може бути корисно

Такий підхід часто використовується у:

1. Архівах записів. Якщо автори не завжди додають Featured Image.
2. Open Graph розмітці.

Наприклад:

<meta property="og:image" content="<?php echo mp_get_first_post_image(); ?>">

Це дозволяє соціальним мережам (Facebook, Telegram, LinkedIn) показувати картинку посту при поширенні посилання.

3. Кастомних блоках блогу. Якщо ви створюєте власну тему WordPress або кастомні шаблони.

до змісту ↑

Покращена версія функції (безпечніша)

Іноді у контенті можуть бути порожні теги або нестандартні атрибути. Тому можна використати більш надійну версію:

function mp_get_first_post_image() {

    global $post;

    if ( ! $post ) {
        return false;
    }

    preg_match( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches );

    if ( ! empty( $matches[1] ) ) {
        return esc_url( $matches[1] );
    }

    return "https://placehold.co/600x400.png";
}

Переваги цієї версії:

• використовується esc_url() для безпеки,
• код простіший,
• швидше працює.

до змісту ↑

Важливий нюанс

Якщо картинка:

• вставлена через CSS background,
• додана через JavaScript,
• або виводиться через шорткод,

— функція її не знайде.

Висновок

Отримання першого зображення запису — це простий спосіб автоматизувати роботу з мініатюрами у WordPress.

Використовуючи невелику PHP-функцію, можна:

• підвищити якість відображення постів у блогах;
• забезпечити наявність зображення для Open Graph;
• зробити більш стабільний дизайн сайту, навіть якщо автори забули додати Featured Image.