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

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

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

برخلاف سایت‌های ایستا که ففط از اسناد 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 را می‌بینید که البته یک نوار کناری هم دارد که کارمان را کمی سخت می‌کند.

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

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

مبانی Beaver Themer

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

جمع بندی

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