【WP】記事のタイトルを表示させたくないときの安全でベストな方法

編集中はそうでもなかったのに実際にスマホで見てみると記事タイトルが邪魔に感じたりして、タイトルは無くてもいいのにと思うことがあります。

重要な働きをするタイトル

新聞でも週刊誌でも読者はまずそのタイトルを見てその記事を読むかどうかの目安にしています。

そしてこれはサイトを訪れる読者だけではなく、検索エンジンに対しても同様に重要なのです。

タイトルを入力しないことによる不具合

タイトル欄の文字列にはh1タグが付けられると同時にtitleタグで囲まれるようになっており、検索エンジンはこのtitleタグの内容をデータとして重要視しています。

つまりタイトルを空欄にすると

• 一覧表に表示されないことによってサイトの管理ができない
• 検索エンジンがそのページを評価する要素としてtitleタグに囲まれたテキストを利用できない

というマイナス点があげられます。

タイトルが邪魔なら表示しなければいい

もしタイトル表示が邪魔なら、タイトルは記載したうえで表示させないことにより、h1タグやtitleタグはしっかりと陰で機能させることができるのです。

ここでは入力した文字タイトルを表示させない方法として

• プラグインを使う方法
• CSSに追加記載する方法

の2つを順を追ってお伝えしたいと思います。

記事タイトルの表示・非表示による見た目の違い

設定に入る前にサンプル記事で表示・非表示の効果をみてみることにします。

なおタイトル欄の下にはアイキャッチ画像を配置しています。

記事ページにおける見た目の違い

●タイトルを通常どおり表示した場合

●タイトルを非表示にした場合

このようにタイトル「大隅国にもある和気公園藤まつり」は表示されなくなりました。
しかしタイトル周りのカテゴリーや日時の表示はh1要素ではないのでそのまま残ります。

これらの表示についてはWordPressテーマ毎に異なりますので、それぞれのヘルプで確認して処理してください。

記事一覧における見た目の違い

タイトルを非表示にすると記事内だけではなく記事一覧のタイトルも表示されません。

例えば、通常は下図のように表示されている記事一覧ですが…

●通常の一覧表示

●タイトルを非表示とした場合

●サムネイルにタイトルを描けばOK

●タイトル（h1）とサムネイルのタイトルの両方を表示させるのもOK

サムネイルにイラストするタイトルは必ずしも（h1）と同じである必要はありません。h1は陰でしっかりと役割を果たしていますから。

では実際に表示・非表示の設定をしてみましょう。前述のとおり設定方法として簡単なものを2つ取り上げます。

1. プラグインを使ってタイトルを非表示にする方法

プラグインの種類もいくつかありますが、ここでは「Title Remover」を使用しました。

インストール後「有効化」すると各編集ページの右側に下図のような欄が設けられます。特に設定というものはありません。他のプラグインでもほぼ同じようなものでした。

□にチェックを入れるだけでそのページのタイトルが非表示となります。

このように表示されるプラグインもありました

いずれも特に設定もないシンプルなものです。いろいろ試して合うものを見つけてください。

プラグインによっては正常に動作しないものもあります

プラグインによっては次のようにタイトルが小さくなるだけだったり、タイトルは消えたけれど代わりに”no title”の表示がなされたりといったものがありました。いくつか試してみる必要が有ります。

● タイトルは小さくなったが表示されたまま

上図は記事一覧においてタイトルは消えず小さく表示されていました。記事本文のタイトルは通常どおり表示されたままでした。

● タイトルは消えたが「no title」の文字を表示する

上図のように記事一覧のタイトル部分には「no title」と表示され、なんとなく手抜き工事のような感じですね。

「追加CSS」でタイトルを非表示とする方法をご紹介します。

プラグインはできるだけ使いたくないという方には良い方法です。

不具合が生じた場合はそのまま追加した css を削除すればOKです。

追加CSS記載の方法は2通りあります。

• 管理画面で追加する方法
• 各ページの add css （追加CSSとかカスタムCSSなど）に記載する方法です。

（１）WordPress管理画面からCSS追加

WordPressのダッシュボードから[外観]→[カスタマイズ]→[追加css]と進み、ここにCSSコードを追加します。

追加するCSSの構文

.entry-title {
    display: none;
}

文字通り ” タイトルの表示はしない ” という意味ですね、これを「追加CSS」に記載します。

場所は外観→カスタマイズ→追加CSSと進みます。

この場合、追加したCSS は固定記事、投稿記事の全てに作用します。

特定の記事だけに適用させたい場合は記事 id を指定します。

次にいくつかのパターン毎に参考 CSS を掲載しました。

TOP記事（固定記事）のタイトルのみ非表示にするには

.home .entry-title {
    display: none;
}

.home は TOP 記事のことです。

---

固定記事全てのタイトルを非表示にするには

.page .entry-title {
   display: none;
}

.page は固定記事を意味します

投稿記事全てのタイトルを非表示にするには

.post .entry-title {
    display: none;
}

.post は投稿記事のことです

特定の固定記事（例：記事 id が243）のタイトルを非表示にするには

.page-id-243 .entry-title {
   display: none;
}

記事id が243 である .page(固定記事) の記事タイトルを非表示にします

特定の投稿記事（例：記事 id が517）のタイトルを非表示にするには

.postid-517 .entry-title {
   display: none;
}

記事id が 517 である投稿記事の記事タイトルを非表示にします。

（２）記事ごとの「追加CSS」で設定する方法

記事編集ページの下側にある「add CSS」や「追加CSS」あるいは「カスタムCSS」といった欄にcssを追加します。

この欄が無い場合はプラグインで設定できます（次の項）。

ここに次のコードを記入します。
そのページのみに設定が反映されるのですからpage-idとかpostidとか、そもそもIDは不要なのです。

.entry-title {
    display: none;
}

実にシンプルですね。記載したその記事だけに「非表示」が反映されるので分かりやすいですね。

各ページに追加CSS欄を追加する方法

テーマによってページ下部に「追加CSS」が無い場合は、プラグインで追加することが出来ます。

いくつかある中から、ここでは「Add css to post」（作：Kachibito氏）をご紹介します。

タイトルには「プラグインを使わずに～」とありますが、実際にはプラグインも用意してあります。

デスクトップにZIPファイルをダウンロードし、解凍せずそのままWordPress の「プラグイン」にアップロードし有効化します。

記事 idとその確認方法

既述のように管理画面において特定の記事のタイトルだけを非表示としたい場合は、その記事の id を指定しなければなりません。（各ページで追加する場合は不要）

• 固定記事の場合は　.page-id-○○
• 投稿記事の場合は　.postid-○○

となります（○○に数字が入る）。

この作業を行う上で必要となる「記事id」の確認方法を次に記します。

（１）記事一覧のページでidを確認

記事一覧のページでは二通りの方法があります。

① 記事一覧のID項目を直接確認する

記事一覧にID項目が無い場合は、上部の「表示オプション」を開き「ID」にチェックを入れると表示されます。

② 記事一覧の記事タイトルにカーソルを載せると画面最下部に記事idが表示される

（２）編集画面上部のURL欄でidを確認

記事を開いて編集画面にした時に上部のアドレス（URL）欄に表示される文字列に記事 id が含まれています。

（おわり）