دوره جامع سئو وردپرس

تبلیغات
طراحی و بهینه سازیمشاهده


هاست

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

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

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

 

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

 

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

 

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

 

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

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

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

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

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

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

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

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

موفق باشید

دانلود


ریپکونت خدمات وب/ فروش اسکریپت/ سامانه پیام کوتاه رایگان / خدمات رایگان / طراحی سایت ارزان سئو رایگان


مطلب مفیدی بود ؟
نویسنده : mohammad 0 مقالات,آموزش,ترفند , وردپرس

لینک کوتاه مطلب : https://www.20script.ir/?p=44849

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
1,044حذف گزینه ویرایشگر از منو پیشخوان ودرپرس تاریخ : 1397/11/2
3,684حل مشکل واکنش گرایی ویدئو پلیر وردپرس تاریخ : 1394/04/25
504آموزش مخفی کردن مطالب وردپرس از نتایج گوگل تاریخ : 1398/03/29
560تغییر آدرس سایت وردپرسی (تغییر دامنه سایت) تاریخ : 1398/03/16
864نمایش جدیدترین کاربران در وردپرس بدون افزونه تاریخ : 1398/02/6
1,112حل خطای پیوندی که شما دنبال می‌کردید منقضی شده است در وردپرس تاریخ : 1398/02/6
4,134آموزش جلوگیری از تغییر کد های قالب وردپرس تاریخ : 1395/06/1
2,166غیرفعال کردن بروزرسانی‌ها در وردپرس تاریخ : 1395/02/22
2,460افزونه افزایش امنیت وردپرس Brute Force Login Protection تاریخ : 1396/09/4
2,868حذف ادرس وبسایت از نظرات در وردپرس تاریخ : 1392/08/5
316ایجاد محدودیت طول عنوان نوشته وردپرس بدون افزونه تاریخ : 1398/05/24
2,341تغییر نام کلمات پیشفرض وردپرس با افزونه Say what تاریخ : 1396/10/12
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب