いきなりですが、私はカスタムブロックなるものを作成したことがありません。従って高度なブロックを作りたいという方にとっては全く役に立たないページであることを予めお断りしておきます。
さて、WordPressのブロックエディタ、使い慣れると、本番ページとは多少違う部分はあるものの、見たまんまでいろいろできて本当に便利だと思います。
そこで、こんな表示ができて、見たまんまで修正なんかできたらいいなぁと思うブロックを作ってみよう！なんて欲が湧いてきますよね？
ただ．．．長年WordPressと対峙してきた人間でも、ブロックを作るって作業は本当に未知の世界。
私もいろいろ調べて挑戦しては頓挫を何度繰り返したことか．．（笑）。このページ（このシリーズ）は、そんな私でもなんとか基本的なブロックが作れたっていう、苦労話半分、解説半分になりますので、本当に高度なことは無理ですから、それ様のページをお探しの方は、ググるなりして探してください。
逆に、多分高度な？ページではさらっと書かれている、慣れた後からすればどうでもいいようなことも書いていきますので、私と同じブロック作り初心者の方にとっては、有用な内容だと思います（笑）。
それでは続けていきましょう。
ここからしばらく愚痴というか、ブロック制作の必要性など個人的に感じていることを書いていますので、「ブロックを作るんだ！」と決めている方は読み飛ばしてくださいね。
わざわざ自作する必要もないのかも．．でも．．
あくまでも現段階で感じた私の印象をお話すると、わざわざブロック作る必要ある？って感じです。
冗談抜きに、ブロック作りは、公開サイト上や、WordPressが動作する機能を持つ普通のレンタルサーバー上ではできないんです。
まずは、パソコン上にサーバー環境を作って、WordPressをインストールして動くようにしてという作業が必要になります。
レンタルサーバーでWordPressをインストールして触るのとはわけが違います（レンタルサーバーのありがたみが身に染みて分かることでしょう）。
そしてそれを乗り越えたら、見たことのないコマンド（命令）と、Java Scriptやjsonファイルといった、これも普段のWordPress上での作業ではあまり触らないものを覚える必要があります。
．．で、分からないなりにできたブロックは．．．とっても残念な結果になること間違いなしです（笑）。
ただ、そこまでいって初めてスタートラインに立てるという程度ですので、現行のブロックエディタの機能か、ショートコードで何とかなるなら、別に無理にブロックを作る必要はないかも知れません。
そして、コードの作り方が独特なので、多分WordPressのブロックが作れるようになったからと言って何かの達人になれるという感じでもなさそうですから、そういう目的で作るのもどうかなぁなんて思います。
という位後ろ向きなことを書かせていただいた上で、それでも作ってみたいという方は、どうぞ先を読み進めてくださいね。
この余談の最後に1つ、作れないなら豊富なブロックがあるテーマや、ブロックがいっぱい追加できるプラグインに頼ればいいのでは？とお考えの方もいらっしゃると思いますが、WordPress5.0でブロックエディタが採用されて以降、結構な仕様変更がされていて、既にカスタムブロックを追加できるとされるプラグインのいくつかが配布停止していることも申し添えておきます。
もう既にこの段階でやめとこうと思う方が大半だと思いますが（笑）、一応私の備忘録も兼ねていますので、ようやく本題に進んでいきましょう！
ブロックの開発環境って本当に必要なの？
WordPressのカスタムブロックを作成するには、よほどサーバー周りに精通している人でない限り、パソコン上にサーバー機能を追加して、そこでWordPressサイトを稼働させる必要があります。
ここで素朴な疑問として、「何で環境を構築しなきゃいけないの？」「PHPの編集と同じようにどこかのページからコピペでサクッとできないの？」という疑問が湧く方が多いかも知れません（私もそのうちの一人です．．）。
確かにそんなコードを公開しているサイトもあるのですが、私が調べた限りでは、それらはWordPress（バージョン5.0）でブロックエディターが採用されて間もない頃に、結構お試し的に書かれたものが多く、ブロックに関する所作自体がそれ以降で変更されているので、そのままのコードで実装できたとしても、実は現在非推奨となっているコード形態だったり、推奨されない関数が用いられていたりして、後々使えなくなる可能性が高いと感じます。
従って、きちんと構築するためにもブロックの開発ができる環境を整えておいた方が将来的に身につくものが違うと思いますので、そういう意味でもローカル（パソコン上）での環境構築は必須でしょう。
おっと、ローカル環境の構築の必要性について書くのを忘れるところでした。
なぜ必要かについては、ここでいくら言及しても仕方ないので、このサイト内のこのページを含む「WPのカスタムブロック作り」のシリーズ？を順に読んでいっていただければ、ローカル環境の必要性については理解いただけるかと思います。
ブロック作りに使えるパソコンのスペックについて
パソコンは高性能であればあるほど動作が速くWordPressのブロック制作においても当然ながら同じことが言えます。
自分のパソコンで大丈夫？と思われる方も多いかも知れませんね。
基本的には次項のローカルサーバーを起動させ、WordPressを稼働させて、それなりに管理画面などが動けば特に問題ないと思います。
ちなみに今このページを書いている私のパソコンは2013年6月製のノートPCで、余談としてノートのキーボードは壊れて外付け、CD/DVDドライブは死んでいるという状況です。
そのパソコンのスペックは以下の通り。
- CPU・・インテル® Pentium®プロセッサー B970
- メモリ・・12GB(このパソコンの最大搭載容量は16GB)
- ハードドライブ・・SSD
今時Pentium！！と言われそうですね（笑）。
以前メモリ半分でハードドライブがHDDだった頃に一度環境構築してあまりの遅さに挫折しましたが、メモリを増強し、SSDに替えたことで結構快適に動くようになり、ブロックのコード編集も特に問題なくできるような感じです。
．．とこんな低スペックのパソコン使っている方は少ないでしょうから、普段の動作が快適だと思えるパソコンであればブロックの構築はできると思いますよ。
ローカルサーバーを作り、WordPressをインストールする
ここまで本当に余談ばかりでしたが、いよいよ、カスタムブロックを作成するために必要なローカルサーバーの構築とWordPressのインストールをします。
ローカルサーバーの構築
使用するのは「Local ( 旧: Local by Flywheel ) 」というサーバーソフトです。
本当はがっつり画像を使って1つ1つの手順を紹介していきたいところですが、私のPCにはもう既にインストールされており、今更？やり直すなんてことはできないので、以下のページなどを参考にするとよいと思います。
もしもリンク先ページが存在しなくても、「Local インストール 方法」などでググれば星の数ほど出てきますから、その中から自分に合ったページを参考にされるといいでしょう。
Localのインストール前の確認事項・注意事項
Localは、パソコン上にWordPressが動作する環境を簡単に構築でき、そこからWordPressのインストールもできて本当に便利なソフトなのですが、インストール時、WordPressの導入時などで、トラブルが起こることがあります。
問題なくインストールするには、以下のことをチェックしましょう。
- 管理者権限を持つユーザーでWindowsにログインしてインストールすること（権限がないとインストール途中で失敗します）
- Localインストール時のユーザー名は半角英数字であること（日本語ユーザー名では、WordPressインストール時に失敗します）
ちなみに、私自身が遭遇したトラブルについては、以下のページで紹介していますので、事前に参照ください。
WordPressのインストール
Localでのサーバ環境構築が終わったら、いよいよWordPressのインストールです。
と言っても、前述した通り、Localの管理ページからWordPressのインストールもできてしまうので、それを利用しましょう。
ここからは、新規インストールできますので画像付きで紹介していきます。
まずはLocalを起動します。
下図のようにLocal管理画面左上の「≡」をクリックし、「Add new site」をクリックします。
下図のように「Create a new site」が選択されていることを確認し、画面右下の「Continue」をクリックします。
下図のように、サイト名（半角英数字が無難）を入力し、右下の「continue」をクリックします。
※画像ではサイト名を「block-create-test」にしています
下図のように「custom」を選択し、いろいろな項目を選択した上で「continue」をクリックします。
各項目を選択した理由は以下の通りです。
- WordPressはPHPのバージョン「8.0」ではまだ不安定な部分もあるので、「7.4.30」を選択しています
- webserverは前述のリンク先ページにある不具合を最小限にするため「apache」を選択しています
- データベースは私が管理している公開サイトでも使用している「MariaDB」を選択しています
これらの設定は後から変更もできますので、Preferred(推奨設定)のままでも大丈夫です
下図の画面になりますので、ユーザー名・パスワード・サイトのメールアドレスを入力し、右下の「Add Site」をクリックします。
以下のような画面になりますのでしばらく待ちます（途中でWindowsの権限確認を求められることもあります）
パソコンの性能によっては時間がすごくかかることがあります（私のパソコンの場合は3分程度かかりました）
最後に以下のような画面になれば、インストールは完了です。
画面右上の「WP Admin」をクリックすれば管理画面が、「Open Site」をクリックすればサイトの閲覧画面が表示されます
ローカル（パソコン上）で動かしたサイトはとってももっさり（私の環境の問題かも．．）してるので、気長に作業することが大事です。レンタルサーバーのありがたみが身に染みて分かりますネ（笑）
サイト作成時の言語が英語になるため、インストール初期の管理画面は英語表示されます。日本語にしたい場合は、サイト「Settings」をクリックして、設定画面で言語を「Japanese」に、時間を「Tokyo」にすれば、日本語のサイトになります。
サイトの立ち上げ方
パソコン上でWordPressを起動するには以下の手順が必要です。
- Localを起動する
- WordPressサイトを選択してスタートさせる
具体的には、Localを起動したら、下図のように、画面左にあるサイトの一覧から目的のサイトをクリック後、右上の「Start site」をクリックして、WordPressが動作するように変更します（起動できるようになると「Start site」が「Stop site」に変わります）。
WordPress起動後は、管理画面・閲覧画面とも、レンタルサーバーで公開しているサイトと操作は同じです。
前述しましたが、パソコンのスペックによっては、非常に各操作に時間がかかるので、気長に作業することが大事です
ここまで終わったら、次ページ「②ブロックを作るためのプラグインを作成する」へ進んでください
