ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ワードプレス公式チュートリアルでブロックを作成②【ブロック雛形作成】

『ブロックを自作したい』
『ブロックをカスタマイズしたい』

そう考えてワードプレス公式ページのブロック作成チュートリアルに取り組んでみたけれども、わかりにくくて途中で挫折した。

そんなあなたに向けて贈る記事の第二弾です。公式サイトのチュートリアルを参考にしてブロックの雛形を作成し、プラグインとして導入します。

第一弾の記事【環境準備編】の続きから始めます。まだの方は以下の記事でNode.jsをインストールしてVS Codeのターミナルを開いた状態としてくださいね。

Node.jsとVS Codeのほか、今回はワードプレスのローカル環境が必要となります。Local By Flywheelでワードプレスサイトを1つ準備しておきましょう。

作成するブロックの雛形

次のようなブロックを作成します。ブロック名はGutenprideです。

ブロックエディター側のブロック表示

ブロックエディター内のブロックの表示

web表示側のブロック表示

web表示されたブロック

いずれも青背景に白字のテキストが表示されるだけの単純なブロックですが、今後作成するブロック作の雛形とすることができます。

ブロック作成の手順概要

  1. VS Codeのターミナルで、Locak環境ワードプレスサイトのpluginsフォルダにcdする
  2. ブロック作成コマンドを実行(Gutenprideというプラグインを作成)
  3. プラグインGutenprideを有効化する
  4. ブロックエディターでGutenprideブロックをページ内に挿入する

ブロック作成手順詳細

①ターミナルでPluginフォルダにcd(チェンジディレクトリ)

VS Codeのターミナルで次のコマンドを実行して、プラグインフォルダへ切り換えます。

>cd '(Localワードプレスサイトのpluginフォルダまでのpath)’

Local by FlywheelでPluginフォルダがどこにあるかわからない場合は次のように進めましょう。

1.Local by Flywheelのサイトスタート画面でpathへのアクセスボタンをクリック

Localサイトスタート画面のpathボタンをクリック

するとワードプレスがインストールされたフォルダが開きます。

Localワードプレスがインストールされたフォルダ

上の例では、arkheというフォルダがワードプレスがインストールされたフォルダとなります。
(ちなみにarkheは私が最近カスタマイズによく使っているテーマArkheのことです。シンプルかつ洗練されたデザインで使いやすいのでカスタマイズにはもってこいです)

2.pluginsフォルダを開ける

ワードプレスフォルダから次のようpluginsフォルダまで辿っていきます。

>app>public>wp-content>plugins

pluginsフォルダを開ける

3.フォルダアイコンをターミナル内にドラッグ&ドロップ

VS Codeのターミナルに >cd と入力した状態でpluginsフォルダのアイコンマークをドラッグ&ドロップすると”&”をはさんでフォルダへのpathが入力されます。

ターミナルにフォルダアイコンをドラッグ&ドロップ

4.”&”を削除してコマンドを実行

”&”は邪魔なので、カーソルを動かして削除し、>cd '(pluginフォルダまでのpath)’ としてから[Enter]キーを押してcdを実行します。(※cdの後ろには半角スペースが必要

pluginsフォルダへcdを実行

上のようにplugins>の後ろでカーソルが表示されればうまくチェンジディレクトできています。

②ブロック作成コマンドを実行

pluginsフォルダにcdされたことを確認できたら、次のコマンドを実行します。

>npx @wordpress/create-block gutenpride

@wordpress/create-blockは公式ページはこちら。

コマンド実行後、途中で OK to proceed? と聞かれますが y をクリックして進めましょう。

ブロック作成コマンドの実行

コマンドが終了してからpluginsフォルダを見ると、Gutenprideというフォルダが作成されているのが確認できるでしょう。

ブロック作成コマンド実行後のpluginsフォルダの確認
注意事項

>npx @worpress/create-block gutenpride を走らせて実行が完了するまでの間の表示を見てみると次のようになります。

