افزودن قابلیت ابزارک به پوسته وردپرس | افزودن یک ابزارک سفارشی به هر صفحه، پست یا قالب

افزودن قابلیت ابزارک به پوسته وردپرس | افزودن یک ابزارک سفارشی به هر صفحه، پست یا قالبReviewed by سعید دیدارنو on Sep 12Rating: 5.0افزودن قابلیت ابزارک به پوسته وردپرس | افزودن یک ابزارک سفارشی به هر صفحه، پست یا قالبابزارک در وردپرس,افزودن ابزارک به وردپرس,افزودن ابزارک به پوسته,افزودن ابزارک به پوسته وردپرس,افزودن قابلیت ابزارک به پوسته,آموزش ساخت ابزارک وردپرس

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

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

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

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

اجازه بدهید که شروع کنم!

افزودن قابلیت ابزارک به پوسته وردپرس | افزودن یک ابزارک سفارشی به هر صفحه، پست یا قالب

افزودن قابلیت ابزارک به پوسته وردپرس | افزودن یک ابزارک سفارشی به هر صفحه، پست یا قالب

راه اندازی یک قالب فرزند

در این مقاله قرار است که از قالب فرزند تم twenty seventeen استفاده شود. شما دوستان عزیز، اگر با قالب خودتان کار می کنید، می توانید به جای قالب فرزند مستقیما قالب را ویرایش کنید. اما اگر از قالب شخص ثالث استفاده می کنید، باید یک قالب فرزند ایجاد کنید. به این دلیل که وقتی شما قالب را بروز کنید، هر تغییری که ایجاد کرده اید از بین خواهد رفت.

بنابراین، در پوشه wp-content/themes یک پوشه جدید با نام قالب خود ایجاد کنید. در این مثال از نام wpmu-template-widgets استفاده شده است. درون پوشه ایجاد شده، یک فایل style.css ایجاد کنید و قطعه کد زیر را به آن اضافه کنید:

/*

Theme Name:     WPMU DEV Template Widgets

Theme URI:      https://github.com/rachelmccollin/wpmu-template-widgets

Description:    Theme to support WPMU DEV post on widgetising theme template files. Child theme for the Twenty Seventeen theme.

Author:         Rachel McCollin

Author URI:     http://rachelmccollin.co.uk/

Template:       twentyseventeen

Version:        ۱٫۰

*/

@import url(“../twentyseventeen/style.css”);

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

نگاشتن یا ثبت مناطق ویجت

قبل از آن که ما بتوانیم فرآیند افزودن ناحیه های ابزارک را به فایل های الگو انجام دهیم، باید آن ها را در فایل توابع قالب ثبت کنیم. بنابراین فایل توابع را باز کنید. اگر از قالب اصلی استفاده می کنید یا از قالب فرزند جدید، یک فایل با نام functions.php ایجاد کنید.

خب با اضافه کردن یک تابع خالی برای ثبت کردن ابزارک ها شروع می کنیم. یک قلاب با نام widgets_init ایجاد می کنیم و آن را به فایل توابع اضافه می کنیم.

function wpmu_register_widgets() {

}

add_action( ‘widgets_init’, ‘wpmu_register_widgets’ );

در داخل آن تابع، چهار ناحیه ویجت ثبت می شود: یکی برای الگوی پست و یک برای الگوی دسته آرشیو و دو تا برای قالب صفحه سفارشی.

با ثبت اولین ویجت شروع می کنیم:

register_sidebar( array(

            ‘name’ => __( ‘Single Post After Content’, ‘wpmu’ ),

            ‘id’ => ‘single-after-content-widget-area’,

            ‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,

            ‘after_widget’ => ‘</div>’,

            ‘before_title’ => ‘<h3 class=”widgettitle”>’,

            ‘after_title’ => ‘</h3>’

));

این از تابع  ()register_sidebar با آرایه ای از پارامترهای به صورت زیر استفاده می کند:

  • نام ناحیه ابزارک که در صفحه مدیریت ابزارک ها و Customizer ظاهر خواهد شد.
  • یک ID منحصر به فرد برای ناحیه ویجت
  • علامت گذاری برای قبل از ابزارک، که از متغیرهایی برای بین المللی کردن استفاده می کند.
  • علامت گذاری برای بعد از ویجت
  • علامت گذاری برای قبل و بعد از عنوان ابزارک، که در یک عنصر h3 محصور شده است.

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

// category archive – before content widget area

register_sidebar( array(

            ‘name’ => __( ‘Category Archive Before Content’, ‘wpmu’ ),

            ‘id’ => ‘category-before-content-widget-area’,

            ‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,

            ‘after_widget’ => ‘</div>’,

            ‘before_title’ => ‘<h3 class=”widgettitle”>’,

            ‘after_title’ => ‘</h3>’

));

// custom page template – before content widget area

register_sidebar( array(

            ‘name’ => __( ‘Widgetized Page Before Content’, ‘wpmu’ ),

            ‘id’ => ‘widgetized-page-before-content-widget-area’,

            ‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,

            ‘after_widget’ => ‘</div>’,

            ‘before_title’ => ‘<h3 class=”widgettitle”>’,

            ‘after_title’ => ‘</h3>’

));

// custom page template – after content widget area

register_sidebar( array(

            ‘name’ => __( ‘Widgetized Page After Content’, ‘wpmu’ ),

            ‘id’ => ‘widgetized-page-after-content-widget-area’,

            ‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,

            ‘after_widget’ => ‘</div>’,

            ‘before_title’ => ‘<h3 class=”widgettitle”>’,

            ‘after_title’ => ‘</h3>’

));

خب، الان چهار ویجت داریم:

  • یکی قبل از محتوا درون پست های تکی
  • یکی بعد از محتوا درون یک دسته بندی آرشیو
  • یکی بعد و یکی قبل از محتوا درون الگوی صفحه ابزارک

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

اگر صفحه مدیریت ویجت ها را باز کنید، می توانید نواحی ابزارک ها ببینید.

افزودن قابلیت ابزارک به پوسته وردپرس | افزودن یک ابزارک سفارشی به هر صفحه، پست یا قالب

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

اضافه کردن نواحی ویجت به فایل های قالب

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

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

در پوشه قالب خود یک فایل جدید ایجاد کنید. می توانید آن را page_widgetized.php نام گذاری کنید. این فایل باز کنید و قطعه کد زیر را به آن اضافه کنید:

<?php

/*

Template Name: Widgetized Page

*/

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

دقت کنید که از نام page-widgetized برای اسم فایل خود استفاده نکنید. به این دلیل که page- یک پسوند متعلق به وردپرس است. به جای – از _ استفاده کنید. همچنین می توانید از page استفاده نکنید.

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

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

افزودن قابلیت ابزارک به پوسته وردپرس | افزودن یک ابزارک سفارشی به هر صفحه، پست یا قالب

آن را برای یکی از صفحات خود انتخاب کنید تا بتوانید ویجت را امتحان کنید. مانند این نمونه:

افزودن قابلیت ابزارک به پوسته وردپرس | افزودن یک ابزارک سفارشی به هر صفحه، پست یا قالب

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

در فایل الگوی خود، این کد را بلافاصله بالای محتویات صفحه اضافه کنید، برای ناحیه ابزارک بالای محتوا:

<?php if( is_active_sidebar( ‘widgetized-page-before-content-widget-area’ ) ) : ?>

            <aside class=”widgetized-page-before-content-widget-area”>

                        <?php dynamic_sidebar( ‘widgetized-page-before-content-widget-area’ ); ?>

            </aside>

<?php endif; ?>

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

زمان آن است که ناحیه ویجت در زیر محتوا اضافه شود. بعد از محتوایتان و درون هر عنصر محصوری این کد را اضافه کنید:

<?php if( is_active_sidebar( ‘widgetized-page-after-content-widget-area’ ) ) : ?>

            <aside class=”widgetized-page-after-content-widget-area”>

                        <?php dynamic_sidebar( ‘widgetized-page-after-content-widget-area’ ); ?>

            </aside>

<?php endif; ?>

فایل الگوی صفحه را ذخیره کنید.

