ساخت پنل تنظیمات قالب وردپرس با بخش سفارشی‌سازی

اگه یک قالب اختصاصی ساختید، احتمالاً نمی‌خواید مدیر سایت برای عوض‌کردن رنگ، لوگو یا بخش‌های مختلف قالب سراغ کدها بره. در قالب‌های کلاسیک، سفارشی‌ساز وردپرس یکی از راه‌های استاندارد برای ساخت همین گزینه‌هاست. توی این آموزش اول نوع قالب رو مشخص می‌کنیم، بعد یک تنظیم واقعی برای رنگ سربرگ می‌سازیم، ورودی اون رو پاک‌سازی می‌کنیم و مقدار ذخیره‌شده رو به‌شکل امن در قالب نشون می‌دیم.

در ادامه با تفاوت پیش‌نمایش معمولی، postMessage و Selective Refresh هم آشنا می‌شید. اگه قالبتون بلوکیه، مسیر درست کار با اون یعنی theme.json و ویرایشگر سایت رو هم می‌بینید تا وقتتون رو برای ابزار نامناسب نذارید. برای آشنایی با ساخت بخش‌های دیگه سایت هم می‌تونید راهنمای ساخت صفحه اصلی سفارشی در وردپرس رو بخونید.

قبل از ساخت پنل تنظیمات قالب وردپرس، نوع قالبتون رو مشخص کنید

تفاوت قالب کلاسیک و قالب بلوکی چیه؟

قالب کلاسیک معمولاً فایل‌هایی مثل header.php، footer.php و sidebar.php داره و بخش زیادی از ظاهرش با PHP ساخته می‌شه. قالب بلوکی از قالب‌های HTML، بلوک‌ها، فایل theme.json و ویرایشگر سایت وردپرس استفاده می‌کنه.

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

این آموزش برای چه قالب‌هایی مناسبه؟

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

تنظیمات قالب بلوکی کجا مدیریت می‌شن؟

در قالب بلوکی معمولاً از مسیر «نمایش ← ویرایشگر» وارد مدیریت ظاهر سایت می‌شید. این بخش با «نمایش ← سفارشی‌سازی» فرق داره و برای ویرایش قالب‌ها، سربرگ، پابرگ و استایل‌های سراسری ساخته شده.

فایل theme.json هم مشخص می‌کنه چه رنگ‌ها، اندازه‌ها، فونت‌ها و گزینه‌هایی در دسترس باشن. پس اگه گزینه «سفارشی‌سازی» رو نمی‌بینید، اول بررسی کنید که قالبتون بلوکی نباشه.

برای ساخت پنل تنظیمات قالب وردپرس به چه چیزهایی نیاز دارید؟

• دسترسی به فایل‌های قالب کلاسیک، به‌خصوص فایل functions.php
• آشنایی مقدماتی با PHP و ساختار قالب وردپرس
• اگه یک قالب آماده رو تغییر می‌دید، یک قالب فرزند تا تغییراتتون با به‌روزرسانی قالب اصلی از بین نره
• نسخه پشتیبان و یک محیط آزمایشی برای بررسی کدها قبل از استفاده در سایت اصلی

اگه قالب اختصاصی خودتون رو از پایه می‌سازید، می‌تونید کد رو داخل همون قالب بذارید. قالب فرزند بیشتر زمانی لازمه که می‌خواید فایل‌های یک قالب آماده یا قالب والد رو تغییر بدید.

یک اشتباه در ویرایش functions.php ممکنه سایت رو با خطای PHP روبه‌رو کنه. برای همین کدها رو اول در محیط آزمایشی اجرا کنید و راه دسترسی به فایل‌ها از طریق هاست یا FTP رو هم آماده نگه دارید. اگه با خطایی روبه‌رو شدید، راهنمای جامع حل خطاهای وردپرس می‌تونه کمکتون کنه.

سفارشی‌ساز وردپرس چیه و چطور کار می‌کنه؟

آشنایی ساده با Customize API

Customize API وردپرس مجموعه‌ای از ابزارهای برنامه‌نویسیه که با کمک اون‌ها می‌تونید گزینه‌های دلخواه قالبتون رو به سفارشی‌ساز اضافه کنید. پنلی که در این مقاله می‌سازیم داخل سفارشی‌ساز قالب کلاسیک قرار می‌گیره؛ پس با یک صفحه تنظیمات مستقل در پیشخوان فرق داره. کاربر مقدار دلخواهش رو انتخاب می‌کنه، نتیجه رو در پیش‌نمایش می‌بینه و بعد تغییرات رو ذخیره می‌کنه.

