ورڈپریس پوسٽ ٽيبل جوابي نه آهن؟ سي ايس ايس ڪوڊ + پلگ ان حل

هڪ غير موافقWordPressٽيبل سڌو سنئون موبائل باؤنس ريٽ ۾ 37 سيڪڙو واڌ جو سبب بڻجي سگهن ٿا ۽ گوگل ايس جي اي پاران سڌو سنئون گهٽ معيار واري مواد جي طور تي سڃاڻپ ڪئي ويندي.

我做ورڈپریس ويب سائيٽڪيترن سالن کان، مون ڏٺو آهي ته ڪيترائي بلاگر شاندار مقابلي واري جدول ۽ پيرا ميٽر ٽيبل ٺاهڻ ۾ ڪلاڪ گذاريندا آهن، صرف موبائل ڊوائيسز تي ڏسڻ وقت انهن کي مڪمل طور تي مسخ ڪيو ويندو آهي.

يا ته مواد گڏ ٿيل آهي ۽ صاف نظر نٿو اچي، يا ٽيبل صفحي جي ترتيب کي ٽوڙين ٿا، ۽ استعمال ڪندڙ صرف ٻه ڀيرا سوائپ ڪن ٿا ۽ صفحو بند ڪن ٿا.

اڃا به وڌيڪ نازڪ طور تي، جنريٽو انجن جهڙوڪ پرپليڪسٽي ۽ گوگل ايس جي اي هاڻي ڪرولنگ اسٽرڪچرڊ مواد کي ترجيح ڏين ٿا جيڪو سڀني ڊوائيسز سان مطابقت رکي ٿو.

توهان جي ٽيبل موافق نه آهي، جيتوڻيڪ جڏهن...AIاهي حوالن يا سفارشن جي به اهل نه آهن.

هاڻي مان توهان سان اهي سڀئي موافق حل شيئر ڪرڻ وارو آهيان جن جي مون بار بار تصديق ڪئي آهي، صفر پلگ ان ۽ صفر ڪارڪردگي نقصان، يا WordPess پلگ ان سان.

هر قدم ۾ سڌو سنئون ڪاپي ڪرڻ لائق ڪوڊ ۽ حقيقي دنيا جي ٽيسٽ ڊيٽا جي حمايت شامل آهي، تنهنڪري توهان ان کي پڙهڻ کان پوءِ فوري طور تي لاڳو ڪري سگهو ٿا.

ورڈپریس جا اصلي ٽيبل موبائل ڊوائيسز لاءِ فطري طور تي غير مناسب ڇو آهن؟

ڪيترائي ماڻهو اهو سمجهن ٿا ته ورڈپریس سان گڏ ايندڙ ٽيبل اڳ ۾ ئي جوابدار آهن.

اهو بلڪل به معاملو ناهي.

ورڈپریس گٽنبرگ ۾ ڊفالٽ ٽيبل خودڪار لي آئوٽ موڊ استعمال ڪري ٿو.

اهو آرٽيڪل ڪنٽينر جي ويڪر جي حد تي عمل ڪرڻ جي بدران، سيل مواد جي مڪمل هجڻ کي يقيني بڻائڻ کي ترجيح ڏئي ٿو.

اهو هڪ ٿلهي ماڻهوءَ تي ٽائيٽ فٽنگ وارو سوٽ پائڻ جهڙو آهي؛ اهو ڪو تعجب جي ڳالهه ناهي ته ڪپڙا ڦاٽي پوندا.

2025 جي سرڪاري گوگل ويب وائيٽلز ڊيٽا موجب، موبائل پيج لوڊنگ ۽ لي آئوٽ استحڪام ڪور ويب وائيٽلز جي وزن جو 45 سيڪڙو آهي.

هڪ اوور فلو ٽيبل سڌو سنئون هڪ لي آئوٽ آفسيٽ (CLS) کي متحرڪ ڪندو، جنهن جي ڪري توهان جي صفحي جي درجه بندي گهٽجي ويندي.