Creating a new WordPress block in "gutenpride" folder.
Creating a "block.json" file.  
Creating a "package.json" file.
Installing npm dependencies. It might take a couple of minutes...
Installing `@wordpress/scripts` package. It might take a couple of minutes...
Formatting JavaScript files.
Compiling block.
Done: block "Gutenpride" bootstrapped in the "gutenpride" folder.
Inside that directory, you can run several commands:
  $ 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 packages-update
    Updates WordPress packages to the latest version.
To enter the folder type:
  $ cd gutenpride
You can start development with:
  $ npm start
Code is Poetry
npm notice
npm notice New minor version of npm available! 8.1.2 -> 8.3.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.3.0
npm notice Run npm install -g npm@8.3.0 to update!
npm notice
PS C:\Users\satos\Local Sites\arkhe\app\public\wp-content\plugins>

記述内を読み解くと、gutenprideというフォルダを作成、block.jsonファイルを作成・・・とフォルダやファイルを作成していく様子がよくわかります。

今回はこの中にエラーはありませんが、仮にエラー表示があればそれを解消しておく必要があります。

例えば、

Error: [object Object] is not a PostCSS plugin

といった記述が見つかれば、PostCSSというpluginがないことを示すので、PostCSSをインストールしましょう(方法はググると見つかりますが>npm install –save-dev postcssを実行 )。インストール後、

>npm run build

を走らせてエラーが表示されなければOKです。

最近(2022年1月17日現在)、次のようなエラーが出ています。

TypeError: MiniCSSExtractPlugin is not a constructor

これに対しては次のようにコマンドを走らせてからビルドするとOKとなります。

>npm i -D –save-exact mini-css-extract-plugin@2.4.5

③プラグインGutenprideを有効化

ワードプレスのダッシュボードを開けて、インストール済みプラグインを確認するとGutenprideというプラグインが確認できるはずです。有効化しましょう。

④ブロックGutenprideを挿入

ブロックエディターを開けて、ブロック一覧表のウィジェットの中を見るとGutenprideというブロックが表示されます。

ブロック一覧の中のGutenprideブロック

通常のブロックと同じ操作でブロックをページ内に挿入してみましょう。本記事のはじめの方で紹介したように次のブロックが表示されます。

ブロックエディター内のブロック

ブロックエディター内のブロックの表示

Google Chromeの開発者ツールでこのブロックのHTMLとCSSも確認しておきます。

HTML

<p id="block-690f6309-6515-462c-aa28-e85f78c61cc1" tabindex="0" role="group" aria-label="ブロック: Gutenpride" data-block="690f6309-6515-462c-aa28-e85f78c61cc1" data-type="create-block/gutenpride" data-title="Gutenpride" class="block-editor-block-list__block wp-block wp-block-create-block-gutenpride">
    Gutenpride – hello from the editor!
</p>

CSS

.wp-block-create-block-gutenpride {
    background-color: #21759b;
    color: #fff;
    padding: 2px;
}
.wp-block-create-block-gutenpride {
    border: 1px dotted red;
}

web表示側のブロック

web表示されたブロック

HTML

<p class="wp-block-create-block-gutenpride">
    Gutenpride – hello from the saved content!
</p>

CSS

.wp-block-create-block-gutenpride {
    background-color: #21759b;
    color: #fff;
    padding: 2px;
}

ブロックエディター側とweb表示側とでは表示されているテキストが若干異なります。またブロックの見映えとCSSを見てわかるように、ブロックエディター側のみ赤枠が表示されています。

この違いも含めてそれぞれのブロックがどのようにして作成されているのかを、できあがったgutenprideフォルダ内のファイルのコードを見ながら解説していきます。

できあがったファイルの確認と役割

今回できあがったファイルをざっと確認しておきましょう。

gutenprideフォルダの中

ブロック作成コマンド実行後のpluginsフォルダの確認

srcフォルダの中

srcフォルダの中

buildフォルダの中

buildフォルダの中

各ファイルの役割

まず重要なのはgutenprideフォルダ直下にあるgutenpride.phpblock.jsonです。

gutenpride.phpにプラグインGutenprideの宣言文とブロックの設計図であるblock.jsonを読み込む記述がされています。

block.jsonはブロックのメタデータです。ブロックの名前やカテゴリー、属性などを記述することでブロックの設計図となります。

