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

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

関連記事

sliderコピー

ヘッダーのスライドショーをページ毎に変える方法

前回の記事で、「ヘッダー画像やスライダーをページ毎に変える方法」を紹介しましたが、 今回は引き続き、スライドショーができるプラグインを使った方法をやってみましたので紹介します。   Smar …

ワードプレス

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

  11.メンバー一覧表示のカスタマイズ   メンバー個人個人の登録が終わったら、今度は一覧表示を作ってみます。 あまりごちゃごちゃ触りたくないので、以下のファイルだけ中身を少し変 …

画像のトリミング

object-fitで画像のトリミング

  PCとスマホで画像の見え方を変えるのに役立つのが、 cssの「object-fit」プロパティです。 背景画像として扱うcssの「background-size」というのもありますが、 …

ヘッダー画像変える

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

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

記事一覧表示

固定ページにカスタム投稿記事一覧表示

    固定ページにアイキャッチ画像付きの記事一覧を表示させたい   そこで、やりたかった主なことは以下の部分です。   ・いろいろプラグインなどもあるが、プラ …