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

شفافية المحتوى: تم توليد وتنسيق هذا المقال آلياً عبر محرك صِوان AI لتقديم محتوى تقني دقيق، مباشر، وخالٍ من الحشو المزعج.

تُعَدُّ المشاركات ذات الصلة (Related Posts) ميزة أساسية لتعزيز تجربة المستخدم وتحسين معدلات التصفح في أي مدونة. ومع ذلك، يواجه العديد من مستخدمي بلوجر مشكلة عدم ظهور الصور المصغرة (Thumbnails) لهذه المشاركات، مما يقلل من جاذبيتها وفعاليتها. في هذا المقال، سنستعرض الأسباب الشائعة لهذه المشكلة ونقدم حلولاً تقنية وعملية لضمان عرض الصور المصغرة بشكل صحيح.

فهم المشكلة: لماذا لا تظهر الصور المصغرة؟

قبل الشروع في الحلول، من المهم فهم الأسباب الجذرية وراء عدم ظهور الصور المصغرة. تتلخص الأسباب الرئيسية فيما يلي:

1. عدم وجود صور في المشاركات الأصلية: إذا كانت المشاركة الأصلية لا تحتوي على أي صور، فلن يتمكن الكود من استخراج صورة مصغرة لعرضها.
2. كود المشاركات ذات الصلة غير صحيح أو قديم: قد يكون الكود المستخدم لعرض المشاركات ذات الصلة قديماً، أو يحتوي على أخطاء برمجية، أو غير متوافق مع التحديثات الأخيرة لبلوجر.
3. مشاكل في قوالب بلوجر (Themes): بعض القوالب المخصصة قد تتعارض مع وظيفة عرض الصور المصغرة، أو تكون تنسيقات CSS الخاصة بها تخفي الصور.
4. أخطاء JavaScript: قد تمنع أخطاء في سكربتات JavaScript الأخرى على المدونة من تنفيذ كود المشاركات ذات الصلة بشكل صحيح.
5. استخدام صور خارجية: في بعض الأحيان، قد لا يتمكن كود بلوجر من استخراج الصور المصغرة من روابط صور خارجية (ليست مستضافة على بلوجر).

حلول عملية لظهور الصور المصغرة

1. التأكد من وجود صور في المشاركات

هذا هو الحل الأبسط والأكثر أهمية. تأكد أن كل مشاركة ترغب في ظهور صورتها المصغرة ضمن قسم "المشاركات ذات الصلة" تحتوي على صورة واحدة على الأقل داخل محتواها. يُفضل أن تكون الصورة الأولى في المشاركة هي الصورة الرئيسية التي ترغب في عرضها كصورة مصغرة.

نصيحة!
للحصول على أفضل النتائج، استخدم صورًا ذات أبعاد متناسبة (مثل مربع أو مستطيل أفقي) وتأكد من أنها ليست صغيرة جدًا.

2. تحديث كود ويدجت المشاركات ذات الصلة

غالبًا ما تكون المشكلة في الكود نفسه. سنقدم هنا كود JavaScript/HTML جاهزًا وفعالًا يعرض المشاركات ذات الصلة مع الصور المصغرة. يجب عليك استبدال أي كود قديم للمشاركات ذات الصلة بهذا الكود.

1. انتقل إلى لوحة تحكم بلوجر.
2. اختر "المظهر" (Theme).
3. انقر على زر "تخصيص" ثم "تعديل HTML" (Edit HTML).
4. ابحث عن الكود الخاص بقسم المشاركات ذات الصلة (قد يكون تحت وسم <data:post.body/> أو <div class='post-footer'>).
5. احذف الكود القديم واستبدله بالكود التالي. تأكد من وضعه في المكان المناسب الذي ترغب في ظهور المشاركات فيه (عادةً بعد نهاية محتوى المشاركة).

