چگونه بدون کدنویسی برای وردپرس قالب بسازیم؟

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

چگونه بدون کدنویسی برای وردپرس قالب بسازیم

طراحی قالب دلخواه وردپرس برای تازه کارها

برخلاف سایت‌های ایستا که ففط از اسناد HTML تشکیل شدند، قالب‌های وردپرس از اسناد PHP و HTML و CSS و JavaScript تشکیل شده‌اند. پس شما باید به نوعی دانش اولیه و متوسطه از این زبان‌ها داشته باشید تا بتوانید یک پوسته برای وردپرس بسازید.

اگر این کار را بخواهید به یک شرکت یا توسعه دهنده بسپارید تا برای‌تان انجام دهد، هزینهٔ زیادی را باید متقبل شوید. بنابراین کسب و کارهای متوسط رو به کوچک، برای‌شان صرف ندارد که یک چنین کاری بکنند. که معمولاً یا از قالب‌های آمادهٔ رایگان استفاده می‌کنند، یا قالبی را خریداری می‌کنند.

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

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

از طرف دیگر افزونه‌های صفحه ساز فقط برای ساخت یکی یکی صفحه کاربرد دارند. نه ساختار قالب کل سایت! از طرف دیگر در طرح بندی هم محدودیت دارند. با آنها نمی‌توان قالب سفارشی ایجاد کرد.

مثلا افزونه Beaver Builder به عنوان یک افزونهٔ صفحه ساز، تا زمانی که یک برگه ساز باشد، فقط همین کار از پسش بر خواهد آمد. اما با استفاده از ابزار جانبی آن، یعنی Beaver Themer حالا می‌توانیم یک قالب حرفه‌ای و زیبا از صفر بدون هیچ گونه کدنویسی ایجاد کنیم!

Beaver Themer نام یک افزونه است که حتماً باید در کنار Beaver Builder روی وردپرس نصب شود. که به روش گرفتن و کشیدن و بدون نیاز به دانش کدنویسی می‌توان با آن پوسته‌های وردپرس بسیار عالی طراحی کرد. اجازه دهید ببینیم چطور باید یک چنین کاری را با Beaver Themer انجام دهیم.

برپاسازی Beaver Themer برای ساخت پوسته وردپرس

Beaver Themer یک افزونه برای Beaver Builder است. پس شما به دوی این افزونه‌ها برای این آموزش نیاز خواهید داشت. خود Beaver Builder که یک افزونه رایگان است. اما Beaver Themer پولی است. به هر حال از هر روشی که آن را تهیه کردید، باید آن را روی وردپرس نصب کنید.

Beaver Themer هر چند که سازندهٔ قالب برای وردپرس است. اما برای شروع کار باز هم نیاز به یک پوسته به عنوان پایهٔ کار احساس می‌شود. این قالب اولیه باید سبک و تمام عرض باشد. در ادامه ما از پوسته Astra استفاده کردیم.

تنظیم کردن پوستهٔ پایه برای Beaver Themer

وقتی از Beaver Themer برای ساخت پوستهٔ خود استفاده می‌کنید، باید دقت کنید پوسته‌ای که به عنوان پوستهٔ پایه، در حال کار روی آن هستید، باید کاملا تمام صفحه باشد؛ از لبه تا لبه. در تصویر زیر پوسته Astra را می‌بینید که البته یک نوار کناری هم دارد که کارمان را کمی سخت می‌کند.

پوسته Astra

برای حذف نوار کناری این قالب کافی است به صفحهٔ نمایش » سفارشی‌سازی رفته و سپس از گروه Layout » Sidebars مقدار No Sidebar را برای گزینهٔ default layout انتخاب کنید. سپس صفحه را ذخیره کنید. حالا قالب بدون نوار کناری تنظیم شده و همه چیز مهیای استفاده از Beaver Themer است.

پوسته Astra بدون نوار کناری

خیلی از پوسته‌های وردپرس گزینهٔ تنظیماتی‌ای برای حذف نوار کناری دارند. برای استفادهٔ اینج اینجِ از فضای کاری بهتر است که حتماً نوار کناری را حذف کنید.

