前回、WordPressで自作プラグインを作る方法をご紹介しました
【意外に簡単】WordPressで自作プラグインを導入してみる【PHP】
5スクロールで読み終わってしまうほど簡単にプラグインが作成できることがわかりましたが、今回はその続き的な感じで、「自作ブロック」を作っていきたいと思います。前回と同様、最低限の機能だけを持たせて、後のカスタマイズはみなさんにお任せ～って感じで紹介します。
自作ブロックを作ると何ができる？
そもそも自作ブロックを作ると何か良いことがあるのでしょうか？ ブロックというのは、投稿の編集ページで使う機能の一つです。コードエディターを使っている方には無縁ですが、ほとんどの方はブロックエディターをお使いになっているでしょう。
ブロックエディターではあらゆる機能を持ったたくさんのブロックを組み合わせて記事を作成していくわけですが、この「ブロック」自体を自作することができるのです。
そして完全に自分のサイトのためのブロックを作ってしまえば、自分のサイトでよく使うパーツをクリックだけで挿入することができるようになり、大変作業効率が良くなります。
さらに、ブロック自体に入力フィールドを設置することで、入力値によって出力内容を変えるといった処理を行うことができるようになります。 また、ブロック自体はJavaScriptによって定義することができるので、コーディング次第では動的な設定フォームを持つ超便利なブロックも作ることができるのです。 しかも自分で作ればそれを独り占めすることができるわけですから、ライバルサイト（ブロガー）に差をつけることができそうです。
自作ブロックを実装してみる
なんだかんだでPHPとかJavaScriptは結構いじってきている私ですが、WordPressには独自のやり方というものがありまして、ブロックの作り方はあまり見当がつきませんでした。そして調べていてもそこまでたくさんドキュメントが存在していなくて、結構苦戦しました。 まぁ実装してしまえば「なんだ大したことなかったな」って感じはしますね（まだそこまで複雑なブロックは作っていませんが）
そして今後もいくつかブロックを作っていきそうなので、その備忘録的な感じでここに記したいと思います。 個人的に、ブロックを作るのは自作プラグインとはまた違った難しさがあると思います。たぶんReactとかのJavaScriptのフレームワークに慣れている人だったら逆に簡単に感じるかもしれませんね。
それではやっていきましょう。
プラグインを作成する
ブロックも、ショートコードのようにWordPressの関数が使える環境（テーマのfunction.php等）であれば簡単に定義することができます。しかし、個人的にfunction.phpにいろいろ機能とかを追記したくないので、別にプラグインを作ってそこでブロックの定義をすることをお勧めします。
サイト読み込みの速度に関しては… 別にfunction.phpで定義してもプラグイン上で定義しても変わらないと思います。ブロックの定義についても、サイトの読み込み時に毎回にロードディングされるものなので、あまりごちゃごちゃとコードを書きすぎないように気を付けましょう。
さて、プラグインの作成方法については以下の記事を参考にしてください。
【意外に簡単】WordPressで自作プラグインを導入してみる【PHP】
BableTechとしては、WordPressのプラグインは最小限にとどめることを推奨しています。というのも、基本的に配布されているプラグインというのはあるサイトのために作られているというよりすべてのWordPressサイトで使えるようにいろいろ工夫されていたりして、その分自分のサイトには必要のないコードがたくさん含まれているわけですね。 そうなるとサイトのパフォーマンスが下がってしまうことにつながります。
ただ、自作のプラグインについては、本当に自分のサイトに必要な機能だけを組み込むことができるので、サイトのパフォーマンスを必要以上に下げることなく、高機能にすることができます。
※配布されているプラグインのPHPコードを改変するのはやめておきましょう。プラグインを更新したときにどうせまたリセットされてしまいますし、だからって更新しないとセキュリティ的に危ないので…
ブロックを定義する
さて、プラグインを作ったところで、プラグインの定義ファイル（上のページでいうmy-plugin.php）でブロックの定義をしていきましょう。 一応、この定義はfunciton.phpでも問題ないです。
//広告を挿入するブロック
function add_block_ads() {
//ブロック用のスクリプトを登録し、出力用のキューに入れる
wp_enqueue_script(
'bable-admin-ads_block-script', //スクリプトを識別するためのハンドル名
plugins_url( 'js/ads_block.js', __FILE__ ), //スクリプトの URL
//依存スクリプト
array( 'wp-blocks', 'wp-element')
);
}
add_action( 'enqueue_block_editor_assets', 'add_block_ads' );このようなコードを書きます。今回は例として、自分のGoogle広告をワンクリックで簡単に記事に挿入することができるようなブロックを作ってみます。
一番下の「add_action」という部分で、ブロックエディターが読み込まれるタイミングで「add_block_ads」という関数を実行してくれるようになっています。
そしてこの関数の中では、wp_enqueue_scriptという関数でブロック定義スクリプト（JS）を読み込ませています。 第一引数では、読み込むスクリプトの名前を定義しています。「ハンドル名」というもので、WordPress上のあらゆるスクリプト等はこの「ハンドル名」というもので管理されています。そしてハンドル名はいわばIDのようなもので、一意でないといけません。
第二引数でスクリプトのURLを定義しています。plugins_urlという関数を使うことでこのプラグインのディレクトリを基準とした絶対パスを出力することができるみたいです。 プラグインフォルダの中に適当に「js」というフォルダを作って、そこに任意の名前のjsファイルを作成し、それを指定してみましょう。
そして第三スクリプトでは依存するスクリプトを指定します。ブロック作成においては専用のスクリプトを同時に読み込まないといけないので、これらを指定しましょう。
ブロックスクリプトを作成する
後はブロックのスクリプトを作成していくだけです。
( function( blocks, element ) {
var el = element.createElement;
blocks.registerBlockType(
'my-blocks/insert-google-ads',
//ここからブロックの情報を登録していく
{
title: 'Google広告',
icon:'google',
description:'Google広告（投稿用）を挿入します',
category: 'common',
example:{},
edit: () => el(
'h2',
{
style:
{
backgroundColor:'#ff83003b',
color:'black',
lineHeight:'200px',
textAlign:'center',
fontSize:'20px',
margin:'100px 0 100px 0',
position:'relative'
}
},
'ここにGoogle広告が表示されます',el('img',{style:{width:'100px',position:'absolute',top:'5px',left:'5px',opacity:'.6'},src:"https://bablishe.com/babletech_logo_170width.png"})),
save: () => el(
'div',
{
style:{margin:'100px 0 100px 0'}
},
'') //広告のショートコードを表示していくスタイル
}
);
}(
window.wp.blocks,
window.wp.element
) );バニラのJavaScriptとかjQueryを普段使っている人にとっては訳の分からない記法ですが、どちらかというとReact.jsあたりの記法に近いです。 上で定義しているelという変数ですが、これは属性値やスタイルを指定して特定のDOM（HTMLコード）を作るための関数ですね。ReactにもcreateElementというものがあり、それに非常に似ています。
そしてblocksオブジェクトのregisterBlockTypeメソッドでブロックの情報を登録していきます。第一引数では名前空間/ブロック名を定義（名前空間は適当にmy-blocksとかで） そして第二引数でブロックのプロパティを指定します。
- タイトル（エディタ上で表示される）
- アイコン（WP公式サイト等から選べる）
- 説明
- カテゴリ（適当にcommonとかで）
- サンプル（とりあえず空オブジェクトで大丈夫です）
- エディタ画面での出力
- 閲覧画面での出力
を定義します。ポイントは6と7ですね。6では編集画面での見え方を定義し、7では実際に投稿したときの、閲覧者からの見え方を定義します。たとえば広告を挿入するブロックだとしたら、閲覧者側からはともかく、編集画面でも広告コードが出力してしまったら好ましくありません（誤クリックしてしまったらBANされてしまう可能性もあるし、重くなるしメリットが特にない）
そのため、しっかりとそれぞれに合った出力を定義しましょう。
edit: () => el(
'h2',
{
style:
{
backgroundColor:'#ff83003b',
color:'black',
lineHeight:'200px',
textAlign:'center',
fontSize:'20px',
margin:'100px 0 100px 0',
position:'relative'
}
},
'ここにGoogle広告が表示されます',el('img',{style:{width:'100px',position:'absolute',top:'5px',left:'5px',opacity:'.6'},src:"https://bablishe.com/babletech_logo_170width.png"})),編集画面の出力のコードです。el関数でDOMを作ることができますが、el関数を使わずに直接HTMLコードを返り値に設定するという荒業は使えません。ReactではHTMLコードから直接仮想DOMに変換できる関数があるみたいなのですが、WordPressのブロックスクリプトにおいてはどうもel関数を使わないとうまく出力できないようです。
そして、エディタ画面ではシンプルに、「ここにGoogle広告が表示されます」というフィールドだけ表示させるようにしました。 第一引数ではタグの名前、そして第二要素で属性（Attribute）を指定します。ここではstyleだけを指定していますね。ここでのstyleの定義の仕方はjQueryやReact等と似ていて、辞書形式でCSSと同じように定義していきます。注意点として、スタイルの属性名にハイフンが使えないので、その分text-align→textAlignとする必要があります。（クォーテーションで括ればハイフンも使えます）
そしてel関数の第三引数で、子要素を指定します。一つ目の子要素はh2タグのテキストで、二つ目の子要素として画像（BableTechのロゴですが）を指定しています。ここでもel関数を使っていますね。このように、el関数を再帰的に使うことで階層構造も再現することができるわけですね。 慣れないなぁ
そして以下のようにしっかりと出力されました
このブロックの上下に余白（margin）を指定したので、編集画面がごちゃごちゃせず、見やすいですね。デザインもシンプルな方が絶対良いです。ショートコードだと存在感がなさ過ぎてぱっと見どこに挿入したのかよくわからないから、やはりブロック機能を活用するのは良いですね。
続いて閲覧者向けの出力です
save: () => el(
'div',
{
style:{margin:'100px 0 100px 0'}
},
'') //広告のショートコードを表示していくスタイル閲覧者向けの出力コードの方が圧倒的に簡素なのおもろいですね。ちなみに説明忘れていましたが、saveの後の記述はアロー関数と呼ばれるものですね。function(){ return el(…)}と同義です。
ここでは上下に余白を持たせたdiv要素を作り、その中に【postads】というショートコードを書いています。ここに記載したショートコードもちゃんと記事表示時に展開されますので、事前にショートコードを作っておいてここでショートコードを活用する方が割とすっきりしててお勧めです。
【1分で実装】WordPressで自作のショートコードを作る方法【PHP】
そして保存したら編集画面からちゃんと使えるようになっていて、記事画面でもちゃんと広告が出力されているのが確認できます。
このように、ブロックの追加画面にしっかり表示されているのがわかります。ここをクリックするだけで一瞬で広告挿入ですね。非常に便利。
さて、最低限の機能を持っているブロックが作れたところで今回は終わりにしましょう。次回、ブロックに入力フィールドを持たせてより機能性の高いものを実装する方法をご紹介します！