Lightning G3 の投稿でページヘッダーを非表示にするやり方

Lightning G3 (無料版) の個別投稿ページのページヘッダーまわりは以下のようなレイアウトになっていて、「ブログ」とだけ表示されているページヘッダーの部分がなんとなく無駄なスペースのように思えてきます。

この記事ではページヘッダーを非表示にして、このように ↓ 見せるやり方を紹介します。

非表示にするためのやり方は、CSS を使う方法とフィルターフックを使う方法があります。

その① CSS を使う方法

以下の CSS を追加します。

body.single .page-header {
    display: none;
}

CSS は手軽なやり方ですが、HTML が出力されてしまうのがお好みでない方は次に示すフィルターフックを使うのがよいです。

その② フィルターフックを使う方法

子テーマの functions.php に以下のコードを追加します。

// 投稿にページヘッダーを表示しない
add_filter( 'lightning_is_page_header', function(){
  if ( 'post' === get_post_type() ){
      return false;
  } else {
      return true;
  }
} );

参考 個別投稿以外のページヘッダーを非表示にするには

ブログページ（投稿トップ）のページヘッダーを非表示にする CSS はこれ ↓

body.blog .page-header {
    display: none;
}

アーカイブページ（カテゴリーページ）のページヘッダーを非表示にする CSS はこれ ↓
これは使いたくなることがときどきありますよね。このサイトでも使ってます (^^♪

body.category .page-header {
    display: none;
}

おすすめ Lightning G3 Pro Unit を使う

有料版プラグインの Lightning G3 Pro Unit の Lightning ページヘッダー設定 で「投稿タイトルとメタ情報」を選ぶと(上図参照)、このように ↓ ページヘッダーに投稿タイトルを表示することがかんたんにできます。いまご覧いただいている投稿のタイトル「非表示にするやり方」にはマッチしませんが、ページヘッダーを非表示にせずに活かすことができます。

G3 Pro Unit はページヘッダーに背景画像を設定するのがかんたんで、パソコン・モバイルで別々の画像を指定することもできるようになっています。

楽をしていろいろとカスタマイズしたい方に、Lightning G3 Pro Unit はおすすめのプラグインです。

参考 G3 Pro Unit は投稿・固定ページに個別に非表示設定ができます