یک آموزش جذاب دیگه!  چگونه قالب وردپرس را نصب کنیم ؟

مبانی Beaver Themer

Beaver Themer بر پایهٔ Beaver Builder کار می‌کند. یعنی حتماً باید وجود داشته باشد بتوان کار کرد.

Beaver Builder به عنوان یک افزونهٔ برگه ساز، با امکان گرفتن و کشیدن امکان ساخت ساختار یک برگه را فراهم می‌آورد. در طرح بندی استفاده از آن موارد زیر استفاده می‌شوند:

  • Template :‌ مجموعه‌ای از ردیف‌ها و ستون‌ها است که ساختار کلی صفحه را ایجاد می‌کنند.
  • Columns : یک محفظه به صورت عمومی است که برای قرارگیری محتوا به صورت افقی کاربرد دارد.
  • Rows : مجموعه‌ای افقی از چندین عنصر
  • Module : یک عنصر که اطلاعات خاصی را خروجی می‌دهد، مثل عنوان، قطعهٔ متنی، جدول و …

حالا برای استفاده از Beaver Builder به عنوان برگه ساز، می‌توان روی علامت + در بالای سمت راست صفحه کلیک کنید و هر عنصری که می‌خواهیم را از سربرگ Module انتخاب کرده و به داخل ردیف ها یا ستون‌ها رها کنیم.

ویرایشگر Beaver Builder

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

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

سربرگ Template در Beaver Themer

با اینکه قصد ما در اینجا ساخت برگه نیست، بلکه می‌خواهیم یک پوستهٔ کامل به همین شیوه ایجاد کنیم. ولی باید با طریقهٔ کار کردن Beaver Builder آشنا بود. چون در نهایت از همین شیوه برای ساخت پوسته استفاده خواهیم کرد. با این تفاوت که این بار چینش اجزایی که انتخاب می‌کنیم، برای نوع خاصی از تمامی صفحات سایت استفاده می‌شود.

پس Beaver Themer هم وارد عرصه می‌شود! با فعال کردن آن، یک گزینهٔ دیگر به گروه صفحات Beaver Builder با نام Themer Layout افزوده خواهد شد.

انتخاب Layout

Themer layouts این امکان را فراهم می‌کند که شما برای header و footer و حیطهٔ محتوای صفحات، صفحات ۴۰۴ و دیگر قسمت‌های قالب طرح‌بندی جداگانه بسازید. دقیقاً به همان روش گرفتن و کشیدنی که خدمت شما عرض شد.

استفاده از Beaver Themer برای ساخت پوستهٔ سفارشی وردپرس

با دستورالعملی که در ادامه خواهد آمد، شما پوستهٔ پایه‌تان را به یک Child Theme کامل تبدیل خواهید کرد و از آن می‌توانید استفاده کنید.

ساخت پوستهٔ سرصفحه (Header)

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

پس در اولین گام باید طرح سرصفحه را در Beaver Themer مشخص کنیم. به صفحهٔ Beaver Builder » Add New رفته و عنوانی را برای هدر در Title وارد کنید. سپس Themer Layout را به عنوان Type و مقدار Header را برای Layout انتخاب کنید.

افزودن طرح سرصفحه در Beaver Themer

سپس روی Add Themer Layout کلیک کنید. با این کار به صفحهٔ layout settings که همان تنظیمات طرح بندی است هدایت خواهید شد. در اینجا شما باید Entire Site به معنای کل سایت را انتخاب کنید. یعنی تنظیماتی که برای این Layout می‌خواهید انجام دهید، برای کل سرصفحهٔ تمامی صفحات سایت اعمال گردد.

ویرایش طرح سرصفحه در Beaver Themer

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

ویرایش طرح سرصفحه در Beaver Themer

حالا طبق همان چیزهایی که در بخش «مبانی Beaver Themer» خدمت شما توضیح داده شد، می‌توانید شروع به ساخت ساختار صفحه کنید. اجزا را درون ستون‌ها و ردیف‌ها قرار دهید، ردیف‌های دلخواه خود را ایجاد کنید.

یک آموزش جذاب دیگه!  جلسه ۱۵ : نصب پوسته وردپرس

