カスタムメニューの作成

WordPress
スポンサーリンク

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

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

  1. functions.phpにカスタムメニューの関数を記述
  2. WoedPressのダッシュボードの外観メニューに「メニュー」の項目ができる。
  3. メニューの設定を行う
  4. 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」などの名前をつけて「新規メニュー作成」ボタンをクリック
  • 左側メニューの「固定ページ」欄の「すべて表示」をクリックして全てを表示する。
  • メニューにしたい項目にチェックをつけて「メニューに追加」ボタンをクリックするとメニューが出来上がる。
  • テーマの位置を決めて「メニューを保存」ボタンをクリック

navmenu1

設定が終了したらプレビューして確認します。
グローバールナビに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;
    }
}	

navmenu2

navmenu3

グローバルナビにimgタグを使用時imgアドレスの取得するには、以下の手順で行います。

  • ダッシュボードからメニューの編集
  • メニュー構造の中でナビゲーションラベルに[[画像のURL]]を記述する [[]]を忘れない事!
  • 画像のURLはメディアで画像をアップロード後にメディアを編集から取得する
スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

WordPress
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました