WordPressでタイトルを非表示にする方法:初心者にもわかりやすく解説

CMS開発

はじめに

WordPressでブログやWebサイトを作っていると、ページのタイトルを非表示にしたいと感じる場面があるのではないでしょうか。 特定の固定ページや投稿記事で、あえてタイトルを隠すことでデザインを整えたい場面はよくあります。 しかし、初心者の皆さんは「どうやってタイトルを隠せばいいのか」「テーマやプラグインをいじるのは少し怖い」と思うかもしれませんね。 ここでは、WordPressのタイトルを非表示にするための具体的な方法をいくつか紹介していきます。

この記事を読むとわかること

  • タイトルを非表示にする基本的な方法
  • CSSを使うアプローチやテーマ編集による方法
  • テンプレートファイルでの対処やプラグインの利用例
  • タイトルを非表示にしたときの注意点と実務での活用シーン

タイトルを非表示にする基本的な考え方

WordPressでは、投稿や固定ページのタイトルがデフォルトで画面上部に表示されることが多いですね。 たとえば、ブログ記事の場合は「the_title()」というテンプレートタグを通じてタイトルが表示されます。 タイトルを非表示にするには、主に以下のような方法が挙げられます。

  1. CSSで表示を隠す
  2. テーマファイルを編集して出力そのものを削除する
  3. プラグインなどを活用して柔軟に管理する

それぞれにメリットやデメリットがあるため、実際のサイト構築でどれを選ぶかは状況に応じて変わります。 まずはCSSを使った簡単なやり方から見ていきましょう。

CSSを使ってタイトルを隠す方法

CSSでタイトルを非表示にする方法は、多くの場面で取り入れやすいアプローチです。 テーマやページビルダーの設定画面からカスタムCSSを追加できることも多いので、初心者の皆さんにとっては試しやすいでしょう。

タイトルのクラスを探す

WordPressのテーマによっては、タイトルに特定のクラスやIDが付与されています。 ブラウザの検証ツール(DevToolsなど)を使い、タイトルのHTML要素を確認してみてください。 例として、タイトルが <h1 class="entry-title"> というクラスを持っていた場合、それを利用してCSSを適用できます。

CSSで display: none; を適用する

見つけたクラスに対して、CSSで次のようなコードを書きます。

.entry-title {
  display: none;
}

上記のように書くと、画面上にはタイトルが表示されなくなります。 もしテーマによって別のクラス名になっている場合は適宜変更してください。

カスタムCSSの追加方法

WordPressの管理画面から 「外観」 → 「カスタマイズ」 → 「追加CSS」 というメニューを選び、そこに上記のCSSを貼り付ける方法が一般的です。 テーマによっては独自の設定画面や、子テーマのスタイルシートを編集する方法もあります。 開発環境や実務のフローに合わせて便利な手段を選ぶと良いでしょう。

CSSで非表示にしているだけなので、HTMLコードとしてはタイトルが残っています。テーマやSEOの観点によっては、非表示でも検索エンジンに読み取られる点を踏まえておきましょう。

テーマファイルでタイトルを削除する方法

次に、タイトルを根本的に出力しない方法を見てみましょう。 これにはテーマファイルを直接編集するか、子テーマを用意して編集するかの2通りがあります。 初心者の場合でも、子テーマを作ったうえでテーマファイルを調整すると、アップデートで上書きされるリスクを減らせます。

single.php などのテンプレートファイルを編集

一般的なテーマでは、投稿ページに single.php 、固定ページに page.php などが使われており、その中で the_title() が呼び出されている部分があります。 該当の箇所を探し、削除またはコメントアウトすると、サイト上でタイトルが出力されなくなります。

<!-- 例: single.php 内の一部 -->
<!-- <?php the_title(); ?> をコメントアウトする -->
<!-- <?php //the_title(); ?> -->

child theme を活用する

テーマのアップデートによって元のファイルが書き換わると、編集内容が失われる可能性があります。 そのため、必ずchild themeを用意し、そちらにファイルをコピーして編集するのが基本です。 この方法は本番運用のサイトでも広く使われており、今後のメンテナンス性を高めるうえでも重要なポイントになってきます。

プラグインでタイトルを管理する方法

WordPressでは、プラグインを使えばコードを直接編集しなくてもタイトルの表示・非表示を切り替えやすくなることがあります。 プラグインによっては特定の投稿タイプだけ非表示にしたり、投稿ページごとに設定を変えたりすることができます。

プラグイン導入のメリット

  • コード編集が不要なので初心者でも扱いやすい
  • 一部のプラグインでは、投稿一覧で一括でタイトルを非表示にする機能を持つものもある
  • テーマごとにスタイルを変える手間を削減できる

ただし、プラグインを増やしすぎるとサイトのパフォーマンスに影響が出る場合もあります。 実務では、まずCSSで簡単に非表示にしてみるか、テーマファイルを最小限編集する方法を試して、どうしても柔軟性が必要なときにプラグインを検討するのも良いでしょう。

投稿や固定ページごとに表示・非表示を切り替える方法

