ساخت قالب اختصاصی وردپرس با HTML و CSS

قالب، ظاهر و رفتار سایت وردپرس را مشخص می‌کند. وردپرس به‌صورت پیش‌فرض چند قالب آماده دارد، اما برای یک پروژه واقعی، ساخت قالب اختصاصی بهترین کار است. در این مقاله یک قالب ساده ولی استاندارد می‌سازیم.

ساختار پوشه‌ها

هر قالب وردپرس یک پوشه مستقل در مسیر wp-content/themes است و حداقل چهار فایل دارد:

my-theme/
├── style.css
├── functions.php
├── index.php
└── screenshot.png

فایل style.css

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

/*
Theme Name: قالب من
Theme URI: https://example.com
Author: نام شما
Description: توضیح کوتاه درباره قالب
Version: ۱.۰.۰
License: GPL-۲.۰-or-later
Text Domain: my-theme
*/

body {
  font-family: Vazirmatn, sans-serif;
  margin: ۰;
  padding: ۰;
}

قالب چگونه محتوا را نمایش می‌دهد؟

وردپرس برای نمایش محتوا از یک حلقه استاندارد استفاده می‌کند. ساده‌ترین شکل این حلقه در فایل index.php نوشته می‌شود:

<?php get_header(); ?>

<main class="site-main">
  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <article class="post-card">
        <h۲><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h۲>
        <div><?php the_excerpt(); ?></div&gtn      </article>
    <?php endwhile; ?>
  <?php else : ?>
    <p>محتوایی برای نمایش وجود ندارد.</p>
  <?php endif; ?>
</main>

<?php get_footer(); ?>

توابع have_posts() و the_post() با هم کار می‌کنند و به‌ترتیب بررسی می‌کنند که محتوایی باقی مانده و سپس روی هر نوشته حرکت می‌کنند.

فایل functions.php

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

<?php
// پشتیبانی از تصویر شاخص
add_theme_support( 'post-thumbnails' );

// عنوان و لوگو در هدر
add_theme_support( 'custom-logo' );

// منوی سفارشی
register_nav_menus( [
  'primary' => 'منوی اصلی',
]);

قالب اختصاصی یا قالب فرزند؟

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

/*
Theme Name: قالب من
Template: twentytwentyfive
*/

توصیه من: همیشه از قالب فرزند استفاده کنید. ویرایش مستقیم قالب اصلی یعنی از دست دادن همه تغییرات با اولین به‌روزرسانی.