パンくずリストでthe_title()を使用するとスマホのときに表示されません

  • 解決済 echizenya

    (@echizenya)


    7年前

    いつもお世話になっております。the_titleの表示についてご存知の方がいらっしゃいましたらご教示を願います。

    —

    【質問の主旨】

    PCのときはパンくずリストの最後にその記事のブログタイトルが表示されます。一方、スマホで同じページを確認すると記事のブログタイトルが表示されません。これはなぜでしょうか？

    【質問の補足】

    1.
    下記のアドレスは現在自分が見えているPCとスマホの様子をGoogleドキュメンシートに貼り付けたものです
    https://goo.gl/ikoS56

    2.
    例としてsingle.phpのパンくずリストについて下記のように記述しています。
    そのほかpage.phpやdate.phpなどについても同様の記述をしています。

    <div class="bread">
  <ol>
    <li>
      <a href="<?php echo esc_url( home_url() ); ?>"><i class="fa fa-home"></i><span>TOP</span></a>
    </li>
    <li>
      <?php if ( has_category()) : ?>
        <?php $postcat = get_the_category(); ?>
        <?php echo get_category_parents( $postcat[0], true, '</li><li>'); ?>
      <?php endif; ?>
      <a><?php the_title(); ?></a>
    </li>
</ol>
</div>

    3.
    今回の質問に関するテーマはGitHubにアップしています。下記のアドレスはテーマディレクトリです。
    https://goo.gl/ZNdT5r

    4.
    質問投稿に先立ち日本語版codexと英語版codexを読み込みました。ですがthe_titleのページにおいて、パンくずリストやスマホ表示に関する注意書きなどは見つけることはできませんでした。

    5.
    サポートフォーラムの検索窓から、”the_title スマホ パンくずリスト”で検索をしましたが、キーワードに一致するページは1件も見つかりませんでした。

    6.
    なお今回の質問に関わるWordPressテーマは自作のものを使用しています。

    —

    以上、よろしくお願い申し上げます。

    • このトピックはechizenyaが7年前に変更しました。
