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

في عالم التدوين الرقمي وصناعة المحتوى، لا تقتصر جودة المدونة على ما تقدمه من معلومات قيمة فحسب، بل تعتمد بشكل جوهري على تجربة المستخدم (User Experience) وسهولة الوصول إلى المعلومات. إن الزائر الذي يواجه صعوبة في العثور على مقالاتك القديمة أو التنقل بين أقسام المدونة، غالباً ما يغادر الموقع سريعاً، مما يرفع معدل الارتداد (Bounce Rate) ويؤثر سلباً على ترتيبك في محركات البحث.

من هنا تنبع الأهمية القصوى لإنشاء صفحة فهرس شاملة (Archive Page) أو ما يعرف بخريطة الموقع للمستخدمين. هذه الصفحة ليست مجرد قائمة روابط تقليدية، بل هي "الدليل المرجعي" والمرشد الذكي الذي يأخذ بيد الزائر لاستكشاف كنوز مدونتك المخفية ومقالاتك المؤرشفة التي قد لا تظهر في الصفحة الرئيسية، مما يعيد إحياء المحتوى القديم ويزيد من عدد المشاهدات الإجمالية.

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

صفحة الأرشيف: واجهتك المنظمة لعرض آلاف المقالات بطريقة احترافية

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

لماذا تعتبر صفحة الفهرس الذكية ضرورة قصوى؟

قد يتساءل البعض: "لماذا أحتاج لصفحة أرشيف بينما لدي أقسام في القائمة العلوية؟". الإجابة تكمن في الهيكلية التنظيمية للموقع (Site Structure). صفحة الفهرس المجمعة توفر عناكب البحث (Google Bots) نقطة انطلاق مركزية لفهرسة كافة روابط موقعك، مما يعزز من قوة السيو الداخلي (Internal SEO). بالإضافة إلى ذلك، هي تمنح الزائر نظرة شمولية على تخصص موقعك، مما يرسخ هويتك كمرجع موثوق في مجالك.

معاينة حية للإضافة

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

معاينة صفحة الأرشيف

المميزات التقنية والحصرية للكود

لقد قمنا بتطوير هذا السكربت ليتجاوز كافة الإضافات القديمة والتقليدية، حيث قمنا بدمج أحدث تقنيات الويب لضمان السرعة والأداء:

محرك بحث فوري (Real-time Search): تظهر نتائج البحث لحظياً بمجرد كتابة الحرف الأول، دون الحاجة للضغط على زر "بحث" أو إعادة تحميل الصفحة.
فلترة ذكية للأقسام (Smart Filtering): نظام فرز متقدم يعتمد على AJAX، يتيح للزائر اختيار قسم معين (مثل "قوالب" أو "شروحات") لعرض مقالاته فقط فورياً.
تحميل سريع جداً (Lazy Loading): يعتمد السكربت على جلب البيانات عبر JSON Feed الخفيفة، ولا يقوم بتحميل الصور إلا عند الحاجة، مما يحافظ على سرعة الصفحة (PageSpeed).
تصميم شبكي متجاوب (Responsive Grid): يتم عرض المقالات داخل بطاقات (Cards) أنيقة تتكيف تلقائياً مع حجم الشاشة، سواء كانت هاتفاً صغيراً أو شاشة حاسوب كبيرة.
زر تحميل المزيد (Pagination): بدلاً من التصفح التقليدي الممل، وفرنا زر "تحميل المزيد" لعرض دفعات جديدة من المقالات بشكل سلس يحافظ على بقاء الزائر في نفس الصفحة.

خطوات التركيب والدمج الصحيحة

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

توجه إلى لوحة تحكم بلوجر، ومن القائمة الجانبية اختر تبويب الصفحات (Pages).
اضغط على زر صفحة جديدة (+ New Page)، واكتب عنواناً مناسباً مثل "الأرشيف"، "الفهرس"، أو "كافة المقالات".
من شريط أدوات التحرير (أعلى اليسار أو اليمين)، قم بتغيير وضع الكتابة من "عرض الإنشاء" إلى عرض HTML.
امسح أي كود موجود، وانسخ الأكواد التالية (HTML, CSS, JS) من الصندوق أدناه، والصقها بالترتيب داخل الصفحة.

<div id="smartPosts" class="toc-container">
  <!-- قسم التحكم العلوي: البحث والفلترة -->
  <div class="toc-controls">
    <div class="search-box">
      <input type="text" id="searchPosts" placeholder="ابحث عن مقال معين..." aria-label="بحث" />
      <svg viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" fill="currentColor"/></svg>
    </div>

    <!-- قائمة الأقسام: عدل القيم (value) لتطابق تسميات مدونتك -->
    <div class="filter-box">
      <select id="filterLabel" aria-label="تصفية حسب القسم">
        <option value="">عرض جميع الأقسام</option>
        <option value="قوالب بلوجر">قوالب بلوجر</option>
        <option value="إضافات بلوجر">إضافات بلوجر</option>
        <option value="شروحات تقنية">شروحات تقنية</option>
        <option value="أخبار التقنية">أخبار التقنية</option>
        <option value="الربح من الإنترنت">الربح من الإنترنت</option>
      </select>
    </div>
  </div>

  <!-- مؤشر التحميل المتحرك -->
  <div id="loader" class="loader" style="display:none;"></div>

  <!-- حاوية عرض المقالات -->
  <div id="postsList" class="toc-posts"></div>
  
  <!-- زر تحميل المزيد -->
  <button id="loadMoreBtn">عرض المزيد من المقالات</button>
</div>

<style>
/* حاوية الأرشيف */
.toc-container {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  border: 1px solid #eaeaea;
  font-family: inherit;
}