این کد کاملی است که به فایل الگوی صفحه مثال ما اضافه شده است. شما می توانید ببینید نواحی ویجت قبل و بعد از حلقه قرار گرفته اند:

<?php

/*

Template Name: Widgetized Page

*/

get_header(); ?>

<div class=”wrap”>

            <div id=”primary” class=”content-area”>

                        <main id=”main” class=”site-main” role=”main”>

                                    <?php if( is_active_sidebar( ‘widgetized-page-before-content-widget-area’ ) ) : ?>

                                                <aside class=”widgetized-page-before-content-widget-area”>

                                                            <?php dynamic_sidebar( ‘widgetized-page-before-content-widget-area’ ); ?>

                                                </aside>

                                    <?php endif; ?>

                                    <?php

                                    while ( have_posts() ) : the_post();

                                                get_template_part( ‘template-parts/page/content’, ‘page’ );

                                                // If comments are open or we have at least one comment, load up the comment template.

                                                if ( comments_open() || get_comments_number() ) :

                                                            comments_template();

                                                endif;

                                    endwhile; // End of the loop.

                                    ?>

                                    <?php if( is_active_sidebar( ‘widgetized-page-after-content-widget-area’ ) ) : ?>

                                                <aside class=”widgetized-page-after-content-widget-area”>

                                                            <?php dynamic_sidebar( ‘widgetized-page-after-content-widget-area’ ); ?>

                                                </aside>

                                    <?php endif; ?>

                        </main><!– #main –>

            </div><!– #primary –>

</div><!– .wrap –>

<?php get_footer();

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

افزودن قابلیت ابزارک به پوسته وردپرس | افزودن یک ابزارک سفارشی به هر صفحه، پست یا قالب

و این چیزی است که در خروجی صفحه ظاهر شده است:

افزودن قابلیت ابزارک به پوسته وردپرس | افزودن یک ابزارک سفارشی به هر صفحه، پست یا قالب

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

  • اگر شما با یک قالب فرزند کار می کنید، یک فایل با نام php ایجاد کنید. محتوای فایل category.php از قالب والد (اگر وجود داشت) یا فایل archive.php و در صورت وجود نداشتن آن فایل index.php را کپی کنید.
  • اگر با قالب فرزند کار نمی کنید، اما قابل شما فاقد فایل php است، یکی با استفاده از کپی فایل archive.php یا اگر وجود نداشت با کپی فایل index.php ایجاد کنید.
  • ناحیه ویجت یا ابزارک را برای بالا یا قبل از محتوا، ، بلافاصله قبل از حلقه اضافه کنید.

این کد برای ناحیه ویجت است:

<?php if( is_active_sidebar( ‘category-before-content-widget-area’ ) ) : ?>

            <aside class=”category-before-content-widget-area”>

                        <?php dynamic_sidebar( ‘category-before-content-widget-area’ ); ?>

            </aside>

<?php endif; ?>

دوباره آن را برای الگوی پست تنها تکرار کنید:

  • یک فایل با نام single-post.php اگر در قالب شما وجود ندارد یا از قالب فرزند استفاده می کنید، ایجاد کنید. محتویات را از فایل single-post.php قالب والد کپی کنید یا از فایل الگوی بعدی در سلسله مراتب قالب (php، singular.php یا index.php)
  • دوباره ناحیه ویجت را اضافه کنید. این بار بعد از محتوا

این قطعه کد:

<?php if( is_active_sidebar( ‘single-after-content-widget-area’ ) ) : ?>

            <aside class=”single-after-content-widget-area”>

                        <?php dynamic_sidebar( ‘single-after-content-widget-area’ ); ?>

            </aside>

<?php endif; ?>

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

افزودن قابلیت ابزارک به پوسته وردپرس | افزودن یک ابزارک سفارشی به هر صفحه، پست یا قالب

اضافه کردن ابزارک به قالب انعطاف پذیری را به ارمغان می آورد

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

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

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

آموزش وردپرس

درباره سعید دیدارنو

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

دیدگاه خود را بیان کنید

1 + یک =

This site uses Akismet to reduce spam. Learn how your comment data is processed.