ارزدیجیتال
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

چگونه جداول وردپرس را ریسپانسیو کنیم؟

مقالات,آموزش,ترفند , وردپرس

کمتر وب‌سایتی رو مشاهده می‌کنید که از جداول در متن محتوای خود استفاده نکرده باشد. وردپرس بصورت پیشفرض قابلیت ساخت جدول را دارد و این قابلیت در ویرایشگر جدید گوتنبرگ بسیار کار‌آمد‌تر نیز شده. اما یک معظل بسیار بزرگ که باعث شده اکثر وب‌مستر‌ها از جداول پیشفرض وردپرس استفاده نکنند، مشکل استایل‌دهی و ریسپانسیو این جداول هست.

 

چگونه جداول وردپرس را ریسپانسیو کنیم؟

 

البته قبلا افزونه ساخت جدول وردپرس را معرفی کرده‌ایم اما پیشنهاد می‌کنیم از جداول پیشفرض به جای افزونه استفاده کنید. چون هم سبک‌تر هستند و هم انتقال به قالب جدید را برای شما آسان‌تر خواهد کرد.

 

یک مثال بارز از این قضیه این هست که ما از جداول گوتنبرگ وردپرس برای مدت زیادی استفاده کردیم و امروز تعداد زیادی ارور ریسپانسیو مبنی بر عریض بودن محتوای سایت و بیرون زدن محتوا از صفحات موبایل دریافت کردیم. حالا متوجه شدیم که باید جداول وردپرس را ریسپانسیو کنیم! پس بریم ببینیم چطور جداول رو ریسپانسیو کنیم؟

 

ریسپانسیو کردن جدول در وردپرس

برای ریسپانسیو کردن جدول در وردپرس ابتدا باید تا حد کمی به CSS مسلط باشید. البته اگر مسلط نیستید هم زیاد نگران نباشید چون توی این آموزش ماهی رو برای شما میگیریم. 🙂

ابتدا وارد بخش نمایش > ویرایشگر در پنل وردپرس خودتان شده و فایل style.css را برای ویرایش انتخاب کنید.

حالا این کد را به سی اس اس سایتتان اضافه کنید تا عرض جداول سایت شما از محتوا بیشتر نشود:

table{
    width:100%;
    max-width:100%;
}

حالا جداول شما در حالت دسکتاپ (بهتر است بگوییم صفحات بزرگ) از محتوا یا کادر نوشته بزرگ‌تر نخواهد شد.

برای ریسپانسیو کردن در حالت موبایلی هم این کد را در ادامه به سی اس اس سایتتان اضافه کنید.

@media screen and (max-width:980px){ table{ display:block; overflow-x:auto; } }

به همین راحتی 🙂 با اضافه کردن این دو قطعه کد به سی اس اس سایتتان، جداول شما در صفحات بزرگ با هر عرضی از محتوا بزرگتر نخواهد شد و در حالت موبایلی جداول در محور افقی بصورت اسکرولی نمایش داده خواهد شد. به این شکل:

چگونه جداول وردپرس را ریسپانسیو کنیم؟

موفق باشید

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 2.3 / 5. تعداد رای : 3

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=44849
کلمات کلیدی پست :
مطالب مرتبط
5,636تغییر خودکار نام عکس ها در وردپرس تاریخ : 2019/11/22
12,660غیر فعال کردن افزونه های وردپرس در PhpMyAdmin تاریخ : 2018/04/27
5,420دکمه مطالب بیشتر در وردپرس با Ajax تاریخ : 2019/10/26
7,328آموزش رفع خطای Missing a temporary folder در وردپرس تاریخ : 2019/07/4
11,471استفاده از استایل دلخواه در مطالب وردپرس با افزونه WP Add Custom CSS تاریخ : 2017/12/4
24,456ارور 509 چیست و چگونه برطرف می‌شود؟ تاریخ : 2019/05/14
5,696حل مشکل رسپانسیو ویدیو پلیر وردپرس تاریخ : 2019/08/24
7,800راهکار‌هایی برای حل مشکل نصب نشدن قالب وردپرس تاریخ : 2019/09/26
5,760آموزش افزودن اسکرول بی پایان در وردپرس تاریخ : 2019/12/26
5,624ارسال ایمیل به نویسنده هنگام انتشار مطالب بدون افزونه تاریخ : 2019/04/18
6,940آموزش رفع خطای نوشتن پرونده روی دیسک تاریخ : 2019/08/16
10,200افزایش امنیت و بهینه سازی وردپرس با Cloudflare تاریخ : 2018/09/30
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file