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

WordPressとは?

WordPress(ワードプレス)って オープンソースのブログソフトとして、2003年に公開されました。 オープンソースとは、言葉通り、誰でも無償で自由に改良したり、再配布できるソフトウェアです。 ま …

真っ白

WordPressで画面が真っ白になってしまった時の対処方法

    突然画面が真っ白になって、何度試してもページが表示されなくて気分がブルーになってしまった時に試した方法   今回は、テーマの中にあるfunction.phpを編集 …

画像を上下中央に配置

指定した範囲内に画像を上下中央に配置

  divなどで指定した部分に、画像を配置 上下中央にする方法は他にもありますが、 今回は、『position』を使ってみます。   html <div class=&quo …

ワードプレス

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

  WordPressでスポーツチームやサークルまたは、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思いますが、独学で学んだ私が作っ …

ヘッダー画像変える

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

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