WPのカスタムブロック作り ②ブロックを作るためのプラグインを作成する

公開日:2023(令和5)年3月20日/最終更新日:

WordPress Create Custom Blocks

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



前ページで、カスタムブロックを制作・編集する上で必要となる、パソコン上へのローカルサーバー構築とWordPressのインストールを行いました。

このページでは、さらに一歩進んで、ローカルサーバーで稼働させたWordPressサイトへ、カスタムブロックを作成するためのプラグインを作ります。

と言っても、従来のように手動でプラグインを作成するのではなく、Node.jsというのをインストールして、npmというツールを使えば、自動でカスタムブロックを作って管理できるプラグインを作ってくれますので、それを利用しましょう。

Node.js、npmって何?

出てきましたね、知らない単語「Node.js」「npm」。イボイボが出てきそうですネ(笑)。

ブロック関係のページを見ているとこの「npm」という単語、すごくいっぱい出てきますよね?そして、ローカルサーバーと共にこれが導入されている前提で!とさらっと書かれています。私と同様、この段階で思考が停止している方も多いのでは(笑)?

npmって何?という方は、以下のページを読んでみてください(多分分からないと思われますし、特にこれ自体を理解する必要もないのかも..)

私が理解している限りでざっくりとかみ砕くと、WordPressのブロックエディターのある各ブロックは、Java Scriptという言語で構成されていて、それをWordPressに取り込んで表現しています。

Java Scriptは基本的にウェブブラウザ上でしか実行できないので、それを実行できるようにするのがNode.js、npmは開発しやすくするためのツールです。

そして、前述したように、これが導入されていることを前提に、多くのページでは、ブロックを作るためのプログラムコードが紹介されているので、これを導入していくつかのコマンドを覚えて使えるようになれば、WordPressのカスタマイズ方法を載せたページで紹介されている「PHP」「CSS」「jQuery」などと同じように、紹介されているコードをコピペすればある程度のブロックは作れるようになる可能性が高くなるということです。

もちろんNode.jsは無料で使えますから、一切費用はかかりません。

...と書いてきましたが、私も本当にどれがどの機能を担っているのか?など詳しく知りませんので、WordPress公式のブロックエディタハンドブックには、Node.jsやnpmについて、またはそれらをインストールする方法について詳しく書かれていますので、ぜひ一読ください。

上記公式では、手動で環境作りをしていく方法が細かく書かれており、多分理解に苦しむと思いますので、冒頭の「Node.js」や「npm」関連の部分だけ「ふーーーん」程度に読んでおけばよいと思います。

Node.jsの入手とインストール

以下のページから、Node.jsを入手します。

開いた画面には2つのバージョンが表示されるので、左側の「Recommended For Most Users」(安定化バージョン)をクリックしてダウンロードしましょう。

ダウンロードが終わったら、ダブルクリックしてインストールします(インストールに関しては、特に難しいところはないでしょう)。

ブロック開発用プラグインの導入

いよいよブロックを制作する環境を整えるための最後のステップです。

ブロックを開発するためのプラグインを導入(正確には自動的に作ってもらう)します。

この作業は主にパソコンに入っているコマンドプロンプト(cmd)というツールを使います。

コマンドプロンプトは、「Windowsマーク」→「Windows システムツール」の中にありますので、開いてみましょう。

今後も頻繁に使用するので、ついでにデスクトップへショートカットを作成する、ピン止めするなどして、以降開きやすくしておきましょう。

ちなみにcmdの画面はこんな感じです(これWindowsの画面なの?位シュールな画面です)

WPのカスタムブロック作り ②ブロックを作るためのプラグインを作成する|Personal WP Customization Notes (PWCN)

上の画像のように、中には

C:\Users\Windowsでログインしているユーザー名>

のみが記述されています。これは平たく言うと、この次に書く命令は上記の場所に作用しますよ!という記述になります。

今回行いたいのはパソコンへインストールしたWordPressにプラグインを追加することなので、指定しなおしてやる必要があります。

まずは、目的の場所を見つけます。以下の手順で探します。

  1. Localを立ち上げる
  2. 開発に使用するWordPressを選択する
  3. WordPressがインストールされているフォルダを開く(下図①および補足参照)
  4. pluginsフォルダを開く(下図②および補足参照)
WPのカスタムブロック作り ②ブロックを作るためのプラグインを作成する|Personal WP Customization Notes (PWCN)
①WordPressがインストールされているフォルダを開く

「Go to site folder」をクリックすると、「app」「cof」「logs」というフォルダが見えますから、以下のようにして展開します。

  1. 「app」をクリックする
  2. 「public」をクリックする

