خانه / وردپرس / آموزش وردپرس / افزونه سفارشی سازی محتوای وب سایت
افزونه سفارشی سازی محتوای وب سایت
افزونه سفارشی سازی محتوای وب سایت

افزونه سفارشی سازی محتوای وب سایت

دوستان این آموزش وردپرس رو می خواهیم به افزونه سفارشی سازی محتوای وب سایت اختصاص دهیم تا بتونید با استفاده از آن وب سایت خود رو زیبا و شیک نمایید چون حتما با مراجعه به سایتهایی بسیار دیده اید که به صورت تک صفحه ای بوده اند و مطلب رو بسیار جالب به نمایش قرار داده اند به صورتی که محتوا در کنار هم و به صورت چند ستون می باشد و یا اینکه در کنار محتوا ایکونی خاص می باشد

افزونه سفارشی سازی محتوای وب سایت

دوستان ما در زیر تصویری رو برای مثال قرار داده ایم تا بهتر بتونید کار این افزونه وردپرس کاربردی رو درک نمایید که بیشتر برای شرکتها , هاستینگ و … استفاده می شود و همانطور که می دونید دارای آیکونی می باشند و برای اینکار اگه اطلاع داشته باشید افزونه تجاری ویژوال کامپوسر طراحی شده است و میتونید استفاده نمایید اما ما می خواهیم یک افزونه رایگان وردپرس رو بهتون معرفی کنیم که در زیر براتون طریقه کارش رو توضیح می دهیم

سفارشی سازی محتوای وب سایت

دوستان برای شروع باید با دانلود افزونه Advanced WP Columns کار رو انجام دهیم و بعد فعال سازی میتونید در پیشخوان وردپرس به تنظیمات » Advanced WP Columns مراجعه نمایید که تنظیمات افزونه رو در اختیارتون قرار می دهد

دانلود افزونه Advanced WP Columns

Container width : اولین گزینه در تصویر بالا هم مشخص بوده است که میتونید پهنای table  خود رو که به صورت پیش فرض 960 پیکسل بوده است تعیین نمایید

Initial structure : در اینجا برای تعیین تعداد ستون ها می باشد که تا 4 میتونید تعیین نمایید

Responsive layout : چنانچه قالب وردپرس شما به صورت ریسپانسیو باشد میتونید با فعال نمودن این گزینه محتوا رو هم ریسپانسیو نمایید

Resolution breaking point : با این قسمت این قابلیت رو خواهید داشت تا اگه صفحه از حد تعیین شده کوچک تر بود یک سر از هر ستون نمایش داده شود

Column per row occupation : برای تعیین در صدی اندازه ستون تا فاصله خالی هر عنصر بر اساس 100 در صد تعیین شده اعمال شود و پیش فرضا 80 می باشد که با این حال 20 در صد از فضای هر ستون خالی می باشد

و همانطور که در تصویر بالا می بینید در کادر column class نیز عبارت mycolumns رو وارد و ذخیره نمایید

حالا با این پلاگین وردپرس رایگان اگه به قسمت ویرایشگر خود برید همانند تصویر زیر می بینید که یک دکمه ایجاد شده است تا بتونید با توجه به کارتون ستون داشته باشید

دوستان موردی رو که باید بهتون بگم و براتون مهم می باشد این بوده که به صورت پیش فرض نمی تونید با این پلاگین کاربردی وردپرس آیکون داشته باشید و جهت اینکار میتونید به اموزش قبلی ما که با معرفی افزونه WP SVG Icons بود جهت داشتن آیکون استفاده نمایید

بعد داشتن این افزونه برای ایجاد آیکون به افزودن نوشته و ویرایشگر خود برید و گزینه ایجاد ستون رو همانند زیر کلیک کنید

دانلود افزونه

حالا بعد زدن افزودن ستون منتظر بمانید تا صفحه زیر باز شود

 افزونه Advanced WP Columns

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

افزونه برای ایجاد آیکون

و با کد کوتاهی که بهتون می دهد در نوشته خود برای داشتن آیکون اضافه نمایید

[wp-svg-icons icon="home" wrap="h1"]

دوستان در برخی از مواقع ممکنه آیکون ها نمایش داده نشود که باید به فایل (style.css) خود رفته و کدهای هر آیکون رو مثل زیر اضافه نمایید

span.wp-svg-home.home {
font-size:100px;
}
span.wp-svg-cloud.cloud {
font-size:100px;
}
span.wp-svg-headphones.headphones {
font-size:100px;
}
.mycolumns {
border:1px solid #eee;
min-height:250px;
padding-top:20px !important;
}

تا چیزی  مثل تصویر زیر داشته باشید

افزونه وردپرس

امیدوارم مفید بوده باشه

منبع : قالب وردپرس

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *