वर्डप्रेस पोस्ट टेबल्स रिस्पॉन्सिव्ह नाहीत का? CSS कोड + प्लगइन सोल्यूशन्स

अनुकूलन न करणारावर्डप्रेसटेबल्समुळे मोबाईल बाऊन्स रेटमध्ये थेट ३७% पर्यंत वाढ होऊ शकते आणि गूगल एसजीईद्वारे (Google SGE) त्यांना थेट कमी-गुणवत्तेची सामग्री म्हणून ओळखले जाईल.

我做वर्डप्रेस वेबसाइटगेल्या काही वर्षांत, मी अनेक ब्लॉगर्सना उत्कृष्ट तुलना सारण्या आणि पॅरामीटर सारण्या तयार करण्यासाठी तासन् तास घालवताना पाहिले आहे, पण मोबाईल उपकरणांवर पाहिल्यावर त्या पूर्णपणे विद्रूप झालेल्या दिसतात.

एकतर मजकूर खूप दाटीवाटीने मांडलेला असतो आणि तो स्पष्टपणे दिसत नाही, किंवा तक्त्यांमुळे पानाची मांडणी बिघडते, आणि वापरकर्ते फक्त दोन-चार वेळा स्वाइप करून पान बंद करतात.

त्याहूनही महत्त्वाचे म्हणजे, पर्प्लेक्सिटी आणि गूगल एसजीई सारखी जनरेटिव्ह इंजिने आता सर्व उपकरणांशी सुसंगत असलेल्या संरचित सामग्रीला क्रॉल करण्यास प्राधान्य देतात.

तुमची सारणी अनुकूलनक्षम नाही, जरी...AIते प्रशस्तिपत्र किंवा शिफारशींसाठी सुद्धा पात्र नाहीत.

आता मी तुमच्यासोबत ते सर्व अनुकूली उपाय शेअर करणार आहे, जे मी वारंवार तपासले आहेत आणि ज्यात कोणत्याही प्लगइनची किंवा वर्डप्रेस प्लगइनची गरज नाही, तसेच कार्यक्षमतेत कोणताही तोटा होत नाही.

प्रत्येक टप्प्यात थेट कॉपी करण्यायोग्य कोड आणि त्याला पूरक असा वास्तविक चाचणी डेटा समाविष्ट आहे, त्यामुळे तुम्ही ते वाचल्यानंतर लगेचच त्याची अंमलबजावणी करू शकता.

वर्डप्रेसचे नेटिव्ह टेबल्स मोबाईल उपकरणांसाठी मुळातच अयोग्य का असतात?

बऱ्याच लोकांना असे वाटते की वर्डप्रेससोबत येणारे टेबल आधीपासूनच रिस्पॉन्सिव्ह असतात.

ते अजिबात तसे नाही.

वर्डप्रेस गटेनबर्गमधील डीफॉल्ट टेबल ऑटोमॅटिक लेआउट मोडचा वापर करते.

ते आर्टिकल कंटेनरच्या रुंदीच्या मर्यादेचे पालन करण्यापेक्षा सेलच्या सामग्रीची अखंडता सुनिश्चित करण्याला प्राधान्य देते.

हे एखाद्या जाड माणसाला घट्ट बसणारा सूट घालण्यासारखं आहे; त्यामुळे कपडे फाटले तर नवल नाही.

२०२५ च्या अधिकृत गूगल वेब व्हायटल्सच्या आकडेवारीनुसार, कोअर वेब व्हायटल्सच्या वजनामध्ये मोबाइल पेज लोडिंग आणि लेआउट स्थिरतेचा वाटा ४५% आहे.

टेबल ओव्हरफ्लो झाल्यास थेट लेआउट ऑफसेट (CLS) ट्रिगर होईल, ज्यामुळे तुमच्या पेज रेटिंगमध्ये मोठी घट होईल.

मी स्वतः याची चाचणी केली. रिस्पॉन्सिव्ह डिझाइन नसलेल्या, ५-कॉलमच्या उत्पादन तुलना टेबलमध्ये, मोबाइल CLS मूल्य ०.३५ इतके जास्त होते, जे गुगलच्या ०.१ पेक्षा कमी असण्याच्या आवश्यकतेपेक्षा खूप जास्त आहे.

