الدليل الشامل: إضافة قسم "مقالات ذات صلة" احترافي في بلوجر بدون إضافات
أهلاً بك في الدليل التقني المتقدم من مدونة قاسي للمعلومات (Kaci Lilmaalounat). في هذا المقال سنضع بين يديك كنزاً برمجياً سيرتقي بمدونتك إلى مستوى آخر!
إن سر نجاح المدونات الكبرى وتصدرها في محركات البحث لا يقتصر فقط على المحتوى الجيد، بل يعتمد بشكل أساسي على الربط الداخلي (Internal Linking) وإبقاء الزائر لأطول فترة ممكنة داخل الموقع. هنا يأتي دور أداة "مقالات ذات صلة" التي سنشرحها اليوم.
💡 لماذا تعتبر هذه الأداة ضرورية لمدونتك؟
عندما ينهي الزائر قراءة مقالك، يجب ألا يخرج من المدونة! عرض مقالات مشابهة وجذابة في نهاية التدوينة يشجعه على تصفح المزيد. هذا يؤدي إلى:
✔️ تقليل معدل الارتداد (Bounce Rate) بشكل ملحوظ.
✔️ زيادة عدد مشاهدات الصفحات (Pageviews).
✔️ إرسال إشارات إيجابية لجوجل بأن موقعك مفيد، مما يحسن السيو (SEO) الخاص بك.
🚀 مميزات السكربت الذي ستحصل عليه اليوم:
ابتعدنا عن الأكواد المعقدة والإضافات الخارجية التي تبطئ الموقع، وقمنا ببرمجة أداة خفيفة تتميز بالآتي:
⚙️ الخطوة الأولى: نسخ كود الأداة
قمنا بدمج أكواد التصميم (CSS) والبرمجة (JavaScript) في قالب واحد ليسهل عليك تركيبه. انقر على زر النسخ الموجود في الزاوية العلوية للصندوق المخصص أدناه:
<!--START RELATED POSTS WIDGET BY Kaci Lilmaalounat-->
<style>
.related-post-widget {
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
margin-top: 30px;
border: 1px solid #eee;
direction: rtl;
}
.rp-title {
text-align: center;
color: #2b489b;
font-size: 22px;
margin-bottom: 20px;
font-weight: bold;
font-family: 'Cairo', sans-serif;
}
.rp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.rp-item {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 8px rgba(0,0,0,0.06);
transition: all 0.3s ease;
}
.rp-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}
.rp-item img {
width: 100%;
height: 140px;
object-fit: cover;
border-bottom: 3px solid #ffcc00;
}
.rp-content {
padding: 12px;
}
.rp-title-link {
font-size: 14px;
color: #222;
text-decoration: none;
display: block;
line-height: 1.5;
font-weight: 600;
font-family: 'Cairo', sans-serif;
}
</style>
<div class="related-post-widget">
<h3 class="rp-title">قد يعجبك أيضاً</h3>
<div class="rp-grid" id="rp-grid"></div>
</div>
<script>
(function() {
var d = document,
det = { label: d.querySelector("a[rel='tag']")?.textContent || "" },
api = "/feeds/posts/default/-/" + det.label + "?alt=json-in-script&callback=renderRp&max-results=4";
window.renderRp = function(json) {
var e = document.getElementById("rp-grid"),
entries = json.feed.entry;
e.innerHTML = "";
for (var i = 0, c = entries.length; i < c; i++) {
var t = entries[i].title.$t,
l = "",
im = "https://via.placeholder.com/300x150?text=Kaci+No+Image";
for (var k = 0; k < entries[i].link.length; k++) {
if (entries[i].link[k].rel == "alternate") {
l = entries[i].link[k].href;
break;
}
}
if (entries[i].media$thumbnail) {
im = entries[i].media$thumbnail.url.replace(/s72-c/, "s400-d");
} else if (entries[i].content && entries[i].content.$t.match(/src=\"([^\"]+)\"/)) {
im = entries[i].content.$t.match(/src=\"([^\"]+)\"/)[1];
}
if (l != window.location.href) {
e.innerHTML += '<div class="rp-item"><a href="' + l + '" style="text-decoration:none;"><img src="' + im + '" alt="' + t + '"/><div class="rp-content"><span class="rp-title-link">' + t + '</span></div></a></div>';
}
}
};
var script = d.createElement("script");
script.src = api;
d.head.appendChild(script);
}());
</script>
<!--END RELATED POSTS WIDGET-->
🛠️ الخطوة الثانية: طريقة التركيب في القالب خطوة بخطوة
الآن بعد أن نسخت الكود، سنقوم بوضعه في المكان الصحيح داخل قالب بلوجر. اتبع الخطوات التالية بحذر:
- سجل الدخول إلى لوحة تحكم بلوجر الخاصة بك، ثم توجه إلى قسم "المظهر" (Theme).
- انقر على السهم المتجه للأسفل بجانب زر "تخصيص"، واختر "تعديل HTML".
- انقر في أي مكان فارغ داخل مربع الأكواد، ثم اضغط على
Ctrl + Fلفتح مربع البحث. - ابحث عن هذا الكود تحديداً:
<data:post.body/>
(ملاحظة: قد تجد هذا الكود مكرراً عدة مرات في القالب، ابحث عن الثاني أو الثالث غالباً هو المسؤول عن صفحة المقال). - قم بلصق الكود الذي نسخته أسفل وسم
<data:post.body/>مباشرة. - اضغط على زر "حفظ" في أعلى يسار الشاشة. افتح أي مقال لديك لترى السحر!
⚠️ أخطاء شائعة يجب تجنبها!
لماذا لا تظهر المقالات؟ الكود يعتمد بشكل أساسي على "التسميات" (Labels). إذا كان المقال الذي تتصفحه غير مربوط بأي تسمية/قسم، فلن يستطيع الكود جلب مقالات مشابهة. تأكد دائماً من تصنيف مقالاتك أثناء كتابتها.
🎨 هل يمكنني التعديل على الأداة؟
بالتأكيد! الأداة مصممة لتكون مرنة وقابلة للتخصيص لتناسب ذوقك:
- تغيير عدد المقالات المعروضة: ابحث داخل الكود عن
max-results=4وقم بتغيير الرقم 4 إلى 6 أو 8 أو أي عدد تريده. - تغيير عنوان القسم: ابحث في الكود عن عبارة
قد يعجبك أيضاًواستبدلها بـ "مقالات ذات صلة" أو "اقرأ أيضاً".
🎉 تهانينا!
لقد قمت بإضافة لمسة احترافية لمدونتك ستساهم بشكل كبير في زيادة تفاعل الزوار وتحسين أرباحك ومكانتك في محركات البحث.
💬 رأيك يهمنا!
إذا أعجبك المقال أو عندك أي إضافة أو سؤال، لا تتردد في ترك تعليقك 👇
نحن نقرأ كل التعليقات ونرد عليها بكل اهتمام ❤️