تفاوت پنل، بخش، تنظیم و کنترل

• پنل یا Panel: چند بخش مرتبط رو داخل یک گروه بزرگ‌تر قرار می‌ده.
• بخش یا Section: چند گزینه مرتبط، مثل تنظیمات سربرگ، رو کنار هم نگه می‌داره.
• تنظیم یا Setting: مقدار واقعی، مثل کد رنگ انتخابی، رو نگه می‌داره.
• کنترل یا Control: همون ابزار قابل‌مشاهده مثل کادر متن یا انتخابگر رنگه که کاربر با اون مقدار تنظیم رو عوض می‌کنه.

مسیر باز کردن بخش سفارشی‌سازی در قالب کلاسیک

بعد از فعال‌کردن یک قالب کلاسیک، معمولاً می‌تونید از مسیر «نمایش ← سفارشی‌سازی» وارد این بخش بشید. راه دوم اینه که موقع دیدن سایت، از نوار مدیریت بالای صفحه روی «سفارشی‌سازی» کلیک کنید.

ثبت تنظیمات قالب با هوک customize_register

ساخت تابع اصلی تنظیمات

هوک نقطه‌ایه که وردپرس در اون اجازه می‌ده تابع خودتون رو در زمان مشخصی اجرا کنید. برای ثبت گزینه‌های سفارشی‌ساز، یک تابع می‌سازیم که شیء $wp_customize رو دریافت می‌کنه:

