Lightning の 404ページの見出し・パンくずを書き換える・コンテンツエリア上下の余白を無くす

Lightning の 404ページの見出し・パンくずを書き換える・コンテンツエリア上下の余白を無くす | ベクトレ

先のレッスンでは404ページの中身の変更について紹介しました。今回はページヘッダー部分やパンくずリストの表記を変更します。子テーマのfunctions.phpなどに以下のよう…

Chick

404ページの表記を変更するためのページです。

functions.php

404ページのページヘッダー部分やパンくずリストの表記を変更します。

子テーマのfunctions.phpなどに以下のように記載すると変更する事ができます。

/**
 * 404ページの見出しの表記名
 *
 * @return string カスタマイズされた404ページのタイトル
 */
function my_get_404_title_text() {
	// 404ページのカスタムタイトルを返す
	return 'お探しのページが見つかりませんでした';
}

/**
 * 404ページでパンくずリストの表記を変更
 */
add_filter(
	'vk_breadcrumb_array',
	function( $breadcrumb_array ) {
		// もし現在のページが404エラーページならば
		if ( is_404() ) {
			// パンくずリストの2番目の要素の名前をカスタマイズする
			$breadcrumb_array[1]['name'] = my_get_404_title_text();
		}
		// パンくずリストの配列を返す
		return $breadcrumb_array;
	}
);

/**
 * 404ページでページヘッダーの表記を変更・サブテキスト追加
 */
add_filter(
	'lightning_page_header_title_html',
	function( $page_header_html ) {
		// もし現在のページが404エラーページならば
		if ( is_404() ) {
			// ページヘッダーのタイトルをカスタマイズする
			$page_header_html = '<h1>' . my_get_404_title_text() . '</h1>';
			// サブテキストを追加する
			$page_header_html .= '<div class="header-sub-test">404 Not Found</div>';
		}
		// ページヘッダーのHTMLを返す
		return $page_header_html;
	}
);

/**
 * 404ページでHTMLのheadのtitleの表記を変更
 */
add_filter(
	'pre_get_document_title',
	function( $title ) {
		// もし現在のページが404エラーページならば
		if ( is_404() ) {
			// headタグ内のタイトルをカスタマイズする
			$title = my_get_404_title_text();
		}
		// タイトルを返す
		return $title;
	},
	12
);

追加CSS

外観 > カスタマイズ > 追加CSSなどに下記貼り付けると余白がなくなります。

/* 404エラーページのスタイルを変更する */
.error404 .site-body {
    /* ページ上部の余白を0に設定 */
    padding-top: 0;
    /* ページ下部の余白を0に設定 */
    padding-bottom: 0;
}
Lightning の 404ページの内容を書き換える

Contents1 _g3/template-parts/main-404.php 2 functions.php2.1 フックで改変する場合 _g3/template-parts/main-404.php&n […]