Табліцы пастоў WordPress не адаптыўныя? CSS-код + рашэнні з плагінамі

НеадаптыўныWordPressТабліцы могуць непасрэдна прывесці да павелічэння паказчыка адмоваў на мабільных прыладах на 37% і будуць непасрэдна ідэнтыфікаваны Google SGE як кантэнт нізкай якасці.

我做Вэб-сайт WordPressЗа гады працы я бачыў, як занадта шмат блогераў гадзінамі стваралі вытанчаныя параўнальныя табліцы і табліцы параметраў, а на мабільных прыладах яны выглядалі цалкам скажонымі.

Альбо змест скучаны і яго цяжка разгледзець, альбо табліцы парушаюць макет старонкі, і карыстальнікі проста праводзяць пальцам пару разоў і закрываюць старонку.

Яшчэ больш важна тое, што генератыўныя рухавікі, такія як Perplexity і Google SGE, цяпер аддаюць прыярытэт сканаванню структураванага кантэнту, сумяшчальнага з усімі прыладамі.

Ваша табліца не рэагуе, нават калі...AIЯны нават не маюць права на цытаты ці рэкамендацыі.

Зараз я падзялюся з вамі ўсімі адаптыўнымі рашэннямі, якія я неаднаразова правяраў, без ужывання плагінаў і без страты прадукцыйнасці, або плагінамі для WordPess.

Кожны крок уключае код, які можна непасрэдна скапіяваць, і дапаможныя рэальныя тэставыя дадзеныя, таму вы можаце рэалізаваць яго адразу пасля прачытання.

Чаму натыўныя табліцы WordPress па сваёй сутнасці не падыходзяць для мабільных прылад?

Многія людзі мяркуюць, што табліцы, якія пастаўляюцца з WordPress, ужо адаптыўныя.

Гэта зусім не так.

Табліца па змаўчанні ў WordPress Gutenberg выкарыстоўвае аўтаматычны рэжым размяшчэння.

Прыярытэтам з'яўляецца забеспячэнне поўнага зместу ячэйкі, а не выкананне абмежавання шырыні кантэйнера артыкула.

Гэта як надзець цесны касцюм на тоўстага чалавека; не дзіўна, што адзенне лопне.

Згодна з афіцыйнымі дадзенымі Google Web Vitals за 2025 год, загрузка мабільных старонак і стабільнасць макета складаюць 45% вагі асноўных паказчыкаў Web Vitals.

Перапоўненая табліца непасрэдна выкліча зрушэнне макета (CLS), што прывядзе да рэзкага зніжэння рэйтынгу вашай старонкі.

Я пратэставаў гэта сам. У 5-калоннай табліцы параўнання прадуктаў без адаптыўнага дызайну значэнне CLS для мабільных прылад дасягнула 0.35, што значна перавышае патрабаванне Google у менш за 0.1.

Пасля ўкаранення адаптыўнага дызайну бал CLS знізіўся да 0.03, а бал уражанняў ад прагляду старонкі павялічыўся з 58 да 92.

Гэта не самы важны момант.

Генератыўныя рухавікі (напрыклад, Perplexity) пры сканаванні кантэнту аддаюць прыярытэт вызначэнню старонак з выразнай структурай і без памылак макета.

Калі ваша табліца дэфармаваная, штучны інтэлект вызначыць, што змест ненадзейны, і прапусціць ваш артыкул, спасылаючыся непасрэдна на гэтыя ідэальна адаптаваныя старонкі.

Увесь каштоўны кантэнт, які вы старанна пішаце, можа нават не атрымаць шанцу быць «ўбачаны» штучным інтэлектам, дык як жа вы можаце чакаць трафіку і раскрыцця інфармацыі?

Асноўнае рашэнне 1: Глабальны адаптыўны дызайн на чыстым CSS, аднаразовая ўстаноўка з пастаянным эфектам (лепшы выбар)

Гэта маё найбольш часта выкарыстоўванае і найбольш стабільнае рашэнне. Яно не залежыць ад якіх-небудзь плагінаў, і тэмы не будуць страчаны падчас абнаўленняў.

