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

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

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

一般的に記事のタイトルはページの内容を表すために重要な役割を果たしています。 新聞でも週刊誌でも読者はまずそのタイトルを見て自分に必要な情報があるかどうかの目安にするでしょう。

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

こんな場合はタイトルを表示したくない

しかし固定ページをトップページにしている場合は、 タイトルはそのサイト名と同じであることが多く、同じ文字列がページの上方に仲良く並んでいるのは少々目障りなこともあります。

また各投稿記事においても、タイトルをイラストで表示した画像あるいはアイキャッチ画像を使っている場合は、文字タイトルの方は要らないと思うこともあります。

私自身詳しくないのですが、WordPressでは記事投稿画面の「タイトル入力欄」に入力された文字列には、h1タグが付けられると同時にtitleタグで囲まれるようになっています（テーマによっては別々に編集可）。

そして検索エンジンは、そのページを評価する要素としてtitleタグに囲まれたテキストを重要視しているのです。

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

このような理由から、ページの上部に表示されるタイトルが邪魔だからといって安易にタイトル無しにすると、検索エンジンの評価も大きく低下することが考えられます。

もしタイトル表示が邪魔ということであれば、重要な h1タグ、titleタグはそのまま残して、つまりタイトルは記載するけれど画面には表示させないという方法を取ってみてはいかがでしょうか。

ここでは通常表示されるタイトルを固定記事、投稿記事を問わず、ページごとに表示させない方法として

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

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

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

プラグインの種類もいくつか試した結果、当サイトでは次の「Title Remover」を採用しました。

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

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

別のプラグインの例です

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

実際の記事タイトルの表示、非表示

では実際のブログ記事でタイトルの非表示効果をみてみましょう。

記事ページのタイトル表示について

下図は記事内にある通常のタイトル表示です。
タイトル「大隅国にもある和気公園藤まつり」の下にはアイキャッチ画像がありますね。

タイトルを非表示にすると…

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

このタイトル周りの表示はWordPressテーマに” SWELL “を使用した場合の例ですが、他のテーマでも異なりますし、詳しい方はコードエディターから編集できます。

記事一覧でもタイトルは非表示になる

タイトルを非表示にすると記事内だけではなく記事一覧のタイトルも表示されません。
例えば、通常は下図のように表示されている記事一覧ですが…

下図のようにタイトルが消えてしまいます。

記事内だけではなく一覧表のタイトルも表示されなくなるので、もし抜粋文も非表示にしていた場合は何となくのっぺらぼうな感じの一覧表になってしまうだけではなく、記事の内容もわかりにくくなります。
こんな時はタイトル入りのサムネイルにするなどの工夫が必要かもしれません。

プラグインによってはちょっと不具合も…

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

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

この文字が小さく表示されたのは記事一覧でのことですが、記事本文のタイトルは表示されたままでした。

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

追加CSSでタイトルを非表示とする

ここでは実際に自分が利用していた「追加CSS」でタイトルを非表示とする方法をご紹介します。プラグインはできるだけ使いたくないという方には良い方法です。

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

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

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

（１）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 である .post(投稿記事) の記事タイトルを非表示にします。
「post-id」ではありません。ハイフンの無い「postid」ですのでご注意。

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

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

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

.entry-title {
    display: none;
}

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

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

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

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

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

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

↑【訂正】ZIPファイルのままアップロードします。お詫び申し上げます。

記事 idとその確認方法

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

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

となります（○○に番号が入る）。

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

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

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

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

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

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

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

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

（おわり）