<!-- Related Posts Widget with Thumbnails -->
<b:if cond='data:blog.pageType == "item"'>
  <div class='related-posts-wrapper'>
    <h3>مواضيع قد تهمك</h3>
    <div id='related-posts-container'>جار التحميل...</div>
  </div>

  <script type='text/javascript'>
    //<![CDATA[
    var relatedPostConfig = {
      homePage: "<data:blog.homepageUrl/>",
      numPosts: 5, // عدد المشاركات المراد عرضها
      noThumbnail: "https://blogger.googleusercontent.com/img/b/R29vZ2xlLUF.../no-image.png", // رابط صورة افتراضية
      containerId: "related-posts-container"
    };

    function showRelatedPosts(json) {
      var entry = json.feed.entry;
      var postUrl = "<data:post.url/>";
      var relatedPostsHtml = "<ul class='related-posts-list'>";
      var relatedPosts = [];

      for (var i = 0; i < entry.length; i++) {
        var post = entry[i];
        if (post.link[4].href == postUrl) continue; // تخطي المشاركة الحالية

        var postTitle = post.title.$t;
        var postLink = post.link[4].href;
        var postThumbnail = relatedPostConfig.noThumbnail;

        if (post.media$thumbnail && post.media$thumbnail.url) {
          postThumbnail = post.media$thumbnail.url.replace("/s72-c/", "/s1600/"); // حجم الصورة
        } else if (post.content && post.content.$t.match(/<img.+?src=["'](.+?)[\"'].*?>/)) {
          postThumbnail = post.content.$t.match(/<img.+?src=["'](.+?)[\"'].*?>/)[1].replace("/s72-c/", "/s1600/");
        }

        relatedPosts.push({
          title: postTitle,
          link: postLink,
          thumbnail: postThumbnail
        });
      }

      // Shuffle posts to show different related posts each time
      relatedPosts.sort(function() { return 0.5 - Math.random() });

      for (var j = 0; j < Math.min(relatedPostConfig.numPosts, relatedPosts.length); j++) {
        var p = relatedPosts[j];
        relatedPostsHtml += '<li><a href="' + p.link + '"><img src="' + p.thumbnail + '"/><span>' + p.title + '</span></a></li>';
      }
      relatedPostsHtml += "</ul>";

      document.getElementById(relatedPostConfig.containerId).innerHTML = relatedPostsHtml;
    }

    var label = "<data:post.labels.first.name/>";
    if (label) {
      document.write('<script src="' + relatedPostConfig.homePage + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=showRelatedPosts&max-results=10"></script>');
    } else {
      document.getElementById(relatedPostConfig.containerId).innerHTML = '<p>لا توجد مشاركات ذات صلة.</p>';
    }
    //]]>
  </script>
</b:if>

<!-- Basic CSS for Related Posts (add to your CSS section) -->
<style type='text/css'>
  .related-posts-wrapper {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 20px;
  }
  .related-posts-wrapper h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
  }
  .related-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* مسافة بين العناصر */
  }
  .related-posts-list li {
    flex: 1 1 calc(33.333% - 10px); /* 3 أعمدة على الشاشات الكبيرة */
    max-width: calc(33.333% - 10px);
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
  }
  .related-posts-list li a {
    display: block;
    text-decoration: none;
    color: #555;
    text-align: center;
  }
  .related-posts-list li img {
    width: 100%;
    height: 120px; /* ارتفاع ثابت للصورة */
    object-fit: cover; /* للحفاظ على نسبة الصورة */
    border-bottom: 1px solid #eee;
  }
  .related-posts-list li span {
    display: block;
    padding: 10px;
    font-size: 14px;
    line-height: 1.4;
    min-height: 40px; /* لضمان ارتفاع متساوٍ للعناوين */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
  @media (max-width: 768px) {
    .related-posts-list li {
      flex: 1 1 calc(50% - 10px); /* عمودان على الأجهزة اللوحية */
      max-width: calc(50% - 10px);
    }
  }
  @media (max-width: 480px) {
    .related-posts-list li {
      flex: 1 1 100%; /* عمود واحد على الهواتف */
      max-width: 100%;
    }
  }
</style>

تحذير!
تأكد من عمل نسخة احتياطية لقالبك قبل إجراء أي تعديلات على HTML.

شرح الكود:

• يستخدم الكود JavaScript لجلب المشاركات ذات الصلة بناءً على التصنيف (Label) الأول للمشاركة الحالية.
• يحاول استخراج الصورة المصغرة أولاً من media$thumbnail (صورة بلوجر الافتراضية) ثم من أول وسم <img> داخل محتوى المشاركة.
• يمكنك تعديل numPosts لتحديد عدد المشاركات المراد عرضها.
• noThumbnail هو رابط لصورة افتراضية تظهر إذا لم يتم العثور على أي صورة في المشاركة. استبدله برابط صورتك الافتراضية.
• يحتوي الكود أيضًا على CSS أساسي لتنسيق عرض المشاركات والصور المصغرة. يمكنك تعديله ليناسب تصميم مدونتك.

3. التحقق من تنسيقات CSS

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

على سبيل المثال، ابحث عن خصائص مثل display: none; أو visibility: hidden; مطبقة على عناصر الصور أو حاوياتها ضمن قسم المشاركات ذات الصلة.

4. تصحيح أخطاء JavaScript

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

1. افتح مدونتك في المتصفح.
2. انقر بزر الماوس الأيمن في أي مكان على الصفحة واختر "فحص" (Inspect) أو "Inspect Element".
3. انتقل إلى علامة التبويب "Console".
4. ابحث عن أي رسائل خطأ باللون الأحمر. قد تشير هذه الأخطاء إلى مشكلة في سكربت معين.

معلومة!
إذا وجدت أخطاء، حاول تعطيل السكربتات الأخرى واحدًا تلو الآخر لتحديد السبب الجذري للمشكلة.

5. اختبار مع قالب بلوجر الافتراضي

إذا كنت تستخدم قالبًا مخصصًا، جرب التبديل مؤقتًا إلى أحد قوالب بلوجر الافتراضية (مثل Contempo أو Soho) لمعرفة ما إذا كانت المشكلة تختفي. إذا ظهرت الصور المصغرة بشكل صحيح في القالب الافتراضي، فهذا يؤكد أن المشكلة تكمن في قالبك المخصص. في هذه الحالة، قد تحتاج إلى مراجعة كود القالب بعمق أو التواصل مع مطور القالب.

الأسئلة الشائعة

هل يمكنني استخدام صورة مصغرة مخصصة لكل مشاركة؟

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

لماذا تظهر الصور المصغرة بأحجام مختلفة؟

هذا يحدث غالبًا بسبب عدم وجود تنسيق CSS موحد للصور المصغرة. الكود المقدم يتضمن CSS لضبط ارتفاع وعرض موحدين للصور (height: 120px; object-fit: cover;). تأكد من تطبيق هذه التنسيقات أو تعديلها لتناسب تصميمك.

هل يؤثر عدد المشاركات ذات الصلة على سرعة تحميل المدونة؟

نعم، قد يؤثر. كلما زاد عدد المشاركات التي يتم جلبها وعرضها، زاد الحمل على المتصفح. يُنصح بعدم تجاوز 5-7 مشاركات للحفاظ على سرعة تحميل جيدة.

المشاركات ذات الصلة

المقال الأصلي:
حل مشكلة عدم ظهور الصور المصغرة للمشاركات ذات الصلة في بلوجر
المصدر: صِوان AI
شكر خاص لـ GEMINI و جمال الحزازي.