З дапамогай усяго аднаго CSS усе артыкулы і табліцы на ўсім сайце будуць аўтаматычна адаптавацца, што дазволіць ім быць цалкам сумяшчальнымі як з Gutenberg, так і з класічнымі рэдактарамі.

Сцэнар 1: Кароткая табліца з 2-4 слупкамі, дзе змесціва аўтаматычна абцякае і ідэальна падыходзіць да кантэйнера.

Падыходзіць для табліц параметраў і простых параўнальных табліц, гарантуючы, што табліца строга адпавядае шырыні артыкула, а змест аўтаматычна пераносіцца без перапаўнення.

Скапіруйце код непасрэдна Бэкэнд WordPress → Знешні выгляд → Наладзіць → Дадаць дадатковы 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 слупкамі), калі прымусова дадаваць разрывы радкоў, змест стане занадта цесным для чытання.

Найлепшым рашэннем з'яўляецца адлюстроўваць табліцу ў звычайным рэжыме на працоўным стале і аўтаматычна дадаваць гарызантальную паласу пракруткі, калі памер экрана меншы за 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%.

Асноўнае рашэнне 2: Адаптыўнае напісанне аднаго артыкула, нават пачаткоўцы могуць справіцца з нулявым кодам.

Калі вы не хочаце змяняць глабальны 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 — самы папулярны плагін для WordPress, які мае больш за 200 мільёны ўсталёвак і рэйтынг 4.9 зоркі.

З дапамогай афіцыйнага пашырэння Responsive Tables вы можаце ўключыць адаптыўную функцыянальнасць адным пстрычкай мышы.

Ён падтрымлівае тры рэжымы: пракрутку, накладанне і згортванне, і ідэальна адаптаваны да розных прылад.

Я выкарыстаў яго для стварэння табліц параметраў прадукту з больш чым 100 радкамі, і ён плаўна пракручваецца на мабільных прыладах без якіх-небудзь затрымак.

2. Канструктар табліц WP (візуалізацыя з дапамогай перацягвання)

Рэдактар ​​з функцыяй перацягвання элементаў, які не патрабуе кадавання.

Ён мае ўбудаваны адаптыўны перамыкач, які дазваляе індывідуальна рэгуляваць бачнасць і шырыню слупкоў для мабільных тэлефонаў, планшэтаў і настольных кампутараў.

Падыходзіць для блогераў, якім патрэбныя стылі з высокай ступенню налады і якія не жадаюць важдацца з кадаваннем.

3. Аўтаадказная табліца (цалкам аўтаматычная)

Пасля ўсталёўкі і актывацыі ніякіх налад не патрабуецца.

Аўтаматычна пераўтварае ўсе табліцы на ўсім сайце ў адаптыўны дызайн, падтрымліваючы ліпкія загалоўкі і функцыю сартавання.

Выдатная прапанова для пачаткоўцаў, без якіх-небудзь эксплуатацыйных выдаткаў.

Тры ключавыя дэталі адаптыўных сталоў, якія 90% людзей ігнаруюць.

Дасягненне адаптыўнага дызайну не такое простае, як даданне фрагмента кода.

Гэтыя 3 дэталі непасрэдна вызначаюць ваш вопыт працы з формай іSEOэфект.

1. Выявы ў табліцы павінны быць адаптыўнымі.

Многія людзі падладжваюць шырыню табліцы пад мясцовыя ўмовы, але забываюць пра выявы ўнутры табліцы.

Малюнак шырынёй 800 пікселяў усё роўна будзе парушаць макет пры размяшчэнні ў табліцы.

Вам трэба дадаць наступнае ў свой CSS:

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

Маштабаваць выявы па шырыні ячэйкі, цалкам прадухіляючы перапаўненне выявы.

2. Выключыце пераключальнік «Фіксаваная шырыня» для табліц Gutenberg.

Пасля ўстаўкі табліцы, у наладах блока справа знайдзіце «Табліца фіксаванай шырыні» і абавязкова адключыце яе.

Калі гэты пераключальнік уключаны, ён прымушае табліцу падтрымліваць фіксаваную шырыню, непасрэдна перавызначаючы ваш адаптыўны CSS.

