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

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

12 شهریور 1401

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

در ویدئوی زیر مراحل اولیه ساخت قالب وردپرس را توضیح داده ایم در ادامه می توانید توضیحات هر مرحله را مطالعه کنید.

گام 1: نصب وردپرس

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

بعد از نصب وردپرس 3 تا پوشه اصلی دارد:

wp-admin: شامل فایل های مربوط به پنل مدیریت است

wp-content: شامل فایل های مربوط به قالب و افزونه ها و فایل زبان و فایل آپلود است.

wp-includes: فایل مورد نیاز کتابخانه های آماده و فایل های مورد نیاز هسته وردپرس که نیازی به تغییر این فایل ندارید

گام 2: ساخت پوشه برای قالب

پوشه‌ای که ما با آن سر و کار داریم، پوشه wp-content است. داخل این پوشه، پوشه دیگری به نام themes وجود دارد که تمامی قالب‌هایی که بخواهید روی سایت خود نصب کنید، در این پوشه قرار میگیرند. وردپرس به صورت پیش فرض 3 قالب در این پوشه قرار داده است. در پوشه themes یک پوشه جدید با نام قالب تان بسازید. ما نام Muli را انتخاب کردیم و تمام فایل های قالب شامل css، font، js و… را به پوشه قالب انتقال دهید.

گام 3: یک برنامه ویرایشگر کد نصب کنید

برای مدیریت آسان کدها نیاز به یک برنامه ویرایشگر کد داریم. ویرایشگرهای متعددی وجود دارند که در مقاله بهترین ویرایشگرهای کد به بررسی چند نمونه ویرایشگر پرداخته ایم و شما می توانید یکی از آنها را انتخاب کنید معمولا کاربران از Notepad++ و VScode بیشتر استفاده می کنند.

گام 4: ایجاد فایل style.css و index.php

در پوشه Muli دوفایل style.css و index.php را بسازید این دو فایل را می توانید مستقیم در پوشه ایجاد کنید و یا در ادیتور در قسمت add new file ایجاد کنید.

فایل های style.css و index.php دو فایل بسیار مهم در ساخت قالب وردپرس است.

style.css: یک فایل ضروری است که در آن تنظیمات ظاهر قالب قرار می گیرد. در مثال زیر، نام قالب، نام سازنده، آدرس سازنده و نسخه قالب را قرار داده‌ایم وجود این کدها در فایل استایل ضروری است و اگر این کدها را قرار ندهید قالب شما شناخته نمی شود قطعه کد زیر را در فایل style.css قرار دهید.

/*
Theme Name: Muli
Text Domain: RTL
Version: 1.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: best corporate theme for buisness
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support-
Author: Zahra Ghaffari
Author URI: https://rtl-theme.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Index.php: در این فایل باید کدهای قسمت های اصلی سایت را قرار دهید مواردی مانند هدر، فوتر و سایر قسمت ها در فایل ایندکس فرhخوانی می شود.

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

برای اینکه عکس قالب شما نمایش داده شود یک عکس با نام screenshot.png در فایلی که ایجاد کردید قرار دهید.

گام 5: قالب خود را از پیشخوان وردپرس فعال کنید

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

گام 6 طراحی قالب وردپرس: ساخت فایل های مورد نیاز

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

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

به سراغ فایل index.php می رویم مهترین قدم در ساخت قالب وردپرس این است که برای دسترسی به استایل ها آدرس دهی به فایل ها را اصلاح کنید برای این کار دو تابع get_stylesheet_uri و get_template_directory_uri را نیاز دارید.

برای فراخوانی کدهای css از تابع زیر استفاده کنید:

<?php echo get_stylesheet_uri(); ?>

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

<?php echo get_template_directory_uri(); ?>

در ویدئو زیر نحوه استفاده از این کد ها و داینامیک کردن قسمت های مختلف در ساخت قالب وردپرس را مشاهده کنید:

سایر کدهای استفاده شده برای ساخت قالب وردپرس در ویدئو را ادامه می توانید مشاهده کنید:

گام 7: نمایش عنوان و محتوای نوشته ها

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

<?php while(have_posts())
{
the_post();
the_title();
the_content();
}
?>

این حلقه از دو تابع ()have_posts و ()the_post استفاده می‌کند؛ تابع ()have_post بررسی می‌کند که آیا پستی برای نمایش وجود دارد یا خیر و تابع ()the_post وردپرس را برای نمایش پست‌ها آماده می‌کندحالا می توانید عنوان و توضیح نوشته را فراخوانی کنید.

تابع ()the_title عنوان نوشته و تابع ()the_content محتوای نوشته را نمایش می‌دهد. این کار برای هر تعداد مقاله‌ای که در دیتابیس شما موجود است، انجام می‌شود و همه آن‌ها نمایش داده خواهند شد. اگر سایت خود را ببینید، ملاحظه می‌کنید که همه چیز برای ساخت قالب وردپرس به خوبی پیش می‌رود.

گام 8: اضافه کردن لینک به هر نوشته

اگر برای هر نوشته بخواهید امکان کلیک بر روی عنوان وجود داشته باشد می توانید از تابع ‌()the_permalink استفاده کنید.

<h6><a href="<?php the_permalink()?>"><?php the_title()?></a></h6>

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

همان طور که گفتیم قسمت های مختلف قالب وردپرس را در فایل جداگانه قرار دهید در واقع کار این دو فایل این است که محتوایی که ما می‌خواهیم را در قسمت سربرگ و پابرگ سایت نمایش داده شود این فایل در طراحی قالب وردپرس از اهمیت بالایی برخوردار است زیرا تگ های html و body در آن قرار دارند. برای جداکردن هدر یک فایل header.php ایجاد کنید و کدهای مربوط به هدر را در این فایل قرار دهید. در فایل index.php برای فراخواندن هدر از تابع ()get_header استفاده کنید.

محتویات موجود در پوشه وردپرس

در مورد فوتر هم به همین شکل عمل کنید فایل های فوتر را به فایل footer.php انتقال دهید و برای فراخواندن فوتر ()get_footer استفاده کنید نحوه استفاده از این کدها به صورت زیر است:

<?php get_header(); ?>
و
<?php get_footer(); ?>

گام 10: اضافه کردن تاریخ، دسته بندی و نویسنده

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

<?php the_category(); ?> 
<?php the_author(); ?>

در مورد نمایش تاریخ هم به صورت زیر می توانید تاریخ را نمایش دهید

<?php echo get_the_date(); ?>

در مورد echo یکی از پرکاربرد ترین کدهای php است هر چیزی که به عنوان ورودی به تابع echo داده شود در خروجی به صورت متن چاپ می‌شود می توانید به صورت مقدار ثابت یا متغییر این خروجی باشد مثلا یک جمله باشد یا مقداری مانند تاریخ که متغیر است.

گام 11: اضافه کردن منو

برای داینامیک کردن منو نیاز به کدنویسی در تابع functions.php دارید ابتدا باید مشخص کنیدکه چند منو دارید

اگر یک منو دارید از این کد استفاده کنید که main-menu نام دلخواهی است که برای منو در نظر گرفتیم، با این کار منو به فهرست در پیشخوان اضافه می شود

function register_my_menu() {
 register_nav_menu('main-menu',"منو اصلی" );
 }
 add_action( 'init', 'register_my_menu' );

و اگر چند منو دارید کد زیر را به فایل فانکشن اضافه کنید

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

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

<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>

از قسمت نمایش می توانید فهرست را انتخاب کنید و دسته های مورد نظر را اضافه کنید.

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

2 دیدگاه ها افزودن دیدگاه