آموزش ساخت پنل تنظیمات در وردپرس بدون Settings API

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

البته این موضوع بستگی به قالب دارد که تا چه اندازه امکانات و قابلیت های مختلفی برای کاربرانش فراهم کرده باشد. با این حال چگونه می توانیم در پنل مدیریتی وردپرس یک صفحه تنظیمات(Settings Page) ایجاد کنیم؟

دو روش مرسوم برای اینکار وجود دارد:

  • روش پیشنهادی و البته رسمی وردپرس، یعنی Settings API
  • استفاده از فریمورک های قدرتمندی مثل Titan یا Redux

البته ما در این آموزش از روش های بالا استفاده نخواهیم کرد، با توجه به اینکه وردپرس Settings API را در اختیارمان قرار داده است اما ترجیح می دهیم ساختارشکنی کرده و درگیر پیچیدگی های آن نشویم.

بسیار خب، برای اینکه بدانید در انتهای این آموزش به چه چیزی خواهید رسید به تصویر زیر دقت کنید.

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

ایجاد پنل تنظیمات وردپرس بدون settings API

 

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

  1. دایرکتوری theme-settings
  2. فایل options-panel.php
  3. فایل options-panel-template.php

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

 

حالا باید فایل options-panel.php را به وردپرس معرفی کنید، پس کد زیر را در ابتدای فایل functions.php قرار دهید.

require get_template_directory() . '/theme-settings/options-panel.php';

 

بسیار خب، در ادامه مراحل زیر را به ترتیب انجام دهید:

گام ۱- ایجاد صفحه تنظیمات در پنل مدیریتی وردپرس

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

add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );

 

هر پارامتر را به سرعت توضیح می دهیم:

  1. page_title$ (الزامی): عنوان صفحه تنظیمات، مقدار این پارامتر در تگ <title> صفحه تنظیمات قرار می گیرد.
  2. menu_title$ (الزامی): عنوان منو
  3. capability$ (الزامی): چه نقش یا مجوزهایی می توانند به این صفحه دسترسی داشته باشند.
  4. menu_slug$ (الزامی): نام یکتایی که در URL صفحه تنظیمات استفاده می شود.
  5. function$ (الزامی) : قالب HTML و آپشن های صفحه تنظیمات توسط این پارامتر ایجاد خواهد شد.
  6. icon_url$ (اختیاری): آیکون منو. برای اطلاعات بیشتر مطلب چگونه از فونت آیکون های وردپرس(Dashicons) استفاده کنیم؟ را مطالعه فرمائید.
  7. position$ (اختیاری): یک عدد صحیح که مشخص می کند صفحه تنظیمات چه جایگاهی در بین سایر منوها داشته باشد، مثلا عدد ۶۲ صفحه تنظیمات را بعد از منوی نمایش قرار می دهد.

حالا کدهای زیر را به فایل options-panel.php اضافه کنید.

function modiredev_add_settings_page()
{
    add_menu_page(
        'تنظیمات قالب',
        'تنظیمات قالب',
        'manage_options',
        'panel-settings',
        'modiredev_render_settings_panel',
        'dashicons-admin-customizer',
        ۶۲
    );
}

add_action( 'admin_menu', 'modiredev_add_settings_page' );

 

تغییرات را ذخیره کرده و وارد پنل مدیریتی وردپرس شوید، همانطور که ملاحظه می کنید پس از منوی نمایش منوی “تنظیمات قالب” اضافه شده است، اگر روی منو کلیک کنید یک خطا صادر می شود، چون هنوز تابع modiredev_render_settings_panel را ایجاد نکردیم، تابع فوق را در گام سوم ایجاد می کنیم.

گام ۲- فرم تنظیمات قالب

در این مرحله فیلدهای موردنیاز تنظیمات را ایجاد می کنیم، کدهای زیر را در فایل options-panel-template.php قرار دهید.