अ‍ॅडॅप्टिव्ह डिझाइन लागू केल्यानंतर, 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यामुळे हे सुनिश्चित होते की, अत्यधिक लांब मजकूर रॅप होण्यास भाग पाडले जाईल, ज्यामुळे ओव्हरफ्लोची समस्या पूर्णपणे सुटेल.

मी या सोल्युशनचा वापर करून ३०० हून अधिक लेखांमधील टेबल्सवर प्रक्रिया केली आहे, जी १००% मोबाईल सुसंगत आहे आणि त्यात लेआउटच्या कोणत्याही त्रुटी नाहीत.

परिदृश्य २: ५ किंवा अधिक स्तंभ असलेले बहु-स्तंभीय तक्ते, मोबाइल उपकरणांवर आडवे स्क्रोलिंग आणि डेस्कटॉपवर पूर्ण प्रदर्शन.

बहु-स्तंभीय सारण्यांमध्ये (जसे की ८-स्तंभीय कार्य तुलना सारणी), जर जबरदस्तीने ओळी बदलल्या तर मजकूर वाचायला खूपच दाटीवाटीचा होईल.

सर्वोत्तम उपाय म्हणजे डेस्कटॉपवर टेबल सामान्यपणे दाखवणे आणि स्क्रीनचा आकार 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 वर स्क्रोलिंग अधिक सुरळीत करण्यासाठी आणि वापरकर्त्याचा अनुभव सुधारण्यासाठी आहे.

प्रत्यक्ष चाचणी डेटा: हे सोल्यूशन वापरल्यानंतर, मल्टी-टेबल लेआउट्सचा मोबाईल ड्वेल टाइम २८% ने वाढला आणि बाउंस रेट २२% ने कमी झाला.

मुख्य उपाय २: अनुकूलनीय एकल-लेख लेखन, अगदी नवशिक्यासुद्धा शून्य कोडसह काम करू शकतात.

जर तुम्हाला ग्लोबल CSS बदलायचा नसेल आणि फक्त एका विशिष्ट लेखातील सारण्यांना रिस्पॉन्सिव्ह बनवायचे असेल, तर ही पद्धत तुमच्यासाठी सर्वात योग्य आहे.

संपूर्ण प्रक्रिया दृकश्राव्य स्वरूपात सादर केली जाते, त्यासाठी कोडिंगच्या ज्ञानाची आवश्यकता नाही.

1. लेख संपादित करा, 'टेबल' ब्लॉक घाला आणि मजकूर भरा.
2. संपूर्ण टेबल निवडा, टूलबारमधील "Group" वर क्लिक करा आणि टेबलला एका ग्रुप कंटेनरमध्ये गुंडाळा.
3. हा गट निवडा, त्यानंतर उजवीकडील ब्लॉक सेटिंग्ज → प्रगत → CSS क्लास जोडा मध्ये, हे प्रविष्ट करा:responsive-table-single.
4. Appearance → Customize → Additional 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 पुरेसे नाही.

येथे ३ तपासलेले, हलके आणि जाहिरातमुक्त अ‍ॅडॅप्टिव्ह टेबल प्लगइन्स आहेत.

१. टेबलप्रेस + रिस्पॉन्सिव्ह टेबल्स एक्सटेंशन (सर्वात लोकप्रिय)

टेबलप्रेस हे वर्डप्रेससाठी सर्वात लोकप्रिय टेबल प्लगइन आहे, ज्याचे २० लाखांहून अधिक इन्स्टॉलेशन्स आणि ४.९-स्टार रेटिंग आहे.

अधिकृत रिस्पॉन्सिव्ह टेबल्स एक्सटेंशनच्या मदतीने, तुम्ही एका क्लिकने अनुकूली कार्यक्षमता सक्षम करू शकता.

हे स्क्रोलिंग, स्टॅकिंग आणि कोलॅप्सिंग या तीन मोडला सपोर्ट करते आणि अनेक डिव्हाइसेससाठी उत्तम प्रकारे अनुकूलित आहे.

मी याचा वापर करून १०० हून अधिक ओळी असलेले प्रॉडक्ट पॅरामीटर टेबल तयार केले आहेत आणि ते मोबाईल डिव्हाइसवर कोणत्याही अडथळ्याशिवाय सहजतेने स्क्रोल होते.

२. डब्ल्यूपी टेबल बिल्डर (ड्रॅग अँड ड्रॉप व्हिज्युअलायझेशन)

