カスタムメニューの作成 | IT工房

カスタムメニュー作成手順
グローバルナビにimgタグを使用

カスタムメニュー作成手順

カスタムメニューを使用するためにはfunctions.phpにカスタムメニュー表示の関数を記述します。
そうするとWordPressのダッシュボードの外観メニューに「メニュー」の項目ができます。

functions.phpにカスタムメニューの関数を記述
WoedPressのダッシュボードの外観メニューに「メニュー」の項目ができる。
メニューの設定を行う
CSSの再編集

functions.phpの記述

functions.phpの記述例

// カスタムメニュー 
register_nav_menus(   array( 
    'place_global' => 'グローバル',
     'place_footer' => 'フッター',   )    );

register_nav_menus()とはWordPress関数のひとつです。
これでカスタムメニュー機能を有効にして連想配列でメニューの名前（インデックス）と説明（値）を指定します。

header.php側の記述

wp_nav_menu()　を使用してテンプレートにナビを呼び出します。
header.php側の記述例

<?php wp_nav_menu(array( 
		'container' => 'nav', 
		'container_id' => 'global-nav', 
		'theme_location' => 'place_global', 
		)); 
?>

navタグで囲んでid=”global-nav”にします。

navメニューにidやclassを付けたくない場合には以下をfunctions.phpに付け加えます。

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) {
    return is_array($var) ? array_intersect($var, array( 'current-menu-item' )) : '';
}

ダッシュボードの外観メニュー

「global」などの名前をつけて「新規メニュー作成」ボタンをクリック
左側メニューの「固定ページ」欄の「すべて表示」をクリックして全てを表示する。
メニューにしたい項目にチェックをつけて「メニューに追加」ボタンをクリックするとメニューが出来上がる。
テーマの位置を決めて「メニューを保存」ボタンをクリック

設定が終了したらプレビューして確認します。
グローバールナビにCSSが効いていないことがわかります。
ブラウザからソースを確認してWordPressが吐き出したタグとclass名を確認してCSSの設定を変更して終了です。

グローバルナビにimgタグを使用

functions.phpの記述

add_filter( 'the_title', 'img_nav_menu_title' );
function img_nav_menu_title($title) {
    if( preg_match( "/\[\[(.*)\]\]/", $title, $match ) ) {
        $get_title = $match[1];
        $get_img_url = clean_url($get_title);
        if($get_title == 'none') {
            $title = '';
        } else {
            $get_img_dir = str_replace( get_option('home') . '/', ABSPATH, $get_img_url );
            $get_size    = getimagesize( $get_img_dir );
            $get_alt     = preg_replace( "/\[\[(.*)\]\]/", '', $title );
            $title = '<img src="' . $get_img_url . '" alt="' . $get_alt . '" />';
        }
        return $title;
    } else {
        return $title;
    }
}