<?php
if ( !empty( $message) ) {
    ?>
    <div class="notice notice-success">
        <p><?php echo $message; ?></p>
    </div>
    <?php
}
?>
<div class="wrap">
    <div id="icon-edit" class="icon2 icon-32-posts-post"></div>
    <h2>پروفایل شبکه های اجتماعی</h2>
    <form action="" method="post">
        <?php wp_nonce_field( 'md_settings_nonce_action', 'md_settings_nonce' ) ?>
        <table class="form-table">
            <tbody>
            <tr>
                <th scope="row">
                    <label for="twitter_url">توئیتر (Twitter):</label>
                </th>
                <td>
                    <input type="text"
                           id="twitter_url"
                           name="panel_settings[twitter_url]"
                           value="<?php echo esc_attr( ( isset( $panel_settings_saved['twitter_url'] ) ?
                               $panel_settings_saved['twitter_url'] : '' ) ); ?>"
                           aria-required="true"
                           class="regular-text">
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <label for="facebook_url">فیسبوک (Facebook):</label>
                </th>
                <td>
                    <input type="text"
                           id="facebook_url"
                           name="panel_settings[facebook_url]"
                           value="<?php echo esc_attr( ( isset( $panel_settings_saved['facebook_url'] ) ?
                               $panel_settings_saved['facebook_url'] : '' ) ); ?>"
                           aria-required="true"
                           class="regular-text">
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <label for="instagram_url">اینستاگرام (Instagram):</label>
                </th>
                <td>
                    <input type="text"
                           id="instagram_url"
                           name="panel_settings[instagram_url]"
                           value="<?php echo esc_attr( ( isset( $panel_settings_saved['instagram_url'] ) ?
                               $panel_settings_saved['instagram_url'] : '' ) ); ?>"
                           aria-required="true"
                           class="regular-text">
                </td>
            </tr>
            </tbody>
        </table>
        
        <hr>
        <h2>سایر تنظیمات</h2>
        
        <table class="form-table">
            <tbody>
            <tr>
                <th scope="row">
                    <label for="email_url">آدرس ایمیل وب سایت:</label>
                </th>
                <td>
                    <input type="text"
                           id="email_url"
                           name="panel_settings[email_url]"
                           value="<?php echo esc_attr( ( isset( $panel_settings_saved['email_url'] ) ?
                               $panel_settings_saved['email_url'] : '' ) ); ?>"
                           aria-required="true"
                           class="regular-text">
                </td>
            </tr>
            </tbody>
        </table>
        <p class="submit">
            <input type="submit" name="md_settings_save" class="button button-primary"
                   value="ذخیره">
        </p>
    </form>
</div>

 

  1. از تابع wp_nonce_field برای ایجاد رشته نانس استفاده کردیم، این رشته در گام سوم اعتبارسنجی می شود تا مطمئن شویم داده ها از منبع معتبری ارسال شده است، در صورتی که با نانس آشنایی ندارید حتما مقاله امنیت وردپرس: نانس(Nonce) دیواری محکم در مقابل حملات CSRF را مطالعه فرمائید.
  2. اگر به خصوصیت name فیلدهای input دقت کنیم از مقدار panel_settings در نامگذاری آنها استفاده شده است، چون می خواهیم مقادیر وارد شده کاربران را به صورت آرایه ای در گام سوم دریافت کرده و مستقیما در دیتابیس ذخیره کنیم.
  3. همانطور که ملاحظه می کنید در ویژگی value فیلدهای input مقدار متغیر panel_settings_saved$ را بررسی کردیم، مقدار این متغیر در گام سوم از دیتابیس فراخوانی و در این متغیر قرار می گیرد.
  4. در نهایت وقتی کاربر روی دکمه “ذخیره” کلیک می کند مقادیر وارد شده در گام سوم از طریق متغیر سراسری post_$ قابل دسترس خواهد بود.

گام ۳- نمایش فرم تنظیمات قالب

پارامتر پنجم تابع ()add_menu_page از نوع Callback است، یعنی وردپرس پس از افزودن منو آن را به سرعت اجرا خواهد کرد. بنابراین برای رفع خطای گام اول کدهای زیر را به انتهای فایل options-panel.php اضافه کنید.