function mihanwp_register_customizer_options( $wp_customize ) {    // Panel, section, setting and control code goes here.}

اتصال تابع به customize_register

حالا تابع رو با add_action() به هوک customize_register وصل کنید:

add_action( 'customize_register', 'mihanwp_register_customizer_options' );

از این مرحله به بعد، کدهای مربوط به پنل، بخش، تنظیم و کنترل داخل همین تابع اصلی قرار می‌گیرن.

انتخاب پیشوند اختصاصی برای جلوگیری از تداخل شناسه‌ها

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

ساخت پنل و بخش در سفارشی‌ساز وردپرس

ساخت پنل با add_panel

اگه چند گروه تنظیمات دارید، می‌تونید با add_panel() یک پنل اصلی بسازید:

$wp_customize->add_panel(    'mihanwp_theme_options',    array(        'title'       => __( 'تنظیمات قالب', 'mihanwp-theme' ),        'description' => __( 'گزینه‌های ظاهری قالب رو از اینجا مدیریت کنید.', 'mihanwp-theme' ),        'priority'    => 30,    ));

ساخت بخش با add_section

حالا بخش تنظیمات سربرگ رو با add_section() داخل همین پنل می‌ذاریم:

$wp_customize->add_section(    'mihanwp_header_section',    array(        'title'    => __( 'تنظیمات سربرگ', 'mihanwp-theme' ),        'panel'    => 'mihanwp_theme_options',        'priority' => 10,    ));

تنظیم عنوان، اولویت و محل نمایش بخش

گزینه title عنوانی رو تعیین می‌کنه که کاربر می‌بینه. مقدار priority جای تقریبی بخش رو مشخص می‌کنه و panel می‌گه این بخش داخل کدوم پنل قرار بگیره. اگه panel رو ننویسید، بخش در سطح اصلی سفارشی‌ساز دیده می‌شه.

دسته‌بندی تنظیمات شلوغ با پنل‌ها

برای یکی دو بخش لازم نیست حتماً پنل بسازید. ولی اگه تنظیمات سربرگ، پابرگ، نوشته‌ها و رنگ‌ها رو جدا کرده‌اید، پنل دسترسی به گزینه‌ها رو راحت‌تر می‌کنه. یادتون نره که یک بخش خالی معمولاً نمایش داده نمی‌شه؛ پس باید حداقل یک کنترل داخلش داشته باشید.

اضافه کردن تنظیم با add_setting

تعیین مقدار پیش‌فرض

با add_setting() مقداری رو ثبت می‌کنید که قراره ذخیره بشه. در این نمونه، رنگ پیش‌فرض سربرگ رو مشکی می‌ذاریم:

$wp_customize->add_setting(    'mihanwp_header_background_color',    array(        'default'           => '#000000',        'transport'         => 'refresh',        'sanitize_callback' => 'sanitize_hex_color',    ));

انتخاب نوع ذخیره‌سازی تنظیم

تنظیمات سفارشی‌ساز به‌صورت پیش‌فرض با نوع theme_mod ذخیره می‌شن. این نوع برای بیشتر گزینه‌های مخصوص یک قالب مناسبه و مقدارش با get_theme_mod() گرفته می‌شه. نوع option هم در دسترسه، ولی برای یک تنظیم معمولی قالب اغلب بهش نیاز ندارید.

پاک‌سازی ورودی با sanitize_callback

پاک‌سازی یعنی وردپرس مقدار ورودی رو قبل از ذخیره بررسی کنه و به شکل قابل‌قبولی دربیاره. تابع پاک‌سازی باید با نوع داده هماهنگ باشه. برای رنگ هگز از sanitize_hex_color، برای متن ساده از sanitize_text_field و برای نشانی اینترنتی از esc_url_raw استفاده کنید.

تفاوت refresh و postMessage

با refresh، پیش‌نمایش بعد از هر تغییر دوباره بارگذاری می‌شه. با postMessage می‌تونید تغییر رو با JavaScript و بدون بارگذاری دوباره نشون بدید. روش دوم سریع‌تره، ولی به کد JavaScript جداگانه نیاز داره.

اضافه کردن کنترل‌های مختلف به پنل تنظیمات قالب

کنترل متن و کادر ورودی

برای یک متن کوتاه مثل نوشته بالای سربرگ، اول تنظیم رو با تابع پاک‌سازی مناسب ثبت کنید و بعد کنترل text رو بهش وصل کنید:

$wp_customize->add_setting(    'mihanwp_header_notice',    array(        'default'           => '',        'transport'         => 'refresh',        'sanitize_callback' => 'sanitize_text_field',    ));$wp_customize->add_control(    'mihanwp_header_notice',    array(        'label'    => __( 'متن بالای سربرگ', 'mihanwp-theme' ),        'section'  => 'mihanwp_header_section',        'settings' => 'mihanwp_header_notice',        'type'     => 'text',    ));

وقتی شناسه کنترل و تنظیم یکی باشه، وردپرس اون‌ها رو به هم وصل می‌کنه. اگه شناسه‌ها فرق دارن، باید شناسه تنظیم رو با کلید settings مشخص کنید.

کنترل انتخاب رنگ

برای انتخاب رنگ از کلاس WP_Customize_Color_Control استفاده کنید. این کلاس یک انتخابگر رنگ استاندارد در اختیار کاربر می‌ذاره.

کنترل آپلود لوگو و تصویر

برای انتخاب تصویر از کتابخانه رسانه می‌تونید WP_Customize_Image_Control رو به کار ببرید. اگه فقط لوگوی اصلی سایت رو می‌خواید، بهتره اول قابلیت داخلی «لوگوی سفارشی» وردپرس رو بررسی کنید تا دوباره همون امکان رو نسازید.

$wp_customize->add_setting(    'mihanwp_header_image',    array(        'sanitize_callback' => 'esc_url_raw',    ));$wp_customize->add_control(    new WP_Customize_Image_Control(        $wp_customize,        'mihanwp_header_image',        array(            'label'   => __( 'تصویر سربرگ', 'mihanwp-theme' ),            'section' => 'mihanwp_header_section',        )    ));

کنترل چک‌باکس، دکمه رادیویی و فهرست کشویی

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

هماهنگ کردن شناسه‌های section و settings

مقدار section باید دقیقاً با شناسه بخشی که ساخته‌اید یکی باشه. مقدار settings هم باید شناسه تنظیم ثبت‌شده رو داشته باشه. حتی یک اشتباه تایپی کوچیک ممکنه باعث بشه کنترل در جای درست دیده نشه یا مقدار موردنظرتون رو تغییر نده.

ساخت یک نمونه کامل برای تنظیم رنگ سربرگ

کد زیر یک نمونه کامل و قابل‌استفاده برای ساخت پنل تنظیمات قالب وردپرسه. اگه یک قالب آماده رو تغییر می‌دید، کد رو داخل functions.php قالب فرزندتون بذارید. اگه قالب اختصاصی خودتون رو از پایه می‌سازید، می‌تونید اون رو داخل functions.php همون قالب قرار بدید. نام دامنه ترجمه mihanwp-theme رو هم با دامنه ترجمه قالبتون هماهنگ کنید.

function mihanwp_register_customizer_options( $wp_customize ) {    $wp_customize->add_panel(        'mihanwp_theme_options',        array(            'title'    => __( 'تنظیمات قالب', 'mihanwp-theme' ),            'priority' => 30,        )    );    $wp_customize->add_section(        'mihanwp_header_section',        array(            'title'    => __( 'تنظیمات سربرگ', 'mihanwp-theme' ),            'panel'    => 'mihanwp_theme_options',            'priority' => 10,        )    );    $wp_customize->add_setting(        'mihanwp_header_background_color',        array(            'default'           => '#000000',            'transport'         => 'refresh',            'sanitize_callback' => 'sanitize_hex_color',        )    );    $wp_customize->add_control(        new WP_Customize_Color_Control(            $wp_customize,            'mihanwp_header_background_color',            array(                'label'    => __( 'رنگ پس‌زمینه سربرگ', 'mihanwp-theme' ),                'section'  => 'mihanwp_header_section',                'settings' => 'mihanwp_header_background_color',            )        )    );}add_action( 'customize_register', 'mihanwp_register_customizer_options' );

1. پنل اصلی تنظیمات قالب ساخته می‌شه.
2. بخش تنظیمات سربرگ داخل پنل قرار می‌گیره.
3. تنظیم رنگ با شناسه اختصاصی و مقدار پیش‌فرض ثبت می‌شه.
4. تابع sanitize_hex_color مقدار رنگ رو قبل از ذخیره بررسی می‌کنه.
5. کنترل انتخاب رنگ به تنظیم و بخش درست وصل می‌شه.

بعد از ذخیره فایل، سفارشی‌ساز رو باز کنید. وارد «تنظیمات قالب ← تنظیمات سربرگ» بشید، یک رنگ انتخاب کنید و روی دکمه ذخیره یا انتشار بزنید.

نمایش مقدار تنظیمات در فایل‌های قالب

گرفتن مقدار با get_theme_mod

فقط ثبت‌کردن تنظیم ظاهر سایت رو تغییر نمی‌ده. باید مقدار ذخیره‌شده رو با get_theme_mod() بگیرید و در جای مناسب به کار ببرید:

<?php$header_color = get_theme_mod( 'mihanwp_header_background_color', '#000000' );?>

تعیین مقدار جایگزین برای تنظیم ذخیره‌نشده

آرگومان دوم get_theme_mod() مقدار جایگزینه. اگه کاربر هنوز چیزی ذخیره نکرده باشه، وردپرس #000000 رو برمی‌گردونه. بهتره این مقدار با مقدار default داخل add_setting() یکسان باشه.

ایمن‌سازی خروجی با تابع مناسب

پاک‌سازی موقع ذخیره، جای ایمن‌سازی خروجی رو نمی‌گیره. تابع خروجی باید با محل استفاده هماهنگ باشه؛ مثلاً برای ویژگی HTML از esc_attr()، برای نشانی اینترنتی از esc_url() و برای متن عادی از esc_html() استفاده کنید.

استفاده از رنگ انتخابی در CSS قالب

برای یک نمونه ساده می‌تونید مقدار رنگ رو در ویژگی style سربرگ به کار ببرید:

<header class="site-header" style="background-color: <?php echo esc_attr( $header_color ); ?>;">    <!-- Header content --></header>

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

ساخت پیش‌نمایش زنده برای تغییرات

پیش‌نمایش با postMessage چطور کار می‌کنه؟

در حالت postMessage، مقدار تازه بدون بارگذاری دوباره صفحه به بخش پیش‌نمایش فرستاده می‌شه. JavaScript مقدار رو دریافت می‌کنه و همون لحظه CSS یا محتوای عنصر رو عوض می‌کنه. برای استفاده از این روش، مقدار transport تنظیم رنگ رو از refresh به postMessage تغییر بدید.

اضافه کردن فایل JavaScript پیش‌نمایش

اول فایل JavaScript پیش‌نمایش رو طوری بارگذاری کنید که فقط داخل سفارشی‌ساز اجرا بشه:

function mihanwp_customize_preview_assets() {    wp_enqueue_script(        'mihanwp-customize-preview',        get_stylesheet_directory_uri() . '/assets/js/customize-preview.js',        array( 'jquery', 'customize-preview' ),        '1.0.0',        true    );}add_action( 'customize_preview_init', 'mihanwp_customize_preview_assets' );

بعد فایل assets/js/customize-preview.js رو در قالب فرزند بسازید و کد زیر رو داخلش بذارید:

( function( $ ) {    wp.customize( 'mihanwp_header_background_color', function( value ) {        value.bind( function( newColor ) {            $( '.site-header' ).css( 'background-color', newColor );        } );    } );}( jQuery ) );

فایل‌ها رو ذخیره کنید، سفارشی‌ساز رو دوباره باز کنید و رنگ رو تغییر بدید. رنگ سربرگ باید همون لحظه و بدون بارگذاری دوباره عوض بشه. اگه تغییری نمی‌بینید، اول کش مرورگر و افزونه کش رو پاک کنید. بعد ابزار توسعه‌دهنده مرورگر رو باز کنید و بخش Console رو ببینید؛ Console همون جاییه که خطاهای JavaScript نشون داده می‌شن. همین‌طور مطمئن بشید عنصر سربرگ واقعاً کلاس site-header رو داره.

استفاده از Selective Refresh برای به‌روزرسانی یک بخش

Selective Refresh یا نوسازی انتخابی فقط بخش مشخصی از پیش‌نمایش رو دوباره از سمت PHP می‌سازه. این روش برای محتوایی مناسبه که ساخت HTML اون از یک تغییر ساده CSS پیچیده‌تره.

ثبت selector و render_callback با add_partial

برای نوسازی انتخابی باید یک partial بسازید و محل عنصر رو با selector مشخص کنید. انتخابگر CSS یعنی نشانی‌ای مثل .header-notice که عنصر موردنظر رو داخل صفحه پیدا می‌کنه. تابع render_callback هم خروجی تازه همون بخش رو برمی‌گردونه:

function mihanwp_render_header_notice() {    return esc_html( get_theme_mod( 'mihanwp_header_notice', '' ) );}function mihanwp_register_header_notice_partial( $wp_customize ) {    if ( isset( $wp_customize->selective_refresh ) ) {        $wp_customize->selective_refresh->add_partial(            'mihanwp_header_notice',            array(                'selector'        => '.header-notice',                'render_callback' => 'mihanwp_render_header_notice',            )        );    }}add_action( 'customize_register', 'mihanwp_register_header_notice_partial' );

اگه کد add_partial() رو داخل تابع اصلی mihanwp_register_customizer_options() می‌ذارید، دیگه به تابع جدا و هوک دوم نیاز ندارید. تابع رندر رو بیرون تابع اصلی تعریف کنید. عنصر .header-notice هم باید واقعاً در خروجی قالبتون باشه. قابلیت customize-selective-refresh-widgets مخصوص نوسازی انتخابی ابزارک‌هاست و برای ساخت این partial سفارشی پیش‌نیاز عمومی نیست.

تنظیمات قالب بلوکی با theme.json و ویرایشگر سایت

چه زمانی به‌جای سفارشی‌ساز از theme.json استفاده کنید؟

اگه یک قالب بلوکی می‌سازید، برای گزینه‌های سراسری مثل رنگ، فاصله، عرض محتوا و تایپوگرافی از فایل theme.json استفاده کنید. این فایل تنظیمات قالب رو با ویرایشگر سایت و بلوک‌ها هماهنگ نگه می‌داره.

مدیریت رنگ، فونت و چیدمان در ویرایشگر سایت

داخل ویرایشگر سایت می‌تونید قالب‌های صفحه، سربرگ، پابرگ و استایل‌های سراسری رو با بلوک‌ها تغییر بدید. گزینه‌هایی که در theme.json تعریف می‌شن هم در همین محیط در اختیار کاربر قرار می‌گیرن. با این روش لازم نیست برای هر رنگ یا اندازه یک کنترل سفارشی جدا بسازید.

انتخاب مسیر مناسب برای قالب کلاسیک یا بلوکی

• برای قالب کلاسیک، Customize API انتخاب مناسبی برای تنظیمات ظاهریه.
• برای قالب بلوکی، اول سراغ theme.json، استایل‌های سراسری و ویرایشگر سایت برید.
• برای داده‌ای که باید مستقل از قالب باقی بمونه، ذخیره اون در افزونه معمولاً انتخاب منطقی‌تریه.

نکات امنیتی و استانداردهای مهم

• هر ورودی رو براساس نوع داده پاک‌سازی کنید؛ یک تابع برای همه ورودی‌ها مناسب نیست.
• خروجی رو براساس محل نمایش با تابعی مثل esc_html()، esc_attr() یا esc_url() ایمن کنید.
• برای شناسه‌ها، توابع، فایل‌ها و دستگیره اسکریپت‌ها پیشوند اختصاصی بذارید.
• عنوان‌ها و برچسب‌ها رو با توابع ترجمه وردپرس بنویسید و دامنه ترجمه قالبتون رو درست وارد کنید.
• تغییرات رو در قالب فرزند و محیط آزمایشی بررسی کنید.
• قبل از انتشار، ذخیره تنظیم، مقدار پیش‌فرض و ظاهر سایت در موبایل و دسکتاپ رو آزمایش کنید.

خطاهای رایج موقع ساخت پنل تنظیمات قالب وردپرس

نمایش داده نشدن بخش سفارشی‌سازی

اول نوع قالبتون رو بررسی کنید. قالب بلوکی معمولاً از مسیر «نمایش ← ویرایشگر» استفاده می‌کنه. در قالب کلاسیک هم مطمئن بشید تابع به customize_register وصل شده و خطای PHP ندارید.

خالی موندن بخش تنظیمات

وردپرس ممکنه بخشی رو که کنترل قابل‌نمایشی نداره مخفی کنه. بررسی کنید حداقل یک تنظیم و کنترل ساخته‌اید و مقدار section هم دقیقاً شناسه همون بخشه.

ذخیره نشدن مقدار انتخابی

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

تداخل شناسه تنظیم با وردپرس یا قالب

از شناسه عمومی مثل header_textcolor استفاده نکنید؛ چون ممکنه هسته وردپرس یا کد دیگه‌ای همون شناسه رو ثبت کرده باشه. یک پیشوند اختصاصی مثل mihanwp_ جلوی بیشتر این تداخل‌ها رو می‌گیره.

اعمال نشدن مقدار در ظاهر سایت

سفارشی‌ساز فقط مقدار رو ذخیره می‌کنه. باید اون رو با get_theme_mod() بگیرید و در فایل یا CSS مناسب قالب به کار ببرید. شناسه داخل این تابع باید دقیقاً با شناسه add_setting() یکی باشه.

کار نکردن پیش‌نمایش زنده

برای postMessage مطمئن بشید فایل JavaScript در هوک customize_preview_init بارگذاری شده، وابستگی‌های jquery و customize-preview ثبت شدن، شناسه تنظیم درست نوشته شده و انتخابگر CSS عنصر رو پیدا می‌کنه. اگه فایل تازه رو نمی‌بینید، کش رو پاک کنید و خطاهای Console مرورگر رو هم ببینید. برای نوسازی انتخابی هم selector، تابع رندر و محل قرارگرفتن add_partial() رو بررسی کنید.

جمع‌بندی

برای ساخت پنل تنظیمات قالب وردپرس در یک قالب کلاسیک، اول یک تابع رو به customize_register وصل می‌کنید. بعد پنل و بخش رو می‌سازید، تنظیم رو همراه با مقدار پیش‌فرض و تابع پاک‌سازی ثبت می‌کنید و یک کنترل مناسب بهش وصل می‌کنید. در آخر مقدار ذخیره‌شده رو با get_theme_mod() می‌گیرید و خروجی رو به‌شکل امن در قالب نشون می‌دید.

برای شروع، حالت refresh ساده‌تره. وقتی تنظیم پایه درست کار کرد، می‌تونید سراغ postMessage یا نوسازی انتخابی برید. اگه قالبتون بلوکیه، مسیر اصلی کارتون theme.json و ویرایشگر سایته، نه ساخت یک پنل تازه در سفارشی‌ساز.

سؤال‌های متداول

تیم تولید محتوا

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