कोडिंगची आवश्यकता नसलेला ड्रॅग-अँड-ड्रॉप एडिटर.

यात एक अंगभूत रिस्पॉन्सिव्ह स्विच आहे, जो तुम्हाला मोबाईल फोन, टॅब्लेट आणि डेस्कटॉपसाठी स्तंभांची दृश्यमानता आणि रुंदी स्वतंत्रपणे समायोजित करण्याची परवानगी देतो.

ज्या ब्लॉगर्सना अत्यंत सानुकूल करण्यायोग्य शैलींची आवश्यकता आहे आणि ज्यांना कोडिंगच्या भानगडीत पडायचे नाही, त्यांच्यासाठी योग्य.

३. स्वयंचलित प्रतिसाद देणारे टेबल (पूर्णपणे स्वयंचलित)

इन्स्टॉलेशन आणि ॲक्टिव्हेशननंतर कोणत्याही सेटिंगची आवश्यकता नाही.

संपूर्ण साइटवरील सर्व टेबल्सना आपोआप रिस्पॉन्सिव्ह डिझाइनमध्ये रूपांतरित करते, जे स्टिकी हेडर्स आणि सॉर्टिंग कार्यक्षमतेला समर्थन देते.

अगदी नवशिक्यांसाठी एक वरदान, ज्याचा संचालन खर्च शून्य आहे.

अ‍ॅडॅप्टिव्ह टेबल्सबद्दलचे तीन महत्त्वाचे तपशील ज्याकडे ९०% लोक दुर्लक्ष करतात.

अनुकूलनशील डिझाइन साध्य करणे हे केवळ कोडचा एक तुकडा जोडण्याइतके सोपे नाही.

हे ३ तपशील तुमचा फॉर्म अनुभव थेट ठरवतात आणिएसइओपरिणाम

१. टेबलमधील प्रतिमा रिस्पॉन्सिव्ह असल्या पाहिजेत.

बरेच लोक फक्त स्थानिक परिस्थितीनुसार टेबलची रुंदी जुळवून घेतात, पण टेबलमधील चित्रांकडे दुर्लक्ष करतात.

८०० पिक्सेल रुंदीची प्रतिमा टेबलमध्ये ठेवल्यावरही मांडणी बिघडवेल.

तुम्हाला तुमच्या CSS मध्ये खालील गोष्टी समाविष्ट करणे आवश्यक आहे:

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

इमेज ओव्हरफ्लो पूर्णपणे टाळण्यासाठी, इमेजला सेलच्या रुंदीनुसार स्केल करण्यास भाग पाडा.

२. गटेनबर्ग सारण्यांसाठी "निश्चित रुंदी" स्विच बंद करा.

टेबल टाकल्यानंतर, उजवीकडील ब्लॉक सेटिंग्जमध्ये, "Fixed width table" शोधा आणि ते बंद केल्याची खात्री करा.

जेव्हा हे स्विच चालू केले जाते, तेव्हा ते तुमच्या रिस्पॉन्सिव्ह CSS ला थेट ओव्हरराइड करून, टेबलला एक निश्चित रुंदी राखण्यास भाग पाडेल.

मी असे अनेक ब्लॉगर पाहिले आहेत ज्यांनी योग्य कोड टाकला होता, पण त्यांनी हे स्विच बंद न केल्यामुळे त्यांचे टेबल तरीही विरूपित दिसत होते.

३. एआय क्रॉलिंगची संभाव्यता सुधारण्यासाठी टेबल सिमेंटिक्स ऑप्टिमाइझ करा.

जनरेटिव्ह इंजिन (परप्लेक्सिटी, गूगल एसजीई) मजकुराच्या अर्थपूर्ण संरचनेवर खूप भर देतात.

टेबल तयार करताना, तुम्ही वापरणे आवश्यक आहे<thead>टेबलचे शीर्षक तयार करा.<tbody>सामग्री तयार करा.<th>स्तंभांची शीर्षके तयार करा.

फक्त वापरू नका<tr>和<td>साठवणे.

सिमँटिक मार्कअप जितके चांगले असेल, तितकेच एआयला तुमच्या टेबलमधील मजकूर ओळखणे सोपे जाते आणि त्याचा संदर्भ दिला जाण्याची शक्यताही जास्त असते.

