آموزش عملی تبدیل قالب HTML به قالب وردپرس؛ از ساخت style.css و functions.php تا جدا کردن هدر و فوتر، منوها، حلقه‌ی نوشته‌ها و فیلدهای قابل ویرایش.
یک قالب HTML آماده داری، از یک فروشگاه قالب خریده‌ای یا برنامه‌نویس از روی طرح فیگما برایت ساخته، و حالا می‌خواهی محتوایش را از پنل وردپرس مدیریت کنی. خبر خوب این است که تبدیل HTML به وردپرس کار پیچیده‌ای نیست، به شرطی که ترتیب درست را رعایت کنی. در این آموزش یک قالب HTML ساده را قدم به قدم به قالب وردپرس تبدیل می‌کنیم.
قبل از شروع چه لازم داری؟
- یک وردپرس نصب‌شده روی کامپیوترت؛ با ابزارهایی مثل LocalWP یا XAMPP
- فایل‌های قالب HTML: معمولاً
index.html، چند صفحه‌ی داخلی و پوشه‌هایcss،jsوimages - آشنایی مقدماتی با HTML و کمی PHP
قدم ۱: ساخت پوشه‌ی قالب
در مسیر wp-content/themes یک پوشه به اسم قالبت بساز، مثلاً mytheme. پوشه‌های css، js و images قالب HTML را داخلش کپی کن. وردپرس برای شناختن قالب فقط دو فایل لازم دارد: style.css و index.php.
قدم ۲: فایل style.css
بالای این فایل اطلاعات قالب نوشته می‌شود تا در پیشخوان دیده شود:
/*
Theme Name: My Theme
Author: Your Name
Version: 1.0
Text Domain: mytheme
*/لازم نیست CSS اصلی قالب را اینجا بیاوری. فایل‌های CSS قبلی همان‌جا می‌مانند و در قدم بعد بارگذاری می‌شوند.
قدم ۳: functions.php و بارگذاری CSS و JS
در قالب HTML فایل‌ها با تگ link و script مستقیم صدا زده می‌شوند. در وردپرس این کار باید با wp_enqueue انجام شود تا افزونه‌ها هم بتوانند درست کار کنند:
<?php
add_action('after_setup_theme', function () {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
register_nav_menus(['main' => 'منوی اصلی', 'footer' => 'منوی فوتر']);
});
add_action('wp_enqueue_scripts', function () {
$uri = get_template_directory_uri();
wp_enqueue_style('mytheme', $uri . '/css/style.css', [], '1.0');
wp_enqueue_script('mytheme', $uri . '/js/main.js', [], '1.0', true);
});title-tag باعث می‌شود وردپرس و افزونه‌های سئو عنوان صفحه را خودشان بسازند، پس تگ title را از HTML حذف کن.
قدم ۴: جدا کردن header.php و footer.php
بخش‌هایی که در همه‌ی صفحه‌ها تکرار می‌شوند را از index.html جدا کن:
- از اول فایل تا آخر هدر سایت می‌رود در
header.php - از اول فوتر تا آخر فایل می‌رود در
footer.php
در header.php دو چیز را حتماً اضافه کن: wp_head() قبل از بسته شدن head و body_class() روی تگ body. در footer.php هم wp_footer() قبل از بسته شدن body لازم است. بدون این سه، خیلی از افزونه‌ها کار نمی‌کنند.
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>آدرس تصاویر داخل قالب هم باید از images/logo.svg به این شکل عوض شود:
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.svg" alt="<?php bloginfo('name'); ?>">قدم ۵: منوی پویا
منوی ثابت HTML را با منوی وردپرس جایگزین کن تا از بخش «نمایش ← فهرست‌ها» قابل ویرایش باشد:
<?php wp_nav_menu(['theme_location' => 'main', 'container' => false, 'menu_class' => 'nav']); ?>اگر استایل قالب به کلاس‌های خاصی روی li یا a وابسته است، یا CSS را با کلاس‌های وردپرس هماهنگ کن یا از یک Walker سفارشی استفاده کن.
قدم ۶: صفحه‌ی اصلی و حلقه‌ی نوشته‌ها
محتوای میانی index.html را در front-page.php بگذار و بالا و پایینش هدر و فوتر را صدا بزن:
<?php get_header(); ?>
<!-- بخش‌های صفحه‌ی اصلی -->
<?php get_footer(); ?>برای بخش «آخرین مقاله‌ها»، کارت‌های ثابت HTML را با حلقه‌ی وردپرس عوض کن:
<?php
$posts = new WP_Query(['posts_per_page' => 3]);
while ($posts->have_posts()) : $posts->the_post(); ?>
<article class="card">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium'); ?></a>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p><?php echo get_the_excerpt(); ?></p>
</article>
<?php endwhile; wp_reset_postdata(); ?>صفحه‌های دیگر هم همین‌طور ساخته می‌شوند: single.php برای نمایش مقاله، page.php برای برگه‌ها، archive.php برای لیست مقاله‌ها و 404.php برای صفحه‌ی خطا. ترتیب انتخاب این فایل‌ها توسط وردپرس را در مراحل ساخت قالب اختصاصی کامل توضیح داده‌ام.
قدم ۷: متن‌های ثابت را قابل ویرایش کن
اینجا مهم‌ترین تفاوت یک تبدیل معمولی با یک تبدیل حرفه‌ای است. تیتر هیرو، متن دکمه‌ها، شماره‌ی تماس و آدرس نباید داخل کد بمانند. برای این کار معمولاً از افزونه‌ی ACF استفاده می‌شود:
<h1><?php echo esc_html(get_field('hero_title') ?: 'تیتر پیش‌فرض'); ?></h1>بعد از این کار، مدیر سایت در صفحه‌ی ویرایش برگه‌ی اصلی یک فیلد ساده‌ی «تیتر هیرو» می‌بیند و بدون دست زدن به کد عوضش می‌کند.
قدم ۸: راست‌چین، سرعت و سئو
- راست‌چین: اگر قالب انگلیسی است، فقط
dir="rtl"کافی نیست. نکته‌هایش را در راهنمای راست‌چین کردن قالب ببین. - سرعت: تصاویر را WebP کن، فونت‌ها را محلی بارگذاری کن و اسکریپت‌ها را با پارامتر آخر
trueدر فوتر بگذار. - سئو: یک
h1در هر صفحه، متن جایگزین برای تصاویر و سازگاری با Yoast یا Rank Math.
اشتباه‌های رایج
- فراموش کردن
wp_headوwp_footer: نوار ابزار مدیر و خیلی از افزونه‌ها کار نمی‌کنند. - آدرس نسبی تصاویر: در صفحه‌های داخلی تصاویر نمایش داده نمی‌شوند.
- بارگذاری دوباره‌ی jQuery: وردپرس خودش jQuery دارد و نسخه‌ی دوم تداخل می‌سازد.
- ثابت ماندن محتوا در کد: قالب ظاهراً وردپرسی است ولی برای هر تغییر متن باز هم برنامه‌نویس لازم است.
جمع‌بندی
تبدیل قالب HTML به وردپرس یعنی جدا کردن بخش‌های تکراری، جایگزین کردن محتوای ثابت با توابع وردپرس و قابل ویرایش کردن متن‌ها از پیشخوان. یک قالب ساده با این مراحل در یکی دو روز تبدیل می‌شود، ولی قالب‌های چندصفحه‌ای با فیلدهای زیاد، فروشگاه یا نسخه‌ی دوزبانه دقت و زمان بیشتری می‌خواهند.
اگر نمی‌خواهی خودت درگیر کد شوی، تبدیل قالب HTML به وردپرس را به من بسپار، یا قیمت پروژه‌ات را همین حالا حساب کن.