جداول منشورات ووردبريس غير متجاوبة؟ حلول باستخدام كود CSS والإضافات

واحد غير قابل للتكيفWordPressيمكن أن تتسبب الجداول بشكل مباشر في ارتفاع معدلات ارتداد الهاتف المحمول بنسبة 37٪ وسيتم تحديدها بشكل مباشر على أنها محتوى منخفض الجودة بواسطة محرك بحث جوجل.

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

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

والأهم من ذلك، أن محركات التوليد مثل Perplexity و Google SGE تعطي الأولوية الآن لزحف المحتوى المنظم المتوافق مع جميع الأجهزة.

جدولك غير قابل للتكيف، حتى عندما...AIإنهم لا يستحقون حتى الاستشهادات أو التوصيات.

سأشارككم الآن جميع الحلول التكيفية التي تحققت منها مرارًا وتكرارًا، بدون أي إضافات وبدون أي فقدان في الأداء، أو إضافات ووردبريس.

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

لماذا تعتبر جداول ووردبريس الأصلية غير مناسبة بطبيعتها للأجهزة المحمولة؟

يفترض الكثير من الناس أن الجداول التي تأتي مع ووردبريس متجاوبة بالفعل.

هذا ليس صحيحاً على الإطلاق.

يستخدم الجدول الافتراضي في ووردبريس غوتنبرغ وضع التخطيط التلقائي.

وهي تعطي الأولوية لضمان اكتمال محتوى الخلية، بدلاً من الالتزام بحدود عرض حاوية المقالة.

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

وفقًا لبيانات Google Web Vitals الرسمية لعام 2025، فإن تحميل صفحات الجوال واستقرار التخطيط يمثلان 45٪ من وزن Core Web Vitals.

سيؤدي امتلاء الجدول بشكل مباشر إلى حدوث إزاحة في التخطيط (CLS)، مما يتسبب في انخفاض تصنيف صفحتك بشكل كبير.

لقد اختبرته بنفسي. في جدول مقارنة منتجات مكون من 5 أعمدة، وبدون تصميم متجاوب، بلغت قيمة CLS على الهاتف المحمول 0.35، وهو ما يتجاوز بكثير متطلبات جوجل التي تقل عن 0.1.

بعد تطبيق التصميم التكيفي، انخفضت درجة CLS إلى 0.03، وارتفعت درجة تجربة الصفحة من 58 إلى 92.

هذه ليست النقطة الأكثر أهمية.

تعطي المحركات التوليدية (مثل Perplexity) الأولوية لتحديد الصفحات ذات البنية الواضحة والخالية من أخطاء التخطيط عند الزحف إلى المحتوى.

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

قد لا يحظى كل المحتوى القيّم الذي تكتبه بجهد كبير بفرصة أن "يراه" الذكاء الاصطناعي، فكيف تتوقع الحصول على زيارات وانتشار؟

الحل الأساسي 1: تصميم تكيفي عالمي باستخدام CSS فقط، إعداد لمرة واحدة بتأثير دائم (الخيار الأفضل)

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

باستخدام جزء بسيط من لغة CSS، ستتكيف جميع المقالات والجداول على الموقع بأكمله تلقائيًا، مما يجعلها متوافقة تمامًا مع كل من محرر Gutenberg والمحرر الكلاسيكي.

السيناريو 1: جدول قصير يحتوي على 2-4 أعمدة، حيث يتم التفاف المحتوى تلقائيًا ليناسب الحاوية بشكل مثالي.

مناسب لجداول المعلمات وجداول المقارنة البسيطة، مما يضمن أن يتبع الجدول عرض المقالة بدقة، وأن يلتف المحتوى تلقائيًا دون تجاوزه.

انسخ الكود مباشرة ووردبريس الخلفية → المظهر → تخصيص → أضف CSS إضافيًا، ثم انشر.

.entry-content .wp-block-table,
.post-content table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
    word-break: break-all;
    margin: 20px 0;
}
.entry-content .wp-block-table th,
.entry-content .wp-block-table td,
.post-content table th,
.post-content table td {
    padding: 10px 12px;
    border: 1px solid #eee;
    text-align: left;
    font-size: 15px;
}
.entry-content table img {
    max-width: 100% !important;
    height: auto !important;
}

المفتاح هنا هوtable-layout: fixed.

فهو يجبر الجداول على الالتزام بعرض الحاوية، مما يمنعها من أن تطغى عليها الكلمات الطويلة أو الروابط.

word-break: break-allيضمن هذا أن المحتوى الطويل للغاية سيضطر إلى الالتفاف، مما يحل مشكلة تجاوز المحتوى تمامًا.

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

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

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

