前回、Wordpressのメニューに対して、カレント設定をする方法の記事を書きました。
WordPressのデフォルトのメニュー機能（外観→メニュー）を使うことで、自動的にカレント用のクラスが付与されること、投稿ページを開いている時のその親となる一覧ページのリンクにカレント設定をつける方法などをご紹介しています。
今回の記事では、Wordpressのでフォルト機能を使わずに、一部静的なコーディングを行う場合についてのカレント設定方法をご紹介します。
静的メニューを作成してカレント設定をする方法
静的メニューを作成する場合、phpをはじめ、pugやejsなどのフレームワークを使ってループで作成すると条件分岐をつけるのが面倒になるので、メニューの量が多くない時はループを使わずコーディングした方が楽だと思います。
（慣れている人はループでもいけます）
今回はループ処理を使わずに実装していきます。
まずは静的なメニューを作成する
HTML/CSSができればここは問題ないと思いますが、念の為コードをご紹介しておきます。
<nav>
<ul>
<li><a href="<?php echo home_url(); ?>">TOP</a></li>
<li><a href="<?php echo home_url(); ?>/company">会社概要</a></li> <?php // パーマリンクで直接指定 ?>
<li><a href="<?php echo get_page_link(12); ?>">ブログ</a></li> <?php // 固定ページのIDで指定 ?>
<li><a href="<?php eco get_post_type_archive_link('news'); ?>">お知らせ</a></li> <?php // カスタム投稿の一覧ページ ?>
</ul>
</nav>URLの指定方法については特に制限などはありませんが、ディレクトリ構造が変わった場合やサイトを移転した場合も考えて出来るだけWordpress関数でURLを指定しておく方がいいと思います。
簡単な方法だと「<?php echo home_url(); ?>」でTOPページのURLを出力して、その後に適切パーマリンクを追加する方法です。
ただし、この場合だとパーマリンクを変更するとリンク切れになるので、できれば「get_page_link()」などを使って固定ページのID指定などをしてあげる方が安全です。
また、カスタム投稿のアーカイブ（一覧）ページであれば「get_post_type_archive_link(‘投稿名’);」でリンク先を取得することができます。
カレント設定を追加する
基本的なメニューを作ることができたら、次にカレント設定をしていきます。
カレント設定は該当するページとして表示されているときに「.current-menu-item」というクラスがつくように設定しておきましょう。
カレントクラス名について
「.current-menu-item」はWordpressの標準メニューでもカレントクラスとして使用されています。
他のクラスを使う事も可能ですが、今後メニューを動的に変更した時でもCSSの変更が楽になるように、あらかじめ「.current-menu-item」を使っておく方を推奨します。
<nav>
<ul>
<li><a href="<?php echo home_url(); ?>" class="<?php if(is_home() || is_front_page()) echo 'current-menu-item'; ?>">TOP</a></li>
<li><a href="<?php echo home_url(); ?>/company" class="<?php if(is_page('company')) echo 'current-menu-item'; ?>">会社概要</a></li> <?php // パーマリンクで直接指定 ?>
<li><a href="<?php echo get_page_link(12); ?>" class="<?php if(is_page(12)) echo 'current-menu-item'; ?>">ブログ</a></li> <?php // 固定ページのIDで指定 ?>
<li><a href="<?php eco get_post_type_archive_link('news'); ?>" class="<?php if(is_post_type_archive('news') || is_singular('news')) echo 'current-menu-item'; ?>">お知らせ</a></li> <?php // カスタム投稿の一覧ページ ?>
</ul>
</nav>条件分岐の方法についてはそれぞれの開発状況に合わせて書き換える必要があります。
主な分岐方法をご紹介しておきますのでご参考にしてください。
トップページかどうか
<?php
if(is_home()) {} // home.phpを使う場合
if(is_front_page()) {} // front_page.phpを使う場合（固定ページの使用など）
if(is_home() || is_front_page()) {} // home.phpとfont_page.phpの使い分けをしない場合、もしくはindex.phpを使用する場合
?>トップページを表示するには主に「index.php, home.php, front_page.php」の3つのテンプレートが使えます。
最初のうちはhome.phpとfront_page.phpを使い分ける事も少ないと思いますので、基本的には4行目の記述を使えば問題ありません。
home.phpとfront_page.phpを使う分ける場合や、ブログ一覧（投稿一覧）をindex.phpで作成する場合は条件分岐を2行目、3行目の適切なものに変更してください。
特定の固定ページかどうか
<?php
if(is_page()) {} // 固定ページかどうか
if(is_page('パーマリンク名')) {} // パーマリンクで指定する場合
if(is_page(投稿ID)) {} // 投稿IDで指定する場合
?>「is_page()」を使うことで固定ページかどうかを判断することができます。特に指定がなく、固定ページかどうかを判断する場合は2行目。（カレント設定ではほぼ使わないと思いますが・・・）
パーマリンクで指定する場合は3行目、IDで指定する場合は4行目を使って記述します。
IDで指定する場合は引数は数字になるのでシングルクォーテーション（’）で囲む必要はありません。
カスタム投稿タイプかどうか
<?php
if(is_post_type_archive('投稿名')) {} // カスタム投稿の一覧ページかどうか
if(is_singular('投稿名')) {} // カスタム投稿かどうか
if(is_post_type_archive('投稿名') || is_singular('投稿名')) {} // カスタム投稿の詳細、もしくは一覧
?>この部分が前回の記事「【WordPress】投稿ページを開いているときにメニューのアーカイブリンク（親ページ）にカレント設定をする方法」にも該当する箇所です。
単純に一覧ページを開いているときだけであれば2行目、詳細ページだけであれば3行目でOK。
ただし、メニューにカレント設定をする場合、基本的には詳細ページを開いている時でも一覧ページを開いている時でもカレント設定をしたいことがほとんどだと思います。基本的には4行目の記述が一番使うと思います。
※ifの書き方、三項演算子
初学者にとっては少しややこしいかもしれませんが、カレント設定など条件によってクラスを書き出す場合はif文の書き方をよりスッキリさせた方が可読性が上がります。
<?php
// ブロックによる記述（一番多い？）
if(is_home()) { echo '' ;}
// ブロックを省略
if(is_home()) echo '';
// 三項演算子
echo is_home() ? echo '': '';
?>初学者の場合はブロックによる記述が一般的だと思いますが、else不要で1行でかけるもの（;が一つ）であればブロック（波括弧（{}））を省略して5行目のように書くことができます。
また、elseも必要なときには7行目の三項演算子の書き方を使うことで可読性が上がると思います。
慣れるまでは意味不明に感じると思いますが、使っていくうちに覚えると思いますし、他の人が作成したテーマなどを見ると三項演算子も多く使われているので覚えておいて損はないはずです。
納品後に管理もする場合は静的の方が楽なことも
僕はWordpressを専門に10年間WEB制作をしていて、基本的にはWordpressの標準機能をそのまま使えるようにテーマ開発をするように心がけています。
何か特別な事情がない限りはメニューも管理画面から操作できるように構築、TOPページのテキストも管理画面から変更できるように制作することがほとんどです。
が、案件によっては一部静的に組むことがあります。
主な例としてはテーマ納品後に管理も全て制作側で行う場合です。
WordPressの魅力として、CMSであることから納品後はクライアント側で自由に管理できるという利点があるものの、利用者が多いのでクラッカーに狙われるリスクもあります。
そのため、場合によっては納品後の保守管理や運用も含めて、全て制作側に任せる場合もあり、その場合はクライアントが日常的に更新する投稿（カスタム投稿も含む）以外については静的に組んでしまう事もあります。
静的に組むことのメリット
- 開発速度の向上
- 表示速度の向上
- 予期せぬ不具合の回避
- 制作側でハンドルを握れる
一番のメリットは開発速度が早くなること。
WordPressの標準機能で組み込むと、Wordpress側のクラスに合わせてコーディングする必要があることと、内容の入力を管理画面から行わないといけないのでどうしても開発速度は少し遅くなります。
また、カスタムフィールドを多用することでデータベースを汚してしまうことにも繋がります。
動的に組むよりも表示速度が向上する可能性もあるので、クライアント側のメリットもあると思います。（組み方にもよると思いますが・・・）
静的に組むことのデメリット
- 修正が面倒になることがある
- クライアント側で操作ができない
- 外出先での対応が難しい
デメリットとしては修正に時間がかかるということです。
例えばメニューの名前を変えるだけでも、管理画面ではなくテーマファイルの修正が必要になるため、ローカルでの作業、テスト環境、本番環境へのアップと作業が多くなります。
git管理をしている場合ではgitの運用によってはブランチを切って、マージするなどの作業も必要になるかもしれません。
また、クライアントから軽微な修正依頼が来たときに、開発環境のあるPCを持っていない場合や上りの回線が遅い環境だと修正対応をするために帰社する必要があるかもしれませんね。
メニューは動的で組むべきか、静的に組むべきか
個人的な意見になりますが、Wordpressで作るという利点を最大限に課すためにも、基本的には動的に作成する方がいいと思います。
ただし、例外として下記の条件に当てはまる場合は静的に組むべきだと感じます。
- 納品後も管理を続ける場合
- メニューの構造が複雑で動的に組むのが難しい（あるいは極端に工数がかかる場合）
どちらにしても、制作費用や納期、納品後の運営方針によっても変わるので、ディレクターとクライアントでしっかりと話し合いをして決められればどちらでもいいのかもしれません。
まとめ
静的に組むことでメリットはあるものの、Wordpressの機能が損なわれるので場合によってクライアントのユーザービリティを下げてしまうかもしれません。
が、納期や予算の限られている現場では、コーディングをする際の工数を出来るだけ削減しなくてはいけな事もあると思います。
また、クライアントが自由に変更できる箇所をあえて制限しておくことで、クライアントの学習コストを減らして記事の執筆に集中してもらうこと、予期せぬ表示崩れのトラブルなどを防ぐ事もできます。
どのような方式にするのかはディレクター次第という事もありますが、コーダーとして提案できるように知識として入れおくのは大切です！