【HA BLOCK DESIGN】プラグインの配布ページ

【HA BLOCK DESIGN】プラグインの配布ページ

WordPressプラグイン「HA BLOCK DESIGN」のダウンロードページです。

プラグインの詳細情報については以下のリンク先ページをご覧ください。

WordPressの標準ブロックにエディタ上で選択した装飾を加えることができるプラグイン「HA BLOCK DESIGN」

“【HA BLOCK DESIGN】プラグイン” をダウンロード

ha-block-design.zip – 175 回のダウンロード – 49.43 KB

プラグインをご利用いただく際の注意事項など

作者である「ひまあーと」がWordPressでのサイト構築時に、自身用に作成したプラグインで、WordPress公式プラグインとして公開はしておりません。

従って、お使いの環境やバージョン、テーマ、同時に使用するプラグイン等によっては正常に動作しない場合や、プラグインのインストール・有効化時にエラーとなる場合があります。

万が一不具合等が発生しましても一切責任を負いかねますので、了承の上でご使用ください。

最新バージョンでの開発環境について

本プラグインの最新バージョンにおける開発時の環境は以下の通りです。ご自身の環境と照らし合わせた上で使用するか否かを判断ください。

  • テストサーバー:カラフルボックス
  • WordPressのバージョン:5.7.1
  • PHPのバージョン:7.4.15(8.0でも動作確認済)
  • テーマ:ha-Basic(オリジナルテーマ)、およびTwenty Twenty One(WordPress標準テーマ)

「HA BLOCK DESIGN」プラグインの制作経緯

きっかけとなったのは、自作テーマ「ha-Basic」で段落や表、リストに装飾を加えることができるようにしたいということでした。

しかしながら最初はブロックエディタに関する知識がなく、ブロックパターンへカスタムCSSクラスを付けたものとそれに対するCSSをテーマへ登録し、ブロックパターンとして挿入することしかできませんでした。

しばらく運営した後、やはりテーマ上(投稿編集画面上)で簡単に選択できるようにしたいという欲求から、いろいろと調べて後述するアクションフックがあることを知り、テーマへ導入することができました。

それから数日後、「別のテーマでも使えるようにしよう!」と考え、プラグイン化に至ったというのが経緯です。

「HA BLOCK DESIGN」プラグインのコード解説・開発メモ

プラグインの構造は簡単で、

  • ブロックのスタイル選択欄へ独自のスタイルを追加するためのコード
  • 独自のスタイルに対するCSS(デザインコード)の記述と、サイトへの読み込み
  • マークをアイコン表示させるため「icomoon」というアイコンフォントをプラグインフォルダへ追加し、サイトへ読みこませる

という単純なものです。

バージョン1.0では「段落ブロック」「リストブロック」「テーブルブロック」に対して数個のパターンを提供する機能を持つプラグインとしてリリースしています。プラグインの使い方等は文頭のリンク先記事をご覧いただければと思います。

以下、上記それぞれの機能に対するコードスニペットと簡易解説です。ご自身でプラグインを作ってみたい方の参考になれば幸いです。

ブロックスタイルの追加コード(ha-block-design.php)

if ( !function_exists( 'hab_table_design_border_dark' ) ):
function hab_table_design_border_dark() {
	$script = <<<SCRIPT
wp.blocks.registerBlockStyle('core/table', {
  name: 'border',
  label: '枠あり'
});
SCRIPT;
	wp_add_inline_script( 'wp-blocks', $script );
}
add_action( 'enqueue_block_editor_assets', 'hab_table_design_border_dark' );
endif;

というのが1つの処理になります(上記は罫線のある表の部分です)。

このうちの独自関数名、「core/table(テーブルブロック)」「name(cssクラスの一部)」「label(エディタ上で表示する名前)」を変更して、その他の処理を1つ1つ作成しています。

WordPressの標準ブロックの種類と指定方法についてはWordPress:Gutenbergでデフォルト表示されているブロックを非表示にする方法というページで一覧にしていただいているのでそちらをご覧になるとよいでしょう。

この時、「name(cssクラスの一部)」に指定したカスタムCSSクラス(〇〇とします)は、実際に挿入すると「is-style-〇〇」となるので、デザインコードを書く際には気を付けた方がよいでしょう。

また、上記スニペットの先頭行と末尾行に「同じ独自関数名の処理が他になかったら・・」という条件を加え、テーマのfunctions.phpなどへ同名の独自関数が記述された時にはそちらを優先するようにしてます。これにより、同じコードを入れている「ha-Basic」テーマでこのプラグインを使ってもテーマ側が優先される(つまり併用しても問題ないが、意味がない)ようにして、競合しないようにしています。

デザインコード(CSS)とアイコンフォント

「style.css」というファイルを作ってデザインコードを書いたものをプラグインフォルダ内へ入れ、アイコンフォント(Icomoon)をこちらで作成し、ダウンロードしたフォルダの内容をそのままプラグインフォルダ内へ入れています。

Icomoonフォルダの中で実際に使用するのは「style.css」ファイルだけですが、後から混乱しないようダウンロードしたものすべてをあえてプラグインフォルダ内へ入れています。

そしてそれらをサイトへ読み込ませるため、次のコードを実行させています。

/** スタイルシートを適用 **/
if ( !function_exists( 'ha_block_design_styles' ) ):
function ha_block_design_styles() {
	wp_enqueue_style( 'ha-block-design-style', plugin_dir_url( __FILE__ ) . '/style.css', array(), '1.0.0'
);
//icomoonのCSS
	wp_enqueue_style( 'habd-icomoon-style', plugin_dir_url( __FILE__ ) . '/icomoon/style.css', array(), '1.0.0' );
}
endif;
add_action( 'wp_enqueue_scripts', 'ha_block_design_styles');

さらに、基本的に表示画面用のCSSは、投稿編集画面側へは反映されないので、投稿編集画面上でもデザインが反映されるよう、以下のコードを実行させています。

/** スタイルシートをエディタへ適用 **/
if ( !function_exists( 'ha_block_design_admin_styles' ) ):
function ha_block_design_admin_styles() {
	wp_enqueue_style( 'habda-block-editor-style', plugin_dir_url( __FILE__ ). '/style.css'  );
//icomoonのCSS
	wp_enqueue_style( 'habda-icomoon-style', plugin_dir_url( __FILE__ ) . '/icomoon/style.css' );
}
endif;
add_action( 'enqueue_block_editor_assets', 'ha_block_design_admin_styles' );

これを踏まえてプラグイン編集画面から、ソースをご覧いただくと、何をどうしているのかがお分かりになると思います。本当に簡単な処理ではあるものの、私と同様にプラグインの作成をしてみよう!という方には参考になろうかと思います。

「HA BLOCK DESIGN」プラグインの更新履歴

更新日更新内容
2021年 5月 3日HA BLOCK DESIGNの配布ページを公開しました