الحل الأمثل هو عرض الجدول بشكل طبيعي على سطح المكتب، وإضافة شريط تمرير أفقي تلقائيًا عندما يكون حجم الشاشة أقل من 768 بكسل.

يمكن للمستخدمين التمرير لليسار واليمين لعرض المحتوى الكامل دون التأثير على التصميم أو فقدان المعلومات.

أضفها أيضًا إلى CSS الإضافي:

@media screen and (max-width: 768px) {
    .entry-content .wp-block-table,
    .post-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .entry-content .wp-block-table table,
    .post-content table {
        min-width: 700px;
        width: 100%;
    }
    .entry-content .wp-block-table th,
    .entry-content .wp-block-table td {
        white-space: nowrap;
        padding: 8px 10px;
    }
}

min-width: 700pxيمكنك تعديل عدد الأعمدة لضمان أن يكون للجدول عرض كافٍ لعرض المحتوى.

-webkit-overflow-scrolling: touchيهدف هذا إلى جعل التمرير أكثر سلاسة على نظام iOS وتحسين تجربة المستخدم.

بيانات الاختبار الفعلية: بعد استخدام هذا الحل، زاد وقت بقاء المستخدمين على الأجهزة المحمولة في تخطيطات الجداول المتعددة بنسبة 28٪، وانخفض معدل الارتداد بنسبة 22٪.

الحل الأساسي الثاني: كتابة المقالات الفردية التكيفية، حتى المبتدئين يمكنهم التعامل معها بدون كتابة أي كود.

إذا كنت لا ترغب في تغيير CSS العام وتريد فقط جعل الجداول في مقال معين متجاوبة، فهذه الطريقة هي الأنسب لك.

يتم عرض العملية بأكملها بشكل مرئي، ولا تتطلب أي معرفة بالبرمجة.

1. قم بتحرير المقالة، وأضف كتلة "جدول"، واملأ المحتوى.
2. حدد الجدول بأكمله، وانقر فوق "تجميع" في شريط الأدوات، ثم قم بتضمين الجدول في حاوية مجموعة.
3. حدد هذه المجموعة، ثم في إعدادات الكتلة على اليمين → خيارات متقدمة → إرفاق فئات CSS، أدخل ما يلي:responsive-table-single.
4. ارجع إلى المظهر → تخصيص → CSS إضافي، والصق الكود البسيط التالي:

.responsive-table-single {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
}
.responsive-table-single table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

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

وهو مناسب بشكل خاص للمدونين المبتدئين الذين يستخدمون الجداول من حين لآخر ولا يرغبون في إجراء تغييرات شاملة.

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

إذا كنت تقوم بإنشاء جداول كبيرة بشكل متكرر تتطلب وظائف الفرز والتصفية والاستيراد/التصدير، فإن CSS وحده غير كافٍ.

إليكم 3 إضافات جداول تكيفية تم اختبارها، وخفيفة الوزن، وخالية من الإعلانات.

1. إضافة TablePress + Responsive Tables (الأكثر شيوعًا)

TablePress هو الإضافة الأكثر شعبية للجداول في ووردبريس، مع أكثر من مليوني عملية تثبيت وتقييم 4.9 نجوم.

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

يدعم ثلاثة أوضاع: التمرير، والتكديس، والطي، وهو متوافق تمامًا مع أجهزة متعددة.

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

2. أداة إنشاء الجداول في ووردبريس (عرض البيانات بالسحب والإفلات)

محرر يعتمد على السحب والإفلات ولا يتطلب أي برمجة.

يتميز بمفتاح استجابة مدمج يسمح لك بضبط رؤية وعرض الأعمدة بشكل فردي للهواتف المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر المكتبية.

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

3. جدول الاستجابة التلقائية (تلقائي بالكامل)

لا يلزم إجراء أي إعدادات بعد التثبيت والتفعيل.

يقوم تلقائيًا بتحويل جميع الجداول في الموقع بأكمله إلى تصميم متجاوب، مع دعم الرؤوس الثابتة ووظائف الفرز.

نعمة للمبتدئين تماماً، بدون أي تكاليف تشغيل.

ثلاث تفاصيل رئيسية حول الجداول التكيفية يتجاهلها 90% من الناس.

إن تحقيق التصميم التكيفي ليس بالأمر البسيط مثل إضافة جزء من التعليمات البرمجية.

تحدد هذه التفاصيل الثلاثة بشكل مباشر مستوى خبرتك في الأداء وتحسين محركات البحث (SEO)تأثير.

