آموزش طراحی قالب وردپرس

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

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

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

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

قالب وردپرس چیست؟

اگر شما در زمینه کار با وردپرس و طراحی سایت تازه کار هستید، حتما با این سوال بنیادی مواجه هستید که اصولا منظور از قالب یا همان Template در وردپرس چیست؟  جواب کوتاه این است که قالب در واقع فایل هایی هستند که به وردپرس می گویند که هر کدام از انواع محتوا را به شکل نمایش دهد.

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

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

این که کدام قالب برای کدام محتوا مناسب است، توسط یک سلسله مراتب دسته بندی شده از قبل مشخص شده است که به آن WordPress template hierarchy می گویند. تصویر زیر نمونه ای از این سلسه مراتب قالب ها در وردپرس می باشد:

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

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

http://yoursite.com/category/news

وردپرس به این ترتیب به دنبال فایل قالب مناسب می گردد:

1. category-{slug}.php: در این مورد  category-news.php
2. category-{id}.php>: اگر شناسه (ID) دسته بندی 5 باشد، وردپرس به دنبال فایلی به نام  category-5.php می گردد.
3. php
4. php
5. php

همان طور که می بینید، در انتهای سلسله مراتب index.php قرار دارد. این فایل وقتی مورد استفاده قرار می گیرد که شما برای محتوای مورد نظر هیچ قالبی در نظر نگرفته باشید. اگر فایلی در مراتب بالاتر این روند تصمیمی گیری قرار داشته باشد، وردپرس به شکل خودکار از آن قالب برای نمایش محتوای صفحه استفاده خواهد کرد.

کاربرد طراحی قالب وردپرس

قالب پیشفرض وردپرس برای همه صفحات سایت، فایل تمپلیتی به نام page.php است. مگر آن که فایلی با جزئیات بیشتر وجود داشته باشد که به محتوای صفحه مورد نظر بخورد (مثلا فایل archive.php برای صفحه آرشیو).

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

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

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

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

آموزش گام به گام طراحی قالب وردپرس

برای شروع، هر تکست ادیتوری که با آن راحت هستید را باز کنید و کد زیر را در آن وارد کنید:

<?php /* Template Name: PageWithoutSidebar */ ?>

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

حالا می خواهیم این فایل قالب جدید خود را تست کنیم.

وارد پنل هاستینگ سایت خود بشوید. به پوشه /wp-content/themes رجوع کنید. پوشه تم خود را باز کنید و فایل  PageWithoutSidebar.php در آن آپلود نمایید.

حالا به پنل ادمینی در سایت وردپرس خود بروید. با مراجعه به قسمت Pages > Add New خواهید دید که قالب جدیدی که ساخته اید در سمت راست صفحه داخل لیست قرار دارد. مانند تصویر زیر:

یک صفحه جدید بسازید و قالب آن را  PageWithoutSidebar قرار دهید. وقتی تمام شد، Publish را بزنید و آن را منتشر کنید.

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

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

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

همانطور که گفته شد ظاهر پیشفرض صفحات توسط فایل page.php مشخص می شود. این فایل در پوشه  /wp-contents/themes/YOUR THEME/  قرار دارد. فایل page.php باز کنید و این کد را کپی نمایید:

 

<?php get_header(); ?>

<div id=”primary” class=”content-area”>

<main id=”main” class=”site-main” role=”main”>

<?php

// Start the loop.

while ( have_posts() ) : the_post();

// Include the page content template.

get_template_part( ‘template-parts/content’, ‘page’ );

// If comments are open or we have at least one comment, load up the comment template.

if ( comments_open() || get_comments_number() ) {

comments_template();

}

// End of the loop.

endwhile;

?>

</main><!– .site-main –>

<?php get_sidebar( ‘content-bottom’ ); ?>

</div><!– .content-area –>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

 

این کد را در فایل PageWithoutSidebar.php کپی کنید. زیر همان خطی که قبلا در این فایل نوشتید:

<?php /* Template Name: PageWithoutSidebar */ ?>

 

حالا فایل را سیو کنید!

بعد از پایان کار فایل PageWithoutSidebar.php شما باید به این شکل باشد:

<?php /* Template Name: PageWithoutSidebar */ ?>

<?php get_header(); ?>

<div id=”primary” class=”content-area”>

<main id=”main” class=”site-main” role=”main”>

<?php

// Start the loop.

while ( have_posts() ) : the_post();

// Include the page content template.

get_template_part( ‘template-parts/content’, ‘page’ );

// If comments are open or we have at least one comment, load up the comment template.

if ( comments_open() || get_comments_number() ) {

comments_template();

}

// End of the loop.

endwhile;

?>

</main><!– .site-main –>

<?php get_sidebar( ‘content-bottom’ ); ?>

</div><!– .content-area –>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

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

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

فایل PageWithoutSidebar.php باز کنید. تا انتهای آن پایین بیایید و این خط را حذف کنید:

<?php get_sidebar(); ?>

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

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

برای حل این مشکل، باید متن را طوری تنظیم کنید که عریض تر شود و صفحه را بپوشاند. برای این کار دوباره به فایل PageWithoutSidebar.php رجوع می کنیم. در بین خطوط کد این فایل، این خط را پیدا کنید:

1. <div id=”primary” class=”content-area”>

فقط کافی است “content-area ” را به “site-content-fullwidth” تغییر دهید. حالا تغییرات را سیو کنید و صفحه مورد نظر را در سایت ریلود کنید. می بینید که مانند تصویر زیر متن به شکل عریض در سایت نمایش داده می شود.

احتمالا برای شما این سوال به وجود آمده است که چرا از همان ابتدا فایل page.php را ویرایش نکردیم و زحمت ایجاد یک فایل جدید و کپی کردن کد ها در آن را به جان خریدیم؟!

دلیل آن واضح است. همان طور که در ابتدا گفتیم، فایل page.php قالبی است که وردپرس به طور پیش فرض برای تمام صفحات سایت در نظر می گیرد. هر تغییری در این فایل، در تمام صفحات وب سایت خود را نشان می دهد.

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

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