زمانی که از طراحی خودتان راضی شدید، روی Done کلیک کنید تا تنظیمات ذخیره و منتشر شوند. حالا می‌توانید از سایت خود بازدید کرده و تغییرات را ببینیم که الان فعلاً فقط روی هدر یا همان سر صفحهٔ صفحات کار کردیم.

طرح سرصفحه در Beaver Themer

ساخت پوستهٔ پاصفحه (Footer)

خوب، حالا که سر صفحه را ایجاد کردیم، دقیقاً همین کارها را هم می‌توانیم برای پاصفحهٔ صفحات سایت انجام دهیم. پس به صفحهٔ Beaver Builder » Add New در پیشخوان وردپرس رفته و یک طرح جدید ایجاد می‌کنیم که نام آن را My Theme Footer می گذاریم و Layout آن را حتماً Footer انتخاب کنید.

افزودن طرح پاصفحه در Beaver Themer

دقیقاً تمامی کارهایی که برای سرصفحه انجام دادیم، باید برای ساخت قالب پاصفحهٔ تمامی صفحات سایت هم انجام دهیم. در نهایت هم صفحهٔ ویرایش طرح پاصفحه به صورت زیر خواهد شد.

ویرایش طرح پاصفحه در Beaver Themer

ساخت پوستهٔ حیطهٔ محتوا برای نوشته‌ها و برگه‌ها

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

افزودن طرح حیطه محتوا در Beaver Themer

در مرحلهٔ بعدی یعنی صفحهٔ Edit Themer Layout می‌بایستی Location را All Singular انتخاب کنید. به این معنا که برای تمامی نوشته‌ها باشد.

ویرایش طرح حیطه محتوا در Beaver Themer

بعد از اینکه روی Launch Beaver Builder کلیک کردید، صفحهٔ ویرایش ظاهر و عناصر محتوای صفحه باز خواهد شد که باز هم باید همان کاری را بکنید برای سرصفحه و پاصفحه انجام دادید. یعنی اجزاء آن را بچینید. حال با بازدید از سایت، نتیجهٔ کارهای خود را تا به اینجا خواهید دید. باید برای شما جالب باشد!

پیش نمایش طرح حیطه محتوا در Beaver Themer

ساخت پوستهٔ صفحات بایگانی

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

افزودن طرح بایگانی در Beaver Themer

در مرحلهٔ بعدی Location را روی All Archives قرار دهید و سپس روی Launch Beaver Builder کلیک کنید و ساختار این نوع از صفحات سایت را هم تعیین کنید.

ویرایش طرح بایگانی در Beaver Themer

دقیقاً به همان شیوهٔ گرفتن و کشیدن می‌توانید ظاهر و پوستهٔ صفحات بایگانی سایت شامل برچسب‌ها، دسته‌ها و غیر را تعیین کنید. بعد از آن هم روی Done کلیک کنید.

ویرایش طرح بایگانی در Beaver Themer

ساخت پوستهٔ دیگر صفحات سایت

Beaver Themer حتی برای انواع دیگر صفحات سایت هم می‌تواند ظاهر در پوستهٔ شما بسازد. برای این منظور در صفحهٔ اولی که می‌خواهید یک Layout بسازید، برای گزینهٔ Layout مقادیر دیگری را هم می‌توانید انتخاب کنید. صفحات ۴۰۴، template parts، برگه‌های جستجو و دیگر از جملهٔ آنهاست.

جمع بندی

با همین امکان افزونهٔ Beaver Builder به راحتی و بدون نیاز به کدنویسی و تنها با قابلیت گرفتن و کشیدن می‌توان قالب دلخواه خودتان را ایجاد کنید. ما امیدواریم که این مقاله برای شما دوستان علاقه مند به وردپرس، مخصوصاً طراحی قالب وردپرس بدون کدنویسی آن قدر جذاب باشد که دیگر نوشته‌ها و ویدیوهای ما را دنبال کنید. در این زمینهٔ آموزش‌های زیادی ارائه خواهیم داد.

ارسال دیدگاه

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

آموزش جامع وردپرس

آموزش نصب وردپرس روی لوکال هاست

آموزش افزونه Yoast SEO

درباره ®WPTutorial

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