مون پاڻ ان کي آزمايو. 5 ڪالمن واري پراڊڪٽ جي مقابلي واري ٽيبل ۾، جوابي ڊيزائن کان سواءِ، موبائل CLS ويليو 0.35 جيترو وڌيڪ هو، جيڪو گوگل جي 0.1 کان گهٽ جي ضرورت کان تمام گهڻو وڌيڪ هو.

اڊاپٽو ڊيزائن لاڳو ڪرڻ کان پوءِ، CLS اسڪور گهٽجي 0.03 ٿي ويو، ۽ صفحي جي تجربي جو اسڪور 58 کان وڌي 92 ٿي ويو.

اهو سڀ کان اهم نقطو ناهي.

جنريٽو انجن (جهڙوڪ پرپليڪسٽي) صاف ساخت وارن صفحن جي سڃاڻپ کي ترجيح ڏين ٿا ۽ مواد کي ڪرال ڪرڻ وقت ڪنهن به لي آئوٽ غلطي جي ضرورت ناهي.

جيڪڏهن توهان جي ٽيبل خراب ٿيل آهي، ته AI اهو طئي ڪندو ته مواد ناقابل اعتبار آهي ۽ توهان جي مضمون کي ڇڏي ڏيندو، سڌو سنئون انهن مڪمل طور تي ترتيب ڏنل صفحن جو حوالو ڏيندو.

سڀ قيمتي مواد جيڪو توهان محنت سان لکندا آهيو، شايد ان کي AI پاران "ڏسڻ" جو موقعو به نه ملي، پوءِ توهان ٽرئفڪ ۽ نمائش جي اميد ڪيئن ڪري سگهو ٿا؟

بنيادي حل 1: خالص CSS گلوبل اڊاپٽيو ڊيزائن، مستقل اثر سان هڪ وقت جي سيٽنگ (مٿيون چونڊ)

هي منهنجو سڀ کان وڌيڪ استعمال ٿيندڙ ۽ مستحڪم حل آهي. اهو ڪنهن به پلگ ان تي ڀروسو نٿو ڪري، ۽ اپڊيٽ دوران ٿيمز گم نه ٿيندا.

صرف CSS جي هڪ ٽڪري سان، پوري سائيٽ تي سڀئي آرٽيڪل ۽ ٽيبل پاڻمرادو ترتيب ڏئي ويندا، گٽنبرگ ۽ ڪلاسڪ ايڊيٽرن ٻنهي سان مڪمل طور تي مطابقت رکن ٿا.

منظرنامو 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+ مضمونن لاءِ ٽيبلن کي پروسيس ڪرڻ لاءِ استعمال ڪيو آهي، 100٪ موبائل مطابقت سان ۽ ڪا به لي آئوٽ غلطي ناهي.

منظرنامو 2: 5 يا وڌيڪ ڪالمن سان گڏ گھڻ-ڪالمن واريون ٽيبلون، موبائل ڊوائيسز تي افقي اسڪرولنگ، ۽ ڊيسڪ ٽاپ تي مڪمل ڊسپلي.

گھڻن-ڪالمن واري جدولن ۾ (جهڙوڪ 8-ڪالمن واري فنڪشن جي مقابلي واري جدول)، جيڪڏهن لائين بريڪ کي مجبور ڪيو وڃي، ته مواد پڙهڻ لاءِ تمام گهڻو تنگ ٿي ويندو.

بهترين حل اهو آهي ته ٽيبل کي ڊيسڪ ٽاپ تي عام طور تي ڏيکاريو وڃي، ۽ جڏهن اسڪرين جي سائيز 768px کان گهٽ هجي ته خودڪار طريقي سان هڪ افقي اسڪرول بار شامل ڪيو وڃي.

استعمال ڪندڙ لي آئوٽ ۾ خلل وجهڻ يا معلومات وڃائڻ کان سواءِ مڪمل مواد ڏسڻ لاءِ کاٻي ۽ ساڄي طرف سوائپ ڪري سگهن ٿا.

