تبدیل قالب به وردپرس؛ ترجمه قالب HTML به وردپرس

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

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

تبدیل قالب به وردپرس

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

ایجاد فایل های لازم‎

برای ایجاد اولین قالب در وردپرس، باید یک پوشه با نام دلخواه قالب خود در پوشه themes واقع در پوشه wp-config ایجاد کنیم. هر قالب وردپرس به صورت پیش فرض نیاز به یک فایل index.php و style.css دارد. محتویات این فایل ها نیز بر اساس قالب HTML ما پر می شود. برای مثال تمام کد های صفحه اصلی را در فایل index قرار می دهیم. استایل قالب را نیز باید در فایل style قرار دهیم. پس از ایجاد این فایل ها باید کد زیر را در ابتدای فایل سی اس اس خود قرار دهیم:

/*
Theme Name: اولین قالب وردپرسی
Theme URI: https://tooc.ir/first-theme/
Author: توسی
Author URI: https://tooc.ir/
Description: اولین قالب و ساده ترین حالت تبدیل یک قالب ساده به قالب وردپرسی
Version: 1.0
*/

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

اتصال فایل ها و کد های ضروری

قالب ها در سیستم مدیریت محتوای وردپرس به فایل های جداگانه ای تقسیم می شود. برای مثال قسمت head و ابتدای قالب را در فایل جداگانه ای با نام header.php قرار می دهیم. و یا برای مثال دیگر، کد های انتهای قالب، که در تمام صفحات تکرار می شوند را در فایل footer.php قرار می دهیم. انجام این کار اجباری نیست. اما به دلیل تکرار شدن این بخش ها در صفحات مختلف، آن ها را در یک فایل جداگانه قرار داده و در جای مورد نیاز فراخوانی می کنیم. به این صورت از تکرار کد ها جلوگیری می کنیم. برای اتصال این دو فایل به فایل index و فایل های دیگر قالب نیز از دو کد زیر استفاده می کنیم:

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

وردپرس نیاز به فراخوانی کد ها و اتصال فایل های مختلفی را در قالب ما دارد. برای این کار باید دو کد زیر را به ترتیب در انتهای تگ head و قبل از بسته شدن تگ body قرار دهیم:

<?php wp_head(); ?>
<?php wp_footer(); ?>

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

بروزرسانی اتصال فایل ها

هنگام نوشتن قالب HTML، مسیر ها را به صورت مستقیم ثبت می کنیم. برای مثال برای اتصال فایل css و یا آدرس تصاویر در قالب آن ها را به صورت مستقیم می نویسیم. اما در وردپرس باید آدرس فایل ها را مشخص کنیم. برای این کار از کد زیر، قبل از نام فایل ها استفاده می کنیم:

<?php echo get_template_directory_uri(); ?>

این کد آدرس پوشه قالب ما را چاپ می کند. با انجام این کار فایل های CSS و تصاویر قالب نیز به درستی نمایش داده می شود. البته که می توان آدرس سایت و پوشه قالب را به صورت دستی نیز وارد کرد. اما کد بالا به صورت داینامیک این آدرس را بر اساس دامنه و نام پوشه قالب چاپ می کند. پس استفاده از آن را پیشنهاد می کنیم.

حلقه وردپرس برای تبدیل قالب به وردپرس

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

<?php
if (have_posts()) {
	while (have_posts()) {
		the_post();
		// your code here!
	}
}
?>

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

<?php the_title() ?>

برای درج خلاصه متن پست از کد زیر استفاده می کنیم:

<?php the_excerpt(); ?>

جهت درج تاریخ و ساعت انتشار پست از کد زیر استفاده می کنیم:

<?php the_time('d M Y'); ?> | <?php the_time('H:i'); ?>

برای درج لینک مطلب نیز از لینک زیر استفاده می کنیم:

<?php the_permalink() ?>

و کد های بیشتری برای ثبت اطلاعات مربوط به هر پست توسط وردپرس وجود دارد. شما می توانید بر اساس نیاز خود این کد ها در وب سایت وردپرس مشاهده کنید.

افزودن قابلیت به قالب

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

# Register some theme support.
function tooc_template_setup()
{
    add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'tooc_template_setup');

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

<?php the_post_thumbnail(); ?>

این کد تصویر را با ابعاد میانه و با کلاس postImage چاپ می کند. تا اینجا تمام موارد مورد نیاز ما برای ایجاد صفحه اصلی انجام شده است.

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

add_theme_support('title-tag');

صفحه داخلی در تبدیل قالب به وردپرس

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

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