My Lightningはいかが？

WordPressのカスタマイズ、子テーマ？プラグイン？カスタマイザー？

昨今、
WordPressのカスタマイズ、子テーマ？プラグイン？カスタマイザー？ WP ZoomUP #54

のように、WordPressのカスタマイズを子テーマでするかプラグインにするかと話題になっています。

私は今まで、子テーマでstyle.cssやphpファイルをカスタマイズしていました。

ただし、functions.phpに関しては、コードをミスして画面が真っ白になると対応にも困るので
my-pluginを作って対応していました。
通常、functions.php に追加していく機能などをmy-pluginに書いているだけ。
テーマが変わっても、自分のいつも入れる機能をためているので、作業が楽になります。
my-pluginだと、問題が起きてもmy-pluginフォルダ を消したらいいだけなので原因を切り分けられます。

ねんでぶさんに教えてもらいました。ホント便利。

フィルターフックとアクションフック

私はもともと、子テーマのstyle.cssとmy pluginでカスタマイズしてたので、
あと必要なカスタマイズとしては、特定ページに任意のコードを追加したいことなど。
front-page.phpやfooter.phpを子テーマにコピペしてコードを追加なので、
フックの使い方がわかれば、子テーマを作らなくてもいいんです。

ベーステーマの影響を受けないよう、
テーマ作者さんはフィルターフックとアクションフックの使用を薦められています。

Snow Monkey のカスタマイズは子テーマよりプラグインがオススメ！プラグインの雛形をダウンロードできるようにしました

WordPress初心者開発者向け フィルターフックとアクションフック入門

フックを使ったWordPressテーマのカスタマイズの仕方

My Lightningの作成

では、My Lightningというプラグインを作りましょう。

WordPress (自分専用)マイ・プラグインを作ろう
を参考にプラグインを作成してください。

フォルダ名は”my-lightning”、中のファイルは”my-lightning.php”

<?php
/*
Plugin Name: my-lightning
Plugin URI:
Description: My Lightning For WordPress.
Version: 1.0.0
Author: 
Author URI: 
License: GPLv2 or later
*/
// ここからコードをいれてください。
// ここまで

必要でしたら、”// ここまで”の後に、

マイ・プラグインの更新を非表示にする

マイ・プラグインを最後に読み込むようにする

も追加されたらと思います。

”最後に読み込むようにする。”は、読み込み順のせいで動かないことがなくなるので、個人的にはおすすめです。

style.cssの追加

カスタマイザーの追加 CSSではなく、子テーマのようにstyle.cssを利用したいときは
my-lightning/style.css となるようにファイルを作成した後に、下記のコードを追加してみてください。

function my_lightning_css() {
	$plugin_url = plugin_dir_url( __FILE__ );
	wp_enqueue_style( 'my_lightning_css', $plugin_url .'style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_lightning_css', 999 );

自己責任での利用になりますが、上記までを入れたものはこちらになります。
追加や削除などアレンジして、試してみてください。

このMy Lightningを有効化すれば、子テーマを作らなくても、だいたいのことは出来ます。

”htmlはわかるので、ここにこのhtmlを数行書き足したい。あとはCSSでなんとでも出来る！”　
それだけで子テーマにphpファイルを増やしていた方（私ですが）は、楽になるのでは？

Lightningには、たくさんのアクションフックがあります。
テーマファイル内に do_action() がいろいろ置かれています。

探し方はこの中に書いてあります。

WordPress初心者開発者向け フィルターフックとアクションフック入門

htmlを追加したいだけなら、アクションフックで対応できる

書き方は色々あるそう。

add_action('lightning_header_after', 'my_lightning_header_after');
function my_lightning_header_after(){
    echo '<div class="text-center">キャンペーンリンク</div>';
}

とか

function my_lightning_mobile_btn(){
    $html = '<div class="mobile-btn-phone">
    <a href="tel:000-000-0000"><i class="fas fa-phone-square-alt"></i></a>
    </div>';
    echo $html;
}
add_action('wp_footer','my_lightning_mobile_btn');

とか。例に上げてある。

add_action( 'arkhe_after_header', function() {
	?>
	<div class="c-infoBar">
		<div class="c-infoBar__text">
			<div class="mobile-btn-phone">
				<a href="tel:000-000-0000"><i class="fas fa-phone-square-alt"></i> お知らせだよー！</a>
			</div>
		</div>
	</div>
	<?php
});

さっきのは懇親会での限定動画ですが、メインの動画は公開中。

SWELL のテーマ製作者の了さんです。