投稿日:2023年3月17日

修正日:2023年3月27日

2023年3月26日(日)に行われたChiba WordPress Meetup のネタとして扱いました。

本記事はWordPress テーマのLightningを使い3つの方法でカスタマイズする内容になっています。
▼今回のゴールになります。赤いボタンを設置します。

3つの方法とは、
1. 子テーマを使う。
2. アクションフックを使う。
3. プラグインを使う(作成する)。

 子テーマを使う

子テーマを使う場合、テンプレートファイルをカスタマイズする必要があります。
どのテンプレートファイルが使われているか調べるため下図のプラグイン Show Current Template を使用する場合もあります。

▲重宝するプラグインですが、最新のWordPressのバージョンで動作確認が行われてません。
自己責任で使用しましょう

▲有効化しログインすると関連しているものも含め、使用しているテンプレートが表示されます。
今回はindex.phpをカスタマイズします。

複雑なカスタマイズを行う場合、Show Current Templateでも見つけられない場合もあります。
そのときのチップスを記載しておきます。

▲検証ツールで出力したい対象のタグを調べます。
上では site-body-container という要素を選択しています。
この要素の上にボタンを出力します。

▲Macで site-body-container を検索します。
site-body-container と記載されているファイルも検索してくれます。
Lightningの中の index.php がヒットします。

▲親テーマのディレクトリ構成を保ちつつ子テーマに複製します。
▼子テーマのindex.phpに記載しました。7行目。CSSは子テーマで作成済みです。

<!-- 省略 -->
<div class="<?php lightning_the_class_name( 'site-body' ); ?>">
	<?php do_action( 'lightning_site_body_prepend', 'lightning_site_body_prepend' ); ?>
	<div class="<?php lightning_the_class_name( 'site-body-container' ); ?> container">

<!-- ▼▼▼ カスタマイズ -->
	<p class="createBtn">ボタン</p>

		<div class="<?php lightning_the_class_name( 'main-section' ); ?>" id="main" role="main">
			<?php do_action( 'lightning_main_section_prepend', 'lightning_main_section_prepend' ); ?>
<!-- 省略 -->

▲出力されました。
ですが、ここまで説明してきてなんですが、Lightningを作成しているVectorさまは、index.phpなどのテンプレートを複製して子テーマで使用する方法を非推奨としています。

Vectorのサイトへ 

Lightningは高頻度でアップデートが行われるので、index.phpも常に変化します。
Lightning独自のアクションフックも準備されている
とのことなので、そちらを使うようにしましょう。

 アクションフックを使う

アクションフックとは、サイトが表示される過程で、任意の処理を実行させることができるWordPressの要の機能になります。
子テーマの functions.php に以下を記述しました。

<?php
function theme_enqueue_styles()
{
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/../style.css');//親テーマのスタイル

    wp_enqueue_style('design-style', get_stylesheet_directory_uri() . '/css/style.css', ['parent-style']);//子テーマのデザインCSS。親テーマとの依存関係。

    function add_createbtn(){
        if (is_home() || is_front_page()) { //トップページだったら
            echo '<p class="createBtn">ボタン</p>';
        }
    }
    add_action('lightning_site_body_prepend', 'add_createbtn');
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

▲8〜13行目がボタン出力をする記述になります。
add_actionでadd_createbtn関数を実行しています。
lightning_site_body_prependLightning のアクションというもので、add_createbtn をこのアクションに引っ掛ける(フック)仕組みです。

lightning_site_body_prepend については、Facebookの知人より教えていただきました。
ありがとうございます。

▲出力されました。

 プラグインを使う(作成する)

プラグインを使う方法もカスタマイズにはかかせません。

output-buttonという名前のプラグインを作成します。
output-buttonというフォルダを作り、その中にoutput-button.phpを格納しておきます。

<?php
/*
Plugin Name: Output Buttom
Description: ボタン出力用のプラグイン
Version: 1.0
*/
if ( ! defined( 'ABSPATH' ) ) exit; //直接アクセス回避

function add_createbtn(){
    if (is_home() || is_front_page()) { //トップページだったら
        echo '<p class="createBtn">ボタン</p>';
    }
}
add_action('lightning_site_body_prepend', 'add_createbtn');

output-button.phpです。
2〜6行目がプラグインとして必要な記述になります。
子テーマのstyle.cssに記述するのと同じような意味になります。
プラグイン名概要バージョンの情報になります。
7行目は、直接このoutput-button.phpにアクセスしてきた場合、それ以下のソースコードが動作しないようにする記述でプラグインには必須になります。

実行する関数はアクションフックと同じ書き方で動作します。

▲FTPなどを使ってpluginsフォルダにアップロードします。

▲管理画面のプラグインに表示されるので有効化します。

▲出力されました。

まとめ

以前にもWordPressカスタマイズの話はお伝えしましたが、どれもテンプレートファイルを子テーマに格納し、追加機能を記述したりしてました。
進化し続けるWordPressにとってはこの方法はあまり宜しくないと思います。
今回はLightningを使用しましたが、別のテーマでも同じ方法でカスタマイズができます。
※アクションフックはテーマにより用意されているものが異なります。
ただし、フルサイトエディティング対応になったTwenty Twenty-Two以降のテーマだと、テンプレートファイルを保持しなくなったので、カスタマイズの方法も再考しないといけません。

さらに精進したいと思います。
アクションフックについて助言をいただいたFacabookの知人には心より感謝します。
最後まで読んでいただきありがとうございました。

関連記事
Pocket