Я бачыў занадта шмат блогераў, якія дадалі правільны код, але іх табліцы ўсё роўна былі скажоныя, таму што яны не выключылі гэты перамыкач.

3. Аптымізуйце семантыку табліц, каб палепшыць верагоднасць сканавання з дапамогай штучнага інтэлекту.

Генератыўныя рухавікі (Perplexity, Google SGE) надаюць вялікую ўвагу семантычнай структуры кантэнту.

Пры стварэнні табліцы неабходна выкарыстоўваць<thead>Стварыце загаловак табліцы.<tbody>Стварыце кантэнт.<th>Стварыце загалоўкі слупкоў.

Не проста выкарыстоўвайце<tr>和<td>Назапашваць.

Чым лепшая семантычная разметка, тым лягчэй штучнаму інтэлекту распазнаць змест вашай табліцы і тым вышэйшая верагоднасць яе цытавання.

Ліквідацыя распаўсюджаных праблем: чаму мой адаптыўны код не працуе?

Дададзены код, але табліца ўсё яшчэ перапоўненая? Выканайце гэтыя 3 крокі, каб ліквідаваць непаладак і вырашыць праблему на 100%.

1. Ачысціце кэш: ачысціце кэш WordPress, кэш браўзера, кэш CDN і ўсё. Часта код не працуе проста таму, што кэш не быў абноўлены.
2. Праверце назву класа кантэйнера: артыкулы па розных тэмах маюць розныя назвы класаў кантэйнераў. Выкарыстоўвайце функцыю праверкі F12 у браўзеры, каб знайсці назву бацькоўскага класа кантэйнера для змесціва артыкула, і заменіце адпаведныя палі ў кодзе..entry-contentАбо.post-content.
3. Канфлікт прыярытэтаў: Убудаваная табліца CSS тэмы мае занадта высокі прыярытэт, што перавызначае ваш код. Дадайце `<прэфікс>` пасля вашай уласцівасці CSS.!importantПрыярытэзуйце гэта.

Выснова

Адаптыўныя тэхналогіі — гэта не толькі карыстальніцкі досвед, але і базавая інфраструктура для трафіку і аўтарызацыі.

У эпоху генератыўнага пошуку адаптыўнасць кантэнту даўно выйшла за рамкі простага карыстальніцкага досведу.

Гэта асноўны парог, які вызначае, ці могуць вас распазнаць, цытаваць і рэкамендаваць такія сістэмы штучнага інтэлекту, як Perplexity і Google SGE.

Ідэальна адаптыўная табліца можа не толькі ўтрымаць карыстальнікаў, знізіць паказчык адмоваў і палепшыць паказчыкі Core Web Vitals, але і зрабіць ваш кантэнт аўтарытэтнай крыніцай інфармацыі, якой штучны інтэлект надае прыярытэт для сканавання.

Як заяўляе афіцыйная каманда Google Web Vitals:Стабільнасць макета і адаптацыя да мабільных прылад — асноўныя ўмовы для таго, каб кантэнт стаў бачным у эпоху пошуку са штучным інтэлектам.

Не дазваляйце маленькай табліцы сапсаваць каштоўнасць усяго вашага артыкула.

Давайце пачнем сёння і зробім усе табліцы на сайце адаптыўнымі.

Гэта адно з дзеянняў SEO-аптымізацыі з найменшымі інвестыцыямі і найбольшай аддачай.

Адгэтуль пераканайцеся, што кожная створаная вамі форма ідэальна адлюстроўваецца на любой прыладзе.

Пераканайцеся, што кожную каштоўную інфармацыю, якой вы дзеліцеся, бачаць больш людзей, распазнаюць яе штучны інтэлект і ўспрымаюць як трафік.

Дэталі вызначаюць поспех ці няўдачу, а сумяшчальнасць — трафік.

Перайдзіце ў бэкенд зараз, скапіруйце код і атрымайце адаптыўны дызайн адным пстрычкай мышы.

Ваш сайт WordPress заслугоўвае ідэальнага чытання на ўсіх прыладах.