• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

سعيد البقالي

مطوّر ووردبريس

  • الرئيسية
  • المدونة
  • الأرشيف
  • راسلني
أنت في:الرئيسية / شرحات ووردبريس / طريقة تعيين الصورة المصغرة لفيديو يوتيوب تلقائيا على ووردبريس

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

أخر تحديث في 6 مايو، 2021 بواسطة سعيد البقالي 4 تعليقات

محتوى المقالة إخفاء
  1. 1 جلب الصورة المصغرة لفيديو اليوتيوب
  2. 2 تعيين الصورة المصغرة لفيديو يوتيوب تلقائيا

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

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

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

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

أولا سنقوم بإنشاء وظيفة باسم 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()

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

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

هابي كودينغ 🙂

قم بالتسجيل على قائمتي البريدية لكي تكون من الأوائل في الحصول على تدوينات وشروحات حصرية

أنا لا أرسل أبدا البريد المزعج! اقرأ سياسة الخصوصية لمزيد من المعلومات.

افحص البريد الوارد أو مجلد (غير هام) للعثور على رسالة تأكيد الاشتراك.

تحت تصنيف:شرحات ووردبريس

عن سعيد البقالي

مبرمج مطور قوالب وإضافات ووردبريس بخبرة تفوق 10 سنوات، أكتب تدوينات في موقعي هذا بين الفينة والأخرى حول تطوير الويب ,تحسين الأرشفة وتحيسن أداء المواقع WPO منذ سنة 2012، لدي مساهمات في تطوير نواة ووردبريس والترجمة إلى اللغة العربية. أتمنا أن يروق لك كل ما أقدمه.

قم بالتسجيل على قائمتي البريدية لكي تكون من الأوائل في الحصول على تدوينات وشروحات حصرية

أنا لا أرسل أبدا البريد المزعج! اقرأ سياسة الخصوصية لمزيد من المعلومات.

افحص البريد الوارد أو مجلد (غير هام) للعثور على رسالة تأكيد الاشتراك.

Reader Interactions

أضف رأيك حول الموضوع


المرجو الكتابة باللغة العربية الفصحى لكي يفهم الجميع و شكرا

  1. ربيع الخير قال

    22 فبراير، 2016 بتوقيت 4:29 صباحًا

    بارك الله فيك اخي الفاضل , بوست يشكل اضافة

    رد
    • سعيــــد البقـــــــــــــــالي قال

      23 فبراير، 2016 بتوقيت 11:04 مساءً

      الله يبارك فيك أخي ربيع شكرا لك على المرور 🙂

      رد
  2. خلود الغفري قال

    22 فبراير، 2016 بتوقيت 10:29 صباحًا

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

    سؤال اخر ولكنه خارج الموضوع:
    كيف يمكنني وضع التنسيق الشجري لمكان التدوينة حسب التصنيف وليس حسب التاريخ كما هو واضح بأعلى تدوينتك:
    “حاليا تتواجد في:الرئيسية / شروحات ووردبريس / طريقة تعيين الصورة المصغرة لفيديو يوتيوب تلقائيا في ووردبريس”

    رد
    • سعيــــد البقـــــــــــــــالي قال

      23 فبراير، 2016 بتوقيت 11:11 مساءً

      و عليكم السلام أخت خلود

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

      فيما يخص السؤال الثاني، لقد عاينت موقعك و أظن أنه مبني على قالب مهاراتي أليس كذلك؟

      التحكم فيما ذكرته يتغير حسب القالب و طريقة تطويره ، فقط اتصلي بصاحب قالب مهاراتي و هو سيوافيك بالحل مباشرة.

      أنا لم أستعمل ذلك القالب من قبل لهذا لا أستطيع إفادتك.

      شكرا لك على الزيارة و التعليق.

      رد

أضف رأيك حول الموضوع إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

القائمة الجانبية الرئيسية

البحث

  • حسابي على تويتر
  • رابط صفختي على انستغرام
  • رابط قناتي على اليوتوب
  • صفحتي على فايسبوك
  • ربط حسابي على جيت هاب
  • رابط حسابي على تلغرام
  • ربط حسابي على الموقع الرسمي لووردبريس
  • CodePen

قم بالتسجيل على قائمتي البريدية لكي تكون من الأوائل في الحصول على تدوينات وشروحات حصرية

أنا لا أرسل أبدا البريد المزعج! اقرأ سياسة الخصوصية لمزيد من المعلومات.

افحص البريد الوارد أو مجلد (غير هام) للعثور على رسالة تأكيد الاشتراك.

المواضيع الأكثر شعبية

أفضل إضافات ووردبريس المجانية حسب تجربتي الخاصة

دروس ووردبريس من الصفر للمبتدئين بالفيديو

10 من أفضل قوالب ووردبريس المجانية

شرح إضافة Yoast SEO بالفيديو

طريقة إضافة نجوم تقييم المقالات في ووردبريس

نقل ووردبريس من استضافة إلى أخرى وتغيير النطاق

شارة شركة ديجيتال أوشن
مارس 2023
نثأربخجسد
 12345
6789101112
13141516171819
20212223242526
2728293031 
« مارس    

جميع الحقوق محفوظة © 2023

  • سياسة الخصوصية
  • شروط الاستخدام