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

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;
}