ان کي اضافي 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 سيڪڙو گهٽجي ويو.

بنيادي حل 2: موافقت وارو سنگل آرٽيڪل لکڻ، شروعات ڪندڙ به صفر ڪوڊ سان منظم ڪري سگهن ٿا.

جيڪڏهن توهان عالمي CSS کي تبديل ڪرڻ نٿا چاهيو ۽ صرف هڪ مخصوص مضمون ۾ ٽيبلن کي جوابده بڻائڻ چاهيو ٿا، ته هي طريقو توهان لاءِ بهترين آهي.

سڄو عمل تصوراتي آهي، جنهن کي ڪوڊنگ جي ڄاڻ جي ضرورت ناهي.

1. مضمون کي ايڊٽ ڪريو، "ٽيبل" بلاڪ داخل ڪريو، ۽ مواد ڀريو.
2. پوري ٽيبل کي چونڊيو، ٽول بار ۾ "گروپ" تي ڪلڪ ڪريو، ۽ ٽيبل کي گروپ ڪنٽينر ۾ لپيٽيو.
3. هن گروپ کي چونڊيو، پوءِ ساڄي هٿ واري بلاڪ سيٽنگز ۾ → ايڊوانسڊ → اٽيچ سي ايس ايس ڪلاسز، داخل ڪريو: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. ٽيبل پريس + ريسپانسو ٽيبل ايڪسٽينشن (سڀ کان وڌيڪ مشهور)

ٽيبل پريس ورڈپریس لاءِ سڀ کان وڌيڪ مشهور ٽيبل پلگ ان آهي، جنهن ۾ 200 ملين کان وڌيڪ انسٽاليشن ۽ 4.9 اسٽار ريٽنگ آهي.

سرڪاري ريسپانسو ٽيبل ايڪسٽينشن سان، توهان هڪ ڪلڪ سان ايڊاپٽو ڪارڪردگي کي فعال ڪري سگهو ٿا.

اهو ٽن طريقن کي سپورٽ ڪري ٿو: اسڪرولنگ، اسٽيڪنگ، ۽ ڪلاپنگ، ۽ ڪيترن ئي ڊوائيسز لاءِ مڪمل طور تي ترتيب ڏنل آهي.

مون ان کي 100 کان وڌيڪ لائينن سان پراڊڪٽ پيرا ميٽر ٽيبل ٺاهڻ لاءِ استعمال ڪيو آهي، ۽ اهو موبائل ڊوائيسز تي بغير ڪنهن وقفي جي آساني سان اسڪرول ڪري ٿو.

2. WP ٽيبل بلڊر (ڊريگ اينڊ ڊراپ ويزوئلائيزيشن)

هڪ ڊريگ اينڊ ڊراپ ايڊيٽر جنهن کي ڪوڊنگ جي ضرورت ناهي.

ان ۾ هڪ بلٽ ان ريسپانسو سوئچ آهي جيڪو توهان کي موبائل فون، ٽيبليٽ ۽ ڊيسڪ ٽاپ لاءِ ڪالمن جي نمائش ۽ ويڪر کي انفرادي طور تي ترتيب ڏيڻ جي اجازت ڏئي ٿو.

انهن بلاگرز لاءِ موزون آهي جن کي انتهائي ترتيب ڏيڻ واري انداز جي ضرورت آهي ۽ ڪوڊنگ سان گڙٻڙ نٿا ڪرڻ چاهين.

3. خودڪار جوابي ٽيبل (مڪمل طور تي خودڪار)

انسٽاليشن ۽ چالو ٿيڻ کان پوءِ ڪا به سيٽنگ گهربل ناهي.

پوري سائيٽ تي سڀني ٽيبلن کي خودڪار طريقي سان جوابي ڊيزائن ۾ تبديل ڪري ٿو، اسٽڪي هيڊرز ۽ ترتيب ڏيڻ جي ڪارڪردگي کي سپورٽ ڪري ٿو.

مڪمل شروعات ڪندڙن لاءِ هڪ نعمت، صفر آپريٽنگ خرچن سان.

