wordpress

WordPress(ワードプレス)でメニューを分ける

投稿日:

カスタムメニュー

 

 

メニューを追加してみる

 

WordPress管理メニューにある【外観】→【メニュー】に進むとそれぞれのメニューを登録することができますが、今回はあえてメニューを3か所に分けたいと思います。

いろいろテーマによってやり方や使用方法または、名称が違うと思います。

少し面倒ですが、メニューを追加したいと思います。

追加作成するので、チェック可能な(選択可能な)メニューが増えると思います。

 

 

子テーマのfunctions.phpに記述

 

親テーマの「functions.php」をさわると画面が真っ白になったり予期しないことが起こる可能性もあるので、子テーマを作って、そこに「functions.php」のファイルを作ってから記述します。


//カスタムメニュー
register_nav_menus( array(
'custom_menu' =>  'カスタムメニュー'
) );

custom_menuこの名前は自由につけました。

 

 

【外観】→【メニュー】で選択

 

先ほど「functions.php」に記述したので、メニュー設定のところに追加されたメニューが表示されたと思います。

追加したい(表示したい)固定ページなどを通常通り「メニュー構造」にセットして、作成したメニューのところにチェックを入れます。

チェックが終われば、メニューを保存します。

 

カスタムメニュー用のテンプレートファイルを作ってみる

 

子テーマに、「custom_menu.php」のような名前で、ファイルを作成してみます。

下記の記述で必要ない部分も含まれますが・・・。

 

<?php
 $custom_set_menu = array( 'container' => 'nav',
'container_class' => 'allmenu',
'theme_location' => 'custom_menu',
'link_before' => '<span>',
'link_after' => '</span>'
);

if ( has_nav_menu( 'custom_menu' ) ) : ?>

<div id="custom-menubox">

<div id="custom-menuwide">
<?php wp_nav_menu( $custom_set_menu ); ?>
</div>

</div>


<?php endif; ?>

 

 

作ったメニューを表示させる

 

<?php get_template_part( 'custom_menu' ); //カスタムメニュー ?>

 

表示させたいところに上記のように記述します。

 

細かな、設定(スマホやPCで条件分岐)がしたい場合は、if文で記述するといいですね。

 

 

 
以上でメニューを追加して分けることができました。
素人ながらにやっていますので、別の方法があるかもしれません。
 

 



 

-wordpress
-, ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

オンマウス

マウスオーバーでリンク画像に変化をつける

  自分がしたことを忘れないように記事にしました。 やりたかったのは、マウスオーバー・オンマウスでリンク画像がだんだん大きくなり、上にのせていたマスクがなくなって画像がクリアになること。 い …

スライドショー条件分岐

スライドショーのショートコードをPCとスマホで変える

今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …

アイキャッチ画像をPCとスマホ

アイキャッチ画像をPCとスマホで見え方を変える

  WordPressを使っていて、固定ページにもアイキャッチ画像を設定するところがあります。 そのアイキャッチ画像をページのヘッダーあたりに表示させたいと思いました。 PCでは、希望通りの …

フォトギャラリー

WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた

  プラグインを使って簡単にフォトギャラリー   WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …

プレビュー

WordPressのプレビューで変更されていない時にチェックすること

WordPressで固定ページや投稿ページまたは、カスタム投稿タイプでテキストの色を変更したり、大きさを変更するなどしてプレビュー画面で確認したが、変わってない!ってことはないですか? また、cssや …