Simplicityのフッター下に固定のメニューを追加する～その1

先月末に私のメインサイトのThemeをSimplicity1にしたのですが、メニューをカスタマイズする必要がでてきました。変更後のアクセス数は大きな変化はないのですが、PV数が少し落ち込んでいるような気がします。私のメインサイトは投稿記事とは別に固定ページが40ページほどあり、投稿記事とは独立したメニューを持っていました。しかし、Simplicity1はヘッダー部分にしかメニューが用意されておらず、仕方ないので1個のメニューだけを設置していました。

そこでメニューを追加することにしたのですが、追加する場所をフッターの下にしようと思います。更に、画面をスクロールしてもそのメニューは常に表示される・・・というものにしようと思います。以下、素人が行ったカスタマイズを備忘録として記事に残します。

フッターの下にメニューを追加する

WordPress

行った作業を1本の記事にするつもりでしたが、最後のStyleシートの部分で手間取ってしまったのでその部分は後日アップすることとしました。取り合えず、フッター下にメニューを追加するまでの記事をアップします。

フッターメニューを追加する基本的な流れ

Simplicityに複数のメニューを設置したという記事を探したのですが、殆どの記事がメニューのデザイン変更のものばかりで、複数設置の記事は見つかりませんでした。そこで思いついたのは、新しいSimplicity2ではメニューが2本用意されていることでした。追加されたのはフッターの中（フッターの下ではない）ですが、カスタマイズの基本的な方法を知るのには参考にできるでしょう。

カスタムメニューを複数設置するという一般的な記事も参考にし、たどり着いた今回のカスタマイズの流れは以下のようになります。

functions.phpに追加するメニューを記述する
追加したい場所のPHPファイルを編集する
表示方法をStyleシートに記述する

尚、私はWordpressについてはまったくの素人です。従って、分からないことを確かめながら1歩1歩進めており、理解できたことをその都度メモ書きして残しています。用語やその使い方が間違っているかもしれませんが、素人の文章であることをお含み置きください。

1.functions.phpに追加するメニューを記述する

①Simplicity1とSimplicity2から記述方法を学ぶ

Simplicity2のfunctions.phpの該当部分は、下の06行目から11行目になります。

// カスタムメニューを有効化
add_theme_support( 'menus' );

// カスタムメニューの「場所」を設定
//register_nav_menu( 'header-navi', 'ヘッダーナビゲーション' );
register_nav_menus(
  array(
    'header-navi' => 'ヘッダーナビ',
    'footer-navi' => 'フッターナビ（サブメニュー不可）',
  )
);

ちなみにSimplicity1ではどうなっているかというと、

// カスタムメニューを有効化
add_theme_support( 'menus' );

// カスタムメニューの「場所」を設定
register_nav_menu( 'header-navi', 'ヘッダーのナビゲーション' );

このように『header-navi』のみが指定されています。よく見るとSmplicityの作者は気が利く人のようですね。Simplicity1のfunctions.phpをベースにしてSimplicity2にしているのですが、Simplicity1の記述はそのまま残しています。05行目の『//register_nav_menu( ‘header-navi’, ‘ヘッダーナビゲーション’ );』はSimplicity1の記述ですが、頭に『//』を入れて無効化しています。これを『コメントアウト』と言うそうです。

Simplicity2では『register_nav_menu(』の後に『arrey(』が入り、その後に『’header-navi’ => ‘ヘッダーナビ’』と『’footer-navi’ => ‘フッターナビ（サブメニュー不可）’』として2種類のメニューが指定されています。

『register_nav_menu(abc);』という構文は『register_nav_menu( )』という関数に『abc』という因数を『代入』しているのですが、通常は1種類の因数しか指定できません。simplicity2では『arrey(』を入れることで複数の指定が可能になっています。

②実際にメニューを追加してみる

私のサイトのメインメニューは、6つのカテゴリーで分類されています。それとは別に『日本の音楽配信』と『米国の音楽配信』というリポートが約40ページあります。それにContact』と『Profile』、『Sitemap』を加え、カテゴリー別のメインメニューとは別のメニューを用意しようという訳です。これを画面の最下部に置き、更にそれを固定表示にするというのが今回のカスタマイズの目的です。

上記のSimplicity2を参考に、Simplicity1のfunctions.phpに以下の①～⑤行を追加しました。実際の作業としては、Wordpressの管理画面で外観⇒テーマ編集⇒テンプレート下のファイル群から『テーマのための関数(functions.php)』を選択。

// カスタムメニューを有効化
add_theme_support( 'menus' );

// カスタムメニューの「場所」を設定
register_nav_menus(
  array(
    'header-navi' => 'ヘッダーナビ',
    'footer-navi' => 'フッターナビ（最下行固定）',
  )
);

Simplicityと同じくフッター部分に置くため、IDは同じ『footer-navi』を使用しました。Wordpressの管理画面で表示されるところだけ『フッターナビ（最下行固定）』と変更しています。

下の画像はfunctions.php修正前のWordpressの管理画面（外観⇒メニュー⇒位置の管理）です。テーマの位置には『ヘッダーのナビゲーション』だけが表示されています。

Simplicity1オリジナル

そして下の画像がフッター部分のメニューを追加した後の管理画面（外観⇒メニュー⇒位置の管理）です。上の『ヘッダーのナビゲーション』が『ヘッダーナビ』に変更されており、『フッターナビ（最下位固定）』が追加されています。

Simplicity修正後

2. 追加したい場所のPHPファイルを編集する

①Simplicity1とSimplicity2から記述方法を学ぶ

今回は」Simplicityのグローバルメニューはそのまま利用し、フッター部分に別のメニューを追加することになります。従って、グローバルメニューについてはSimplicity1をそのまま利用し、phpファイルには手を加えません。

問題は追加するフッター部分のメニューです。Simplicity2のfooter.phpを見てみましょう。Wordpressの管理画面で外観⇒テーマ編集⇒テンプレート下のファイル群から『フッター(footer.php)』を開きます。フッターメニューに関する記述は、footer.phpのほぼ中間部分にありました。

              <?php //フッターメニューの設定
              if ( has_nav_menu('footer-navi') ): ?>
              <div id="footer-navi">
                <div id="footer-navi-in">
                  <?php wp_nav_menu( array( 'theme_location' => 'footer-navi' ) ); ?>
                  </div>
              </div>
              <?php endif ?>

②Simplicity1のfooter.phpに記述する

追加したメニュー『footer-navi』は、simplicity2では『footer』という大枠（BOXと言うらしい）の中に置かれています。Simplicity1ではフッター部にはメニューが用意されていないことから、新たに追加記述する必要があります。最終的にはこのメニュー部分を固定表示させようとしているので、従来のフッター部の下に新たな枠を設けることになります。

WordPressで作ったサイトは、全体が『body』という枠で囲まれています。従って、上の構文をSimplicity1の『</body>』の直前に挿入してみます。『</body>』はSimplicity1の『フッター(footer.php)』の一番最後に記されています。

    <?php wp_footer(); ?>
    <?php get_template_part('analytics'); //アクセス解析用テンプレート?>
    <?php get_template_part('footer-insert'); //</body>手前のフッターにタグを挿入したいとき用のテンプレート?>
<?php //フッターメニューの設定
 if ( has_nav_menu('footer-navi') ): ?>
 <div id="footer-navi">
 <div id="footer-navi-in">
 <?php wp_nav_menu( array( 'theme_location' => 'footer-navi' ) ); ?>
 </div>
 </div>
 <?php endif ?> 
 </body>

</html>

Simplicityのメニュー複数化の準備はこれで終了し、この後はWordpressの管理画面でメニューの設定を行います。