تسريع مدونات بلوجر وحل مشكلة تضمين الفيديو فى المقال
هل تعاني من بطء مدونتك على منصة بلوجر بسبب فيديوهات يوتيوب؟ هل تطاردك تحذيرات "ملفات تعريف الارتباط الخارجية" أو "تقليل تأثير أكواد الجهات الخارجية" في أداة Google PageSpeed Insights؟ إذا كانت إجابتك نعم، فأنت على وشك اكتشاف الحل النهائي الذي سيغير قواعد اللعبة لمدونتك.
 |
| حل مشاكل تضمين الفيديوهات في المقالات | زيادة سرعة وتوافق المقال مع معايير السيو. |
في هذا الدليل الشامل، لن نقدم لك حلاً مؤقتًا، بل سنبني معًا "مشغل الفيديو الخاص بك" الذي سيحل المشكلة من جذورها، مما يمنحك سرعة فائقة، تجربة مستخدم أفضل، وعلاقة حب جديدة مع محركات البحث.
لماذا تضمين يوتيوب التقليدي يدمر سرعة مدونتك؟
عندما تقوم بنسخ كود التضمين <iframe> التقليدي من يوتيوب، فأنت في الحقيقة تدعو "فريق تصوير كامل" إلى صفحتك. هذا الفريق يتكون من:
- ملفات JavaScript ضخمة: أكواد برمجية ثقيلة يتم تحميلها حتى لو لم يضغط الزائر على زر التشغيل.
- ملفات تعريف الارتباط (الكوكيز): يتم زرعها في متصفح الزائر لتتبعه، مما يثير قلق أدوات الخصوصية.
- طلبات متعددة للخادم: تجري صفحتك العديد من الاتصالات بخوادم جوجل، مما يؤخر تحميل المحتوى الأساسي.
النتيجة؟ صفحة بطيئة، درجات سيئة في PageSpeed، وتجربة مستخدم محبطة. ببساطة، أنت تضحي بسرعة موقعك بالكامل من أجل فيديو قد لا يشاهده الزائر أصلًا.
بناء مشغل الفيديو الخاص بك (فلسفة الخلق من العدم)
فلسفة هذا الحل بسيطة وعبقرية: "لا تضع في الصفحة شيئًا لا تريد أن يُرى". بدلاً من محاولة "إخفاء" الفيديو، فإننا نمنع وجوده من الأساس. وعندما تحتاج إليه، نخلقه من العدم.
| طريقتك الجديدة (الحل الاحترافي) | الطريقة القديمة (التقليدية) |
|---|---|
1. نضع <div> بريء وخامل تمامًا في المقال. |
1. نضع <iframe> يوتيوب في المقال. |
2. PageSpeed يرى الـ <div> البريء ويعتبر الصفحة نظيفة تمامًا. |
2. PageSpeed يرى الـ <iframe> فورًا ويسجل المشكلة. |
3. عند اقتراب الزائر، نبني واجهة الفيديو. وعند ضغطه، نخلق الـ <iframe>. |
3. نحاول إخفاء أو تعديل المشكلة بعد فوات الأوان. |
✨ مميزات هذا الحل الذي لا يقهر
- سرعة فائقة: قفزة هائلة في درجات Google PageSpeed تصل إلى المنطقة الخضراء.
- 0% اكتشاف: لن تتمكن أي أداة فحص من اكتشاف أي ملفات كوكيز أو اتصالات خارجية من يوتيوب.
- دفعة قوية للسيو (SEO): سرعة الموقع هي عامل ترتيب أساسي لدى جوجل، وهذا السكريبت يعززها بقوة.
- مظهر احترافي: تصميم أنيق وجذاب للفيديو يحفز الزائر على المشاهدة.
طريقة التركيب الكامل: تفعيل المشغل في مدونتك (مرة واحدة فقط)
لتثبيت هذا النظام في مدونتك بالكامل، كل ما عليك هو نسخ كود واحد ووضعه في القالب مرة واحدة فقط.
الخطوة الأولى: فتح محرر قوالب بلوجر
من لوحة تحكم بلوجر، اذهب إلى "المظهر"، ثم اضغط على السهم بجانب زر "تخصيص"، واختر "تعديل HTML".
الخطوة الثانية: لصق الكود الشامل
داخل محرر الأكواد، اضغط على Ctrl + F للبحث عن وسم </body> (عادة ما يكون في آخر سطر). قبل هذا الوسم مباشرة، قم بلصق الكود التالي بالكامل.
الكود الشامل (CSS + JavaScript)
<!-- YouTube Ultimate Lazy Load Script by elsabagh.com -->
<script>//<![CDATA[
(function(){var e=".custom-yt-player{position:relative;width:100%;max-width:720px;margin:20px auto;background-color:#e0e0e0}.custom-yt-player::before{content:'';display:block;padding-top:56.25%}.custom-yt-player.is-loaded{cursor:pointer;overflow:hidden;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.1);background-size:cover;background-position:center}.custom-yt-player iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.custom-yt-player .play-button{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%);width:80px;height:56px;background-color:rgba(35,35,35,.8);border-radius:12px;display:flex;justify-content:center;align-items:center;transition:all .2s;animation:custom-pulse 2s infinite;opacity:0}.custom-yt-player.is-loaded .play-button{opacity:1}.custom-yt-player.is-loaded:hover .play-button{background-color:#ff0000;animation:none}.custom-yt-player .play-button::before{content:'';border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #fff;margin-left:5px}@keyframes custom-pulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}100%{transform:translate(-50%,-50%) scale(1)}}",t=document.createElement("style");t.textContent=e,document.head.appendChild(t);function o(){var e=document.querySelectorAll(".custom-yt-player");"IntersectionObserver"in window&&e.forEach(function(e){new IntersectionObserver(function(e,t){e.forEach(function(e){if(e.isIntersecting){var o=e.target,a=o.dataset.id,d=new Image;d.src="https://i.ytimg.com/vi/"+a+"/maxresdefault.jpg",d.onload=function(){o.style.backgroundImage="url('"+d.src+"')",o.classList.add("is-loaded")},d.onerror=function(){var e=new Image;e.src="https://i.ytimg.com/vi/"+a+"/hqdefault.jpg",e.onload=function(){o.style.backgroundImage="url('"+e.src+"')",o.classList.add("is-loaded")}},t.unobserve(o);var i=document.createElement("div");i.className="play-button",o.appendChild(i),o.addEventListener("click",function(){var e=document.createElement("iframe");e.setAttribute("src","https://www.youtube.com/embed/"+a+"?autoplay=1&rel=0"),e.setAttribute("frameborder","0"),e.setAttribute("allow","accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"),e.setAttribute("allowfullscreen",""),o.innerHTML="",o.appendChild(e)},{once:!0})}})},{rootMargin:"200px 0px"}).observe(e)})}document.addEventListener("DOMContentLoaded",o)})();
//]]></script>
<!-- YouTube Ultimate Lazy Load Script by elsabagh.com -->
بعد اللصق، اضغط على أيقونة "حفظ". تهانينا! لقد قمت بتثبيت المشغل في مدونتك.
طريقة الاستخدام اليومي: إضافة فيديو في مقالاتك بسهولة
الآن، عندما تريد إضافة أي فيديو يوتيوب في مقال جديد أو قديم، اتبع هذه الطريقة النظيفة:
الخطوة الأولى: الحصول على معرّف الفيديو (ID)
اذهب إلى صفحة الفيديو على يوتيوب، وانظر إلى الرابط. المعرّف هو مجموعة الحروف والأرقام التي تأتي بعد v=.
مثال: https://www.youtube.com/watch?v=eR3j1ySzLvo
في هذا الرابط، المعرّف هو: eR3j1ySzLvo
الخطوة الثانية: لصق الكود النظيف
في محرر مقالات بلوجر، انتقل إلى وضع "عرض HTML". في المكان الذي تريد أن يظهر فيه الفيديو، الصق الكود البسيط التالي.
كود إضافة الفيديو
<div class="custom-yt-player" data-id="VIDEO_ID_HERE"></div>استبدل VIDEO_ID_HERE بمعرّف الفيديو الذي نسخته. ثم قم بحفظ المقال. هذا كل شيء!
أسئلة شائعة وتلميحات متقدمة
❓ هل سيؤثر هذا على الفيديوهات في مقالاتي القديمة؟
لا. السكريبت يعمل فقط على الفيديوهات التي تستخدم الكود النظيف الجديد <div class="custom-yt-player" ...>. لتحديث مقالاتك القديمة، يجب عليك تعديلها يدويًا واستبدال أكواد <iframe> القديمة بالكود الجديد.
❓ هل يمكنني تخصيص شكل المشغل؟
نعم. يمكنك تعديل ألوان وأشكال المشغل بسهولة من خلال تعديل جزء <style> في الكود الشامل الذي أضفته للقالب. على سبيل المثال، لتغيير لون زر التشغيل عند مرور الماوس، ابحث عن background-color:#1b5a84; وقم بتغيير الكود.
❓ ماذا لو لم يظهر الفيديو وظهر صندوق رمادي فقط؟
هذا يعني غالبًا أنك أخطأت في نسخ معرّف الفيديو (ID). تأكد من أنك نسخت المعرّف بشكل صحيح وأنه لا يحتوي على أي مسافات أو رموز إضافية.
انطلق نحو مدونة أسرع وتجربة مستخدم أفضل
وداعًا للبطء وتحذيرات PageSpeed. بهذه الطريقة، أنت لا تقوم فقط بحل مشكلة، بل ترتقي بمدونتك إلى مستوى احترافي جديد، مقدمًا لزوارك تجربة تصفح سريعة وممتعة، وهو ما تحبه محركات البحث. جربها الآن وشاهد الفرق بنفسك.