function modiredev_render_settings_panel()
{

    if ( !current_user_can( 'manage_options' ) ) {
        wp_die( 'کاربر غیرمجاز است' );
    }

    if ( isset( $_POST['md_settings_save'] ) ) {

        foreach ( $_POST['panel_settings'] as $key => $value ) {
            $_POST[$key] = sanitize_text_field( $value );
        }

        if ( isset( $_POST['panel_settings'] ) && isset( $_POST['md_settings_nonce'] ) ) {
            if ( !wp_verify_nonce( $_POST['md_settings_nonce'], 'md_settings_nonce_action') ) {
                wp_die( 'نانس مورد تایید نیست' );
            }
            update_option( 'modiredev_panel_settings', $_POST['panel_settings'], 'yes' );
            $message = 'تنظیمات ذخیره شد';
        }
    }

    $panel_settings_saved = get_option( 'modiredev_panel_settings' );
    include 'options-panel-template.php';
}

 

  1. با تابع current_user_can دسترسی های غیرمجاز را بررسی کردیم(محض احتیاط)، اگر کاربر جاری مجوزهای مدیریتی را نداشته باشد ادامه کدها اجرا نخواهد شد و طبیعتا تنظیمات هم در دیتابیس ذخیره نمی شود.
  2. در خط بعد با بررسی مقدار md_settings_save مطمئن شدیم که کاربر بر روی دکمه “ذخیره” کلیک کرده است.
  3. با تابع sanitize_text_field داده های ارسالی را از موارد مشکوک پاکسازی کردیم.
  4. تابع wp_verify_nonce رشته نانس را اعتبارسنجی می کند.
  5. تنظیمات را با تابع update_option در دیتابیس وردپرس ذخیره می کنیم، پارامتر سوم این تابع با yes مقداردهی شده است، یعنی تنظیمات فوق به صورت خودکار در کلیه صفحات لود خواهد شد، برای اطلاعات بیشتر مطلب آموزشی بهبود عملکرد وردپرس با پاکسازی جدول wp_options و داده های Autoloaded را مطالعه فرمائید.
  6. تابع get_option تنظیمات را از دیتابیس دریافت و در متغیر panel_settings_saved$ قرار می دهد.
  7. تابع include هم صفحه تنظیمات قالب را بارگذاری می کند.

 

کار ما با پنل مدیریتی تمام شد، هم اکنون تنظیمات قالب در جدول wp_options ذخیره شده است، ()update_options و ()get_options توابعی هستند که با این جدول سر و کار دارند.

برای اینکه ببینید این داده ها چگونه در دیتابیس وردپرس ذخیره شده است کوئری زیر را از طریق phpMyAdmin اجرا کنید.

SELECT * FROM wp_options WHERE option_name = 'modiredev_panel_settings'

 

همانطور که ملاحظه می کنید هر چهار فیلد فقط در یک رکورد جدول ذخیره شده اند.

ذخیره تنظیمات قالب در جدول wp_options

 

گام ۴- فراخوانی تنظیمات در قالب سایت

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

<?php
$panel_settings = get_option( 'modiredev_panel_settings' );
?>
<ul>
    <li>
        <a href="https://twitter.com/<?php echo esc_attr( $panel_settings['twitter_url'] ); ?>"
           rel="nofollow"
           target="_blank">
            <span class="fab fa-twitter"></span>
        </a>
    </li>
    <li>
        <a href="https://facebook.com/<?php echo esc_attr( $panel_settings['facebook_url'] ); ?>"
           rel="nofollow"
           target="_blank">
            <span class="fab fa-facebook"></span>
        </a>
    </li>
    <li>
        <a href="https://instagram.com/<?php echo esc_attr( $panel_settings['instagram_url'] ); ?>"
           rel="nofollow"
           target="_blank">
            <span class="fab fa-instagram"></span>
        </a>
    </li>
</ul>

 

آپشن انتخاب رنگ در پنل تنظیمات

مطمئنا امکانات پنل تنظیمات محدود به چند تکست باکس ساده نخواهد بود، هر چقدر آپشن های بیشتری در نظر بگیرید به همان اندازه هم پیاده سازی آنها پیچیده تر خواهد شد.

یکی از ویژگی های مهمی که هر پنل تنظیماتی باید داشته باشد امکان انتخاب رنگ است، رنگ ها می تواند در بخش های مختلفی مثل پس زمینه، عناوین، آیکون ها و … استفاده شوند.

برای پیاده سازی این ویژگی ارزشمند مراحل زیر را به ترتیب انجام دهید:

گام ۱: آماده سازی wp-color-picker

امکان انتخاب رنگ در وردپرس موجود است، فقط لازم است تعدادی فایل جاوا اسکریپت در پنل مدیریتی وردپرس بارگذاری کنید.

برای این منظور ابتدا فایل wp-color-picker-alpha.min.js را دانلود کرده و در کنار فایل های جاوا اسکریپت قالب قرار دهید، ما این فایل را به دایرکتوری js اضافه کردیم. سپس یک فایل جاوا اسکریپت با نام دلخواه مثلا admin.js ایجاد کنید، توجه داشته باشید که از این فایل فقط در پنل مدیریتی استفاده می کنیم.

