WordPress-ის პოსტის ცხრილები არ არის რესპონსიული? CSS კოდი + დანამატების გადაწყვეტილებები

არაადაპტირებულიWordPressცხრილებს შეუძლიათ პირდაპირ გამოიწვიონ მობილური აპლიკაციების 37%-ით გაზრდა და Google SGE პირდაპირ იდენტიფიცირებს მათ, როგორც დაბალი ხარისხის კონტენტს.

我做WordPress საიტიწლების განმავლობაში, ძალიან ბევრი ბლოგერი მინახავს საათობით დახვეწილი შედარებითი ცხრილებისა და პარამეტრების ცხრილების შექმნაზე, რომლებიც მობილურ მოწყობილობებზე ნახვისას სრულიად დამახინჯებული ჩანდა.

ან შინაარსი ერთმანეთშია გადაჭედილი და გარკვევით არ ჩანს, ან ცხრილები არღვევს გვერდის განლაგებას და მომხმარებლები უბრალოდ რამდენჯერმე გადაფურცვლიან გვერდს და ხურავენ.

კიდევ უფრო კრიტიკულად მნიშვნელოვანია ის, რომ ისეთი გენერაციული ძრავები, როგორიცაა Perplexity და Google SGE, ახლა პრიორიტეტს ანიჭებენ ყველა მოწყობილობასთან თავსებადი სტრუქტურირებული კონტენტის ქრონას.

თქვენი ცხრილი არ არის ადაპტირებადი, მაშინაც კი, როცა...AIისინი ციტირებისა და რეკომენდაციების მიღების უფლებასაც კი არ აძლევენ.

ახლა მე გაგიზიარებთ ყველა ადაპტაციურ გადაწყვეტას, რომელიც არაერთხელ გადავამოწმე, ნულოვანი დანამატებით და ნულოვანი შესრულების დანაკარგით, ანუ WordPess დანამატებით.

თითოეული ნაბიჯი მოიცავს პირდაპირ კოპირებად კოდს და რეალური სამყაროს ტესტირების მონაცემების მხარდაჭერას, ასე რომ თქვენ შეგიძლიათ მისი განხორციელება წაკითხვისთანავე.

რატომ არის WordPress-ის მშობლიური ცხრილები არსებითად შეუფერებელი მობილური მოწყობილობებისთვის?

ბევრი ადამიანი ვარაუდობს, რომ WordPress-თან ერთად მოწოდებული ცხრილები უკვე ადაპტირებულია.

საქმე სულაც არ არის ასე.

WordPress Gutenberg-ის ნაგულისხმევი ცხრილი იყენებს ავტომატური განლაგების რეჟიმს.

ის პრიორიტეტს ანიჭებს უჯრის შინაარსის სისრულის უზრუნველყოფას, სტატიის კონტეინერის სიგანის ლიმიტის დაცვასთან შედარებით.

ეს იგივეა, რომ მსუქან ადამიანს მჭიდრო კოსტუმი ჩააცვა; გასაკვირი არ არის, რომ ტანსაცმელი გაიხსნება.

Google Web Vitals-ის 2025 წლის ოფიციალური მონაცემების თანახმად, მობილური გვერდის ჩატვირთვა და განლაგების სტაბილურობა Core Web Vitals-ის წონის 45%-ს შეადგენს.

გადავსებული ცხრილი პირდაპირ გამოიწვევს განლაგების ოფსეტს (CLS), რაც თქვენი გვერდის რეიტინგის ვარდნას გამოიწვევს.

მე თვითონ გამოვცადე. 5-სვეტიან პროდუქტის შედარების ცხრილში, რესპონსიული დიზაინის გარეშე, მობილური CLS მნიშვნელობა 0.35-ს აღწევდა, რაც გაცილებით აღემატებოდა Google-ის მოთხოვნას, რომელიც 0.1-ზე ნაკლები იყო.

ადაპტური დიზაინის დანერგვის შემდეგ, CLS ქულა 0.03-მდე დაეცა, ხოლო გვერდის გამოცდილების ქულა 58-დან 92-მდე გაიზარდა.

ეს არ არის ყველაზე მნიშვნელოვანი პუნქტი.

გენერაციული ძრავები (მაგალითად, Perplexity) კონტენტის სკანირებისას პრიორიტეტს ანიჭებენ მკაფიო სტრუქტურის მქონე და განლაგების შეცდომების გარეშე გვერდების იდენტიფიცირებას.

თუ თქვენი ცხრილი დეფორმირებულია, ხელოვნური ინტელექტი დაადგენს, რომ შინაარსი არასანდოა და გამოტოვებს თქვენს სტატიას, პირდაპირ მითითებით იმ იდეალურად ადაპტირებულ გვერდებზე.

შესაძლოა, ხელოვნურმა ინტელექტმა თქვენს მიერ გულმოდგინედ დაწერილი ყველა ღირებული კონტენტი ვერც კი „დაინახოს“, ასე რომ, როგორ შეგიძლიათ ელოდოთ ტრაფიკსა და ხილვადობას?

ძირითადი გადაწყვეტა 1: სუფთა CSS გლობალური ადაპტური დიზაინი, ერთჯერადი დაყენება მუდმივი ეფექტით (საუკეთესო არჩევანი)

ეს არის ჩემს მიერ ყველაზე ხშირად გამოყენებული და ყველაზე სტაბილური გადაწყვეტა. ის არ არის დამოკიდებული არცერთ დანამატზე და თემები არ დაიკარგება განახლების დროს.

