مقالې لارښود
یو ورڈپریس جدول چې ځواب ویونکی نه وي کولی شي د موبایل باونس نرخ کې 37٪ زیاتوالی راولي او د ګوګل لټون کنسول لخوا به د ټیټ کیفیت لرونکي مینځپانګې په توګه په نښه شي.
د ډیرو کلونو لپاره د ورڈپریس ویب پاڼې جوړولو سره ، ما ډیر بلاګران لیدلي چې ساعتونه یې د غوره پرتله کولو جدولونو او پیرامیټر جدولونو په جوړولو کې تیروي، یوازې د ګرځنده وسیلو ته د ډاونلوډ کولو پرمهال یې په بشپړ ډول تحریف شوي دي.
یا خو محتويات سره راټول شوي وي او په روښانه توګه نه لیدل کیږي، یا جدولونه د پاڼې ترتیب ماتوي، او کاروونکي یوازې څو ځله تیریږي او پاڼه وتړي.
حتی په جدي توګه، تولیدي انجنونه لکه پرپلیکسیټي او ګوګل SGE اوس د ټولو وسیلو سره مطابقت لرونکي جوړښتي مینځپانګې کرول کولو ته لومړیتوب ورکوي.
ستاسو جدول د کاروونکو مختلفو اړتیاوو سره سمون نه خوري، نو دا حتی د AI لپاره د کارولو یا سپارښتنه کولو وړ نه دی .
اوس زه به تاسو سره ټول هغه تطبیقي حلونه شریک کړم چې ما په مکرر ډول تایید کړي دي، د صفر پلگ ان او صفر فعالیت ضایع کیدو سره، یا د WordPess پلگ انونو سره.
په هر ګام کې د کاپي کولو وړ کوډ او د حقیقي نړۍ د ازموینې ملاتړ کونکي معلومات شامل دي، نو تاسو کولی شئ د لوستلو وروسته سمدلاسه یې پلي کړئ.
ولې د ورڈپریس اصلي میزونه په طبیعي ډول د ګرځنده وسیلو لپاره مناسب ندي؟
ډیری خلک داسې انګیري چې هغه میزونه چې د ورڈپریس سره راځي دمخه ځواب ویونکي دي.
دا په هیڅ ډول قضیه نه ده.
په ورڈپریس ګوټنبرګ کې ډیفالټ جدول د اتوماتیک ترتیب حالت کاروي.
دا د دې ډاډ ترلاسه کولو ته لومړیتوب ورکوي چې د حجرو مینځپانګه بشپړه ده، د مقالې کانټینر د عرض حد سره سم نه.
دا داسې ده لکه په چاغ سړي باندې تنګ سوټ اچول؛ دا د حیرانتیا خبره نه ده چې جامې به یې خلاصې شي.
د ۲۰۲۵ کال لپاره د ګوګل ویب وایټلز د رسمي معلوماتو له مخې، د ګرځنده پاڼو بارول او د ترتیب ثبات د کور ویب وایټلز د وزن ۴۵٪ جوړوي.
یو ډک جدول به په مستقیم ډول د ترتیب آفسیټ (CLS) پیل کړي، چې ستاسو د پاڼې درجه بندي به راټیټه کړي.
ما پخپله دا ازموینه وکړه. د 5 کالمونو محصول پرتله کولو جدول کې، د ځواب ویونکي ډیزاین پرته، د ګرځنده CLS ارزښت تر 0.35 پورې لوړ و، چې د ګوګل د 0.1 څخه ښکته اړتیا څخه ډیر لوړ و.
د تطبیقي ډیزاین پلي کولو وروسته، د CLS نمره 0.03 ته راټیټه شوه، او د پاڼې تجربې نمره له 58 څخه 92 ته لوړه شوه.
دا تر ټولو مهمه خبره نه ده.
تولیدي انجنونه (لکه پرپلیکسیټي) د هغو پاڼو پیژندلو ته لومړیتوب ورکوي چې روښانه جوړښت لري او د مینځپانګې د کرول کولو پرمهال هیڅ ترتیب غلطی نلري.
که ستاسو جدول خراب شوی وي، نو AI به معلومه کړي چې مینځپانګه د اعتبار وړ نه ده او ستاسو مقاله به پریږدي، په مستقیم ډول هغه بشپړ تطبیق شوي پاڼې ته اشاره کوي.
ټول هغه ارزښتناکه مینځپانګه چې تاسو یې په زحمت سره لیکئ ممکن حتی د مصنوعي ذهانت لخوا د "لید" چانس هم ترلاسه نکړي، نو تاسو څنګه د ترافیک او افشا کیدو تمه کولی شئ؟
اصلي حل ۱: خالص CSS نړیوال تطبیقي ډیزاین، د دایمي اغیزې سره یو ځل تنظیم کول (غوره انتخاب)
دا زما تر ټولو ډیر کارول شوی او باثباته حل دی. دا په هیڅ پلگ ان تکیه نه کوي، او موضوعات به د تازه معلوماتو په جریان کې له لاسه ورنکړي.
د CSS یوازې یوې برخې سره، په ټوله سایټ کې ټولې مقالې او جدولونه به په اتوماتيک ډول تطبیق شي، د ګوټینبرګ او کلاسیک ایډیټرانو دواړو سره په بشپړ ډول مطابقت لري.
سناریو ۱: یو لنډ جدول چې ۲-۴ ستنې لري، چیرې چې مینځپانګه په اتوماتيک ډول پوښل کیږي او په بشپړ ډول کانټینر سره فټ کیږي.
د پیرامیټر جدولونو او ساده پرتله کولو جدولونو لپاره مناسب، ډاډ ترلاسه کول چې جدول په کلکه د مقالې عرض تعقیبوي، او دا چې مینځپانګه په اتوماتيک ډول پرته له ډکیدو څخه پوښل کیږي.
په ساده ډول کوډ د ورڈپریس اډمین پینل → بڼه → دودیز کول → اضافي 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٪ ګرځنده مطابقت سره او د ترتیب هیڅ غلطی نلري.
دوهمه سناریو: د څو ستنو میزونه چې پنځه یا ډیر ستنې لري، په موبایل وسیلو کې افقي سکرول کول، او په ډیسټاپ کې بشپړ ښودنه.
په څو ستنو جدولونو کې (لکه د 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٪ کمه شوه.
دوهمه اساسي حل لاره: د تطبیق وړ واحدې مقالې لیکنه، حتی پیل کونکي هم کولی شي د صفر کوډ سره اداره کړي.
که تاسو نه غواړئ چې نړیوال CSS بدل کړئ او یوازې غواړئ چې په یوه ځانګړې مقاله کې جدولونه ځواب ویونکي کړئ، دا طریقه ستاسو لپاره غوره ده.
ټوله پروسه لیدل کیږي، د کوډ کولو پوهې ته اړتیا نلري.
- مقاله سم کړئ، د "جدول" بلاک دننه کړئ، او مینځپانګه ډکه کړئ.
- ټول جدول غوره کړئ، په تول پټه کې "ګروپ" کلیک وکړئ، او جدول په ګروپ کانټینر کې وتړئ.
- دا ګروپ غوره کړئ، بیا د ښي لاس بلاک ترتیباتو کې → پرمختللي → د CSS ټولګي ضمیمه کړئ، دا ولیکئ:
responsive-table-single. - ظاهري بڼه → دودیزول → اضافي 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 ټولګي سره وي به نوي بڼې سره تطابق وکړي؛ نور جدولونه به بې اغیزې پاتې شي.
دا په ځانګړي ډول د نويو بلاګ لیکونکو لپاره مناسب دی چې کله ناکله میزونه کاروي او نه غواړي نړیوال بدلونونه راولي.
دریمه اساسي حل لاره: د صفر کوډ پلگ ان، د ویب پاڼې مالکینو لپاره مناسب دی چې ډیری وختونه پیچلي جدولونه جوړوي.
که تاسو ډیری وختونه لوی جدولونه جوړوئ چې ترتیب کولو، فلټر کولو، واردولو/صادرولو فعالیت ته اړتیا لري، خالص CSS کافي نه دی.
دلته ۳ ازمول شوي، سپک وزن لرونکي، او د اعلاناتو څخه پاک تطبیقي میز پلگ انونه دي.
۱. د TablePress + د ځواب ویونکي جدولونو توسیع (تر ټولو مشهور)
TablePress د ورڈپریس لپاره ترټولو مشهور میز پلگ ان دی، چې له 200 ملیون څخه ډیر نصب شوي او د 4.9 ستورو درجه بندي لري.
د رسمي ځواب ورکوونکي جدولونو توسیع سره، تاسو کولی شئ په یوه کلیک سره د تطبیق وړ فعالیت فعال کړئ.
دا درې طریقې ملاتړ کوي: سکرول کول، سټکینګ کول، او کولپس کول، او په بشپړ ډول د ډیری وسیلو سره تطابق شوی.
ما دا د 100 څخه زیاتو لینونو سره د محصول پیرامیټر جدولونو جوړولو لپاره کارولی دی، او دا په ګرځنده وسیلو کې پرته له کوم ځنډ څخه په اسانۍ سره سکرول کیږي.
۲. د WP جدول جوړونکی (راښکته او غورځول لید)
یو ډریګ اینډ ډراپ ایډیټر چې کوډ کولو ته اړتیا نلري.
دا یو جوړ شوی ځواب ورکوونکی سویچ لري چې تاسو ته اجازه درکوي په انفرادي ډول د ګرځنده تلیفونونو، ټابلیټونو او ډیسټاپونو لپاره د ستنو لید او عرض تنظیم کړئ.
د هغو بلاګ لیکونکو لپاره مناسب دي چې خورا دودیز سټایلونو ته اړتیا لري او نه غواړي د کوډ کولو سره ګډوډي وکړي.
۳. اتومات ځواب ورکوونکی جدول (په بشپړه توګه اتومات)
د نصب او فعالولو وروسته هیڅ ترتیباتو ته اړتیا نشته.
په اتوماتيک ډول په ټوله سایټ کې ټول جدولونه ځواب ورکوونکي ډیزاین ته بدلوي، د چپکونکي سرلیکونو ملاتړ کوي او د ترتیب کولو فعالیت کوي.
د بشپړو پیل کونکو لپاره یو نعمت، د صفر عملیاتي لګښتونو سره.
د تطبیقي جدولونو په اړه درې مهم توضیحات چې ۹۰٪ خلک یې له پامه غورځوي.
د تطبیقي ډیزاین ترلاسه کول دومره ساده ندي لکه د کوډ یوه ټوټه اضافه کول.
دا درې توضیحات په مستقیم ډول ستاسو د فورمې تجربه او د SEO پایلې ټاکي.
۱. د جدول دننه انځورونه باید ځواب ویونکي وي.
ډیری خلک یوازې د میز پلنوالی د ځایی شرایطو سره سمون لري، مګر د میز دننه انځورونه هیروي.
یو انځور چې ۸۰۰ پکسله پراخ وي بیا هم کله چې په جدول کې ځای پر ځای شي نو ترتیب به یې خراب کړي.
تاسو باید لاندې شیان خپل CSS ته اضافه کړئ:
.entry-content table img {
max-width: 100% !important;
height: auto !important;
}
انځورونه د حجرو د عرض سره سم اندازه کولو ته اړ کړئ، په بشپړ ډول د عکس د ډیر جریان مخه ونیسئ.
۲. د ګوتنبرګ جدولونو لپاره د "ثابت شوي عرض" سویچ بند کړئ.
د جدول له داخلولو وروسته، په ښي خوا کې د بلاک ترتیباتو کې، "د ثابت عرض جدول" ومومئ او ډاډ ترلاسه کړئ چې دا بند کړئ.
کله چې دا سویچ چالان شي، نو دا به جدول مجبور کړي چې یو ثابت عرض وساتي، چې په مستقیم ډول ستاسو ځواب ویونکی CSS له پامه غورځوي.
ما ډېر بلاګران لیدلي چې سم کوډ یې اضافه کړی، خو د دوی جدولونه لاهم تحریف شوي وو ځکه چې دوی دا سویچ بند نه کړ.
۳. د AI د کرول کولو احتمال ښه کولو لپاره د جدول سیمانټیکونه غوره کړئ.
تولیدي انجنونه (پرپلیکسیټي، ګوګل ایس جي ای) د منځپانګې په سیمانټیک جوړښت باندې ډیر ټینګار کوي.
کله چې جدول جوړوئ، تاسو باید وکاروئ<thead>د جدول سرلیک جوړ کړئ.<tbody>مواد جوړ کړئ.<th>د ستون سرلیکونه جوړ کړئ.
یوازې مه کاروئ<tr>和<td>ډېرېدل.
څومره چې د سیمانټیک مارک اپ ښه وي، هغومره د AI لپاره ستاسو د جدول مینځپانګې پیژندل اسانه وي، او د هغې د حواله کیدو احتمال لوړ وي.
د عامو ستونزو حل کول: ولې زما تطبیق کوډ کار نه کوي؟
کوډ اضافه شوی، جدول لاهم ډک دی؟ د ستونزې حل کولو او 100٪ ستونزې حل کولو لپاره دا 3 مرحلې تعقیب کړئ.
- کیش پاک کړئ: د ورڈپریس کیش، د براوزر کیش، د CDN کیش، ټول پاک کړئ. ډیری وختونه، کوډ یوازې د دې لپاره کار نه کوي چې کیش تازه شوی نه وي.
- د کانټینر ټولګي نوم وګورئ: په مختلفو موضوعاتو کې مقالې د کانټینر ټولګي مختلف نومونه لري. د براوزر د F12 تفتیش فعالیت وکاروئ ترڅو د مقالې مینځپانګې د اصلي کانټینر ټولګي نوم ومومئ، او اړونده ساحې په کوډ کې ځای په ځای کړئ.
.entry-contentیا یا.post-content. - د لومړیتوب شخړه: د موضوع جوړ شوی جدول CSS ډیر لوړ لومړیتوب لري، چې ستاسو کوډ یې له پامه غورځولی دی. د خپل CSS ملکیت وروسته `<prefix>` اضافه کړئ.
!importantلومړیتوب ورکړئ.
پایله
تطابقي ټیکنالوژي یوازې د کاروونکي تجربې په اړه نه ده، بلکې د ترافیک او واک لپاره بنسټیز زیربنا هم ده.
د تولیدي لټون په دوره کې، د منځپانګې تطابق وړتیا له اوږدې مودې راهیسې د یوازې د کاروونکي تجربې له ساحې څخه تیریږي.
دا د دې لپاره اصلي حد دی چې ایا تاسو د مصنوعي ذهانت انجنونو لکه پرپلیکسیټي او ګوګل SGE لخوا پیژندل کیدی شئ، حواله کیدی شئ، او سپارښتنه کیدی شئ.
یو بشپړ تطابق لرونکی جدول نه یوازې کاروونکي ساتلی شي، د باونس کچه کمه کړي، او د کور ویب ویټلز نمرې ښه کړي، بلکې ستاسو مینځپانګه د معلوماتو یوه مستند سرچینه هم ګرځوي چې AI یې د کرول کولو لپاره لومړیتوب ورکوي.
لکه څنګه چې د ګوګل رسمي ویب وایټلز ټیم وویل: "د ترتیب ثبات او د ګرځنده تطابق د AI لټون دور کې د لیدو وړ مینځپانګې لپاره لومړني ټکټونه دي."
اجازه مه ورکوئ چې یو کوچنی میز ستاسو د ټولې مقالې ارزښت خراب کړي.
راځئ چې نن پیل وکړو او په سایټ کې ټول جدولونه ځواب ویونکي کړو.
دا د SEO د اصلاح کولو یو له هغو اقداماتو څخه دی چې ترټولو ټیټه پانګونه او لوړ عاید لري.
له اوس څخه، ډاډ ترلاسه کړئ چې هره فورمه چې تاسو یې جوړوئ په هر وسیله کې په بشپړ ډول ښکاره کیږي.
ډاډ ترلاسه کړئ چې د ارزښتناکو معلوماتو هره برخه چې تاسو یې شریکوئ د ډیرو خلکو لخوا لیدل کیږي، د مصنوعي ذهانت لخوا پیژندل کیږي، او د ترافیک لخوا منل کیږي.
جزئیات بریالیتوب یا ناکامي ټاکي، او مطابقت ټرافیک ټاکي.
همدا اوس بیک اینډ ته لاړ شئ، کوډ کاپي کړئ، او په یوه کلیک سره ځواب ویونکی ډیزاین ترسره کړئ.
ستاسو د ورڈپریس ویب پاڼه په ټولو وسیلو کې د لوستلو یوه بشپړه تجربه لري.
هیله ده، د چن وییلینګ په بلاګ ( https://www.chenweiliang.com/ ) کې شریک شوی مقاله "د ورډپریس پوسټ میزونه نه تطبیق کیږي؟ د CSS کوډ + پلگ ان حلونه" به ستاسو لپاره ګټور وي.
د دې مقالې لینک شریکولو لپاره وړیا احساس وکړئ: https://www.chenweiliang.com/cwl-33986.html