موافق ٽيبلن بابت ٽي اهم تفصيل جيڪي 90 سيڪڙو ماڻهو نظرانداز ڪن ٿا.

موافق ڊيزائن حاصل ڪرڻ ڪوڊ جو هڪ ٽڪرو شامل ڪرڻ جيترو سادو ناهي.

اهي 3 تفصيل سڌو سنئون توهان جي فارم جي تجربي جو تعين ڪن ٿا ۽SEOاثر

1. ٽيبل اندر تصويرون جوابي هجڻ گهرجن.

گھڻا ماڻهو صرف ٽيبل جي ويڪر کي مقامي حالتن مطابق ٺاهيندا آهن، پر ٽيبل جي اندر جي تصويرن کي وساري ڇڏيندا آهن.

هڪ تصوير جيڪا 800 پڪسل ويڪري آهي، ٽيبل ۾ رکڻ تي به لي آئوٽ کي ٽوڙيندي.

توهان کي پنهنجي CSS ۾ هيٺ ڏنل شيون شامل ڪرڻ گهرجن:

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

تصويرن کي سيل جي ويڪر سان ماپڻ تي مجبور ڪريو، مڪمل طور تي تصوير جي اوور فلو کي روڪيو.

2. گٽنبرگ ٽيبلن لاءِ "فڪسڊ ويڊٿ" سوئچ بند ڪريو.

ٽيبل داخل ڪرڻ کان پوءِ، ساڄي پاسي بلاڪ سيٽنگز ۾، "فڪسڊ ويڊٿ ٽيبل" ڳوليو ۽ ان کي بند ڪرڻ جي پڪ ڪريو.

جڏهن هي سوئچ آن ڪيو ويندو، ته اهو ٽيبل کي هڪ مقرر ويڪر برقرار رکڻ تي مجبور ڪندو، سڌو سنئون توهان جي جوابي CSS کي اوور رائڊ ڪندو.

مون ڪيترائي بلاگر ڏٺا آهن جن صحيح ڪوڊ شامل ڪيو، پر انهن جا ٽيبل اڃا تائين مسخ ٿيل هئا ڇاڪاڻ ته انهن هن سوئچ کي بند نه ڪيو.

3. AI ڪرولنگ جي امڪان کي بهتر بڻائڻ لاءِ ٽيبل سيمينٽڪس کي بهتر بڻايو.

جنريٽو انجن (پرپليڪسٽي، گوگل ايس جي اي) مواد جي معنوي بناوت تي تمام گهڻو زور ڏين ٿا.

ٽيبل ٺاهڻ وقت، توهان کي استعمال ڪرڻ گهرجي<thead>ٽيبل هيڊر ٺاهيو.<tbody>مواد ٺاهيو.<th>ڪالمن جا عنوان ٺاهيو.

صرف استعمال نه ڪريو<tr>۽<td>ڍير ڪرڻ.

سيمينٽڪ مارڪ اپ جيترو بهتر هوندو، اوترو ئي AI لاءِ توهان جي ٽيبل جي مواد کي سڃاڻڻ آسان هوندو، ۽ ان جي حوالي سان اچڻ جو امڪان اوترو ئي وڌيڪ هوندو.

عام مسئلن کي حل ڪرڻ: منهنجو ايڊاپٽو ڪوڊ ڇو ڪم نٿو ڪري؟

ڪوڊ شامل ڪيو ويو، ٽيبل اڃا تائين ڀرجي وئي؟ مسئلو حل ڪرڻ ۽ 100٪ حل ڪرڻ لاءِ انهن 3 مرحلن تي عمل ڪريو.

