My Lightningはいかが?

この記事は「Vektor WordPress Solution Advent Calendar 2020」の12月5日の記事になります。
子テーマではなく、プラグインでカスタマイズする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テーマのカスタマイズの仕方

でも、フックとなると、一気に難易度が上がるね

俺もフックって、よーわからんけど、
htmlを追加したいだけならアクションフックで対応できるよ

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初心者開発者向け フィルターフックとアクションフック入門

My Lightningの使い方

たとえば

「Vektor WordPress Solution Advent Calendar 2020」の 12月2日の記事

こちらは子テーマで対応されていますが、My Lightningでやろうとしますと、

  • 「子テーマのfunctions.phpに下記を追加」は、my-lightning.phpに追加
  • 「子テーマのstyle.css、または外観 > カスタマイズ > 追加CSSなどに下記を追加」は、my-lightning/style.cssに追加

で、子テーマ無しでカスタマイズできます。

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

でも、フックを使えないとダメなんでしょ。

もっかい言うが、
htmlを追加したいだけなら、アクションフックで対応できるのよ。

数行ならアクションフックで、echoで呼び出すのはできた。
でも10行ぐらいあるときはどうするの?
echoでちまちま呼び出すわけ?

echo '<meta content="日本語デモ" />'."\n";

「.」はどういう意味?
「”\n”」の意味は?

html追加したいだけだから、php覚えようとは思っていない。
子テーマでファイルコピペして、html追加したほうが楽。

俺も、同じレベル。php系はたいていコピペでなんとか。
でも、この前のWP ZoomUPでわかりやすいのを教えてもらったから
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');

とか。例に上げてある。

これだと追加するhtmlが、VSCodeとかのエディタで色が1色になり見にくい。
10行とかになるとよくわからん。使いにくい。
だから、今まで子テーマにしてた。
で、
教えてもらったのがこれ。

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

普段書いてるようなhtmlを挿入しただけだね。
classとかエディタでの色も変わってる。

そうなのよ。これが知れたので、使うようになった。

2行目の ?> と10行目の <?php で挟んだだけ。

functions.phpって、最初に <?php から始まってるでしょ。
それを ?> で一旦閉じて、再度 <?php を開いているかららしい。
よう知らんけど。

これなら使えそう!!

あと、ヒアドキュメント。ってのもあるらしい。
たとえば
?><?php で挟むところを
$str = <<<EOD と EOD で挟む。
これだとVSCodeでは色が1色になってしまう。

でも
$str = <<<HTML と HTML で挟むと色が変わってくれた。
なんでかは、よう知らんけど。

詳しくは動画があるんだけど、限定動画だからurl貼れないかな。
WP ZoomUPのメンバーでslackに入ってたら
https://wpzoomup.slack.com/archives/CKWHEDRC6/p1605587029106200

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

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

まとめ

アクションフックで、行数があるhtmlの追加の仕方が理解できたので、
よく利用しているLightningでも、他の人気テーマみたいにプラグインでカスタマイズできないかとMy Lightningについて書きました。

別にLightningでなくても、利用できるものです。今までやっていたものを単に切り分けているだけですから。

ベーステーマの作者さんは日々テーマを進化してくれています。
私のような仕事をしている者にとってお抱えの開発者のような方々です。楽できます。ありがたいです。

カスタマイズする側も、できるだけテーマの影響を受けないカスタマイズ方法を身に着けていくべきですね。

今回の話はカスタマイズの一つの方法。あくまでも私のやり方ですが、ぜひ、参考にしてください。

自己責任での利用ですが、追加や削除などアレンジして、試してみてください。

明日12/6は、石川さん。「ExUnitのロゴマークについて」について書いてくれるそうです。
Vektor WordPress Solution Advent Calendar 2020

投稿者プロフィール

ふじた たいぞう
フリーランスのWEB屋

【WordPressコミュニティ活動】
・2016 WordCamp Kansai - サイト制作ハンズオン世話役
・Kansai WordPress Meetup 神戸 - 元共同オーガナイザー
・2021 WordCamp Japan - 実行委員

【制作実績】 認定こども園