سكربت للسماح بتضمين الصور و الفيديو بداخل التعليقات

السماح بتضمين الصور و الفيديو للتعليقات لقوالب بلوجر

فائدة أستخدام كود تضمين الصور و الفيديوهات للتعليقات

يُعدّ تضمين الصور ومقاطع الفيديو في تعليقات المستخدمين ضمن قوالب بلوجر من الميزات المهمة التي تعزز من تجربة التفاعل داخل المدونة. فعندما يُتاح للزائرين إمكانية إضافة وسائط مرئية إلى تعليقاتهم، فإن ذلك يمنحهم مساحة أوسع للتعبير عن آرائهم، ويوفّر للقراء محتوى تفاعليًا غنيًا يسهم في إيصال الفكرة بشكل أسرع وأدق.

تُسهم هذه الخاصية في رفع مستوى الاحترافية داخل المدونة، وتجعل من التعليقات جزءًا فعّالًا من المحتوى، وليس مجرد نصوص تقليدية. فعلى سبيل المثال، يمكن للزائرين إرفاق صور توضيحية، أو مشاركة فيديوهات تعليمية قصيرة، أو حتى تقديم ملاحظات مدعومة بأمثلة مرئية، مما يُضيف بُعدًا بصريًا مهمًا لأي نقاش أو مراجعة.

من الناحية التقنية، فإن تفعيل دعم الوسائط في التعليقات يعزز من مدة بقاء الزائر في الموقع، ويزيد من فرص مشاركته المستمرة، الأمر الذي ينعكس إيجابًا على ترتيب المدونة في نتائج محركات البحث. كما أن هذا التفاعل البصري يُعزز من شعور المستخدم بالانتماء للمجتمع الرقمي الخاص بالمدونة، مما يشجع على بناء جمهور وفيّ ومستمر.

لذا، يُوصى بشدة أن يتم تفعيل هذه الميزة ضمن قوالب بلوجر الحديثة، لما لها من فوائد على صعيد المحتوى، والتفاعل، والسيو SEO.
شرح التركيب

طريقة تركيب الكود

 الطريقة بسيطة جدا كل ما عليك الذهاب الى اكواد القالب و تيحث عن </body>

و تضيف الكود التالي اعلاه و ثم تقوم بالحفظ

<script>

//<![CDATA[

(function() {

    const imageRegex = /(\[img\])?((http:|https:)?\/\/\S+?\.(?:jpg|jpeg|png|gif|bmp|webp|svg|tiff|ico|apng|avif))(?:\?\S*)?(\[\/img\])?/gi;

    const youtubeRegex = /(\[vid\])?https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w\-]+)(?:&[\w=\-]*)?(\[\/vid\])?/gi;

    const vimeoRegex = /(\[vid\])?https?:\/\/(?:www\.)?vimeo\.com\/(\d+)(\[\/vid\])?/gi;

    const comments = document.querySelectorAll(".comment-content");

    comments.forEach(comment => {

        const links = comment.getElementsByTagName("a");

        for (let link of links) {

            if (

                imageRegex.test(link.href) ||

                youtubeRegex.test(link.href) ||

                vimeoRegex.test(link.href)

            ) {

                const span = document.createElement("span");

                span.textContent = link.href;

                link.parentNode.insertBefore(span, link);

                link.href = "";

                link.textContent = "";

            }

        }

        let html = comment.innerHTML;

        html = html.replace(imageRegex, `

            <img loading="lazy" style="max-width: 100%; height: auto; display: block; margin: 10px auto;" src="$2" alt="صورة"/>

        `);

        html = html.replace(youtubeRegex, `

            <div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;">

                <iframe style="position:absolute;width:100%;height:100%;top:0;left:0;" 

                        src="https://www.youtube.com/embed/$2" 

                        frameborder="0" allowfullscreen></iframe>

            </div>

        `);

        html = html.replace(vimeoRegex, `

            <div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;">

                <iframe style="position:absolute;width:100%;height:100%;top:0;left:0;" 

                        src="https://player.vimeo.com/video/$2" 

                        frameborder="0" allowfullscreen></iframe>

            </div>

        `);

        comment.innerHTML = html;

    });

})();

//]]>

</script>

في بعض القوالب قد لا يعمل الكود لان الكلاس الخاص بالتعليقات يكون باسم اخر 

يجب عليك تغيره بالكلاس الخاص بك الموجود بالكود ستجده بهذا الشكل  .comment-content 

كل ما عليك تغيره بالموجود عندك

و ثم ضع تنبيه برسالة التعليقات بان الزائر يمكنه اضافة صور و فيديو 

و في الختام تقبلوا تحياتي

تحرير المقال