ブロックを形成する具体的パーツはbuildフォルダの中にあるJSとCSSファイルindex.jsstyle-index.cssindex.css)です。これらを読み込むようにblock.jsonで指定されています。

しかしわれわれがブロックを作成したりカスタマイズするとき編集するのは、buildフォルダ内のファイルではなくsrcフォルダ内のファイルindex.jsedit.jssave.jsstyle.scsseditor.scss)です。そしてsrcフォルダがビルドされることによってbuildフォルダを自動的に形成することになります。

ビルドしてみる

ビルドによってbuldフォルダが自動形成されることを確認しておきましょう。buildフォルダを削除してから次のビルドコマンドをターミナルで実行します。

>npm run build

これで新たにbuildフォルダが形成されます。ファイルの作成日時を見るとビルドコマンドが終了した時間であることが確認できるでしょう。

各ファイルのコード

各ファイルのコードを見て、もう少し詳しく各ファイルの役割を確認していきます。コード内の不要なコメント記述は削除して表示します。

gutenpride直下のファイル

gutenpride.php

<?php
/**
 * Plugin Name:       Gutenpride
 * Description:       Example block written with ESNext standard and JSX support – build step required.
 * Requires at least: 5.8
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            The WordPress Contributors
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       gutenpride
 *
 * @package           create-block
 */

function create_block_gutenpride_block_init() {
	register_block_type( __DIR__ );
}
add_action( 'init', 'create_block_gutenpride_block_init' );

最初のコメント記述は、Gutenprideというプラグインを定義するためのものです。

register_block_type(__DIR__)をinitにフックすることでブロックを登録します。具体的には、(__DIR__)で指定した場所にあるblock.jsonを読み込みます。

block.json

gutenpride.phpのregister_block_type( )でブロックを登録するために読み込むのがこのblock.jsonです。したがって、gutenpride.phpと同階層にある必要があります。

{
	"$schema": "https://json.schemastore.org/block.json",
	"apiVersion": 2,
	"name": "create-block/gutenpride",
	"version": "0.1.0",
	"title": "Gutenpride",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block written with ESNext standard and JSX support – build step required.",
	"supports": {
		"html": false
	},
	"textdomain": "gutenpride",
	"editorScript": "file:./build/index.js",
	"editorStyle": "file:./build/index.css",
	"style": "file:./build/style-index.css"
}

block.jsonでメタデータ(ブロックの設計図なようなもの)を記述しています。例えば、"apiVersion": 2 ではこのブロックがAPIバージョン2に従って作成されることを指定しているので、関連するJSファイルなどをAPIバージョン2のルールに則って記述する必要があります。

このほか主なところを解説すると、

  • “name": “create-block/gutenpride"
    ブロックのスラッグ名を指定。namespace/block-nameの形式をとります。
  • “title": “Gutenpride"
    ブロックエディター内で表示されるブロックの名前。
  • “category": “widgets"
    ブロックが所属するカテゴリーを指定。この場合はウィジェットの中に配置されます。
  • “icon": “smiley"
    ブロックのアイコンを指定。smileyはダッシュアイコンのdashicons-smileyを指定しています。
  • “supports": {html: false}
    supportsでブロックの標準機能をON・OFFを指定。html: false ではhtml記述を禁止していることになります。
  • “editorScript": “file:./build/index.js"
    ブロックの内容を記述するJSファイルを指定します。
  • “style": “file:./build/style-index.css"
    ブロックのスタイルを記述するCSSファイルを指定します。

block.jsonに詳しくは、次の公式ページを参照するとよいでしょう。

https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/

srcフォルダ内のファイル

src内のJSファイルをSCSSファイルを編集して、具体的なブロックを作成していきます。

block.jsonで指定されているように、ブロック作成に直接使われるのはbuildフォルダ内のindex.jsやstyle-index.cssですが、src内のindex.jsやstyle.scssがその原型となっています。

index.js

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import save from './save';

registerBlockType('create-block/gutenpride', {
	edit: Edit,
	save,
});

関連するオブジェクトやファイルをimportしたあと、registerBlockType( )を実行します。

