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とスマホ

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

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

オンマウス

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

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

カスタム投稿

【サンプル】プラグインなしでカスタム投稿タイプを複数作る

  あまりWordPressをテクっていない私が、今回はプラグインなしでカスタム投稿タイプを作ってみました。 たぶん、詳しい人からするとかなり簡単にできてしまうんだと思いますが、 詳しい人ほ …

ワードプレスで予約

WordPressで簡単に予約システムを導入

  ホームページから予約が取れる時代が当たり前になってきたんですねー 私もお客様からお問い合わせがあり、「予約が取れるようにして欲しい」っていうことで、数件取り入れたことがあります。 でも、 …

ヘッダー画像変える

ヘッダー画像やスライダーをページ毎に変える方法

  WordPressで作成したページで、ヘッダー画像やスライドショーをページごとに変えたい! 今回やってみたことは、条件分岐でヘッダーの画像部分を振り分けるといった方法です。 プラグインな …