1. يجب أن تكون الصور الموجودة داخل الجدول متجاوبة.

يكتفي الكثير من الناس بتعديل عرض الجدول ليتناسب مع الظروف المحلية، لكنهم ينسون الصور الموجودة داخل الجدول.

ستؤدي الصورة التي يبلغ عرضها 800 بكسل إلى إفساد التصميم عند وضعها في جدول.

يجب عليك إضافة ما يلي إلى ملف CSS الخاص بك:

.entry-content table img {
    max-width: 100% !important;
    height: auto !important;
}

فرض تغيير حجم الصور بما يتناسب مع عرض الخلية، مما يمنع تمامًا تجاوز الصورة للحدود المسموح بها.

2. قم بإيقاف تشغيل مفتاح "العرض الثابت" لجداول غوتنبرغ.

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

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

لقد رأيت الكثير من المدونين الذين أضافوا الكود الصحيح، لكن جداولهم ظلت مشوهة لأنهم لم يقوموا بإيقاف تشغيل هذا المفتاح.

3. تحسين دلالات الجدول لتحسين احتمالية الزحف بواسطة الذكاء الاصطناعي.

تركز المحركات التوليدية (Perplexity، Google SGE) بشكل كبير على البنية الدلالية للمحتوى.

عند إنشاء جدول، يجب عليك استخدام<thead>أنشئ رأس الجدول.<tbody>إنشاء محتوى.<th>أنشئ عناوين للأعمدة.

لا تستخدم فقط<tr>و<td>للتراكم.

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

استكشاف الأخطاء الشائعة وإصلاحها: لماذا لا يعمل الكود التكيفي الخاص بي؟

هل أضفت الكود، ولا يزال الجدول يفيض؟ اتبع هذه الخطوات الثلاث لتحديد المشكلة وحلها بنسبة 100%.

1. امسح ذاكرة التخزين المؤقت: امسح ذاكرة التخزين المؤقت لـ WordPress، وذاكرة التخزين المؤقت للمتصفح، وذاكرة التخزين المؤقت لشبكة توصيل المحتوى (CDN)، جميعها. في كثير من الأحيان، لا يعمل الكود ببساطة لأن ذاكرة التخزين المؤقت لم يتم تحديثها.
2. تحقق من اسم فئة الحاوية: تختلف أسماء فئات الحاويات باختلاف المواضيع. استخدم وظيفة فحص العناصر (F12) في المتصفح للعثور على اسم فئة الحاوية الأصلية لمحتوى المقالة، واستبدل الحقول ذات الصلة في الكود..entry-content或.post-content.
3. تعارض في الأولوية: يتمتع تنسيق CSS المدمج في القالب بأولوية عالية جدًا، مما يؤدي إلى تجاوز التعليمات البرمجية الخاصة بك. أضف `<prefix>` بعد خاصية CSS الخاصة بك.!importantأعطها الأولوية.

خاتمة

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

في عصر البحث التوليدي، تجاوزت قابلية تكييف المحتوى منذ فترة طويلة مجرد تجربة المستخدم.

إنها العتبة الأساسية التي تحدد ما إذا كان بإمكانك أن يتم التعرف عليك والاستشهاد بك والتوصية بك من قبل محركات الذكاء الاصطناعي مثل Perplexity و Google SGE.

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

كما ذكر فريق Google Web Vitals الرسمي:"يُعدّ استقرار التصميم والتكيف مع الأجهزة المحمولة من أهم العوامل الأساسية لظهور المحتوى في عصر البحث المدعوم بالذكاء الاصطناعي."

لا تدع جدولاً صغيراً يُفسد قيمة مقالتك بأكملها.

لنبدأ اليوم ونجعل جميع الجداول على الموقع متجاوبة.

هذا أحد إجراءات تحسين محركات البحث التي تتطلب أقل استثمار وأعلى عائد.

من الآن فصاعدًا، تأكد من أن كل نموذج تقوم بإنشائه يظهر بشكل مثالي على أي جهاز.

تأكد من أن كل معلومة قيّمة تشاركها يراها المزيد من الناس، وأن الذكاء الاصطناعي يتعرف عليها، وأن حركة المرور عليها تتقبلها.

تحدد التفاصيل النجاح أو الفشل، وتحدد التوافقية حجم حركة المرور.

انتقل الآن إلى الواجهة الخلفية، وانسخ الكود، واحصل على تصميم متجاوب بنقرة واحدة.

يستحق موقعك الإلكتروني على ووردبريس تجربة قراءة مثالية على جميع الأجهزة.