کدنویسی اختصاصی برای قالب وردپرس، یکی از آن مهارت‌هایی است که تفاوت بین «ویرایشگر CSS» و «توسعه‌دهندهٔ قالب» را می‌سازد. تجربه‌ام: بیشتر پروژه‌هایی که ظاهر سایتشان در بلندمدت به مشکل می‌خورد، نه از طراحی، که از کد سفارشیِ بی‌نظم در جای اشتباه آمده. کد اختصاصی، اگر در چارچوب درست نوشته شود، می‌تواند سال‌ها بدون درد نگه‌داری شود؛ اگر در جای اشتباه برود، با هر آپدیت، فاجعهٔ تازه‌ای می‌سازد. این مقاله، چارچوب کدنویسی اختصاصی برای قالب وردپرس را از پایه باز می‌کند: از انتخاب فایل درست تا override، هوک‌ها، و ساختار حرفه‌ای. اگر با مفاهیم پایه آشنا نیستید، قالب وردپرس چیست، توسعهٔ قالب از صفر، و قالب چایلد چیست را پیش از ادامه ببینید.

قبل از کدنویسی: چهار سؤال تصمیم

پیش از هر خط کد اختصاصی، چهار سؤال را از خودتان بپرسید: یک — هدف کد چیست؟ ظاهری یا منطقی؟ دو — آیا این کد باید با تغییر قالب باقی بماند؟ اگر بله، چایلد تم کافی نیست؛ باید افزونه باشد. سه — آیا کد باید با آپدیت والد باقی بماند؟ اگر بله، هرگز در والد. چهار — آیا این کد، فقط برای این قالب است یا عمومی؟ اگر عمومی است، افزونهٔ اختصاصی انتخاب بهتر است. تجربه‌ام: پاسخ به این چهار سؤال، در ۹۰٪ موارد مسیر را روشن می‌کند. الگوی تفکیک مسیرها در افزودن کد سفارشی و افزودن کد بدون ویرایش هسته.

کد اختصاصی برای قالب، فقط وقتی درست است که ظاهری باشد؛ هر چیز منطقی، باید به افزونه منتقل شود.

کجا کد اختصاصی را بنویسیم؟

سه گزینه در دسترس است: یک — چایلد تم. پیشنهاد اول برای هر سفارشی‌سازی ظاهری یا override template. دو — افزونهٔ اختصاصی. برای هر چیز منطقی (پردازش، ذخیره، ارتباط بیرونی). سه — mu-plugins. برای کد زیرساختی حیاتی که نباید کاربر خاموشش کند. راهنمای کامل در چایلد تم، توسعهٔ افزونه، و افزودن کد سفارشی. در این مقاله، تمرکز روی کد اختصاصیِ قالب است — یعنی چایلد تم و overrideها. تجربه‌ام: در پروژه‌ای که ۹۰٪ کد سفارشی در چایلد بود و ۱۰٪ در افزونهٔ اختصاصی، روز تغییر قالب، انتقال فقط برای همان ۱۰٪ لازم شد.

کد اختصاصی CSS

ساده‌ترین شکل کد اختصاصی قالب، CSS است. سه قاعده: یک — در style.css چایلد، نه والد. دو — enqueue صحیح، نه @import. سه — بخش‌بندی با کامنت.

/* wp-content/themes/my-child/assets/css/custom.css */

/* ---------- هدر ---------- */
.site-header {
    padding: 20px 0;
}

/* ---------- دکمه‌ها ---------- */
.btn-primary {
    background-color: #0b8a5c;
}

و enqueue آن در functions.php چایلد:

