WordPressで固定ページのタイトルを非表示(PHP変更)

WordPress
スポンサーリンク
Toshi
Toshi
WordPressで固定ページを作成した際、タイトルが出てしまう問題をサクッと解決したいと思いますPHPを編集するのですが、安心してください。PHPがわからなくてもできます!

今回解説していく内容は以下です!

 本記事の内容

・WordPressのPHP編集
・固定ページのタイトル非表示
・番外編:CSSで非表示にする方法


スポンサーリンク

WordPressのPHP編集

WordPressのPHP編集はレンタルサーバーのファイルマネージャー、もしくはWordPressの画面より編集します。WordPressで編集する場合は 外観 < テーマエディター < ○○.phpを指定してコードを書き換えます!基本的に、このWordPressの画面よりPHP編集は行うようにしてみてください!

PHPの書き間違いで大変なことに?

ずっと前のWordPressは、「PHP」を間違った構文で書いてしまっても保存ができてしまい…自分のWebサイトが表示されなくなってしまったみたいな恐ろしい経験もたくさんしてきました。現在のWordPress5.0だと、構文が間違っていたらエラーで保存ができなくなっているため安心して書き込む事ができます。

要は初心者がPHPを間違って壊すことがなくなったという事

安心して作業できますよね!

固定ページのタイトル非表示

では、実際に固定ページを編集していきますがその前に一点だけ確認しないといけない事がありました!WordPressのテーマによっては、コードが異なってくるので事前にどういう HTML で タイトルが表示されているのか確認してみましょう

タイトルが表示されているHTMLを確認

Google Chromeを利用している場合は、右クリック < 検証 を押して開いてあげるか ⌘ command + Option + i でデベロッパーツールを開きます。

デベロッパーツールには、クリックiConやスマホタブレットiConがあります。今回はこのクリックiConを使い要素をクリックして確認します!
なるほど… h1.entry-titleというところでタイトル表示がされているのか。これを非表示にしてしまおう!

PHPを確認し、非表示に…

外観 < テーマエディター < content-page.phpより先ほどの <h1>でclass名が entry-titleになっているものを探せばOKです!

HTMLを非表示にするために、今回は <!– –> でコメントにしてしまいます。※完全に消すわけではありません。

覚えておくと便利なのですが、これにもショートカットキーが存在しエディター上で ⌘ command + /を打ち込んでみてください。コメントアウトできるはずです!

<!--<h1 class="entry-title" itemprop="headline">
          <?php
          if (is_wpforo_plugin_page()) {
            echo wp_get_document_title();
          } else {
            the_title();
          }
           ?>
        </h1>-->

あとは対象ページがどうなっているか確認するだけ。すごい簡単でしたね!

流れとしては…

  1. 非表示にするHTML要素をデベロッパーツールを使用して検索
  2. content.php にて HTMLをコメントアウトで非表示にする
  3. 対象ページを確認する

です。ちなみに、固定ページと投稿ページのタイトルの出し方が同じ場合は「記事タイトル」も一緒に非表示にしてしまう。こともあるので注意が必要です。

番外編:CSSで非表示にする方法

この方法はオススメしません!

別にPHPをいじらずとも、CSSで非表示にすることだって可能です。cssで要素を非表示にするには display:none; というコードを使いますが…

<style>
h1.entry-title{
 display:none;
}
</style>

という上記のコードをウィジェットに入れてあげるだけです。外観 < ウィジェットよりサイドバーもしくは他のところにカスタムHTMLもしくはテキストを含めばOKです。この方法をオススメしないといった理由はサイドバーがぐちゃぐちゃになったりと後々管理が大変になってくるためです。SEO的にもNGですね。

ただ、HTMLの勉強やCSSの勉強にはもってこいです

要素を確認しながら、自分の好きなように HTMLにCSSで装飾してみてください!

まとめ

Toshi
Toshi

いかがでしたか?簡単に固定ページのタイトルを表示しなくする事ができました。ぜひ、固定ページのタイトルが不要という事であれば、content-page.phpを編集してみてください

 

コメント