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

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

関連記事

画像の下に隙間

背景画像の下に隙間ができる【WordPress】

HOME PAGE1 PAGE2 PAGE3     何が原因なのか?   HTMLでは、下記の様にしています。 <div class="haikei&q …

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた②

  4.まずは、function.phpに追加 テーマによっては、変更しなくてもきれいに表示されることもあります。 ※function.phpに追加する前に、念のためfunction.php …

Delete kasutamufi-rudo

カスタムフィールドを削除できるプラグインはこれでOK!

サイトを作り始めの頃、作ってしまったカスタムフィールドだけど、いらなくなったものを消したいのにどうやれば消すことができるんだろうって思っていました。 カスタムフィールドが多くなって訳がわからなくなった …

カスタム投稿

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

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

画像を順番に表示

画像を順番に重ねて表示

  画像を順番に重ねて表示したい。 画像を遅らせて表示したい。 画像に動きをつけたい。   今回は、WordPressでトップページ(フロントページ)のみ、動きのある画像を表示した …