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

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

ただいまの
回答率

90.75%

  • PHP

    19178questions

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

  • WordPress

    6654questions

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

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 623

KEI07

score 3

カスタムメニューの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;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

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

追記
カスタム投稿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/16 18:04

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

    キャンセル

  • 2017/09/16 23:27 編集

    ちょっと勘違いしていますか?
    それともこちらが勘違い?

    提示されたサイトのコードはナビゲーションメニューに追加されたページで現在開いているページにclassを付与するという意味ではないですか?
    ```nav_menu_css_class```はメニューに対するフックなのでシングルページがメニューに追加されていればclassが付与されると思いますが、メニューに無いページには付与されないと思います。
    あと、コアの編集も正しい挙動ではないと思います。

    とりあえず、ここにclassを付けたいというHTMLやsingle.phpのコード等を提示いただけば、また違った見解があるかもしれません。

    キャンセル

  • 2017/09/17 07:54

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

    キャンセル

  • 2017/09/17 08:43

    分かってなくて申し訳ないです。
    一旦上の方へ追記しました。

    キャンセル

  • 2017/09/17 10:41 編集

    追記しました。

    ん?追記分見てますか?

    キャンセル

  • 2017/09/17 12:10

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

    キャンセル

  • 2017/09/17 12:16 編集

    そもそも<li>小説</li>なんて実際に吐き出されるHTMLではないはずなので、情報小出し小出しじゃなくきちんとしたものを出してください。

    あと、”// クラスを削除して、表示中メニューに 'current' クラスを付与する”の後に書かれたコードはそのまま必要なのはわかってますか?

    キャンセル

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    19178questions

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

  • WordPress

    6654questions

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