طريقة تعيين الصورة المصغرة لفيديو يوتيوب تلقائيا على ووردبريس

عندما نقوم بنشر مقالة تتوفر على فيديو، عادة ما نقوم بتحرير صورة أو الاستعانة بأحد المواقع لجلب الصورة المصغرة للفيديو واستعمالها كصورة بارزة للمقالة، لكن هذا الموضوع قد يكون مرهق وفيه بعض المضيعة للوقت أليس كذلك؟

الحل هو جلب الصورة المصغّرة للفيديو وتعيينها كصورة بارزة تلقائيا.

في تدوينة سابقة قمت بشرح طريقة تعيين أول صورة في التدوينة كصورة بارزة تلقائيا، هذه المرة سنقوم باستعمال نفس الطريقة تقريبا لكن بدل استعمال أول صورة سنقوم بجلب الصورة المصغرة ﻷول فيديو يوتيوب موجود في المقالة.

جلب الصورة المصغرة لفيديو اليوتيوب

أولا سنقوم بإنشاء وظيفة باسم sb_get_youtube_thumbnail لجلب الصورة المصغرة لأول فيديو يوتيوب موجود في محتوى المقالة.

/**
* Get video YouTube thumbnail from WordPress post
*
* @param string $content
* @return string $youtube_thumb
* @author Said El Bakkali
*/
function sb_get_youtube_thumbnail( $content ) {

    preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $content , $matches );

    $video_id = ! empty( $matches ) ? $matches[1] : '';

    if ( ! $video_id ) {
        return;
    }

    $remote_headers = wp_remote_head( 'https://img.youtube.com/vi/' . $video_id . '/maxresdefault.jpg' );
    $is_404 = ( 404 === wp_remote_retrieve_response_code( $remote_headers ) );
    $video_thumbnail_url = ( ! $is_404 ) ? 'https://img.youtube.com/vi/' . $video_id . '/maxresdefault.jpg' : 'https://img.youtube.com/vi/' . $video_id . '/hqdefault.jpg';

    return $video_thumbnail_url;
}

ما قمنا به هنا هو البحث داخل محتوى المقالة عن أي رابط يوتيوب باستعمالك تعبير قياسي (Regular Expression) عن طريق الوظيفة preg_match، بعدها نقوم باستخراج المعرف الوحيد للفيديو (ID) الخاص بالفيديو وبذلك استعماله لجلب الصورة المصغرة.

تعيين الصورة المصغرة لفيديو يوتيوب تلقائيا

المرحلة الثانية هي جعل الصورة المصغرة التي سنقوم بجلبها باستعمال الكودة السابق كصورة مصغرة للمقالة.

/**
* Upload and set post thumbnail automatically from first video YouTube in the post
*
* @param int $post_id the post ID.
* @param post $post the post object.
* @author Said El Bakkali
*/
function sb_set_youtube_thumbnail( $post_id, $post ) {

    if ( has_post_thumbnail( $post_id ) ) {
        return $post_id;
    }

    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return $post_id;
    }

    if ( wp_is_post_revision( $post_id ) ) {
        return $post_id;
    }

    $video_thumbnail_url = sb_get_youtube_thumbnail( $post->post_content );
    $desc = esc_html__( 'Thumbnail Youtube of: ', 'sb-youtube-thumbnail' ) . get_the_title( $post_id );

    if ( ! empty( $video_thumbnail_url ) ) {
        $attachment_id = media_sideload_image( $video_thumbnail_url, $post_id, $desc, 'id');
    }

    if ( $attachment_id ) {
        set_post_thumbnail( $post_id, $attachment_id );
    }
}

add_action('save_post', 'sb_set_youtube_thumbnail', 10, 2 );

أولا قمنا بالتأكد من عدم تنفيذ الكود في ثلاث حالات:

• توفر المقالة على صورة بارزة
• ثانيا في حالة الحفظ التلقائي
• ثالتا في حالة المراجعات.

بعدها نقو باستخراج رابط الصورة المصغرة لفيديو اليوتيوب من محتوى المقالة، ثم نقوم برفعها على ووردبريس باستخدام الوظيفة media_sideload_image() وفي الأخير نقوم بتحديد الصورة المرفوعة كصورة بارزة بواسطة الوظيفة set_post_thumbnail()

بعد إضافة هذه الأوكاد إلى قالبك وحفظ التغييرات، سيتم تعيين الصورة البارزة تلقائيا لكل مقالة تتوفر على فيديو يوتيوب اعتمادا على الصورة المصغرة للفيديو.

أتمنا أن تكون قد استفدت من الموضوع، إن كان لديك أي استفسار أو تساءل المرجو تركه من خلال التعليقات.

هابي كودينغ 🙂