多くの方が遭遇するケースとして「ある特定の投稿だけタイトルを隠したい」という状況があります。 テンプレート全体を編集すると、すべての投稿に影響が及んでしまうので、ピンポイントで制御する方法が必要ですね。

is_single() と is_page() を活用する

WordPressではPHPの条件分岐タグとして is_single()is_page() が使えます。 特定の投稿IDを指定して分岐させることもできるので、柔軟にコントロールできます。

<?php if ( is_single(123) ) : ?>
  <!-- タイトルを表示しない -->
<?php else : ?>
  <!-- 通常のタイトル出力 -->
  <?php the_title(); ?>
<?php endif; ?>

上記の例では、投稿IDが123の場合のみタイトルを表示しないようにしています。 実務で使う場合は、子テーマのテンプレートに組み込むと更新に強い構成になります。

固定ページだけ隠したい場合

特定の固定ページIDを指定するには is_page( 'スラッグまたはID' ) を用います。 スラッグはパーマリンク設定から確認できますし、IDは管理画面のURLから確認可能です。

<?php if ( is_page('about-us') ) : ?>
  <!-- タイトル非表示 -->
<?php else : ?>
  <?php the_title(); ?>
<?php endif; ?>

これにより「about-us」というスラッグを持つ固定ページのみタイトルを隠すことが可能です。 それ以外のページでは通常通りタイトルが表示されます。

タイトル非表示による実務での活用シーン

では、どんなときにタイトルを非表示にするのでしょうか。 実務では、例えばトップページを固定ページとして構築し、ビジュアルを大きく見せたい場合にタイトルを隠すことが多いです。 また、LP(ランディングページ)のように独自デザインを施すときも、冒頭のタイトルが不要な場合があります。

ブランドイメージを重視したデザイン

企業サイトやブランドサイトの場合、キャッチコピーやキービジュアルを中心に配置して、WordPressの標準的なタイトル要素をあえて非表示にするケースがよく見られます。 こうすることで、コンテンツのメッセージやビジュアルを主役にできるからです。

一部の投稿だけ別レイアウトにしたい

「特別なお知らせ記事」「キャンペーンページ」など、普段のブログ記事とレイアウトを変えたいときは、タイトルや日付を隠して独自のヘッダーデザインを加えることがあります。 このように部分的にデザインを変えたい場合、先ほど紹介した条件分岐を使うと便利ですね。

タイトルを非表示にするかどうかは、実際の読者が何を最初に目にするべきかを考えながら決めると良いでしょう。デザイン面でのメリットと、ユーザーが情報を素早く認識できるかのバランスが大切です。

タイトルを非表示にする際の注意点

実務においては、タイトルを隠すことで生じる影響をいくつか押さえておきましょう。

SEOへの影響

タイトルタグ(HTMLの <title>)と、画面上に表示される見出し要素(たとえば <h1> )は別物ではありますが、検索エンジンはテキスト情報を含めてページ内容を判断します。 タイトルを完全に削除してしまうと見出し構造が失われ、検索エンジンに意図を伝えづらくなるかもしれません。 CSSで隠す方法ならHTML上はタイトルが残るため、SEO上のリスクはやや緩和できると考えられています。

デザインが崩れる場合がある

テーマやプラグインによっては、タイトルありきのレイアウトになっている場合があります。 タイトルを非表示にしたことで余白や上下の要素の位置がずれて、想定外のデザイン崩れが起きる可能性もあるでしょう。 カスタマイズの際には実際の表示をしっかり確認し、必要に応じてCSSで余白などを微調整してください。

更新やメンテナンス時の確認が必要

テンプレートを編集した場合、テーマのアップデートによる影響でタイトル表示が戻ってしまうケースがあるかもしれません。 子テーマの利用やメンテナンス時のチェックリスト化など、運用面での対策を忘れずに行うと安心です。

コード例:条件に応じてタイトルを隠す

最後に、条件分岐を使った少し発展的なコード例を紹介します。 投稿IDが10番の投稿と、スラッグが「landing-page」という固定ページではタイトルを出さないようにする場合、下記のように書けます。

<?php
if ( is_single(10) || is_page('landing-page') ) {
  // タイトル非表示
} else {
  the_title('<h1 class="entry-title">', '</h1>');
}
?>

これにより、指定した投稿や固定ページだけタイトルが非表示になります。 見やすいレイアウトを実現しやすくなるため、特殊なキャンペーンやイベントページなどに応用しやすいですね。

まとめ

WordPressのタイトルを非表示にする方法は、大きく分けて3つあると考えるとわかりやすいでしょう。 CSSで上書きしてしまうやり方、テーマファイルを編集して出力自体をなくすやり方、そしてプラグインに頼るやり方です。

それぞれにメリットとデメリットがあるので、サイト全体のデザイン方針や、特定ページだけのカスタマイズ方針を踏まえて決めるのがポイントですね。 実務で導入するときは、SEOやデザイン崩れといったリスクにも気を配りながら、最適な方法を選んでみてください。

WordPressをマスターしよう

この記事で学んだWordPressの知識をさらに伸ばしませんか?
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。