registerBlockType( '(ブロックのname)’, (ブロックの構成));

(ブロックのname)はblock.jsonの “name" と同じとし、namespace/block-nameの形式をとります。

(ブロックの構成)はオブジェクトで、{ key: value,} の形式をとります。

(ブロックの構成)の、edit でブロックエディター内のブロックを、save でwebサイト側で表示されるブロックの内容を記述していきます。この save で記述したデータはデータベースのpost_content フィールドに保存されます。

editと save の内容は、importしているedit.jsとsave.jsの中に記述してあります。

edit.js

ブロックエディター内で表示されるブロックのメインパーツです。

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
	return (
		<p {...useBlockProps()}>
			{__('Gutenpride – hello from the editor!', 'gutenpride')}
		</p>
	);
}

return( )の中の記述がブロックとして出力されます。

実際にブロックエディター内に表示されたブロックとreturn( )内の記述を照合すると記述の意味がわかるでしょう。

ブロックエディター内に表示されたブロック

ブロックエディター内のブロックの表示

単に文字列”Gutenpride-hello from the editor!”を出力するという目的であれば、以下のように記述を変えても可能です。(変更箇所は<p>タグの中だけです。)

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
	return (
		<p {...useBlockProps()}>
			Gutenpride – hello from the editor!
		</p>
	);
}

書き換えてedit.jsを保存したあと、ターミナル内で >npm run build を実行すると新しくbuildフォルダ内のファイルが更新されてブロックに反映されます。無事更新されたかどうかはbuildフォルダ内のファイルの日時を確認してみてください。

useBlockProps( )について

useBlockProps( )はブロックの属性を記述する関数です。例えばmy-classnameというクラス名をブロックに付与したい場合は次のように記述します。

useBlockProps( {
	className: 'my-classname',
} );

今回のedit.js内のuseBlockPropsでは( )内が空なので属性は何も指定していません。それでもuseBlockPropsを記述しているのは、block.jsonで “apiVersion": 2 と記述した場合ブロックのラッパー要素に必須となるからです。

edit.jsではuseBlockProps( )、save.jsではuseBlockProps.save( )が必須となります。

save.js

webサイト側で表示されるブロックのメインパーツです。データベースに保存されています。

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';

export default function save() {
	return (
		<p {...useBlockProps.save()}>
			{__('Gutenpride – hello from the saved content!', 'gutenpride')}
		</p>
	);
}

こちらもedit.jsと同じく、return( )内の記述がweb表示側に出力されますが、属性指定関数が useBlockProps.save となっていることに注意してください。

これも実際にweb表示されたブロックと照合しておきましょう。

web表示されたブロック

web表示されたブロック

style.scss

ブロックエディター側とweb表示側の両方に適用されるCSSの元となるファイルです。

.wp-block-create-block-gutenpride {
	background-color: #21759b;
	color: #fff;
	padding: 2px;
}

このstyle.scssがビルドされて、buildフォルダのstyle-index.cssとなります。

editor.scss

ブロックエディター側だけに適用するCSSの元ファイルです。

.wp-block-create-block-gutenpride {
	border: 1px dotted #f00;
}

このeditor.scssがビルドされて、buildフォルダのindex.cssとなります。

ブロックエディター側のブロックだけに赤枠が表示されるスタイルとなっていたのは、このeditor.scssが原因だったというわけですね。

buildフォルダ内のファイル

buildフォルダ内のファイルは、ビルドされた結果なので、これらのファイルを直接編集することはありません(というかしてはいけません)。

内容だけ確認しておきましょう。

index.asset.php

<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-i18n'), 'version' => '850286137e6b43857ecc517ee0d0289d');

index.jsの中で使う関数やオブジェクトが依存するハンドル名を指定しています。このおかげで、わざわざphpファイルの中でwp_register_scriptで依存性を記述する必要がなくなります。(ビルドでなく自分で素のJSでブロックを作成する場合はこの手間が必要)

index.js

実際にブロック形成時に走るJSです。次のように圧縮された形となっています。