function my_child_enqueue_custom() {
    wp_enqueue_style(
        'my-child-custom',
        get_stylesheet_directory_uri() . '/assets/css/custom.css',
        array( 'my-child-style' ),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'my_child_enqueue_custom', 20 );

نکته: اولویت ۲۰ باعث می‌شود استایل شما بعد از استایل والد و چایلد اصلی بارگذاری شود. تجربه‌ام: در پروژه‌ای که بدون اولویت درست enqueue شده بود، نصف استایل‌های سفارشی خنثی می‌شدند و کسی نمی‌فهمید چرا. راهنمای آماده‌سازی RTL هم در آماده‌سازی قالب برای فارسی.

Override فایل template

برای تغییر ساختار یک صفحه، فایل template را در چایلد کپی و ویرایش کنید. سه قاعده: یک — کمترین فایل را override کنید. فقط فایل لازم را کپی کنید، نه کل پوشه. دو — مسیر یکسان باشد. اگر والد فایل را در پوشهٔ template-parts/ دارد، شما هم همان مسیر را بسازید. سه — پس از هر آپدیت والد، diff بگیرید. اگر والد تغییر کرده، تغییرات را به چایلد منتقل کنید.

my-child/
├── single.php                # override کامل
└── template-parts/
    └── content.php           # override جزئی

الگوی کامل در ساختار فایل‌های قالب استاندارد و توسعه با چایلد تم. تجربه‌ام: مستندسازی فایل‌های override در README پروژه، شش ماه بعد نجات‌دهنده است.

توابع سفارشی در functions.php

تابع سفارشی در functions.php چایلد، با پیشوند اختصاصی. الگوی استاندارد:

if ( ! function_exists( 'my_child_setup' ) ) {
    function my_child_setup() {
        add_theme_support( 'post-thumbnails' );
        add_theme_support( 'align-wide' );
        register_nav_menus( array(
            'primary' => 'منوی اصلی',
            'footer'  => 'منوی فوتر',
        ) );
    }
}
add_action( 'after_setup_theme', 'my_child_setup' );

سه نکته: یک — function_exists: امکان override توسط چایلدهای بالاتر. دو — پیشوند: جلوگیری از تعارض. سه — هوک: after_setup_theme برای تنظیمات، wp_enqueue_scripts برای asset، widgets_init برای ویجت. راهنمای هوک‌ها در هوک‌های وردپرس و استفادهٔ درست از هوک‌ها.

استفاده از هوک‌های والد

قالب‌های حرفه‌ای، هوک‌های سفارشی ارائه می‌دهند که می‌توانید در چایلد استفاده کنید. مثال:

add_action( 'mytheme_after_header', function() {
    echo '<div class="top-bar">اطلاعیه</div>';
} );

این الگو، نیازی به override فایل template را حذف می‌کند. پیش از override فایل، بپرسید: «آیا قالب هوکی برای این کار دارد؟». راهنمای تشخیص هوک در راهنمای حرفه‌ای هوک‌ها و هوک‌ها در توسعه قالب. تجربه‌ام: در قالب‌های خوب، ۷۰٪ سفارشی‌سازی‌ها با هوک قابل انجام است، بدون override فایل.

enqueue صحیح استایل و اسکریپت

سه اشتباه رایج: یک — تگ <link> مستقیم در header. باید wp_enqueue_style. دو — @import در style.css. کند و مانع enqueue. سه — نبود وابستگی. استایل چایلد، به والد وابسته است.

function my_child_assets() {
    wp_enqueue_style(
        'my-child',
        get_stylesheet_uri(),
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );
    wp_enqueue_script(
        'my-child-main',
        get_stylesheet_directory_uri() . '/assets/js/main.js',
        array( 'jquery' ),
        '1.0.0',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'my_child_assets' );

نکتهٔ مهم: پارامتر چهارم (نسخه) با wp_get_theme()->get('Version') به‌روزرسانی خودکار در آپدیت‌ها را ممکن می‌کند. راهنمای کامل در بهینه‌سازی کد.

ساختار حرفه‌ای کد اختصاصی

در چایلد تم حرفه‌ای، کد اختصاصی را در پوشه‌های مشخص قرار دهید:

my-child/
├── style.css
├── functions.php            # فقط require و init
├── inc/
│   ├── enqueue.php
│   ├── setup.php
│   ├── hooks.php
│   └── template-tags.php
├── assets/
│   ├── css/
│   └── js/
└── template-parts/          # فایل‌های override

و در functions.php:

require_once get_stylesheet_directory() . '/inc/setup.php';
require_once get_stylesheet_directory() . '/inc/enqueue.php';
require_once get_stylesheet_directory() . '/inc/hooks.php';
require_once get_stylesheet_directory() . '/inc/template-tags.php';

مزیت: خوانایی، نگهداری، امکان همکاری تیمی. تجربه‌ام: در پروژه‌ای با ۱۵۰۰ خط در functions.php چایلد، انتقال به این ساختار، زمان دیباگ را نصف کرد. الگو در استانداردهای کدنویسی و ساختاربندی پروژه.

دید مهندسی: کد اختصاصی به‌عنوان معماری

برای توسعه‌دهنده‌های سطح بالا، کد اختصاصی در قالب، سه لایه دارد: یک — لایهٔ ظاهر. CSS و JS که در چایلد می‌نشینند و مستقل از منطق‌اند. دو — لایهٔ override. فایل‌های template که ساختار را تغییر می‌دهند. سه — لایهٔ منطقِ نمایش. توابع و هوک‌هایی که داده را برای نمایش آماده می‌کنند. این سه لایه، تفاوت بین چایلد حرفه‌ای و چایلد آماتور را می‌سازند. تجربه‌ام: در پروژه‌های چند‌ساله، هر کدی که از این سه لایه خارج شده (مثلاً منطق کسب‌وکار در چایلد)، در روز تغییر قالب، فاجعه شده. الگوی معماری در افزودن قابلیت به وردپرس و افزودن کد بدون ویرایش هسته. یک نکتهٔ فنی: در پروژه‌های بزرگ، کد اختصاصی قالب باید «قابل انتقال» باشد. یعنی روزی که قالب را عوض می‌کنید، بخش اعظم کد اختصاصی به قالب جدید منتقل شود. اگر کد شما به ساختار داخلی قالب فعلی وابسته است، این انتقال دردناک می‌شود. راه‌حل: تمام کد اختصاصی را از طریق هوک‌های عمومی وردپرس بنویسید، نه هوک‌های اختصاصی قالب — مگر در موارد ضروری. این اصل، در تجربهٔ من، تفاوت بین انتقال دو روزه و انتقال دو هفته‌ای را می‌سازد.

اشتباهات رایج

جمع‌بندی

کدنویسی اختصاصی برای قالب وردپرس، سه لایه دارد: ظاهر (CSS)، override (template)، منطق نمایش (هوک). کد اختصاصی را در چایلد بنویسید، ساختار پوشه‌ای داشته باشید، و مستندسازی کنید. اگر امروز فقط یک کار می‌کنید: به functions.php چایلد فعلی خود نگاه کنید و اگر بالای ۳۰۰ خط است، شروع به انتقال بخش‌ها به پوشهٔ inc/ کنید. تجربهٔ خودتان از کد اختصاصی قالب، در دیدگاه‌ها ارزشمند است. 🎨