ثبت‌نام ورود
خانه مقالات آموزشی چگونه جداول وردپرس را ریسپانسیو کنیم؟

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

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

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

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

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

اگر منظور من از ریسپانسیو رو متوجه نشدید. مقاله ریسپانسیو چیست رو حتما مطالعه کنید.

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

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

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

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

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

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

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

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

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

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام میهن وردپرس عضو شوید.

سوالی دارید؟ از ما بپرسید

  1. کاربر مهمان U15961 ۱۷ دی ۱۳۹۹

    وقت بخیر
    برای ریسپانسیو کردن لینک هم کدی دارید؟
    یک سری پست توی سایتم هستش که به خاطر اینکه عبارت داخل لینکه هم مهمه مجبورم کل کلینک رو کامل بذارم که نسبتا طولانیه و توی یک سطر جا نمیشه
    بعد توی نسخه Amp از کادر میزنه بیرون

    • رضا حسینی راد رضا حسینی راد ۱۷ دی ۱۳۹۹

      سلام وقت بخیر. متوجه منظور شما نشدم! لینک نیازی به ریسپانسیو کردن نداره که

  2. کاربر مهمان U28166 ۱۳ خرداد ۱۳۹۹

    با سلام، من این مشکل رو فقط در برگه سبد خرید دارم که جدول رو در حالت موبایل بسیار کشیده نشون میده، از طریق inspect که اعمال تغییرات میکنم حالت دسکتاپ رو هم تغییر میده. ممنون میشم راهنماییم کنید

  3. کاربر مهمان U14664 ۰۸ خرداد ۱۳۹۸

    با سلام مجدد
    کد زیر را وارد کردم
    @media screen and (max-width:980px){ table{ display:block; overflow-x:auto; } }

    طبق چیزی که نوشتید متاسفانه کلا حدول حذف شد
    در قالب آریایی

  4. کاربر مهمان کاربر مهمان ۰۷ خرداد ۱۳۹۸

    اگر امکانش هست یه کد css بدید که تصاویر هر مقاله که تصویر شاخص هم هستند کوچیکتر دیده بشن چون عکس های کوچیک به شدت بزرگ و بی کیفیت شدند.
    قالب بنده فلت سام هست

    تشکر

    • رضا حسینی راد رضا حسینی راد ۰۷ خرداد ۱۳۹۸

      سلام برای اینکار باید تصویر رو توی ویرایش مقالات کوچکتر کنید. نیازی به سی اس اس نیست.

  5. کاربر مهمان کاربر مهمان ۰۷ خرداد ۱۳۹۸

    سلام من بعد از تعویض قالب جدول هام کلا بهم ریخته و بزرگ و کوچیک شدن
    میشه راهنمایی بفرمائید؟

دوره آنلاین آموزش برنامه‌نویسی PHP از مقدماتی تا پیشرفته

فقط 0 روز و 0 ساعت و 0 دقیقه و 0 ثانیه