WordPress ライトニングの縦棒を消す方法 (part 1/2)

このサイトはライトニング(Lightning)というテーマを使用しています。まだ他のテーマを使用したことはありませんが使いやすいと思います。ただ１点だけ、トップページが表示されている時のページタイトルも「<サイト名> | <キャッチフレーズ名>」という感じで縦棒「｜」が含まれています。他のブログサイトを見てみると、トップページのタイトルはサイト名になっていることが多い様なので何とかしてみます。

まずテーマを修正するにはその構造や作り方を知る必要があると思われますので、情報収集から始めます。今回の修正を行うにあたりローカルコピーの記事でもご紹介した、Udemyさんの以下の講座で勉強させて頂きました。教材が少し古め(2020年)ですが、Wordpressのテーマがどの様に作成されているかが良く分かります。今回の記事の中で使用しているプラグインもこの講座で教えていただきました。

「テーマ開発」とありますが、以下でご説明するテンプレートと呼ばれる各ページのひな型の作成方法だけではなく、作成したサイトの公開・引っ越し方法やリセット方法、開発に関連する高度な技術(次々回でご説明するアクションフックやフィルターフック)、プラグインの作成方法からブロックエディタのカスタマイズ方法まで、Wordpressでの開発に関する幅広い範囲の知識が学習できます。

Udemy

ちゃんと学ぶ、WordPress テーマ開発講座

テンプレート階層

最初から受け売りですが、Wordpressのテーマの各ページは「テンプレート階層」という構造によって表現されている様です。

簡単にご説明すると、「投稿」や「固定」などのページは個別にひな型(テンプレート)を定義することができます。またテンプレートは１種類だけではなく、優先順位のある複数のテンプレートを定義することが可能になっています。ページの表示には一番優先順位の高いテンプレートが使用されます。

上の図は、一番左側が表示するページのタイプになっています。表示されるページの種類によってはさらに細分化されたタイプがあり、それ以外の拡張子がphpになっている項目がテンプレートになっています。右に行くほど優先順位が低くなっています。

各テンプレートは必須ではありませんが、一番右にある「index.php」だけは必要です。

使用されているテンプレートを調べます

さて実際にどのテンプレートが使用されているか調べるために、「Query Monitor」というプラグインをインストールします。(いきなり公開用サイトで実験するのはためらわれるので、前回ご紹介したWSL2上のWordpressで検証しています。)

トップページを表示して、上部のツールバーに「0.09秒 9.6MB…」などと表示されている場所にマウスカーソルを移動すると現在使用されているテンプレートが表示されます。

トップページのテンプレートは「_g2」フォルダ内の「front-page.php」と分かりましたのでエディタで確認します。_g2フォルダは以下の場所にあります。

wp-content
└─themes
    └─lightning
        └─_g2

さらに「header.php」というテンプレートを読み込んでいる様なのでまたエディタで確認します。

<?php lightning_get_template_part( 'header' ); ?>

11行目の「wp_head()」という部分でタイトルを作成している様です。wp_headは一見PHPの関数の様ですが、「テンプレートタグ」と呼ばれるWordpressで用意されている関数になっています。

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php
global $lightning_theme_options;
$lightning_theme_options = get_option( 'lightning_theme_options' );
?>
<?php wp_head(); ?>

</head>

wp_head関数は「wp-includes/general-template.php」ファイル内の3059行目辺りにありますが、以下の様になっているためこれ以上ソースを追うのは難しそうです。

function wp_head() {
	/**
	 * Prints scripts or data in the head tag on the front end.
	 *
	 * @since 1.5.0
	 */
	do_action( 'wp_head' );
}

header.phpファイル内に「<head>」タグがあるので、11行目のwp_head関数の前に以下のPHP文を追加してtitleを作成します。「is_front_page」テンプレートタグ関数を使用して、トップページ作成時のみtitleタグを生成する様になっています。

<?php if (is_front_page()){ echo "<title>".get_bloginfo('name')."</title>"; } ?>

全体的には以下の様な感じになります。

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php
global $lightning_theme_options;
$lightning_theme_options = get_option( 'lightning_theme_options' );
?>
<?php if (is_front_page()){ echo "<title>".get_bloginfo('name')."</title>"; } ?>
<?php wp_head(); ?>

</head>

実際に表示して確認してみます。