دانشگاه جامع علمی کاربردی واحد 47 تهران

موارد ذکر شده در این صفحه صرفا جهت آشنایی با نحوه کار با ابزارک های توسعه داده شده برای پوسته مگانو بوده و جهت یادگیری روش استفاده از افزونه ویژوال کامپوزر مناسب نمی باشد.

کار با صفحه ساز

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

 

عرض ستون ها

پوسته مگانو تنها از عرض های ۱/۱، ۱/۲، ۱/۴، ۳/۴ و ۳/۸ (۱/۲ در ۳/۴*) پشتیبانی می کند، به همین جهت استفاده از ابزارک های ویژوال کامپوزر تولید شده برای مگانو، تنها در این عرض ها بهترین کیفیت نمایش را داراست. این بدین معنی نیست که استفاده از عرض های دیگر مجاز نیست، لذا شما می توانید از دیگر ابزارک ها (به غیر از ابزارک های مگانو) در عرض های دلخواه استفاده نمایید.

* این عرض به صورت پیشفرض در طرح بندی های افزونه Visual Composer وجود ندارد. لذا جهت ایجاد چنین عرضی لازم است ابتدا یک ردیف به صورت (۱/۴ – ۳/۴) تعریف شود، سپس در ستون با عرض ۳/۴، دو ستون با عرض ۱/۲ ایجاد شود.

 

ایجاد و آماده سازی برگه

جهت ساخت یک صفحه با ویژوال کامپوزر، ابتدا از منوی سمت راست صفحه مدیریت وردپرس از مسیر “برگه ها > افزودن برگه”، یک صفحه جدید ایجاد و یک نام برای آن انتخاب نمایید. در ادامه جهت استفاده از ویژوال کامپوزر، روی دکمه “BACKEND EDITOR” کلیک نمایید.

 

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

 

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

در صفحه باز شده همانطور که ذکر شد، ابتدا یک ردیف در صفحه قرار خواهیم داد:

 

با کلیک کردن روی ابزارک “ردیف” یک ردیف از ستون ها در صفحه ویرایشگر قرار داده خواهد شد. هر ردیف به صورت پیش فرض دارای ۱ ستون است. این ستون در زمان نمایش در صفحات سایت، با عرض کامل نمایش داده می شود. با توجه به اینکه، عرض ستون ها در فریمورک Bootstrap 3 در قالب یک شبکه ۱۲ ستونه در نظر گرفته می شود، این ستون نیز دارای عرض ۱۲/۱۲ یا ۱/۱ است.

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

 

با توجه به مطالب ذکر شده، می توانید برای استفاده از ابزارک های مگانو از عرض های ۱/۱، ۱/۲، ۱/۴، ۳/۴ و ۳/۸ و ترکیب آنها استفاده کنید. در اینجا ذکر این نکته حائز اهمیت است که عرض توصیه شده برای ستون های حاوی ابزارک (Sidebar)، ۱/۴ در نظر گرفته شده است. برای مثال اگر قصد دارید ابزارک “سایدبار با ابزارک” را در یک ستون قرار دهید، عرض این ستون باید ۱/۴ باشد.

جهت مشاهده عرض ستون ها، نشانگر موس را روی تصاویر ستون های این بخش نگه دارید. با کلیک بر روی لینک “سفارشی” می توانید عرض های دلخواه تولید کنید و یا اینکه ترتیب ستون ها را جابجا کنید. برای مثال می توانید یک ستون با عرض ۱/۴ و یک ستون با عرض ۳/۴ را به شکل زیر در کنار هم قرار دهید:

 

و یا برعکس:

 

در هر حال باید به این نکته توجه داشت که مجموع عرض ستون ها نباید از ۱۲/۱۲ یا ۱/۱ بیشتر باشد.

 

ابزارک فاصله

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

 

ساخت صفحه

در ساخت یک صفحه اصلی برای سایت با ویژوال کامپوزر توجه به این نکته که استفاده از تعداد زیادی ابزارک می تواند سرعت بارگذاری سایت را تا حد زیادی کاهش دهد حائز اهمیت است. لذا در زمینه به منابع در اختیار هاست یا سرور خود توجه داشته باشید. توجه: در صورت استفاده بیش از حد از ابزارک ها، به دلیل فراخوانی کوئری های زیاد، احتمال بسته شدن حساب شما توسط هاست یا سرور وجود دارد.

 

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

۱- یک ردیف در صفحه ایجاد کنید.

۲- از روی علامت “+” موجود در وسط ردیف اضافه شدن کلیک کنید.

۳- از منوی باز شده، ابتدا روی تب “مگانو” و سپس روی “شبکه مطلب” کلیک کنید.

 

پس از انتخاب شبکه مطلب، یک صفحه جهت اعمال تنظیمات دلخواه نمایش داده می شود که شامل توضیحاتی جهت آشنایی با هر کدام از فیلدهای این بخش است. پس از اعمال تنظیمات مورد نظر روی دکمه “ذخیره تغییرات” کلیک کنید.

