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

the original post that this guy stole from ma can be found here افزونه ای برای سفارشی سازی محتوای وب سایت
read the original and help me out.

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

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

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

افزونه ویژوال کامپوزر یکی از افزونه هایی است که در این زمینه ارائه شده است اما در آموزش امروز می خواهیم افزونه ی دیگری را برای این کار به شما معرفی کنیم. نام این افزونه وردپرس Advanced WP Columns است. پس به شما پیشنهاد می کنم که تا انتهای این آموزش با ما همراه باشید.

همانطور که قبلا هم ذکر شد اولین قدم برای استفاده از افزونه نصب و فعال سازی آن است. پس به پیشخوان وردپرس بروید و افزونه را نصب و فعال کنید. پس از فعال سازی متوجه خواهید شد که در پیشخوان وردپرس وب سایت شما گزینه یا با عنوان Advanced WP Columns افزوده خواهد شد. برای رفتن به بخش تنظیمات این افزونه روی آن کلیک کنی و مطابق تصویر زیر تنظیمات را انجام دهید.

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

  • Container width: این گزینه به شما در تعیین اندازه پنهای کلی table کمک می کند. در حالت کلی و پیش فرض این مقدار ۹۶۰ پیکسل است ولی ممکن است وقتی اندازه را وارد می کنید تغییراتی در چیدمان صفحه ی شما به وجود بیاورد در آن صورت می توانید این اندازه را تغییر داده و کم و زیاد کنید.
  • Initial structure: این گزینه به شما کمک می کند که تعداد ستون های جدول را مشخص کنید که در این افزونه این تعداد ۴ در نظر گرفته شده است.
  • Responsive layout: این گزینه به شما کمک می کند که توضیحات را به شکل ریسپانسیو به نمایش در بیاورید ولی به شرطی که قالب شما هم ریسپانسیو باشد تا به شکل استاندارد در هر اندازه و هر نوع دستگاه به نمایش دربیاید.
  • Resolution breaking point: این گزینه به شما در نمایش دادن یک سطر از هر ستون در صورتی که اندازه صفحه ی نمایش کوچک تر از اندازه مشخص شده باشد کمک می کند.
  • Column per row occupation: دوستان این گزینه این قابلیت را به شما می دهد که اندازه ی هر ستون را به شکلی مشخص کنید تا فضای خالی بین هر المان بر پایه ی ۱۰۰ در صد که مشخص شده است اعمال شود که در واقع به شکل پیش فرض این اندازه ۸۰ در نظر گرفته شده است که بدین ترتیب ۲۰ درصد از فضای هر ستون خالی می ماند.

و در آخر عبارت mycolumns را در کادر column class بنویسید و تغییرات را ذخیره کنید.

خب دوستان قابلیت دیگری که این افزونه به شما می دهد این است که می توانید با کمک آن با توجه به نیازی که دارید ستون درست کنید و متن را در آن قرار دهید به این صورت که در قسمت ویرایشگر دیداری وردپرس یک دکمه را برای درج ستون درست می کند و این قابلیت می تواند برای شما بسیار مفید باشد. اما به هر حال این افزونه ایراد هایی هم دارد که یکی از آن ها این است که برای اضافه کردن آیکون به شکل پیش فرض هیچ قابلیتی ندارد که البته برای این اشکال هم راه حلی وجود دارد شما می توانید افزونه ی SVG Icons را نصب کنید و از آن برای این منظور استفاده کنید.

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

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

پس از آن برای اضافه کردن ستون بر روی گزینه Add کلیک کنید. سپس برای نوشتن متن خود بر روی هر ستون نشانگر ماوس را روی آن ستون ها ببرید و متن خود را وارد کنید.

حالا برای اضافه کردن آیکون نیز به کلیک بر روی گزینه ی افزودن آیکون بپردازید و آیکونی را که به توضیحات نوشته ی شما مربوط است را همانند تصویر انتخاب کنید.

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

در آخر شورت کدی را که به آیکون مربوط است را کپی کنید و در قسمت ویرایشگر ستون بگذارید.

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

اما گاهی اوقات پیش می آید که این آیکون ها برای شما به نمایش در نمی آید در آن صورت باید از کد های زیر استفاده کنید و آن ها را در فایل استایل قالب خود بگذارید.

  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; }  

و در آخر نتیجه را مشاهده کنید.

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

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

منبع : بیگ تم

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

پاسخ دهید

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