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

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

How to add menu descriptions in WordPress themes

توجه: در این آموزش لازم است که درک درستی از HTML ، CSS و توسعه قالب WordPress داشته باشید.

چه زمانی و چرا می خواهید توضیحات منو اضافه کنید؟ h4>

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

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

Menu Descriptions

مرحله 1: توضیحات منو را روشن کنید h4>

به ظاهر »منوها بروید. روی دکمه گزینه های صفحه در گوشه سمت راست بالای صفحه کلیک کنید. کادر توضیحات را علامت بزنید.

Enabling menu descriptions in WordPress

این قسمت توضیحات را در موارد منو شما فعال می کند. مانند این:

Description field added to menu items

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

مرحله 2: کلاس واکر را اضافه کنید: h4>

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

منوی کلاس با توصیف Walker_Nav_Menu را گسترش می دهد {
تابع start_el (& $ خروجی ، $ مورد ، $ عمق ، $ args) {
$ wp_query جهانی؛
$ indent = ($ عمق)؟ str_repeat (" t"، $ عمق): ''؛

$ class_names = $ value = ""؛

$ class = خالی ($ item-> کلاس)؟ array (): (array) $ item-> class؛

$ class_names = join (''، apply_filters ('nav_menu_css_class'، array_filter ($ class)، $ item))؛
$ class_names = 'class = "'. esc_attr ($ class_names). '"'؛

$ خروجی. = $ تورفتگی. '
  • ID” “”. ارزش دلار $ class_names. ‘>’؛

    $ مشخصه =! خالی ($ item-> attr_title)؟ ‘title = “‘. esc_attr ($ item-> attr_title). ‘”‘: ”؛
    ویژگی $. =! خالی ($ item-> target)؟ ‘target = “‘. esc_attr ($ item-> target).” “‘:’ ‘؛
    ویژگی $. =! خالی ($ item-> xfn)؟ ‘rel = “‘. esc_attr ($ item-> xfn).” “‘:’ ‘؛
    ویژگی $. =! خالی ($ item-> url)؟ ‘href = “‘. esc_attr ($ item-> url).” “‘:’ ‘؛

    $ item_output = $ args-> قبل از آن؛
    $ item_output. = ‘‘؛
    $ item_output. = $ args-> link_before. apply_filters (‘the_title’ ، $ item-> عنوان ، $ item-> ID). $ args-> link_after ؛
    $ item_output. = ‘
    ‘. $ item-> توضیحات. ‘‘؛
    $ item_output. = ‘
    ‘؛
    $ item_output. = $ args-> after؛

    $ output. = apply_filters (‘walker_nav_menu_start_el’، $ item_output، $ item، $ deep، $ args)؛
    }
    }

    مرحله 3. Walker را در wp_nav_menu فعال کنید h4>

    مضامین وردپرس از wp_nav_menu استفاده می کنند () عملکرد برای نمایش منوها. ما همچنین یک آموزش برای مبتدیان در مورد نحوه افزودن منوهای پیمایش سفارشی در مضامین وردپرس . بیشتر مضامین وردپرس منوها را در الگوی header.php اضافه می کنند. با این حال ، ممکن است که تم شما از فایل الگوی دیگری برای نمایش منوها استفاده کرده باشد.

    کاری که اکنون باید انجام دهیم این است که عملکرد wp_nav_menu () را در طرح زمینه خود پیدا کنیم (به احتمال زیاد در header.php) و آنرا به همین صورت تغییر دهیم.

    
    
    
     'اولیه' ، 'menu_class' => 'nav-menu' ، 'walker' => $ walker))؛ ؟>
    
    

    در خط اول $ walker را تنظیم می کنیم تا از کلاس واکر که قبلاً در توابع.php تعریف کردیم استفاده کند. در خط دوم کد ، تنها آرگومان اضافی که باید به آرگومان های wp_nav_menu موجود خود اضافه کنیم ، 'walker' => $ walker است.

    مرحله 4. حالت دادن به توضیحات h4>

    کلاس واکر که قبلاً اضافه کردیم ، توضیحات مورد را در این خط کد نمایش می دهد:

    $ item_output. = '
    '. $ item-> توضیحات. '

    کد بالا با افزودن برچسب
    باعث شکست خط به مورد منو می شود و سپس توصیفات شما را در یک بازه با کلاس sub قرار می دهد. مانند این:

    
    
  • درباره
    ما چه کسانی هستیم؟
  • برای تغییر نحوه نمایش توضیحات در سایت خود ، می توانید CSS را در صفحه سبک طرح زمینه خود اضافه کنید. ما این را در بیست و دوازده آزمایش کردیم و از این css استفاده کردیم.

    .منو-مورد {
    مرز چپ: 1 پیکسل جامد # سی سی؛
    }
    
    span.sub {
    نوع قلم: مورب؛
    اندازه قلم: کوچک؛
    }
    

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

    منابع اضافی h4>

    نحوه سبک سازی وردپرس منوهای پیمایش

    نحوه افزودن موارد سفارشی به منوهای خاص وردپرس

    منوهایی با کلاس توصیف a بیل اریکسون >

    منبع:
    https://www.wpbeginner.com/wp-themes/how-to-add-menu-descriptions-in-your-wordpress-themes/.

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