この記事は「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フォルダ を消したらいいだけなので原因を切り分けられます。
ねんでぶさんに教えてもらいました。ホント便利。
my pluginの作り方
フィルターフックとアクションフック
私はもともと、子テーマのstyle.cssとmy pluginでカスタマイズしてたので、
あと必要なカスタマイズとしては、特定ページに任意のコードを追加したいことなど。
front-page.phpやfooter.phpを子テーマにコピペしてコードを追加なので、
フックの使い方がわかれば、子テーマを作らなくてもいいんです。
ベーステーマの影響を受けないよう、
テーマ作者さんはフィルターフックとアクションフックの使用を薦められています。
Snow Monkey のカスタマイズは子テーマよりプラグインがオススメ!プラグインの雛形をダウンロードできるようにしました
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初心者開発者向け フィルターフックとアクションフック入門
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 - 実行委員
・ベクトル年末クイズ大会2021 優勝
【制作実績】 認定こども園
最新の投稿
- youtube2024年8月24日WordPressの制作のフローと予算と期間
- BillVektor2021年12月9日フリーランスの請求書 – BillVektorをカスタマイズして使ってみよう!
- Lightning2020年12月5日My Lightningはいかが?