CSS კოდის მხოლოდ ერთი ნაწილით, მთელ საიტზე არსებული ყველა სტატია და ცხრილი ავტომატურად ადაპტირდება, იდეალურად თავსებადი როგორც Gutenberg-ის, ასევე კლასიკური რედაქტორების პროგრამებთან.

სცენარი 1: მოკლე ცხრილი 2-4 სვეტით, სადაც შინაარსი ავტომატურად იხვევა და იდეალურად ერგება კონტეინერს.

გამოდგება პარამეტრების ცხრილებისა და მარტივი შედარების ცხრილებისთვის, რაც უზრუნველყოფს, რომ ცხრილი მკაცრად მიჰყვება სტატიის სიგანეს და რომ შინაარსი ავტომატურად გადაიხვევა გადავსების გარეშე.

კოდის პირდაპირ კოპირება WordPress backend → გარეგნობა → მორგება → დაამატეთ დამატებითი 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. აირჩიეთ ეს ჯგუფი, შემდეგ მარჯვენა ბლოკის პარამეტრებში → Advanced → Attach 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>დაგროვებამდე.

რაც უფრო უკეთესია სემანტიკური მარკირება, მით უფრო ადვილია ხელოვნური ინტელექტისთვის თქვენი ცხრილის შინაარსის ამოცნობა და მით უფრო მაღალია მისი ციტირების ალბათობა.

გავრცელებული პრობლემების მოგვარება: რატომ არ მუშაობს ჩემი ადაპტური კოდი?

კოდი დაემატა, ცხრილი კვლავ გადავსებულია? პრობლემის მოსაგვარებლად და 100%-ით გადასაჭრელად, მიჰყევით ამ 3 ნაბიჯს.

1. ქეშის გასუფთავება: გაასუფთავეთ WordPress-ის ქეში, ბრაუზერის ქეში, CDN ქეში და ყველაფერი. ხშირად კოდი არ მუშაობს უბრალოდ იმიტომ, რომ ქეში არ განახლებულა.
2. შეამოწმეთ კონტეინერის კლასის სახელი: სხვადასხვა თემაზე შექმნილ სტატიებს განსხვავებული კონტეინერის კლასის სახელები აქვთ. სტატიის შინაარსის მშობელი კონტეინერის კლასის სახელის მოსაძებნად და კოდში შესაბამისი ველების ჩასანაცვლებლად გამოიყენეთ ბრაუზერის F12 inspect ფუნქცია..entry-content或.post-content.
3. პრიორიტეტულობის კონფლიქტი: თემის ჩაშენებულ CSS ცხრილს ძალიან მაღალი პრიორიტეტი აქვს, რაც თქვენს კოდს უგულებელყოფს. თქვენი CSS თვისების შემდეგ დაამატეთ `<პრეფიქსი>`.!importantპრიორიტეტი მიანიჭეთ.

დასკვნა

ადაპტური ტექნოლოგია არ ეხება მხოლოდ მომხმარებლის გამოცდილებას, არამედ ტრაფიკისა და ავტორიტეტის ძირითად ინფრასტრუქტურასაც.

გენერაციული ძიების ეპოქაში, კონტენტის ადაპტირება დიდი ხანია გასცდა მომხმარებლის გამოცდილების სფეროს.

ეს არის ძირითადი ზღვარი იმისა, შეიძლება თუ არა თქვენი ამოცნობა, ციტირება და რეკომენდაცია ხელოვნური ინტელექტის ისეთი ძრავების მიერ, როგორიცაა Perplexity და Google SGE.

იდეალურად ადაპტირებადი ცხრილი არა მხოლოდ მომხმარებლების შენარჩუნებას, ბაუნს რეიტის შემცირებას და Core Web Vitals-ის ქულების გაუმჯობესებას უწყობს ხელს, არამედ თქვენს კონტენტს ინფორმაციის ავტორიტეტულ წყაროდ აქცევს, რომელსაც ხელოვნური ინტელექტი პრიორიტეტად აქცევს ქრონების ჩასატვირთად.

როგორც Google Web Vitals-ის ოფიციალური გუნდი აცხადებს:„განლაგების სტაბილურობა და მობილურ მოწყობილობებზე ადაპტაცია არის ძირითადი ბილეთები, რათა კონტენტმა მოიპოვოს ხილვადობა ხელოვნური ინტელექტის ძიების ეპოქაში.“

ნუ მისცემთ პატარა ცხრილს უფლებას, რომ თქვენი მთელი სტატიის ღირებულება გააფუჭოს.

მოდით, დღესვე დავიწყოთ და საიტზე არსებული ყველა ცხრილი რესპონსიული გავხადოთ.

ეს არის ერთ-ერთი SEO ოპტიმიზაციის ქმედება ყველაზე დაბალი ინვესტიციით და ყველაზე მაღალი შემოსავლით.

ამიერიდან, დარწმუნდით, რომ თქვენს მიერ შექმნილი ყველა ფორმა იდეალურად ჩანს ნებისმიერ მოწყობილობაზე.

დარწმუნდით, რომ თქვენს მიერ გაზიარებული ყველა ღირებული ინფორმაცია მეტ ადამიანს ნახავს, ​​ხელოვნური ინტელექტი ამოიცნობს და ტრაფიკი მას მიიღებს.

დეტალები განსაზღვრავს წარმატებას ან წარუმატებლობას, თავსებადობა კი - ტრაფიკს.

ახლავე გადადით ბექენდზე, დააკოპირეთ კოდი და ერთი დაწკაპუნებით დაასრულეთ რესპონსიული დიზაინი.

თქვენი WordPress ვებსაიტი იმსახურებს იდეალურ კითხვის გამოცდილებას ყველა მოწყობილობაზე.