とあるコーダーの備忘録

カレント表示でハマった話

今回やりたかったこと

WordPress案件です。

グローバルメニューにカレント表示を実装します。

当社のデザイナーさんから受け取ったデザインをみてグローバルメニューの表示されている部分に下線が入っていたのでカレント表示をするもんだと思っていましたが実はマウスオーバーで下線が表示される仕様のようでした。(当社はイラレで作成したデザインを基にコーディングしていきます)

実装した後に気づいたんでカレント表示で押し切りました。

メニュー表示が日本語と英語2行で表示するデザインのためダッシュボード内のメニューが使えない…
ということで別な方法を取るしかありません。

グローバルナビゲーションにカレントディレクトリ表示を実装する

メニューを2行で表示させる条件でワードプレスでカレント表示する方法を探してみるとなかなか見つかりません…。
やっと見つけたWEB(K)Campusさんのページで紹介されている方法を実装してみました。

ナビゲーションをカレント表示する方法まとめ【jQueryとかWordPress】

PHPに直接コードを記述していく方法です。

<li<?php if(is_page('news')){ echo ' class="current"'; } ?>><a href="<?php echo home_url(); ?>/news/">NEWS<br>お知らせ</a></li>
<li<?php if(is_page('business')){ echo ' class="current"'; } ?>><a href="<?php echo home_url(); ?>/menu/">BUSINESS<br>事業内容</a></li>
<li<?php if(is_page('contact')){ echo ' class="current"'; } ?>><a href="<?php echo home_url(); ?>/contact/">CONTACT<br>お問い合わせ</a></li>

コードはこんな感じで実装してみました。

実際はもう少しメニューの数が多かったので、メニューからTOPページを外してヘッダーロゴをホームボタンに設定しています。

ダッシュボードの表示設定でホームページは「TOP(front-page.php)」、投稿ページが「NEWS お知らせ」に設定。

これで動作確認をしてみたところ、事業内容とお問い合わせはカレント表示されるのですが、「NEWS お知らせ」の下にカレント表示がされないのです。

これで解決!

■失敗編

実際に「NEWS お知らせ」に割り当てたコードはこんな感じ。

「NEWS お知らせ」のスラッグは“news”。

<li<?php if(is_page('news')){ echo ' class="current"'; } ?>><a href="<?php echo home_url(/news); ?>">NEWS<br>お知らせ</a></li>

上記のコードを入力するとエラー表示がでてサイトが見れなくなりました…
あれやこれやと試したのですが一向に表示される気配が無い…

■これで解決編

考え始めてかれこれ30分。
時間的にはもう限界。
もう、グロナビにトップページが無いからじゃね?
なんて考えて下記のコードを入力。

<li<?php if(is_home()){ echo ' class="current"'; } ?>><a href="<?php echo home_url(); ?>">NEWS<br>お知らせ</a></li>

これがダメだったらマウスオーバーで動く仕様にしちゃおうかなと思ったのですが、無事カレント表示されました。

無事表示されたんですが、一体何だったんですかね?

<?php echo home_url(); ?>はトップページを表示するためのコードだと思ったのですがねぇ。なんなんでしょ。

次に似たような案件が来たときはこれで凌げそうですけど。

コメントを残す

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

筆者:
Y

2018年12月よりホームページ制作会社に勤める。
業務ではコーディングのほかに画像、動画制作なども行っている。

TOPへ戻る