Web Materia BLOG

ウェブマテリアブログ

Sep

10

2014

0

COMMENTS

WordPressのカスタムメニューをサブタイトル付きにカスタマイズ。

Category:Wordpress

WordPressのカスタムメニューをサブタイトル付きにカスタマイズ。
定番のメインメニューの一つである説明文付きのメニューをカスタムメニューでも管理する方法をご紹介。  

説明文付きのメニューとは?

サンプルとしてこういうメニューのやつです。 menu-sample   これの文字要素を全てカスタムメニューから管理できるようにするのが今回の目的です。  

カスタムメニューの説明から

まずWordpresのカスタムメニューの説明から行います。Wordpressではメニュー要素を管理画面から変更、管理できる機能があります。 自由にリンク先の指定をしたりドラッグでメニュー構造を入れ子にしたりする事も可能です。 menu-image   カスタムメニューを使うには外観→テーマ編集からfunction.phpを選択して以下のコードを記載します。
add_theme_support( 'menu' );
  でメニューを表示したい箇所に以下のコードを記載します。基本的にはheader.phpに記載される事になるかと思われます。
<?php wp_nav_menu(); ?>
 

カスタムメニューをサブタイトル付きに適応させる

今まであげたのがカスタムメニューの基礎部分ですが以下のコードをfunction.phpに更に記載する事にサブタイトル付きのサブメニューに対応されます。  
add_filter('walker_nav_menu_start_el', 'description_in_nav_menu', 10, 4);
function description_in_nav_menu($item_output, $item){
return preg_replace('/(<a.*?>[^<]*?)</', '$1' . "<br /><span>{$item->attr_title}</span><", $item_output);
}
  submenu-sample   これで「ナビゲーションラベル」がメニュー名で、「タイトルの属性」が説明文とかサブタイトルとしてリンクに含まれます。またタイトルの属性部分のテキストはspanタグで囲まれるので後はCSSでデザインを調整するのみとなります。   こうする事でメニューの管理や説明文も含めたテキスト変更が一瞬で行えるので大変便利ですね。    

Comments

comments



Archive

Category


PageTOPへ