بایگانی برچسب: صفحه مدیریت قالب

نویسنده: علی باقری نیا
تاریخ: ۸,مهر,۱۳۹۲
آخرین ویرایش: ۱۸ آذر ۱۳۹۵
بدون دیدگاه
644 بازديد

طراحی پنل تنظیمات قالب

برای قالب های وردپرستان کنترل پنل طراحی کنید امروز، ما به ...

امتیاز دهید :

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

  • برای قالب های وردپرستان کنترل پنل طراحی کنید

    امروز، ما به تمامی مراحل ایجاد یک پنل گزینه های انتخابی (options panel) ادمین برای یک تم وردپرس، با استفاده ازWooFramework  می پردازیم. سپس، همانطور که jQuery را برای بهبود برخی از قابلیت ها اجرا می کنیم، همه چیز را یک گام به جلو خواهیم برد.

    برای شروع آموزش لطفا فایل را دانلود کنید [ دانلود فایل ]

    css برای قالب های وردپرس , کنترل پنل طراحی کنید

    وردپرس یکی از محبوب ترین سیستم های نرم افزاری مدیریت محتوای(CMS) موجود است. چه برای پروژه ی یک مشتری باشد و یا برای فروش تم درThemeForest باشد، وردپرس برای بسیاری از توسعه دهندگان وب به عنوان یک CMS انتخابی به سرعت در حال ظهور است. استفاده از آن نسبتا آسان است، اما زمانی که شما برای کاربران پنل ادمین ایجاد می کنید، میتواند حتی ساده تر هم شود. برای تعامل با تم وردپرس شما کاربران می توانند به جای نیاز به باز کردن فایل های قالب PHP و پر کردن آن با کد، به طور مستقیم از پانل گزینه های انتخابی استفاده کنند

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

    مرحله ی ۱

    قبل از اینکه ما شروع به ایجاد یک پنل ادمین کنیم، باید یک تم داشته باشیم، درست است؟ بنابراین فایل های منابع ارائه شده در همین آموزش را دانلود کنید. من تم Classic وردپرس را کمی تغییر داده ام. پوشه ی ‘nettuts’ (من نام تم را ‘nettuts’ گذاشته ام) را در پوشه ی wp-content/Themes خود قرار دهید. حالا باید فایل های زیر را ببینید:

    • functions.php (blank)
    • index.php
    • comments.php
    • footer.php
    • header.php
    • rtl.php
    • sidebar.php
    • style.css
    • screenshot.png
    • یک پوشه ی تصویر با دو فایل

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

    استفاده های پیشنهادی از این فایل ها:

    • توابع استفاده شده در چندین فایل قالب تم شما را تعریف می کند
    • یک صفحه ی نمایش ADMIN راه اندازی می کند، که به کاربران گزینه هایی برای رنگ، سبک، و دیگر جنبه های تم شما ارائه می دهد

    مرحله ی ۲

    حالا که تم وردپرس خود را راه اندازی کرده ایم، به قسمت Appearance>Themes رفته و تم nettuts را فعال کنید.

    install برای قالب های وردپرس , کنترل پنل طراحی کنید

    فعال شد؟ بسیار عالی. حالا باید در فکر یک طرح برای صفحه ی پنل ادمین خود باشیم. در اینجا ساختاری را که من در نظر دارم، می بینید:

    ۰۱
    ۰۲
    ۰۳
    ۰۴
    ۰۵
    ۰۶
    ۰۷
    ۰۸
    ۰۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    ۱۵
    ۱۶
    ۱۷
    ۱۸
    ۱۹
    <div class="wrap rm_wrap">
        <div class="rm_opts">
            <form method="post">
                <div class="rm_section">
                    <div class="rm_title>
                        <h3>Title</h3>
                        <submit button>
                    </div>
                    <div class="rm_input rm_<select/textarea/text etc>">
                        <input area>
                        <description>
                    </div>
                </div>
                /*Repeat the inputs for as many options as required. */
                /* use <div> for each new section of inputs eg General, Home Page etc */
            </form>
        </div>
    </div>

    اجازه دهید همه ی آنچه را که می بینید به شما توضیح دهم. تنظیمات گزینه ها در یک div به نام “rm_wrap” و سپس “rm_opts” برای گزینه ها پیچیده خواهد شد. سپس یک فرم را با تمام ورودی های درون آن شروع می کنیم. هر بخش از گزینه ها (تنظیمات عمومی، تنظیمات صفحه ی اصلی، تنظیمات وبلاگ و غیره) یک div جداگانه با یک کلاس”rm_section” دارند. این div یک عنوان دارد (نام آن محسوب می شود) به همراه چندینdiv در درون آن. با استفاده از کلاس هایی مثل

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

    مرحله ی ۳

    توسط باز کردن فایل functions.php در ویرایشگر کد مورد علاقه شما آغاز می شود (من از Notepad++ استفاده می کنم) کد زیر را وارد کنید:

    ۱
    ۲
    ۳
    ۴
    <?php
    $themename = "Nettuts";
    $shortname = "nt";

    این قطعه از تابع built-in get_categories وردپرس برای واکشی تمام دسته بندی ها استفاده می کند، و سپس با استفاده از یک حلقه foreach تم را در متغیر$wp_cats ذخیره می کند. و سپس گزینه ی “یک دسته بندی را انتخاب کنید” (“Choose a category”) به بالای صف اضافه می شود.

    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    $categories = get_categories('hide_empty=0&orderby=name');
    $wp_cats = array();
    foreach ($categories as $category_list ) {
     $wp_cats[$category_list->cat_ID] = $category_list->cat_name;
    }
    array_unshift($wp_cats, "Choose a category");

     

    مرحله ی ۴

    در حال حاضر شروع به وارد کردن یک لیست از گزینه ها برای تم می کنیم. به آنچه در زیر آمده نگاه کنید، و آن را در فایلfunctions.php خود وارد کنید:

    ۰۱
    ۰۲
    ۰۳
    ۰۴
    ۰۵
    ۰۶
    ۰۷
    ۰۸
    ۰۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    ۱۵
    ۱۶
    ۱۷
    ۱۸
    ۱۹
    ۲۰
    ۲۱
    ۲۲
    ۲۳
    ۲۴
    ۲۵
    ۲۶
    ۲۷
    ۲۸
    ۲۹
    ۳۰
    ۳۱
    ۳۲
    ۳۳
    ۳۴
    ۳۵
    ۳۶
    ۳۷
    ۳۸
    ۳۹
    ۴۰
    ۴۱
    ۴۲
    ۴۳
    ۴۴
    ۴۵
    ۴۶
    ۴۷
    ۴۸
    ۴۹
    ۵۰
    ۵۱
    ۵۲
    ۵۳
    ۵۴
    ۵۵
    ۵۶
    ۵۷
    ۵۸
    ۵۹
    ۶۰
    ۶۱
    ۶۲
    ۶۳
    ۶۴
    ۶۵
    ۶۶
    ۶۷
    ۶۸
    ۶۹
    ۷۰
    ۷۱
    ۷۲
    ۷۳
    ۷۴
    ۷۵
    ۷۶
    ۷۷
    ۷۸
    ۷۹
    ۸۰
    $options = array (
    array( "name" => $themename." Options",
     "type" => "title"),
    array( "name" => "General",
     "type" => "section"),
    array( "type" => "open"),
    array( "name" => "Colour Scheme",
     "desc" => "Select the colour scheme for the theme",
     "id" => $shortname."_color_scheme",
     "type" => "select",
     "options" => array("blue", "red", "green"),
     "std" => "blue"),
    array( "name" => "Logo URL",
     "desc" => "Enter the link to your logo image",
     "id" => $shortname."_logo",
     "type" => "text",
     "std" => ""),
    array( "name" => "Custom CSS",
     "desc" => "Want to add any custom CSS code? Put in here, and the rest is taken care of. This overrides any other stylesheets. eg: a.button{color:green}",
     "id" => $shortname."_custom_css",
     "type" => "textarea",
     "std" => ""),
    array( "type" => "close"),
    array( "name" => "Homepage",
     "type" => "section"),
    array( "type" => "open"),
    array( "name" => "Homepage header image",
     "desc" => "Enter the link to an image used for the homepage header.",
     "id" => $shortname."_header_img",
     "type" => "text",
     "std" => ""),
    array( "name" => "Homepage featured category",
     "desc" => "Choose a category from which featured posts are drawn",
     "id" => $shortname."_feat_cat",
     "type" => "select",
     "options" => $wp_cats,
     "std" => "Choose a category"),
    array( "type" => "close"),
    array( "name" => "Footer",
     "type" => "section"),
    array( "type" => "open"),
    array( "name" => "Footer copyright text",
     "desc" => "Enter text used in the right side of the footer. It can be HTML",
     "id" => $shortname."_footer_text",
     "type" => "text",
     "std" => ""),
    array( "name" => "Google Analytics Code",
     "desc" => "You can paste your Google Analytics or other tracking code in this box. This will be automatically added to the footer.",
     "id" => $shortname."_ga_code",
     "type" => "textarea",
     "std" => ""),
    array( "name" => "Custom Favicon",
     "desc" => "A favicon is a 16x16 pixel icon that represents your site; paste the URL to a .ico image that you want to use as the image",
     "id" => $shortname."_favicon",
     "type" => "text",
     "std" => get_bloginfo('url') ."/favicon.ico"),
    array( "name" => "Feedburner URL",
     "desc" => "Feedburner is a Google service that takes care of your RSS feed. Paste your Feedburner URL here to let readers see it in your website",
     "id" => $shortname."_feedburner",
     "type" => "text",
     "std" => get_bloginfo('rss2_url')),
    array( "type" => "close")
    );

     

    این تکه ی بزرگی از کد بود، که قطعا برخی توضیحات را ضمانت می کند. بنابراین اینها را خواهیم داشت:
    • PHP متغیر $options لیست کامل گزینه ها را برای تم ذخیره می کند.
    • این از تعدادی از آرایه های ترکیب شده است، هر کدام با یک کلید “type” برای تعیین اینکه آن چگونه نمایش داده خواهد شد و چه کاری انجام خواهد داد.
    • ما با یک آرایه ی “type” => “title” شروع کردیم – این برای نشان دادن نام تم و عنوان در بالای صفحه مورد استفاده قرار خواهد گرفت.
    • هر بخش (عمومی، صفحه ی اصلی و پاورقی) یک لیست جداگانه از گزینه ها دارد.
    • ما با بستن همه ی بخش های قبلی یک بخش جدید را شروع کردیم: معرفی کردن یک بخش جدید با استفاده از array( “name” => “Footer”,
    “type” => “section”) و باز کردن یک بخش جدید.
    • هر گزینه می توانید گزینه های مشخص شده در زیر را داشته باشد:
    name: نام ضمینه ی ورودی.
    desc: یک شرح کوتاه که به کابر توضیح می دهد که این چیست.
    id: شناسه ی ضمینه، پیشوند دار شده توسط نام کوتاه. از آن به عنوان ذخیره کننده و همچنین برای دسترسی به گزینه ها استفاده خواهد شد.
    type: نوع ورودی – انتخاب متن و یا جایگاه متن
    options: به منظور معرفی آرایه های گزینه ها برای نوع انتخابی ورودی ها مورد استفاده قرار می گیرد
    STD: مقدار اولیه ی ورودی پیش فرض، در صورتی که هیچ گونه ورودی دیگری داده نشده باشد، استفاده می شود.

    مرحله ی ۵

    سعی کنید به وردپرس وارد شوید. خواهید دید که در هیچ کجا هیچ گزینه ای برای دیدن صفحه ی پنل ادمین وجود ندارد، پس چگونه می توانیم آن را ببینیم؟ کد زیر را به فایل functions.php اضافه کنید:

    ۰۱
    ۰۲
    ۰۳
    ۰۴
    ۰۵
    ۰۶
    ۰۷
    ۰۸
    ۰۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    ۱۵
    ۱۶
    ۱۷
    ۱۸
    ۱۹
    ۲۰
    ۲۱
    ۲۲
    ۲۳
    ۲۴
    ۲۵
    ۲۶
    ۲۷
    ۲۸
    ۲۹
    ۳۰
    ۳۱
    ۳۲
    ۳۳
    ۳۴
    ۳۵
    function mytheme_add_admin() {
    global $themename, $shortname, $options;
    if ( $_GET['page'] == basename(__FILE__) ) {
     if ( 'save' == $_REQUEST['action'] ) {
     foreach ($options as $value) {
     update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
    foreach ($options as $value) {
     if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } else { delete_option( $value['id'] ); } }
     header("Location: admin.php?page=functions.php&saved=true");
    die;
    }
    else if( 'reset' == $_REQUEST['action'] ) {
     foreach ($options as $value) {
     delete_option( $value['id'] ); }
     header("Location: admin.php?page=functions.php&reset=true");
    die;
    }
    }
    add_menu_page($themename, $themename, 'administrator', basename(__FILE__), 'mytheme_admin');
    }
    function mytheme_add_init() {
    }

    این تابع برای گزینه های به روز رسانی و همچنین اضافه کردن یک صفحه ی منو بنا شده است. اگر گزینه ها ذخیره می شوند (نشان داده شده با متغیرهای پنهان ذخیره سازی) پس تمام گزینه ها با مقدارهای اولیه ی جدیدشان به روز رسانی شده اند. اگر گزینه ها تنظیم مجدد می شوند (نشان داده شده به وسیله ی یکی دیگر از متغیر های مخفی با مقدار اولیه ی تنظیم مجدد) پس همه ی گزینه ها حذف می شوند. خط آخر، یک صفحه ی منو را می افزاید- پارامترها به ترتیب نام گذاری و عنوان بندی می شوند، کاربر برای مشاهده ی این صفحه به سطح مجوزدار نیاز دارد، صفحه ی ذخیره و تابع برای نمایش /ذخیره سازی مورد استفاده قرار می گیرند (که در مورد ما mytheme_admin نامیده میشود) تابع mytheme_add_init را ببینید، آیا یک تابع خالی را مشاهده می کنید؟ اجازه دهید که به همین گونه باقی بماند، بعدا به آن خواهیم پرداخت.

    مرحله ی ۶

    هنوز هیچ صفحه ی گزینه های تمی نداریم، درست است؟ خوب، آیا تابعmytheme_admim را به یاد دارید که چند خط قبل درباره ی آن صحبت کردیم؟ ما هنوز هم آن تابع را ننوشته ایم. بنابراین از کدهای مراحل ۶، ۷ و ۸ برای نوشتن آن تابع استفاده می کنیم. شروع می کنیم:

    ۰۱
    ۰۲
    ۰۳
    ۰۴
    ۰۵
    ۰۶
    ۰۷
    ۰۸
    ۰۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    function mytheme_admin() {
    global $themename, $shortname, $options;
    $i=0;
    if ( $_REQUEST['saved'] ) echo '<div id="message"><p><strong>'.$themename.' settings saved.</strong></p></div>';
    if ( $_REQUEST['reset'] ) echo '<div id="message"><p><strong>'.$themename.' settings reset.</strong></p></div>';
    ?>
    <div class="wrap rm_wrap">
    <h2><?php echo $themename; ?> Settings</h2>
    <div class="rm_opts">
    <form method="post">
    خیلی ساده است، این طور نیست؟ اگر گزینه ها ذخیره شده اند، یک پیام که آن را نشان دهد، بنویسید. به همین ترتیب برای تنظیمات مجدد، عمل کنید. یک class=”updated fade” مشاهده خواهید کرد – وردپرس به طور خودکار آن را در چند بخش محو خواهد کرد. جذاب است، نه؟ پس از آن “rm_wrap” div را شروع خواهیم کرد.

    مرحله ی ۷

    آنچه از بالا کسب کرده ایم را در کد زیر قرار دهید:

    ۰۱
    ۰۲
    ۰۳
    ۰۴
    ۰۵
    ۰۶
    ۰۷
    ۰۸
    ۰۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    ۱۵
    ۱۶
    ۱۷
    ۱۸
    ۱۹
    ۲۰
    ۲۱
    ۲۲
    ۲۳
    ۲۴
    ۲۵
    ۲۶
    ۲۷
    ۲۸
    ۲۹
    ۳۰
    ۳۱
    ۳۲
    ۳۳
    ۳۴
    ۳۵
    ۳۶
    ۳۷
    ۳۸
    ۳۹
    ۴۰
    ۴۱
    ۴۲
    ۴۳
    ۴۴
    ۴۵
    ۴۶
    ۴۷
    ۴۸
    ۴۹
    ۵۰
    ۵۱
    ۵۲
    ۵۳
    ۵۴
    ۵۵
    ۵۶
    ۵۷
    ۵۸
    ۵۹
    ۶۰
    ۶۱
    ۶۲
    ۶۳
    ۶۴
    ۶۵
    ۶۶
    ۶۷
    ۶۸
    ۶۹
    ۷۰
    ۷۱
    ۷۲
    ۷۳
    ۷۴
    ۷۵
    ۷۶
    ۷۷
    <?php foreach ($options as $value) {
    switch ( $value['type'] ) {
    case "open":
    ?>
    <?php break;
    case "close":
    ?>
    </div>
    </div>
    <br />
    <?php break;
    case "title":
    ?>
    <p>To easily use the <?php echo $themename;?> theme, you can use the menu below.</p>
    <?php break;
    case 'text':
    ?>
    <div class="rm_input rm_text">
     <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
     <input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?>" />
     <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>
     </div>
    <?php
    break;
    case 'textarea':
    ?>
    <div class="rm_input rm_textarea">
     <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
     <textarea name="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?></textarea>
     <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>
     </div>
    <?php
    break;
    case 'select':
    ?>
    <div class="rm_input rm_select">
     <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
    <select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
    <?php foreach ($value['options'] as $option) { ?>
     <option <?php if (get_settings( $value['id'] ) == $option) { echo 'selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?>
    </select>
    <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>
    </div>
    <?php
    break;
    case "checkbox":
    ?>
    <div class="rm_input rm_checkbox">
     <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
    <?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
    <input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
     <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>
     </div>
    <?php break;

     

    این یک تکه بزرگ از کد است! توضیح: با استفاده از یک حلقه ی foreach PHP همه ی انواع گزینه ها، بر صورت مورد به مورد بررسی خواهند شد. ما از یک تکنیک تعویض مورد برای این استفاده می کنیم. متغیر تعویض، گزینه است – موارد همسان و ارزیابی شده اند. بیانیه ی ‘break’ را بعد از هر مورد می بینید؟ این به منظور جلوگیری از اتفاق افتادن چیزی به نام ویژگی ‘fall-through’ است. هنگامی که یک مورد همسان شده است، همه ی موارد متوالی نیز اجرا می شوند. این به این معنی است که اگر ما مورد ۳ را همسان کنیم، مورد ۴، ۵ و غیره نیز اجرا خواهد شد. ما این اتفاق را نمی خواهیم، درست است؟ بنابراین برای جلوگیری از تعویض مورد از یک (break) استفاده کنید.

    اگر یک گزینه ی نوع “open” وجود دارد – هیچ کاری انجام نشده است. اگر یک گزینه ی نوع “close” وجود دارد، دوdiv بسته شده اند. گزینه ی “title” تنها یک بار مورد استفاده قرار می گیرد – این یک مقدمه برای گزینه های تم است. برای هر کدام از انواع “text” (type=”text” ورودی)، “select” (کرکره)، “checkbox” و “textarea” ( آشکار است که به چه معنایی هستند) ورودی مربوه نمایش داده می شود. به توجه

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

    مرحله ی ۸

    ما در حال نزدیک شدن به پایان این تابع نسبتا گسترده هستیم. کد زیر را در تابع قرار دهید:

    ۰۱
    ۰۲
    ۰۳
    ۰۴
    ۰۵
    ۰۶
    ۰۷
    ۰۸
    ۰۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    ۱۵
    ۱۶
    ۱۷
    ۱۸
    ۱۹
    ۲۰
    ۲۱
    ۲۲
    ۲۳
    ۲۴
    ۲۵
    ۲۶
    ۲۷
    ۲۸
    ۲۹
    ۳۰
    ۳۱
    ۳۲
    ۳۳
    case "section":
    $i++;
    ?>
    <div class="rm_section">
    <div class="rm_title"><h3><img src="<?php bloginfo('template_directory')?>/functions/images/trans.gif" class="inactive" alt="""><?php echo $value['name']; ?></h3><spanphp plain">submit"><input name="save<?php echo $i; ?>" type="submit" value="Save changes" />
    </span><div class="clearfix"></div></div>
    <div class="rm_options">
    <?php break;
    }
    }
    ?>
    <input type="hidden" name="action" value="save" />
    </form>
    <form method="post">
    <p class="submit">
    <input name="reset" type="submit" value="Reset" />
    <input type="hidden" name="action" value="reset" />
    </p>
    </form>
    <div style="font-size:9px; margin-bottom:10px;">Icons: <a href="http://www.woothemes.com/2009/09/woofunction/">WooFunction</a></div>
     </div>
    <?php
    }
    ?>

    برای گزینه ی نوع “section”، من یک متغیر شمارنده ی $ را استفاده کرده ام. این متغییر رد شماره ی بخش را نگه می دارد و آن را به نام دکمه ی ثبت (submit) برای داشتن دکمه ی ثبت منحصر به فرد، الحاق می کند. همچنین در پایان یک شکل آخر برای تنظیم مجدد همه ی گزینه ها وجود دارد. تصویر استفاده شده است همان تصویر شفاف استفاده شده در تابع jQuery خواهد بود. با استفاده از آخرین قطعه از کد، توابع خود را اجرا کنید:

    ۱
    ۲
    ۳
    ۴
    <?php
    add_action('admin_init', 'mytheme_add_init');
    add_action('admin_menu', 'mytheme_add_admin');
    ?>

    این کار به وردپرس می گوید که یک منوی ادمین اضافه کند.

    مرحله ی ۹

    ugly برای قالب های وردپرس , کنترل پنل طراحی کنید

    و حالا بفرمایید! ما صفحه ی پنل ادمین عالی خود را با موقعیت منوی جداگانه برای خودش، داریم. پس اجازه دهید آن را امتحان کنیم – روی لینک کلیک کنید. این زشت ترین صفحه ی پنل ادمینی که تا به حال دیده اید خواهد بود. بنابراین اجازه دهید دوست خوبمان، CSS را صدا کنیم! در فهرست nettuts / یک پوشه ی جدید ایجاد کنید و آن را “functions” بنامید. یک فایل جدیدCSS ، functions.css، در آنجا ایجاد کنید. کد زیر را در آن قرار دهید:

    ۰۰۱
    ۰۰۲
    ۰۰۳
    ۰۰۴
    ۰۰۵
    ۰۰۶
    ۰۰۷
    ۰۰۸
    ۰۰۹
    ۰۱۰
    ۰۱۱
    ۰۱۲
    ۰۱۳
    ۰۱۴
    ۰۱۵
    ۰۱۶
    ۰۱۷
    ۰۱۸
    ۰۱۹
    ۰۲۰
    ۰۲۱
    ۰۲۲
    ۰۲۳
    ۰۲۴
    ۰۲۵
    ۰۲۶
    ۰۲۷
    ۰۲۸
    ۰۲۹
    ۰۳۰
    ۰۳۱
    ۰۳۲
    ۰۳۳
    ۰۳۴
    ۰۳۵
    ۰۳۶
    ۰۳۷
    ۰۳۸
    ۰۳۹
    ۰۴۰
    ۰۴۱
    ۰۴۲
    ۰۴۳
    ۰۴۴
    ۰۴۵
    ۰۴۶
    ۰۴۷
    ۰۴۸
    ۰۴۹
    ۰۵۰
    ۰۵۱
    ۰۵۲
    ۰۵۳
    ۰۵۴
    ۰۵۵
    ۰۵۶
    ۰۵۷
    ۰۵۸
    ۰۵۹
    ۰۶۰
    ۰۶۱
    ۰۶۲
    ۰۶۳
    ۰۶۴
    ۰۶۵
    ۰۶۶
    ۰۶۷
    ۰۶۸
    ۰۶۹
    ۰۷۰
    ۰۷۱
    ۰۷۲
    ۰۷۳
    ۰۷۴
    ۰۷۵
    ۰۷۶
    ۰۷۷
    ۰۷۸
    ۰۷۹
    ۰۸۰
    ۰۸۱
    ۰۸۲
    ۰۸۳
    ۰۸۴
    ۰۸۵
    ۰۸۶
    ۰۸۷
    ۰۸۸
    ۰۸۹
    ۰۹۰
    ۰۹۱
    ۰۹۲
    ۰۹۳
    ۰۹۴
    ۰۹۵
    ۰۹۶
    ۰۹۷
    ۰۹۸
    ۰۹۹
    ۱۰۰
    ۱۰۱
    ۱۰۲
    ۱۰۳
    ۱۰۴
    .rm_wrap{
     width:740px;
    }
    .rm_section{
     border:1px solid #ddd;
     border-bottom:0;
     background:#f9f9f9;
    }
    .rm_opts label{
     font-size:12px;
     font-weight:700;
     width:200px;
     display:block;
     float:left;
    }
    .rm_input {
     padding:30px 10px;
     border-bottom:1px solid #ddd;
     border-top:1px solid #fff;
    }
    .rm_opts small{
     display:block;
     float:right;
     width:200px;
     color:#999;
    }
    .rm_opts input[type="text"], .rm_opts select{
     width:280px;
     font-size:12px;
     padding:4px;
     color:#333;
     line-height:1em;
     background:#f3f3f3;
    }
    .rm_input input:focus, .rm_input textarea:focus{
     background:#fff;
    }
    .rm_input textarea{
     width:280px;
     height:175px;
     font-size:12px;
     padding:4px;
     color:#333;
     line-height:1.5em;
     background:#f3f3f3;
    }
    .rm_title h3 {
     cursor:pointer;
     font-size:1em;
     text-transform: uppercase;
     margin:0;
     font-weight:bold;
     color:#232323;
     float:left;
     width:80%;
     padding:14px 4px;
    }
    .rm_title{
     cursor:pointer;
     border-bottom:1px solid #ddd;
     background:#eee;
     padding:0;
    }
    .rm_title h3 img.inactive{
     margin:-8px 10px 0 2px;
     width:32px;
     height:32px;
     background:url('images/pointer.png') no-repeat 0 0;
     float:left;
     -moz-border-radius:6px;
     border:1px solid #ccc;
    }
    .rm_title h3 img.active{
     margin:-8px 10px 0 2px;
     width:32px;
     height:32px;
     background:url('images/pointer.png') no-repeat 0 -32px;
     float:left;
     -moz-border-radius:6px;
     -webkit-border-radius:6px;
     border:1px solid #ccc;
    }
    .rm_title h3:hover img{
     border:1px solid #999;
    }
    .rm_title span.submit{
     display:block;
     float:right;
     margin:0;
     padding:0;
     width:15%;
     padding:14px 0;
    }
    .clearfix{
     clear:both;
    }
    .rm_table th, .rm_table td{
     border:1px solid #bbb;
     padding:10px;
     text-align:center;
    }
    .rm_table th, .rm_table td.feature{
     border-color:#888;
     }

     

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

    مرحله ی ۱۰

    در حال حاضر ما یک فایلCSS خوب داریم. اما حالا چگونه آن را به این صفحه اضافه کنیم؟ به هر ترتیب، ما بهاسناد دسترسی مستقیم نداریم. آیا تابع mytheme_add_init() را که در مرحله ی ۳ نوشتیم به یاد دارید؟ این تابع در اینجا مفید خواهد بود. آن را به این تغییر دهید:

    ۱
    ۲
    ۳
    ۴
    function mytheme_add_init() {
    $file_dir=get_bloginfo('template_directory');
    wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0", "all");
    }

    این کار فایلfunctions.css را به سر اضافه می کند. جایگاه فایل ها به وسیله ی فهرست قالب تعیین می شود.

    css برای قالب های وردپرس , کنترل پنل طراحی کنید

    مرحله ی ۱۱

    حالا به صفحه نگاه کنید. بسیار خوب به نظر می رسد، این طور نیست؟ اما شما ممکن است سوال کنید که آیکون ‘+’ چیست؟ خب، اینجا جایی است که jQuery به میان می آید. یک فایل جدید rm_script.js در پوشه ی nettuts/functions/ ایجاد کنید. کد زیر را در آن قرار دهید:

    ۰۱
    ۰۲
    ۰۳
    ۰۴
    ۰۵
    ۰۶
    ۰۷
    ۰۸
    ۰۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    ۱۵
    jQuery(document).ready(function(){
     jQuery('.rm_options').slideUp();
     jQuery('.rm_section h3').click(function(){
     if(jQuery(this).parent().next('.rm_options').css('display')==='none')
     { jQuery(this).removeClass('inactive').addClass('active').children('img').removeClass('inactive').addClass('active');
     }
     else
     { jQuery(this).removeClass('active').addClass('inactive').children('img').removeClass('active').addClass('inactive');
     }
     jQuery(this).parent().next('.rm_options').slideToggle('slow');
     });
    });

    کاری که می کند این است – پس از آن که DOM بارگذاری می شود، تمامrm_options ها بالا می روند. وقتی که بر روی آیکون’+’ کلیک می شود، طبقات غیر فعال از تصویر حذف شده و طبقات فعال اضافه می شوند – که آن را به یک آیکون’-’ تبدیل می کنند. معکوس این کار زمانی که بر روی آیکون’-’ کلیک می شود، اتفاق می افتد.

    rm_options ها با استفاده از تابع Toggle لغزاننده، بالا یا پایین می روند (که به وسیله ی حالت CSS تعیین می شود) – ساده به نظر می رسد، نه؟ برای اضافه کردن این اسکریپت، همان تابع mytheme_add_init() استفاده شده است. آن را به این تغییر دهید:

    ۱
    ۲
    ۳
    ۴
    ۵
    function mytheme_add_init() {
    $file_dir=get_bloginfo('template_directory');
    wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0", "all");
    wp_enqueue_script("rm_script", $file_dir."/functions/rm_script.js", false, "1.0");
    }

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

    css برای قالب های وردپرس , کنترل پنل طراحی کنید

     

    مرحله ی ۱۲

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

    ۱
    $var = get_option('nt_colur_scheme');

    موارد استفاده های متنوع، تنها توسط تصورات شما محدود شده اند.

    ۱
    ۲
    ۳
    ۴
    ۵
    /* To change the CSS stylesheet depending on the chosen color */
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/<?php echo get_option('nt_color_scheme'); ?>.css" />
    /*To echo some footer copyright text, with HTML */
    <p><?php echo stripslashes(get_option('bl_footer_text')); ?></p>

    نتیجه گیری
    من امیدوارم که شما از این مقاله ی آموزشی استفاده برده باشید. این پنل گزینه های استاندارد برای شما نیست. این یکی از table استفاده نمی کند، jQuery آن افزایش پیدا می کند، از CSS عالی استفاده می کند، برای استفاده بسیار جذاب و بسیار آسان است. هدف از این آموزش یادگیری است – به عنوان مثال، شما همیشه می توانید پنل های پیش ساخته را با زبانه ها جایگزین کنید و یا حتی کارهای پیشرفته تر انجام دهید. از خلاقیت خود استفاده کنید! شما میتوانید پرسش ها ی خود را به راحتی در بخش نظرات مطرح کنید.
    WooThemes نسخه ی دو فریم ورک خود را منتشر کرده است. شما می توانید جزئیات آن را در اینجا ببنید.

  • تازه های وردپرس رو از کانال تلگرام خانه وردپرس دنبال کنید