آموزش گام به گام ایجاد تب(Tab) در پنل تنظیمات وردپرس

در پنل تنظیمات وردپرس به روش های مختلفی می توانید تب یا زبانه(Tab) ایجاد کنید، یکی از این روش ها استفاده از Settings API است که پیچیدگی های خاص خود را دارد، راه حل دیگر نصب فریمورک تر و تمیزی مثل Titan است، فقط فایل های موردنیاز آن باید در کنار قالب یا پلاگین شما وجود داشته باشد.

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

لازم به ذکر است که در پست آموزش ساخت پنل تنظیمات در وردپرس بدون Settings API چگونگی ایجاد پنل تنظیمات را به طور کامل بررسی کردیم. لطف و توجه کاربران موجب شد تا آپشن های پرکاربرد و مفیدی مثل انتخاب رنگ، انتخاب تصویر، ویرایشگر وردپرس و … را به این آموزش اضافه کنیم. پیشنهاد می کنیم برای آشنایی با روند کلی کار ابتدا مقاله فوق را مطالعه فرمائید.

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

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

  1. یک دایرکتوری به نام theme-settings بسازید و داخل آن فایل های options-panel.php و options-panel-template.php را ایجاد کنید.
  2. یک دایرکتوری به نام js به همراه فایل admin.js
  3. یک دایرکتوری به نام css به همراه فایل style.css

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

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

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

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

برای اینکه بتوانید یک صفحه یا پنل تظیمات داشته باشید لازم است مشخصات منو و صفحه مدنظرتان را به تابع ()add_menu_page ارسال کنید. برای این منظور تابع و اکشن هوک admin_menu را در فایل options-panel.php قرار دهید.

<?php

if ( !defined( 'ABSPATH' ) ) {
    wp_die( 'شما نمی توانید به این صفحه دسترسی داشته باشید' );
}

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' );

function modiredev_render_settings_panel()
{
    include 'options-panel-template.php';
}

گام ۲- ایجاد تب در پنل تنظیمات وردپرس

برای ایجاد ساختار اولیه تب ها کدهای زیر را به فایل options-panel-template.php اضافه کنید.

<?php
if ( !defined( 'ABSPATH' ) ) {
    wp_die( 'شما نمی توانید به این صفحه دسترسی داشته باشید' );
}
?>

<div class="wrap tab-wrapper">
    <div class="tab-links">
        <a href="#tab-header-settings" class="active">هدر سایت</a>
        <a href="#tab-social-settings">شبکه های اجتماعی</a>
        <a href="#tab-about">درباره ما</a>
    </div>
    <div class="tab-content">
        <div id="tab-header-settings" class="tab-pane active">

        </div>
        <div id="tab-social-settings" class="tab-pane">

        </div>
        <div id="tab-about" class="tab-pane">

        </div>
    </div>
</div>

هر تب یک آیدی یکتا و منحصربفرد دارد که در ویژگی id مشخص شده است، این آیدی در ویژگی href تگ a هم وجود دارد، هنگامی که کاربر روی لینک(عنوان تب) کلیک می کند مقدار href لینک کلیک شده را از طریق jQuery دریافت و تب معادل آن را با افزودن کلاس active فعال می کنیم.

کلاس active به صورت پیش فرض به لینک و تب ابتدایی اضافه شده است تا در هنگام بارگذاری پنل تنظیمات فقط تب اول نشان داده شود.

گام ۳- افزودن کدهای CSS

حالا کدهای زیر به فایل style.css اضافه کنید.

.tab-wrapper{
    margin-top: 25px;
}

.tab-links {
    border-bottom:1px solid #ccc;
}

.tab-links > a {
    padding: 10px;
    display: inline-block;
    text-decoration: none;
    color: #555;
    border: 1px solid #ccc;
    border-bottom: none;
    margin-left: 3px;
}

.tab-links a:hover {
    background-color: #fff;
}

.tab-links a.active,
.tab-links a.active:active,
.tab-links a.active:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    box-shadow: none;
    outline: none;
}

.tab-content .tab-pane {
    display: none;
    background-color: #fff;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

.tab-content .tab-pane.active {
    display: block;
    min-height: 100px;
    padding: 15px;
}

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

گام ۴- افزودن کدهای jQuery

برای هندل کردن تب ها از جی کوئری استفاده می کنیم، بنابراین کدهای زیر به فایل admin.js اضافه کنید.

function ( $ ) {
    $('div.tab-links a').click(function (e) {
        e.preventDefault();

        $('div.tab-links a.active').removeClass('active');
        $('.tab-pane.active').removeClass('active');

        $(this).addClass('active');
        let activePane = $(this).attr('href');
        $(activePane).addClass('active');
    })
})( jQuery );

گام ۵- بارگذاری فایل های JS و CSS در پنل مدیریتی وردپرس

در نهایت فایل های admin.js و style.css را در پنل مدیریتی لود می کنیم.

این فراخوانی ها را به انتهای فایل functions.php اضافه نمائید.

function modiredev_admin_scripts(){
    wp_register_script( 'md_script_panel',
        get_theme_file_uri( '/js/admin.js' ),
        array( 'jquery' ), false, true );

    wp_enqueue_script( 'md_script_panel' );

    wp_register_style( 'md_style_panel',
        get_theme_file_uri( '/css/style.css' ), array(), false );

    wp_enqueue_style( 'md_style_panel' );
}

add_action( 'admin_enqueue_scripts', 'modiredev_admin_scripts' );

جمع بندی

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

دانلود کدهای آموزش
نظرات و سوالات کاربران

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

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