1. ڪيش صاف ڪريو: ورڈپریس ڪيش، برائوزر ڪيش، سي ڊي اين ڪيش، سڀ صاف ڪريو. گهڻو ڪري، ڪوڊ صرف ان ڪري ڪم نٿو ڪري جو ڪيش اپڊيٽ نه ڪيو ويو آهي.
2. ڪنٽينر ڪلاس جو نالو چيڪ ڪريو: مختلف موضوعن تي آرٽيڪلز جا مختلف ڪنٽينر ڪلاس جا نالا آهن. آرٽيڪل مواد جي والدين ڪنٽينر ڪلاس جو نالو ڳولڻ لاءِ برائوزر جي F12 انسپيڪشن فنڪشن استعمال ڪريو، ۽ ڪوڊ ۾ لاڳاپيل فيلڊز کي تبديل ڪريو..entry-contentيا نه.post-content.
3. ترجيحي تڪرار: موضوع جي بلٽ ان ٽيبل CSS ۾ تمام گهڻي ترجيح آهي، جيڪا توهان جي ڪوڊ کي اوور رائڊ ڪري ٿي. پنهنجي CSS ملڪيت کان پوءِ `<prefix>` شامل ڪريو.!importantان کي ترجيح ڏيو.

نتيجو

موافقت واري ٽيڪنالاجي صرف استعمال ڪندڙ جي تجربي بابت ناهي، پر ٽرئفڪ ۽ اختيار لاءِ بنيادي ڍانچي بابت پڻ آهي.

پيداواري ڳولا جي دور ۾، مواد جي موافقت ڊگهي عرصي کان صرف صارف جي تجربي جي دائري کان ٻاهر نڪري چڪي آهي.

اهو بنيادي حد آهي ته ڇا توهان کي سڃاڻي سگهجي ٿو، حوالو ڏئي سگهجي ٿو، ۽ AI انجن جهڙوڪ Perplexity ۽ Google SGE پاران سفارش ڪري سگهجي ٿو.

هڪ مڪمل طور تي موافق ٽيبل نه رڳو استعمال ڪندڙن کي برقرار رکي سگهي ٿو، باؤنس ريٽ گهٽائي سگهي ٿو، ۽ ڪور ويب وائيٽلز اسڪور کي بهتر بڻائي سگهي ٿو، پر توهان جي مواد کي معلومات جو هڪ مستند ذريعو پڻ بڻائي سگهي ٿو جنهن کي AI ڪرولنگ لاءِ ترجيح ڏئي ٿو.

جيئن سرڪاري گوگل ويب وائيٽلز ٽيم پاران چيو ويو آهي:"لي آئوٽ استحڪام ۽ موبائل موافقت AI سرچ دور ۾ مواد جي نمائش حاصل ڪرڻ لاءِ بنيادي ٽڪيٽون آهن."

هڪ ننڍڙي ٽيبل کي پنهنجي پوري مضمون جي قيمت خراب ڪرڻ نه ڏيو.

اچو ته اڄ ئي شروع ڪريون ۽ سائيٽ تي سڀني ٽيبلن کي جوابي بڻايون.

هي ايس اي او اصلاح جي عملن مان هڪ آهي جنهن ۾ گهٽ ۾ گهٽ سيڙپڪاري ۽ سڀ کان وڌيڪ واپسي آهي.

هاڻي کان، پڪ ڪريو ته توهان جو ٺاهيل هر فارم ڪنهن به ڊوائيس تي مڪمل طور تي ظاهر ٿئي.

پڪ ڪريو ته توهان جي شيئر ڪيل قيمتي معلومات جو هر ٽڪرو وڌيڪ ماڻهن طرفان ڏٺو وڃي، AI پاران سڃاتو وڃي، ۽ ٽرئفڪ طرفان قبول ڪيو وڃي.

تفصيل ڪاميابي يا ناڪامي جو تعين ڪن ٿا، ۽ مطابقت ٽرئفڪ جو تعين ڪري ٿي.

هاڻي بيڪ اينڊ تي وڃو، ڪوڊ ڪاپي ڪريو، ۽ هڪ ڪلڪ سان جوابي ڊيزائن مڪمل ڪريو.

توهان جي ورڈپریس ويب سائيٽ سڀني ڊوائيسز تي هڪ بهترين پڙهڻ جي تجربي جي مستحق آهي.