!function(){"use strict";var e,r={273:function(){var e=window.wp.blocks,r=window.wp.element,n=window.wp.i18n,t=window.wp.blockEditor;(0,e.registerBlockType)("create-block/gutenpride",{edit:function(){return(0,r.createElement)("p",(0,t.useBlockProps)(),(0,n.__)("Gutenpride – hello from the editor!","gutenpride"))},save:function(){return(0,r.createElement)("p",t.useBlockProps.save(),(0,n.__)("Gutenpride – hello from the saved content!","gutenpride"))}})}},n={};function t(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={exports:{}};return r[e](i,i.exports,t),i.exports}t.m=r,e=[],t.O=function(r,n,o,i){if(!n){var u=1/0;for(l=0;l<e.length;l++){n=e[l][0],o=e[l][1],i=e[l][2];for(var c=!0,p=0;p<n.length;p++)(!1&i||u>=i)&&Object.keys(t.O).every((function(e){return t.O[e](n[p])}))?n.splice(p--,1):(c=!1,i<u&&(u=i));if(c){e.splice(l--,1);var f=o();void 0!==f&&(r=f)}}return r}i=i||0;for(var l=e.length;l>0&&e[l-1][2]>i;l--)e[l]=e[l-1];e[l]=[n,o,i]},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},function(){var e={826:0,46:0};t.O.j=function(r){return 0===e[r]};var r=function(r,n){var o,i,u=n[0],c=n[1],p=n[2],f=0;if(u.some((function(r){return 0!==e[r]}))){for(o in c)t.o(c,o)&&(t.m[o]=c[o]);if(p)var l=p(t)}for(r&&r(n);f<u.length;f++)i=u[f],t.o(e,i)&&e[i]&&e[i][0](),e[u[f]]=0;return t.O(l)},n=self.webpackChunkgutenpride=self.webpackChunkgutenpride||[];n.forEach(r.bind(null,0)),n.push=r.bind(null,n.push.bind(n))}();var o=t.O(void 0,[46],(function(){return t(273)}));o=t.O(o)}();

style-index.css

ブロックエディター側とweb表示側の両方に適用されるCSSです。srcフォルダ内のstyle.scssから作成されます。

.wp-block-create-block-gutenpride{background-color:#21759b;color:#fff;padding:2px}

index.css

ブロックエディター側のみに適用されるCSSです。srcフォルダ内のeditor.scssから作成されます。

.wp-block-create-block-gutenpride{border:1px dotted red}

ビルドの方法

script作成に使えるコマンドはpackage.jsonに記述されています。

"scripts": {
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"start": "wp-scripts start",
		"packages-update": "wp-scripts packages-update"
	},

このうちよく使うのはbuildとstartです。

まず単純にビルドするのがbuildコマンドです。

>npm run build

出来上がったJSやCSSファイルは圧縮された形で出来上がるので、最終配布物の作成に向いています。

しかし開発中はstartコマンドの方が便利です。

>npm run start

startを走らせると、コードを書き換えるたびにビルドフォルダ内のファイルに非圧縮の形で反映されます。したがって、開発中にはこのstartを使っておいてブロックを仕上げていき、最後にはbuildを走らせて完成させるとよいでしょう。

まとめ

ブロック雛形(Gutenprideブロック)を作成する手順をもう一度見ておきましょう。

  1. VS Codeのターミナルで、Locak環境ワードプレスサイトのpluginsフォルダにcdする
  2. ブロック作成コマンドを実行
  3. プラグインGutenprideを有効化する
  4. ブロックエディターでGutenprideブロックをページ内に挿入する

これでGutenprideというブロックがプラグインとして使えるようになります。このときpluginsフォルダの中のgutenprideフォルダにブロック用の各ファイルが形成されています。

  • gutenprideフォルダ直下のgutenpride.phpでプラグインGutenprideの宣言と、ブロックの設計図であるblock.jsonの読み込みをする
  • block.jsonはブロックのメタデータ(設計図)
  • ブロックを形成する具体的パーツはbuildフォルダの中にあるJSとCSSファイルindex.jsstyle-index.cssindex.css
  • ブロックを作成したりカスタマイズするとき編集するのは、srcフォルダ内のファイルindex.jsedit.jssave.jsstyle.scsseditor.scss)。
  • ビルドによってbuildフォルダは自動的に形成される

次回は今回作成した雛形ブロックをモデファイして、テキスト入力機能をつけていきます。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる