質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

1回答

1202閲覧

wordpress 表示中ページの li に current クラスを付ける (投稿記事ページ)

KEI07

総合スコア11

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2017/09/07 06:43

編集2022/01/12 10:55

カスタムメニューのli要素にcurrentクラスを付けるというのは、

https://memocarilog.info/wordpress/6514

こちらの記事の2つ目を参考にarchive.phpでは付くようになったのですが、
このページ下のコメントにあるようにそこからのリンク先
single.phpにてクラスを付ける事ができません。
(このコメントの方(rio-erinさん)が修正したソースを使用してもできませんでした)

その後自分でも色々調べてnav-menu-template.phpの391行目のelseif文

elseif (
'post_type_archive' == $menu_item->type &&
is_post_type_archive( array( $menu_item->object ) )
)

こちらを

elseif (
'post_type_archive' == $menu_item->type &&
is_post_type_archive( array( $menu_item->object ) ) ||
is_singular( array( $menu_item->object ) )

)

にすればできるようになったのですが、これだとバージョンアップする度に
書き直さないといけません。
こういうのはfunction.phpにフックを記述するのがベストだと思っているのですがフックの要領を得ておりませんのでどうすれば良いか詰まっております。

追記
キャプチャ追加しました。
![イメージ説明説明]

メニューはheader.phpにwp_nav_menuテンプレートタグで作成。

<?php $args = array( 'menu' => 'global-navi', // 管理画面で作成したメニューの名前 'container' => '', // <ul>タグを囲んでいる<div>タグを削除 ); wp_nav_menu($args); ?>

生成されるコードは下記のようになります。現在は小説一覧のページを開いているのでそこにcurrentが付いています。
ホーム > 小説(archive-novel.php)

<ul> <li>ホーム</li> <li>告知</li> <li class="current">小説</li> <li>詩</li> </ul>

小説一覧ページから個別の記事(小説1)を表示するとcurrentが付かなくなります。
ホーム > 小説 > 小説1(single-novel.php)

<ul> <li>ホーム</li> <li>告知</li> <li>小説</li> /* single-novel.phpを表示した状態でここにcurrentをつけたい */ <li>詩</li> </ul>

追記2
それぞれ表示中ページの<li>にcurrentを付与したいと思ってます。

テンプレートがarchive-novel.phpの場合は下記コードで問題ないのですが、single-novel.phpの場合にcurrentが付与されなくなるのでその場合の書き方が知りたいです。

// クラスを削除して、表示中メニューに 'current' クラスを付与する

add_filter( 'nav_menu_css_class', 'remove_to_currentClass', 10, 2 ); function remove_to_currentClass( $classes, $item ) { $classes = array(); if( $item -> current == true ) { $classes[] = 'current'; } return $classes; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

参考にされたサイトのコードで問題ないと思います。(コメントの修正は無視)
確認は当然ブラウザで行うと思いますが、キャッシュが効いているせいで反映していないように勘違いする場合が多くあります。
なのでキャッシュを無効にするなり削除するなりして再確認してみてください。

追記
カスタム投稿novelで良いのでしょうか?
そのページが開いている時にメニューにclassが付与されれば良いだけなら以下のような形で良いと思います。

function replace_menu_html( $menu ) { if ( is_singular( 'novel' ) ) { $menu = str_replace( '<li>小説</li>', '<li class="current">小説</li>', $menu ); } return $menu; } add_filter( 'wp_nav_menu', 'replace_menu_html' );

投稿2017/09/11 13:49

編集2017/09/17 01:43
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KEI07

2017/09/16 09:04

返信が遅くなり申し訳ありません。 参考サイトの方法ですとarchive.phpのページではメニューの<li>にcurrentが付き問題ないのですが、そこから遷移する個別記事(single.php)がありまして、その個別記事の方では<li>にcurrentが付かない状態です。 キャッシュの方はchromeの設定から削除して確認しております。
退会済みユーザー

退会済みユーザー

2017/09/16 14:41 編集

ちょっと勘違いしていますか? それともこちらが勘違い? 提示されたサイトのコードはナビゲーションメニューに追加されたページで現在開いているページにclassを付与するという意味ではないですか? ```nav_menu_css_class```はメニューに対するフックなのでシングルページがメニューに追加されていればclassが付与されると思いますが、メニューに無いページには付与されないと思います。 あと、コアの編集も正しい挙動ではないと思います。 とりあえず、ここにclassを付けたいというHTMLやsingle.phpのコード等を提示いただけば、また違った見解があるかもしれません。
退会済みユーザー

退会済みユーザー

2017/09/16 22:54

コードは質問欄で</>を押して```の間に書いてください。
KEI07

2017/09/16 23:43

分かってなくて申し訳ないです。 一旦上の方へ追記しました。
退会済みユーザー

退会済みユーザー

2017/09/17 03:02 編集

追記しました。 ん?追記分見てますか?
KEI07

2017/09/17 03:10

確認しました。カスタム投稿はnovelで問題ないです。 教えて頂いたコードを試しましたが、現在表示されてない状態です。
退会済みユーザー

退会済みユーザー

2017/09/17 03:20 編集

そもそも<li>小説</li>なんて実際に吐き出されるHTMLではないはずなので、情報小出し小出しじゃなくきちんとしたものを出してください。 あと、”// クラスを削除して、表示中メニューに 'current' クラスを付与する”の後に書かれたコードはそのまま必要なのはわかってますか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問