9件の返信を表示中 - 1 - 9件目 (全9件中)
  • ishitaka

    (@ishitaka)

    7年前

    こんにちは

    style.css の下記コードが影響しているようです。

    @media(max-width: 599px) {
  .bread li:last-child {
    text-indent: -9999px;
  }
}
    トピック投稿者 echizenya

    (@echizenya)

    7年前

    @ishitakaさん。
    アドバイスありがとうございます。

    —

    >style.css の下記コードが影響しているようです。

    “css text-indent 9999px 効かない”でGoogle検索をしたところ、スマホのパンくずリストが表示されない原因に関する記事がいくつかヒットしました。大きく分けて3つの原因と対策が挙がってきました。ですがいずれも最後尾にブログ記事のタイトルをつけることができません。

    1.親要素などにtext-alignが設定されている場合について

    今回の場合、.bread li:last-childの擬似クラスは、.sub-headerクラスが該当します。ただ.sub-headerクラスでは、text-alignが設定されていません。

    【参考ページ】
    https://html-coding.co.jp/knowhow/cts/000019/

    2.親要素にtext-indent -9999pxを予め仕込む

    下記のようにコードを変えてみました。

    @media(max-width: 599px) {
  .sub-header {
    text-indent: -9999px;
  }
  .bread li:last-child {
    text-indent: -9999px;
  }
}

    【参考ページ】
    http://911.ddtea.com/?eid=1286749

    3. text-indent: 100%;とする

    下記のようにコードを変えてみました。

    .bread li:last-child {
	white-space:nowrap;
    text-indent: 100%;
    overflow: hidden;
  }

    【参考ページ】
    http://d.hatena.ne.jp/webhush/20130926/1380158119

    —

    ただこれ以上、質問をするとWordPressに関する質問ではなくなり、CSSの質問になってしまいます。なので今回の質問はこのコメントを持って「解決済み」とします。

    これ以上のことについては、@ishitakaさんのアドバイスを参考にしつつ、WordPressフォーラム以外のところで質問するようにします。

    ありがとうございました。今後ともどうぞよろしくお願いします。

    ishitaka

    (@ishitaka)

    7年前

    この CSS は、パンくずリストの最後の項目（タイトルですね）を非表示にする目的のようなので、非表示にしないのであれば、単純に丸ごと削除するだけていいと思いますが・・・どうでしょうか？

    @media(max-width: 599px) {
  .bread li:last-child {
    text-indent: -9999px;
  }
}
    • この返信は7年前にishitakaが編集しました。
    トピック投稿者 echizenya

    (@echizenya)

    7年前

    @ishitaka さん
    CSSについてもアドバイスをいただきありがとうございます。

    単純に丸ごと削除するだけていいと思いますが・・・どうでしょうか？

    先ほど私のコメントにおいて「原因と対策」が一つ漏れておりました。

    /*
@media(max-width: 599px) {
  .bread li:last-child {
    text-indent: -9999px;
  }
}
*/

    対策の最初にメディアクエリの部分を丸ごとコメントアウトしました。
    ですが、スマホにおけるパンくずリストの最後尾には、ブログの記事タイトルをつけることはできませんでした…

    念のため本番サーバーでも当該箇所をコメントアウトをしましたが、
    やはりパンくずリストの最後尾に表示されるはずのブログタイトルは表示されませんでした。
    (https://goo.gl/ikoS56 にローカル開発環境と本番サーバーの内容について比較した画像を追加しました)

    いかがでしょうか？

    ishitaka

    (@ishitaka)

    7年前

    同じ style.css が二重に組み込まれています。

    header.php の 8行目
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

    functions.php の 6行目
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    header.php の方は不要ではないでしょうか？
    これにより、キャッシュが働いているのかもしれません。また、ブラウザのキャッシュもクリアしてみてください。

    トピック投稿者 echizenya

    (@echizenya)

    7年前

    @ishitaka さん。
    たびたびのアドバイスありがとうございます！
    以下の3点について、コメントいたします。特に2.についてご確認をいただければ幸いです

    1.

    header.php の 8行目
    functions.php の 6行目

    おかげさまでheader.php の 8行目をコメントアウトして、functions.php の 6行目をそのまま生かしておくと、
    スマホ表示におけるパンくずリストの最後尾にブログ記事のタイトルが表示されるようになりました。ありがとうございます。

    2.
    ただ同じことを本番用のサーバーですると、なぜかこちらでは表示されません。ローカル開発環境のテーマも本番サーバーのテーマもheader.phpとfunctions.phpについては同じ内容なのですが…。どんな原因が考えられるでしょうか？

    3.
    パンくずリストの表示状況については、https://goo.gl/ikoS56 に画像を2枚追加しました。また本番用のサーバーで使っているブログサイトの例は、

    http://e-yota.com/book_report/imphal_strategy_resist_command/

    です。加えて本番用サーバーのアドレスで、スマホの見た目を確認するサイトのキャッシュをクリアしたり、自分のスマホで確認しても記事タイトルは表示されません。

    もし今回のコメントが当初の質問から外れているようでしたら、おっしゃってください。この質問は解決済みとして、別に質問を投稿します。いかがでしょうか？

    トピック投稿者 echizenya

    (@echizenya)

    7年前

    @ishitaka さん。追加のコメントで恐れ入ります。
    本番サーバーでもstyle.cssは

    /*@media(max-width: 599px) {
  .bread li:last-child {
    text-indent: -9999px;
  }
}*/

    としていますが、やはりスマホにおけるパンくずリストの記事タイトルは表示されません。

    ishitaka

    (@ishitaka)

    7年前

    提示のサイトを、スマホ（現在、手元にスマホがないので Android エミュレーターにて）で確認してみましたが、表示されました。style.css も問題ないようです。
    ブラウザのキャッシュだと思うんですけど・・・。それともスマホによるのかな・・・。
    スマホ（ブラウザ）はなんでしょうか？

    • この返信は7年前にishitakaが編集しました。
    トピック投稿者 echizenya

    (@echizenya)

    7年前

    @ishitaka さん。
    たびたびのアドバイスありがとうございましたありがとうございます。

    スマホ（ブラウザ）はなんでしょうか？

    自分はスマホはAndroidでブラウザはChromeを使っています。
    PCで”android スマホ キャッシュクリア”を検索して、ヒットしたいくつかのページに基づいてキャッシュを削除すると、
    パンくずリストが最後まで表示されるようになりました。合わせて自分が使っているエミュレーターでも同様に表示されました！

    最後まで根気よく付き合ってくださって、感謝に耐えません。本当に助かります。
    今後ともどうぞよろしくお願いします

    • この返信は7年前にechizenyaが編集しました。
    • この返信は7年前にechizenyaが編集しました。
    • この返信は7年前にechizenyaが編集しました。
9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「パンくずリストでthe_title()を使用するとスマホのときに表示されません」には新たに返信することはできません。
  • フォーラム: テーマ
  • 9件の返信
  • 2人の参加者
  • 最後の返信者: echizenya
  • 最後の活動: 7年前
  • 状態: 解決済