نحوه بروزرسانی خودکار منوی ناوبری در هنگام اضافه کردن صفحات به وردپرس

نحوه بروزرسانی خودکار منوی ناوبری در هنگام اضافه کردن صفحات به وردپرسReviewed by سعید دیدارنو on Sep 3Rating: 5.0نحوه بروزرسانی خودکار منوی ناوبری در هنگام اضافه کرن صفحات به وردپرسآموزش وردپرس,ساخت منوی ناوبری در وردپرس,سفارشی سازی منوی ناوبری در وردپرس,ایجاد منوی ناوبری در وردپرس,آموزش ایجاد منوی ناوبری در وردپرس,ساخت منوی ناوبری

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

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

نحوه بروزرسانی خودکار منوی ناوبری در هنگام اضافه کرن صفحات به وردپرس

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

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

آنچه شما برای ایجاد منوهای راهبردی خودکار در وردپرس نیاز خواهید داشت

برای این که بتوانید با این پست قدم به قدم پیش بیایید، شما به این موارد نیاز دارید:

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

حتما تمام مراحل و کدهای نوشته شده را با دقت مطالعه و انجام دهید تا کار به درستی انجام شود.

راه اندازی کد

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

اولین قدم ایجاد پلاگین است. یک فولدر جدید در wp-content/plugins ایجاد کنید. این فولدر جدید برای این منظور ایجاد می شود که اگر در آینده لازم بود، بتوانید فایل های بیشتری را به پلاگین اضافه کنید در اولین گام باید این قطعه کد را در بخش توضیحات پلاگین خود اضافه کنید تا به وردپرس نشان دهید که این چه چیزی است.

<?php

/**

 * Plugin Name: WPMU DEV Automated Navigation Menus

 * Plugin URI: https://github.com/rachelmccollin/wpmudev-automated-menus

 * Description: Plugin to accompnay WPMU DEV post on automating navigation and section menus

 * Version: 1.0

 * Author: Rachel McCollin

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

 *

 */

سپس پلاگین را فعال کنید.

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

/*

Theme Name:     WPMU DEV Automated Navigation Menus

Theme URI:      https://github.com/rachelmccollin/wpmudev-automated-menus

Description:    Theme to support WPMU DEV post on automating navigation and section menus. Child theme for the Twenty Seventeen theme.

Author:         Rachel McCollin

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

Template:       twentyseventeen

Version:        ۱٫۰

*/

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

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

نحوه بروزرسانی خودکار منوی راهبری در هنگام اضافه کرن صفحات به وردپرس

وقت آن رسیده که کد را به افزونه اضافه کنید.

ایجاد یک تابع برای لیست کردن تمام صفحات سلسله مراتبی

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

wpmu_list_pages() {

        $args = array(

               ‘depth’ => 2

        );

}

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

wp_list_pages( $args );

قطعه کد زیر تابع ()wp_list_pages را ایجاد می کند:

wpmu_list_pages() {

        $args = array(

               ‘depth’ => 2

        );

        wp_list_pages( $args );

}

اضافه کردن تابع به قالب

در حال حاضر، این تابع چیزی را در هیچ قستی از سایت نشان نمی دهد. برای اصلاح این موضوع، باید یک کپی از هدر قالب والد را به قالب فرزند اضافه کنید و آن را ویرایش کنید. بنابراین باید یک نسخه کپی از فایل هدر را به قالب فرزند اضافه کنید و آن را باز کنید. در قالب twenty seventeen که برای این مقاله مورد استفاده قرار گرفته، کد برای منوی ناوبری در template-parts/navigation/navigation-top.php قرار دارد و به این معنا است که باید کپی فایل هدر در همین مسیر در قالب فرزند اضافه شود، فایلی که باید از قالب والد کپی تهیه شود  header.php نام دارد. احتمالا در قالب شما هم فایل هدر به نام header.php است.

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

<?php wp_nav_menu( array(

               ‘theme_location’ => ‘top’,

               ‘menu_id’        => ‘top-menu’,

        ) ); ?>

کد منوی ناوبری خود را جهت اضافه کردن یک تابع جدید به همراه کد موجود در داخل قسمت {}else، ویرایش کنید:

<?php

        if ( function_exists( ‘wpmu_list_pages’ ) ) {

               wpmu_list_pages();

        }

        else {

               wp_nav_menu( array(

                       ‘theme_location’ => ‘top’,

                       ‘menu_id’        => ‘top-menu’,

               ) );

        }

        ?>

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

حالا نگاهی به سایت مثال خود می اندازیم:

نحوه بروزرسانی خودکار منوی راهبری در هنگام اضافه کرن صفحات به وردپرس

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

بهبود عملکرد تابع

به کد افزونه بر گردید تا این مشکلات را حل کنید. آرگومانهایی را که قبلا در تابع ()wp_list_pages تعریف کرده اید، پیدا کنید:

$args = array(

        ‘depth’ => 2

);

و به این شکل ویرایش کنید:

$args = array(

        ‘depth’ => 2,

        ‘title_li’ => ‘<h3>’ . __( ‘Menu’, ‘wpmu’ ) . ‘</h3>’,

        ‘sort_column’ => ‘menu-order’

);

این کد، دو آرگومان اضافه را ایجاد می کند:

  • نشانه گذاری قبل از لیست که اکنون “Menu” به جای “Pages” فراخوانی می شود.
  • ترتیبی که صفحات نمایش داده می شوند.

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

نحوه بروزرسانی خودکار منوی راهبری در هنگام اضافه کرن صفحات به وردپرس

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

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

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

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

آموزش وردپرس کد وردپرس

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

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

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

هفت + هجده =