一度でもFTP接続やサーバーのファイルマネージャーでサイトのファイルやフォルダを見たことのある人なら、「wp-admin」「wp-content」といった見覚えのあるフォルダが出てきますね。これでWordPressの中のファイル・フォルダへ到達できたわけです。

このフォルダへは今後何度もアクセスする機会があるので、1つ上の「public」フォルダのショートカットをデスクトップなどに作成しておきましょう

続いて「wp-content」を開き、「plugins」フォルダを開きます。

開いたら、下図のように上のアドレスバーの空白をクリックすると、pluginsフォルダまでの階層が表示されます。

WPのカスタムブロック作り ②ブロックを作るためのプラグインを作成する|Personal WP Customization Notes (PWCN)
図②

これをコピーしてメモ帳などに貼り付けてみると以下のようになっているでしょう(¥マークはバックスラッシュ(\)で表示されます)。

C:\Users\ユーザー名\Local Sites\block-create-test\app\public\wp-content\plugins

プラグインを追加するには先ほどのcmdの階層をこの階層へ切り替える必要があるので、cmdの「>」の右へ以下のように入力します。

cd C:\Users\ユーザー名\Local Sites\block-create-test\app\public\wp-content\plugins

※赤字の部分は実際にご自身のパソコンで開いた階層構造を入れてください

すると、以下のように階層が切り替わります。

WPのカスタムブロック作り ②ブロックを作るためのプラグインを作成する|Personal WP Customization Notes (PWCN)

この状態になったら、「>」の右へ以下を入力(またはコピペ)してEnterキーを押します。

npx @wordpress/create-block custom-block

コード中のcustom-blockというのはプラグイン名になりますので任意のものへ変えても結構ですが、そのまま作ってみることをおすすめします

すると、何も反応してない?という感じで白いカーソル(下線)が点滅しているだけ状態になり、しばらくすると、下図①のようになり、最終的に下図②のような画面になります。

WPのカスタムブロック作り ②ブロックを作るためのプラグインを作成する|Personal WP Customization Notes (PWCN)
図①
WPのカスタムブロック作り ②ブロックを作るためのプラグインを作成する|Personal WP Customization Notes (PWCN)
図②

この処理には結構な時間がかかります(私の環境では7~8分かかりました)から、気長に待つようにしましょう

以下のようにならず、赤字でエラーメッセージが表示される場合には、これまでの作業のどこかで間違ったことをしている場合がほとんどです。再確認してリトライしてください

最終画面に出てくる以下のコードは、今後cmdを使った操作で使う可能性がありますから、メモ帳などにコピーして保存しておくことをおすすめします。

You can run several commands inside:

  $ npm start
    Starts the build for development.

  $ npm run build
    Builds the code for production.

  $ npm run format
    Formats files.

  $ npm run lint:css
    Lints CSS files.

  $ npm run lint:js
    Lints JavaScript files.

  $ npm run plugin-zip
    Creates a zip file for a WordPress plugin.

  $ npm run packages-update
    Updates WordPress packages to the latest version.

To enter the directory type:

  $ cd custom-block

You can start development with:

  $ npm start

これで、cmdを使った作業は完了です。お疲れさまでした。

最後にきちんとプラグインが追加できたのかを確かめるため、WordPressの管理画面を開き、プラグインメニューを開きます。

下図のようにプラグイン(今回の場合はCustom Blockというプラグイン名)が追加されているはずですので、有効化しましょう。

WPのカスタムブロック作り ②ブロックを作るためのプラグインを作成する|Personal WP Customization Notes (PWCN)

これで前ページの環境構築と共に、カスタムブロックを作成するための下地が整いました。

ちなみに、このCustom Blockというプラグインを有効化した時点で、サンプルブロックが1つ使えるようになっています。投稿を新規作成して、ブロックの追加でウィジェットカテゴリーに「Custom Block」というのが追加されていますので、挿入してみてください。下図のようなブロックが追加できてるはずです。

WPのカスタムブロック作り ②ブロックを作るためのプラグインを作成する|Personal WP Customization Notes (PWCN)

いやぁ...環境を作るまでにずいぶん時間がかかりましたね。

でも実際のブロック作りはこれからですよ(笑)。

今後頻繁に使いますから、パソコン上(ローカル)でのブロック作成用WordPressの立ち上げ方法、cmdの階層変更方法のおさらいしておいてくださいね。

←「①環境構築とWordPressのインストール方法」へ戻る

「③カスタムブロック編集をする際の作法と更新方法」へ進む→



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Create Custom Blocks
WPのカスタムブロック作り ③カスタムブロック編集をする際の作法と更新方法