/* أدوات التحكم */
.toc-controls {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.search-box, .filter-box {
  flex: 1;
  position: relative;
  min-width: 250px;
}
.search-box svg {
  position: absolute;
  left: 15px; /* عدلها لـ right إذا كان اتجاه القالب LTR */
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0.5;
  pointer-events: none;
}
.toc-controls input,
.toc-controls select {
  width: 100%;
  padding: 14px 20px 14px 45px; /* مسافة للأيقونة */
  border: 2px solid #f0f0f0;
  border-radius: 8px;
  background: #fdfdfd;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.toc-controls select { padding: 14px 20px; cursor: pointer; }

.toc-controls input:focus,
.toc-controls select:focus {
  border-color: var(--linkB, #2196f3);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.03);
}

/* شبكة المقالات */
.toc-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

/* بطاقة المقال */
.post-item {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  position: relative;
}
.post-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.06);
  border-color: transparent;
}
.post-item a { text-decoration: none; color: inherit; display: block; flex-grow: 1; }
.post-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: opacity 0.3s;
  background: #f5f5f5;
}
.post-item h3 {
  font-size: 16px;
  margin: 15px;
  line-height: 1.5;
  color: #333;
  font-weight: 700;
}
.post-meta {
  padding: 0 15px 15px;
  margin-top: auto;
  font-size: 12px;
  color: #888;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f9f9f9;
  padding-top: 10px;
}
.post-cat {
  color: var(--linkB, #2196f3);
  font-weight: 800;
  background: rgba(0,0,0,0.04);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
}

/* زر التحميل */
#loadMoreBtn {
  margin: 40px auto 0;
  display: block;
  padding: 14px 50px;
  background: var(--linkB, #2196f3);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}
#loadMoreBtn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* المؤشر */
.loader {
  width: 35px;
  height: 35px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--linkB, #2196f3);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 30px auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
</style>

<script>
/* إعدادات الفهرس - يرجى التعديل بعناية */
const config = {
  blogUrl: "https://www.eltiqni.com", // 1. ضع رابط مدونتك هنا بدلاً من هذا الرابط
  maxResults: 9, // عدد المقالات في كل صفحة
  startIndex: 1,
  label: "",
  search: ""
};

// تعريف العناصر للتعامل معها
const dom = {
  loader: document.getElementById("loader"),
  list: document.getElementById("postsList"),
  btn: document.getElementById("loadMoreBtn"),
  search: document.getElementById("searchPosts"),
  filter: document.getElementById("filterLabel")
};

// إظهار وإخفاء أيقونة التحميل
const toggleLoader = (show) => dom.loader.style.display = show ? "block" : "none";

// دالة جلب البيانات باستخدام JSONP
function fetchPosts() {
  const scriptId = "jsonp-fetcher";
  // إزالة السكربت القديم إن وجد لمنع التداخل
  if (document.getElementById(scriptId)) document.getElementById(scriptId).remove();
  
  toggleLoader(true);
  dom.btn.style.display = "none"; // إخفاء الزر أثناء التحميل

  // بناء رابط الطلب API
  let api = `${config.blogUrl}/feeds/posts/default`;
  if (config.label) api += `/-/${encodeURIComponent(config.label)}`;
  
  api += `?alt=json-in-script&start-index=${config.startIndex}&max-results=${config.maxResults}&callback=renderArchive`;

  // حقن السكربت في الصفحة
  const script = document.createElement("script");
  script.src = api;
  script.id = scriptId;
  document.body.appendChild(script);
}

// دالة معالجة البيانات وعرضها
function renderArchive(data) {
  toggleLoader(false);
  const posts = data.feed.entry || [];
  
  // التحكم في ظهور زر المزيد
  if (posts.length < config.maxResults) dom.btn.style.display = "none";
  else dom.btn.style.display = "block";

  // حالة عدم وجود نتائج
  if (posts.length === 0 && config.startIndex === 1) {
    dom.list.innerHTML = `<div style="grid-column:1/-1;text-align:center;padding:30px;color:#666;">عذراً، لم يتم العثور على مقالات تطابق بحثك.</div>`;
    return;
  }

  // تكرار النتائج وبناء البطاقات
  posts.forEach(entry => {
    const title = entry.title.$t;
    // فلترة البحث المحلية
    if (config.search && !title.toLowerCase().includes(config.search.toLowerCase())) return;

    const link = entry.link.find(l => l.rel === "alternate").href;
    const date = new Date(entry.published.$t).toLocaleDateString('ar-EG');
    const cat = entry.category ? entry.category[0].term : "عام";
    
    // استخراج الصورة بجودة مناسبة
    let img = "https://via.placeholder.com/300x180?text=No+Image";
    if (entry.media$thumbnail) {
      img = entry.media$thumbnail.url.replace("s72-c", "w300-h180-p");
    } else if (entry.content) {
      const match = entry.content.$t.match(/src="([^"]+)"/);
      if (match) img = match[1];
    }

    const html = `
      <div class="post-item">
        <a href="${link}" title="${title}">
          <img src="${img}" loading="lazy" alt="${title}" />
          <h3>${title}</h3>
        </a>
        <div class="post-meta">
          <span>${date}</span>
          <span class="post-cat">${cat}</span>
        </div>
      </div>
    `;
    dom.list.insertAdjacentHTML("beforeend", html);
  });
  
  config.startIndex += config.maxResults;
}

// تفعيل المستمعات (Events)
dom.search.addEventListener("input", function() {
  config.search = this.value.trim();
  config.startIndex = 1;
  dom.list.innerHTML = "";
  fetchPosts();
});

dom.filter.addEventListener("change", function() {
  config.label = this.value;
  config.startIndex = 1;
  dom.list.innerHTML = "";
  fetchPosts();
});

dom.btn.addEventListener("click", fetchPosts);

// التشغيل الأولي
fetchPosts();
</script>

ملاحظة هامة جداً: لكي يعمل السكربت بنجاح، يجب عليك تعديل السطر الثاني في كود JavaScript واستبدال الرابط https://www.eltiqni.com برابط مدونتك الخاصة. أيضاً في كود HTML، تأكد من تعديل خيارات <option> لتطابق أسماء الأقسام الموجودة في مدونتك.

الأسئلة الشائعة حول صفحة الأرشيف (FAQ)

لماذا لا تظهر الصور المصغرة لبعض المقالات؟

يعتمد السكربت على الصورة الأولى في المقال أو الصورة البارزة. تأكد من إعدادات "خلاصة الموقع" في بلوجر وأنها مضبوطة على "كامل" أو "قصير" وليس "لا شيء".

كيف أضيف أقساماً جديدة للقائمة المنسدلة؟

ببساطة، في تبويب HTML، قم بنسخ سطر <option> وكرره، ثم غير القيمة (value) لتطابق اسم التسمية (Label) في مدونتك تماماً.

هل يؤثر هذا الكود على سرعة موقعي؟

على العكس تماماً، الكود يستخدم تقنية التحميل غير المتزامن (Asynchronous Loading) ولا يجلب الصور إلا عند ظهورها، مما يجعله خفيفاً جداً مقارنة بالأرشيف التقليدي.

ماذا أفعل إذا ظهرت رسالة "لا توجد نتائج" دائماً؟

السبب الأكثر شيوعاً هو خطأ في كتابة رابط المدونة في كود JS. تأكد من كتابة الرابط بصيغة https://yourblog.com دون شرطة مائلة في النهاية.

هل يمكنني تغيير ألوان الصفحة لتناسب قالبي؟

نعم، الكود يستخدم متغير الألوان var(--linkB) بشكل افتراضي ليتماهى مع قالبك، ويمكنك تعديل الألوان يدوياً من تبويب CSS بسهولة.

الخلاصة

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

التقني بلوجر

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

لماذا تعتبر صفحة الفهرس الذكية ضرورة قصوى؟

معاينة حية للإضافة

المميزات التقنية والحصرية للكود

خطوات التركيب والدمج الصحيحة

الأسئلة الشائعة حول صفحة الأرشيف (FAQ)

الخلاصة

إرسال تعليق

الانضمام إلى المحادثة

الانضمام إلى المحادثة

تحميل Yacine TV ياسين تيفي TV الاصلي 2025 مجانا اخر اصدار

تحميل قالب بلوجر سهل المجاني | قالب خفيف مميز واحترافي

أفضل 5 تطبيقات للحصول على أرقام أمريكية مجانية لتفعيل الواتس اب

موقع معتز نت: الأفضل لتحميل البرامج المجانية والمدفوعة

مقارنة أرباح محتوى أدسنس العربي والأجنبي واستراتيجية لزيادة دخلك