به این نکته توجه کنید که برخی ابزارک ها دارای فیلدی به نام “ستون های مادر” هستند. انتخاب هر کدام از موارد موجود به عرض ستونی که ابزارک در آن قرار میگیرد بستگی دارد. برای مثال در این مورد، چون عرض ستون ۱/۱ در نظر گرفته شده است، گزینه “تمام صفحه” را انتخاب می کنیم. به همین روش اگر عرض ستون ۳/۴ باشد، گزینه “عرض ۳/۴” را انتخاب می کنیم.

 

۴- در انتهای کار یک ابزارک فاصله قرار دهید.

 

در ادامه با کلیک روی “+” مانند تصویر زیر، یک ردیف و ۳ ستون (۲ ستون ۱/۴ برای ابزارک ها و یک ستون ۱/۲ برای نمایش مطالب) قرار می دهید.

 

برای هر کدام از ستون های با عرض ۱/۴، یک “سایدبار با ابزارک” قرار دهید. در این حالت یک صفحه جهت اعمال تنظیمات باز خواهد شد که می توانید از بخش “سایدبار” ستونی که قصد دارید در این بخش نمایش دهید را انتخاب نمایید. لازم به ذکر است که از بخش “نمایش > تنظیمات پوسته > شخصی سازی > ستون اضافه” می توانید به تعداد دلخواه ستون ایجاد کرده و در صفحات مختلف پوسته استفاده نمایید.

 

برای ستون با عرض ۱/۲، یک ابزارک “بلاگ مطلب” قرار دهید و در منوی باز شده تنظیمات مورد نظر خود را اعمال کنید. این نکته را در نظر بگیرید که در این حالت، چون عرض ستون اصلی حاوی این ابزارک، ۱/۲ انتخاب شده، در فیلد “ستون های مادر” در این منو تنها گزینه های دارای عرض ۱/۲ قابل استفاده هستند.

 

در ادامه یک ردیف جدید با ۲ ستون در عرض ۱/۲ ایجاد کنید. در هر کدام از ستون ها از ابزارک “دسته مطلب” استفاده کرده و تنظیمات آن را بر حسب موارد مورد نیاز و عرض ۱/۲ انجام دهید. در این صفحه، برای یک ابزارک در بخش “ستون های مادر” گزینه “استایل ۱” و برای دیگری “استایل ۲” انتخاب شده است.

 

در ادامه یک ردیف جدید ایجاد کنید و یک ابزارک “جعبه مطلب” برای آن انتخاب نمایید. تنظیمات موبوط به ابزارک را با توجه به عرض ستون اصلی تعیین کنید.

 

در ادامه یک ردیف جدید ایجاد نموده و ستون با عرض ۱/۴ و یک ستون با عرض ۳/۴ در آن ایجاد نمایید. برای ستون با عرض ۱/۴ یک “سایدبار با ابزارک” قرار داده و یک سایدبار برای آن انتخاب نمایید. برای ستون با عرض ۳/۴ یک ردیف جدید ایجاد کنید و در ردیف جدید ۲ ستون با عرض ۱/۲ قرار دهید. برای هر کدام از ستون ها یک “دسته مطلب” با ستون های مادر استایل ۶ و ۷ قرار دهید.

 

نکته: در انتهای تمام ابزارک های موجود در صفحه ابزارک فاصله را فراموش نکنید.

برای ستون های پوسته منوی چسبان به صورت پیش فرض فعال است، جهت استفاده از منوی چسبان در ستون های ویژوال کامپوزر از روش زیر عمل کنید:

ابتدا روی کلید ویرایش ستون، برای ستون مورد نظر کلیک کنید:

 

در منوی باز شده در فیلد “نام کلاس اضافی” مقدار زیر را وارد و تغییرات را ذخیره کنید.

sticky-sidebar

 

در انتهای صفحه یک ردیف جدید با یک ستون ۱/۱ ایجاد کنید و یک ابزارک “نوار مطلب” به آن اضافه و تنظیمات دلخواه خود را روی آن اعمال کنید. این ابزارک تنها در ستون هایی با عرض ۱/۱ قابل استفاده است.

در صورتی که بخواهید مکان ردیف ها یا ابزارک ها را تغییر دهید کافیست کلید چپ موس را روی دکمه جهت نما، مانند تصویر زیر نگه داشته و ابزارک یا ردیف را جابجا کنید.

 

برای مثال، ردیف حاوی “نوار مطلب” را به انتهای ردیف دوم منتقل می کنیم:

 

پس از ذخیره صفحه، ردیف حاوی “نوار مطلب” به جای نمایش در انتهای صفحه، بعد از ردیف دوم نمایش داده خواهد شد.