सामान्य समस्यांचे निवारण: माझा अ‍ॅडॅप्टिव्ह कोड काम का करत नाहीये?

कोड जोडला, तरीही टेबल ओव्हरफ्लो होत आहे का? समस्येचे निवारण करण्यासाठी आणि ती १००% सोडवण्यासाठी या ३ पायऱ्यांचे अनुसरण करा.

1. कॅशे साफ करा: वर्डप्रेस कॅशे, ब्राउझर कॅशे, CDN कॅशे, हे सर्व साफ करा. अनेकदा, केवळ कॅशे अद्ययावत न झाल्यामुळे कोड काम करत नाही.
2. कंटेनर क्लासचे नाव तपासा: वेगवेगळ्या थीमवरील लेखांची कंटेनर क्लासची नावे वेगवेगळी असतात. लेखाच्या मजकुराच्या पॅरेंट कंटेनर क्लासचे नाव शोधण्यासाठी ब्राउझरच्या F12 इन्स्पेक्ट फंक्शनचा वापर करा आणि कोडमधील संबंधित फील्ड्स बदला..entry-content或.post-content.
3. प्राधान्याचा संघर्ष: थीमच्या अंगभूत टेबल CSS चे प्राधान्य खूप जास्त आहे, ज्यामुळे तुमचा कोड ओव्हरराइड होत आहे. तुमच्या CSS प्रॉपर्टीनंतर `<prefix>` जोडा.!importantत्याला प्राधान्य द्या.

निष्कर्ष

अनुकूलनशील तंत्रज्ञान हे केवळ वापरकर्त्याच्या अनुभवापुरतेच मर्यादित नाही, तर त्यात वाहतूक आणि प्रशासनासाठीच्या मूलभूत पायाभूत सुविधांचाही समावेश होतो.

जनरेटिव्ह सर्चच्या युगात, कंटेंटची अनुकूलता केवळ युझर एक्सपीरियन्सच्या पलीकडे केव्हाच गेली आहे.

पर्प्लेक्सिटी आणि गूगल एसजीई सारख्या एआय इंजिनद्वारे तुम्हाला मान्यता, उल्लेख आणि शिफारस मिळू शकेल की नाही, यासाठी हा मुख्य निकष आहे.

एक परिपूर्ण अनुकूलनक्षम टेबल केवळ वापरकर्त्यांना टिकवून ठेवत नाही, बाउंस रेट कमी करत नाही आणि कोअर वेब व्हायटल्स स्कोअर सुधारत नाही, तर ते तुमच्या सामग्रीला माहितीचा एक अधिकृत स्रोत देखील बनवते, ज्याला एआय क्रॉलिंगसाठी प्राधान्य देते.

अधिकृत गूगल वेब व्हायटल्स टीमने सांगितल्यानुसार:एआय शोध युगात कंटेंटला दृश्यमानता मिळवण्यासाठी लेआउटची स्थिरता आणि मोबाइल अनुकूलन हे मूलभूत घटक आहेत.

एका छोट्या तक्त्यामुळे तुमच्या संपूर्ण लेखाचे मूल्य कमी होऊ देऊ नका.

चला आज सुरुवात करूया आणि साइटवरील सर्व टेबल्सना रिस्पॉन्सिव्ह बनवूया.

ही सर्वात कमी गुंतवणूक आणि सर्वाधिक परतावा देणाऱ्या एसईओ ऑप्टिमायझेशन कृतींपैकी एक आहे.

आतापासून, तुम्ही तयार केलेला प्रत्येक फॉर्म कोणत्याही डिव्हाइसवर व्यवस्थित दिसेल याची खात्री करा.

तुम्ही शेअर केलेली प्रत्येक मौल्यवान माहिती अधिकाधिक लोकांपर्यंत पोहोचेल, एआयद्वारे ओळखली जाईल आणि वापरकर्त्यांद्वारे स्वीकारली जाईल याची खात्री करा.

तपशिलांवरून यश किंवा अपयश ठरते आणि सुसंगततेवर रहदारी अवलंबून असते.

आता बॅकएंडवर जा, कोड कॉपी करा आणि एका क्लिकमध्ये रिस्पॉन्सिव्ह डिझाइन तयार करून घ्या.

तुमच्या वर्डप्रेस वेबसाइटला सर्व उपकरणांवर एक परिपूर्ण वाचन अनुभव मिळायला हवा.