حالا کدهای زیر را به فایل functions.php اضافه کنید.

function modiredev_admin_scripts( $hook )
{
    if ( $hook == 'toplevel_page_panel-settings' ) {
        wp_enqueue_media();

        wp_enqueue_style( 'wp-color-picker' );
        wp_enqueue_script( 'wp-color-picker' );
        wp_enqueue_script( 'wp-color-picker-alpha', get_theme_file_uri( '/js/wp-color-picker-alpha.min.js' ),
            array( 'wp-color-picker' ), '1.0', true );
    }

    wp_enqueue_script( 'js_admin_panel',
        get_theme_file_uri( '/js/admin.js' ),
        array( 'jquery' ), '1.0', true );

}

add_action( 'admin_enqueue_scripts', 'modiredev_admin_scripts' );

 

حواستان به شرط if باشد، panel-settings مقداری(menu_slug$) است که در هنگام تعریف پنل تنظیمات به عنوان آرگومان چهارم تابع add_menu_page مشخص کردیم، _toplevel_page رشته ای است که وردپرس به panel-settings اضافه کرده است.

با بررسی hook$ مطمئن می شویم که اسکریپت های انتخاب رنگ فقط در پنل تنظیمات قالب لود خواهد شد نه در کلیه بخش های پنل مدیریتی.

گام ۲: تعریف فیلد انتخاب رنگ در پنل تنظیمات

کدهای زیر به فایل options-panel-template.php اضافه کنید.

<h2>انتخاب رنگ</h2>
<table class="form-table">
    <tbody>
    <tr>
        <th scope="row">
            <label for="bg_color">رنگ پس زمینه:</label>
        </th>
        <td>
            <input type="text"
                   id="bg_color"
                   data-alpha="true"
                   name="panel_settings[bg_color]"
                   value="<?php echo esc_attr((isset($panel_settings_saved['bg_color']) ?
                                      $panel_settings_saved['bg_color'] : '')); ?>"
                   aria-required="true"
                   class="md-color-picker regular-text">
        </td>
    </tr>
    </tbody>
</table>

 

برای فعال سازی امکان انتخاب رنگ لازم است یک کلاس CSS با نام دلخواه مثلا md-color-picker و همچنین data-alpha=true به فیلد مربوطه اضافه کنید.

گام ۳: راه اندازی wp-color-picker

در نهایت کدهای زیر را در فایل admin.js قرار دهید، برای این منظور از کلاس md-color-picker مرحله قبل استفاده کردیم.

(function ( $ ) {
    $( '.md-color-picker' ).wpColorPicker();
})( jQuery );

 

پیشنهاد می کنیم مطلب آموزشی روش صحیح و اصولی استفاده از jQuery در وردپرس را مطالعه فرمائید.

گام ۴: نتیجه نهایی

در نهایت رنگ انتخاب شده به صورت کد هگزا (مثلا d4de5d#) در دیتابیس ذخیره می شود، برای فراخوانی تنظیمات مشابه موارد قبلی از تابع ()get_option استفاده کنید.

انتخاب رنگ در وردپرس با wp-color-picker

آپشن انتخاب تصویر در پنل تنظیمات

برای پیاده سازی امکان انتخاب تصویر می توانید از فرم انتخاب پرونده چند رسانه ای یا Media Uploader وردپرس استفاده کنید.

مراحل اینکار را در چند مرحله بررسی می کنیم:

گام ۱: آماده سازی Media Uploader

مشابه آپشن انتخاب رنگ این مورد هم باید در پنل مدیریتی بارگذاری شود پس کدهای زیر را به فایل functions.php اضافه کنید.

function modiredev_admin_scripts( $hook )
{
    if ( $hook == 'toplevel_page_panel-settings' ) {
        wp_enqueue_media();
    }
    wp_enqueue_script( 'js_admin_panel',
        get_theme_file_uri( '/js/admin.js' ),
        array( 'jquery' ), '1.0', true );
}

add_action( 'admin_enqueue_scripts', 'modiredev_admin_scripts' );

 

هر آنچه که برای راه اندازی فرم انتخاب چند رسانه ای لازم است توسط تابع wp_enqueue_media  بارگذاری می شود.

گام ۲: تعریف فیلد انتخاب تصویر در پنل تنظیمات

کدهای زیر به فایل options-panel-template.php اضافه کنید.

<h2>انتخاب تصویر</h2>
<table class="form-table">
    <tbody>
    <tr>
        <th scope="row">
            <label for="md_image_upload_url">آدرس تصویر</label>
        </th>
        <td>
            <input type="text" name="panel_settings[img_url]"
                   id="md_image_upload_url"
                   class="regular-text"
                   value="<?php echo esc_attr((isset($panel_settings_saved['img_url']) ?
                             $panel_settings_saved['img_url'] : '')); ?>">
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <img id="md_image_upload_preview"
                 src="<?php echo $panel_settings_saved['img_url']; ?>);">
        </td>
    </tr>
    <tr>
        <td>
            <input type="button"
                   class="button button-secondary md_image_upload"
                   value="افزودن تصویر">
            <input type="button"
                   class="button button-secondary md_image_upload_remove"
                   value="حذف تصویر">
        </td>
    </tr>
    </tbody>
</table>

 

توجه داشته باشید که از کلاس های CSS فیلد انتخاب تصویر در فایل admin.js استفاده می کنیم.

گام ۳: راه اندازی Media Uploader

در نهایت کدهای زیر را به admin.js اضافه کنید.

(function ( $ ) {
    let mediaUploader;
    $( 'body' ).on( 'click', '.md_image_upload', function (e) {

        e.preventDefault();

        if ( mediaUploader ) {
            mediaUploader.open();
            return;
        }

        mediaUploader = wp.media.frames.file_frame = wp.media({
            multiple: false
        });

        mediaUploader.on( 'select', function () {
            let attachment;
            attachment = mediaUploader.state().get( 'selection' ).first().toJSON();
            $( '#md_image_upload_url' ).val( attachment.url );
            $( '#md_image_upload_preview' ).attr( 'src', attachment.url );
        });

        mediaUploader.open();
    });

    $( 'body' ).on( 'click', '.md_image_upload_remove', function ( e ) {
        e.preventDefault();
        $( '#md_image_upload_url' ).val("");
        $( '#md_image_upload_preview' ).attr( 'src', '' );
    });
})( jQuery );

 

گام ۴: نتیجه نهایی

در نهایت آدرس تصویر در دیتابیس ذخیره می شود، برای فراخوانی تنظیمات مشابه موارد قبلی از تابع ()get_option استفاده کنید.

انتخاب تصویر در وردپرس با wp-media-uploader

آپشن ویرایشگر وردپرس در پنل تنظیمات

بعضی مواقع بهتر است به جای یک تکست باکس ساده یا Textarea چند سطری از یک ویرایشگر معمولی استفاده کنید تا کاربران ابتکار عمل بیشتری در ورود اطلاعات داشته باشند. مثلا در متن کپی رایت بتواند لینک صفحه اصلی را مشخص کنند یا حتی اندازه فونت را تغییر دهند.

در چنین شرایطی می توانید از نسخه جمع و جور ویرایشگر وردپرس که از طریق تابع ()wp_editor در دسترس است استفاده کنید، ویرایشگری که در حال حاضر جای خود را به ویرایشگر گوتنبرگ داده است.

در ادامه مراحل پیاده سازی آپشن کپی رایت را بررسی می کنیم.

گام ۱: راه اندازی ویرایشگر

ابتدا تابع زیر را به فایل options-panel.php اضافه کنید.

function modiredev_wp_editor( $content, $editor_name, $editor_id )
{
    $editor_settings = array(
        'textarea_rows' => 5,
        'textarea_name' => $editor_name
    );
    wp_editor( $content, $editor_id, $editor_settings );
}

گام ۲: تعریف فیلد متن کپی رایت

حالا کدها زیر را در فایل options-panel-template.php قرار دهید.

<h2>ویرایشگر وردپرس</h2>
<table class="form-table">
    <tbody>
    <tr>
        <th scope="row">
            <label for="md_copyright">متن کپی رایت</label>
        </th>
        <td>
            <?php
            $copyright = isset( $panel_settings_saved['md_copyright']) ? 
                                $panel_settings_saved['md_copyright'] : '';
            modiredev_wp_editor( $copyright, 'panel_settings[md_copyright]', 'md_copyright' );
            ?>
        </td>
    </tr>
    </tbody>
</table>

گام ۳: نتیجه نهایی

برای فراخوانی تنظیمات مشابه موارد قبلی از تابع ()get_option استفاده کنید.

تنظیم ویرایشگر وردپرس wp_editor

 

برای حذف امکاناتی مثل افزودن پرونده چند رسانه ای، تب های دیداری و متن، انتخاب هدینگ و … آرایه editor_settings$ را به صورت زیر تنظیم کنید.

function modiredev_wp_editor( $content, $editor_name, $editor_id )
{
    $editor_settings = array(
        'textarea_name' => $editor_name,
        'media_buttons' => false,
        'textarea_rows' => 5,
        'quicktags' => false,
        'drag_drop_upload' => false,
        'tinymce' => array(
            'toolbar1' => 'bold,italic,underline,separator,alignleft,aligncenter,alignright,separator,link,unlink,undo,redo',
            'toolbar2' => '',
            'toolbar3' => '',
        ),
    );
    wp_editor( $content, $editor_id, $editor_settings );
}

 

آپشن چک باکس(Checkbox) در پنل تنظیمات

توجه داشته باشید که شیوه ذخیره سازی چک باکس کمی متفاوت است.

اگر چک باکس انتخاب نشده باشد عملا در آرایه panel_settings که از طریق آرایه سراسری POST_$ به آن دسترسی پیدا می کنیم(در این مثال show_date) وجود نخواهد داشت و چیزی هم در دیتابیس ذخیره نمی شود.

در مقابل اگر چک باکس تیک خورده باشد به صورت پیش فرض با مقدار “on” در دیتابیس ذخیره خواهد شد، اگر می خواهید مقدار ۱ یا true جایگزین on شود ویژگی value چک باکس را با ۱ یا true مقداردهی کنید.

در هر صورت هر سه مقدار ۱، on و true یعنی چک باکس تیک خورده است و اگر فیلد show_date در داده های برگشتی تابع get_option موجود نباشد یعنی چک باکس انتخاب نشده است.

از نمونه کد زیر می توانید برای ذخیره سازی و نمایش مقدار یک Checkbox استفاده کنید.

<input type="checkbox"
        id="show_date"
        name="panel_settings[show_date]"
        value="1"
        <?php echo isset( $panel_settings_saved['show_date'] ) ? 'checked="checked"' : ''; ?>>

 

آپشن سلکت (Select Option) در پنل تنظیمات

هیچ چیز بهتر از یک مثال تقریبا کاربردی نیست، فرض کنید یک آپشن به نام دسته(Category) پیش فرض اسلایدر تعریف کرده اید و به کاربر اجازه می دهید از میان دسته های موجود یکی را انتخاب کند.

برای ذخیره سازی این آپشن، ID دسته را در دیتابیس ذخیره می کنیم، حالا می توانید در قالب سایت مقدار ذخیره شده را بخوانید و بر اساس آن کوئری های موردنیاز اسلایدر را تولید کنید.

<?php
$categories = get_categories();
?>
<select name="panel_settings[default_category]">
    <option>یک دسته انتخاب کنید</option>
    <?php
    foreach ( $categories as $category ) {
        ?>
        <option value="<?php echo esc_attr( $category->term_id ); ?>"
            <?php echo isset( $panel_settings_saved['default_category'] ) &&
            $panel_settings_saved['default_category'] == $category->term_id ? 'selected' : ''; ?>>
            <?php echo $category->name; ?>
        </option>
        <?php
    }
    ?>
</select>

 

جمع بندی

وقتی برای قالب یا افزونه خود تنظیمات متعدد و متنوعی در نظر می گیرید، پیاده سازی آنها به کمک Settings API پیچیدگی های کار را به شدت افزایش می دهد. در چنین سناریوهایی راه حل این آموزش مناسب و کارگشا خواهد بود، حتی می توانید آن را یک گام دیگر ارتقاء دهید و تنظیمات را از طریق Ajax ثبت کنید.

مهم: ما در این آموزش برای چیدمان آپشن های پنل تنظیمات از table استفاده کردیم، صفحه تنظیمات وردپرس هم با همین ساختار طراحی شده است، اما شما می توانید به جای table از div یا هر قالب دیگری که مدنظرتان است استفاده کنید.

دانلود کدهای آموزش

 

نظرات و سوالات کاربران
  1. سلام وقت بخیر
    می خواستم بدونم بعد از اینکه مراحل فوق رو رفتیم، خب مسلما خروجی طبق توضیحات شما خواهد بود، حال اگر بخواییم اطلاعات بعضی از جاها مثل کپی رایت، شبکه مجازی عنوان هدر و… از طریق پنل تغییر بدیم، چه باید بکنیم؟!
    مثل توی پنل زدیم تغییر عنوان هدر ، توی کد هدر میشه از کد :

    رو بزاریم و …

    ممنون میشم راهنمایی کنید.
    تاجایی که من فهمیدم ما پنل رو ساختیم، فیلدهایی که میخواییم رو اضافه کردیم و ذخیر کردیم اما اون قسمت هایی که میخواییم توی سایت تغییر کنن رو مشخص نکردیم

    1. سلام دوست عزیز، در پنل تنظیمات هر آپشنی که وب سایتتون لازم داره رو تعریف کنید(متن کپی رایت، لینک شبکه های اجتماعی و …)، بعد به کمک تابع get_option اونها رو در بخش های مختلف قالب فراخوانی و استفاده کنید، پاسخ کامل شما با عنوان “فراخوانی تنظیمات در قالب سایت” به انتهای آموزش اضافه شد.

  2. سلام
    وقت بخیر
    یه سوال دیگه دارم ازتون،
    فرض کنید ما سه تا باکس تو صفحه اصلی داریم که این باکس شامل آیکون + عنوان+ لینک هست اگر بخواییم توی پنل براش تعریف کنیم که :
    ۱- عکس png یا آیکون رو انتخاب کنه.
    ۲- اندازه فونت رو مشخص کنه.
    ۳- رنگ فونت رو مشخص کنه.
    چه باید بکنیم؟
    ممنون

    1. سلام دوست عزیز، پاسخ سوال ۱ و ۲ شما به انتهای آموزش اضافه شد.
      در پاسخ سوال سوم کافیه یک تکست باکس معمولی تعریف کنید و برای کاربر مشخص کنید که اندازه فونت را باید با px یا em وارد کنه.

      فیلد اندازه فونت در پنل تنظیمات وردپرس

  3. جناب یاورنیا سلام مجدد
    خسته نباشید، خیلی ممنونم بابت وقتی ارزشمندی که برای کاربرانتون میذارید، خیلی عالیه که احترام و ارزش برای مخاطب قائل هستید.

    جسارتاً من روش های بالارو برای رنگ و عکس انجام دادم طبق توضیحاتتون، اما متاسفانه جوابی نگرفتم یعنی عمل نکرد!!!!!
    و اینکه مورد سوم رو که گفتید تکست باکس بزارم، مقدار رو ذخیره کنه و چجور به اون اندازه تغییر بده؟!

    ممنون از شما

    1. سلام دوست عزیز، شما لطف دارید، انجام وظیفه است.
      به نظر من سورس انتهای صفحه رو دانلود کنید و با کدهای خودتون مقایسه کنید. مطمئن شید که اسکریپت ها رو به درستی فراخوانی کردید.
      اگر مشکل حل نشد کداتونو واسم بفرستید تا چک کنم.

      برای استایل دهی به HTML بر اساس پنل تنظیمات دو کار می تونید انجام بدید:
      از Embedded style استفاده کنید(یعنی تگ style رو داخل خود صفحه تولید کنید) یا کدهای CSS رو در یک فایل CSS خارجی قرار بدید.
      مثلا فرض کنید برای عنوان صفحه از تگ h1 با کلاس heading استفاده کردید، کافیه موقع فراخوانی تنظیمات به صورت داینامیک استایل اندازه فونت(font-size) رو برای کلاس heading تولید کنید.

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

    1. درود بر شما.
      سورس رو مجدد چک کردم، در فایل options-panel-template.php کلاس CSS آپشن انتخاب رنگ از color-picker به md-color-picker تغییر کرد و نسخه minify شده wp-color-picker-alpha.min.js به دایرکتوری js اضافه شد.
      فیلد انتخاب تصویر مشکلی نداشت.
      سورس جدید رو آپلود کردم. ممنون از توجه شما

    1. کلاس CSS توی قالب تنظیمات تعریف شده، آخرین تغییرات رو آپلود کردم.
      باید برای آپشن انتخاب رنگ یک کلاس CSS دلخواه مشخص کنید، بعد توی فایل admin.js از کد زیر استفاده کنید(به جای md-color-picker کلاس خودتونو بذارید)تا انتخاب رنگ برای فیلد شما فعال بشه.

      $( '.md-color-picker' ).wpColorPicker();

    1. سلام دوست عزیز، شیوه ذخیره سازی چک باکس کمی متفاوته، می تونید جزئیات بیشتر و همچنین نمونه کد رو در انتهای آموزش مطالعه کنید.

  5. خیلی ممنون از شما استاد گرامی
    برای سلکت هم میشه از روش چک باکس استفاده کرد؟
    تازه با سایت شما آشنا شدم واقعا عالیه توی این مدتی که از آشنایی با وب سایت شما میگذره ۴۰ درصد به دانسته ها اضافه شده.
    با تشکر از شما

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

  6. سلام
    اگه امکانش هست آموزش فیلد تکرار کننده هم به این پنل تنظیمات اضافه کنید (مثل افزونه ACF)
    که با کلیک روی دکمه مثلا افزودن یک فیلد جدید اضافه کنه.

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

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

  7. سلام وقت بخیر
    جناب مهندس یاور نیا عزیز ممنون بابت مطلب مفیدتون اگه بخواهیم لیست دسته بندی ها را در همین پنل داخل seelect قرار بدیم و اون طرف سمت قالبدریافتش کنیم به چه صورته ممنون

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

  8. سلام وقت بخیر خدمت مهندس یاور نیا
    در کدها گام ۳ در ابتدا مطلب ظاهرا این کد ایراد داره و sanitize انجام نمیشه به راحتی کد های htmlارسال میشه

    if ( isset( $_POST['md_settings_save'] ) ) {
    foreach ( $_POST['panel_settings'] as $key => $value ) {
    $_POST[$key] = sanitize_text_field( $value );
    }

    کد را به صورت زیر تغییر دادم درست شد و عمل sanitize انجام شد و کد های htmlورودی داخل فرم را حذف کرد

    $amin = $_POST['panel_settings'] ;
    foreach ( $amin as $key => $value ) {
    $amin[$key] = sanitize_text_field( $value );
    }
    var_dump( $amin);

    1. سلام امین جان، بسیار عالی، چک کردم و لذت بردم از باگی که پیدا کردی، مقاله رو آپدیت می کنم.
      فقط توجه داشته باش برای ذخیره کردن فیلدهای wp_editor چون کاربر میتونه توی این فیلدها کد html وارد کنه به جای sanitize_text_field از wp_kses_post استفاده کن.

  9. مهندس یاور نیا عزیز اگر بخواهیم قالب را با صفه ساز ها مثل المنتور و غیره سازگار کنیم به چه صورت باید عمل کنیم
    ممنون

    1. امین جان تا حالا از صفحه سازها توی قالب استفاده نکردم، نباید پیچیده باشه. به نظر من سورس یک قالب آماده سازگار با Visual Composer یا Elementor رو دانلود و بررسی کن، سایت VC یک استارتر تم به آدرس Visual Composer Starter Theme For WordPress برای دانلود قرار داده.

  10. سلام وقت بخیر مهندس یاورنیا عزیز
    در این کد if ( $hook == ‘toplevel_page_panel-settings’ )
    وقتی روی تنظیمات قالب وارد میشویم در انتهای urlفقط panel-settings وجود دارد و toplevel_page_ وجود ندارد شما فرمودید در توضیحات

    panel-settings مقداری(menu_slug$) است که در هنگام تعریف پنل تنظیمات به عنوان آرگومان چهارم تابع add_menu_page مشخص کردیم، _toplevel_page رشته ای است که وردپرس به panel-settings اضافه کرده است.

    میخاستم ببینم ایا من قسمتی را اشتباه انجام دادم که _toplevel_page به url وقتی وارد تنظیمات قالب میشم وارد نمیشه
    ممنون

    1. سلام امین جان، مقدار toplevel_page_ در url قابل مشاهده نیست، زمانی که شما با تابع add_menu_page یک منو تعریف می کنید وردپرس به صورت خودکار به ابتدای مقدار menu_slug$ که در اینجا panel_settings هست رشته toplevel_page_ رو اضافه می کنه.
      ما از این مقدار برای تشخیص و شناسایی صفحات و اینکه بخوایم روی یک صفحه خاص عملیات مشخصی انجام بدیم استفاده می کنیم، مثلا یک سری استایل رو فقط در یک صفحه لود کنیم، برای اینکه بدونی دقیقا چه مقداری تولید میشه قبل از شرط if ( $hook == ‘toplevel_page_panel-settings’ ) مقدار پارامتر hook$ رو echo کن، وارد منوی های مختلف که بشی میبنی چه مقداری برای هر منو چاپ میشه.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *