WordPress-Gutenberg – ブロックスタイルをアレンジする為のステップバイステップ

Web制作

こんにちは。
Web制作者のhikaruです。

今回はWordPressブロックエディタに搭載されている、ブロックスタイルを
カスタマイズする方法を紹介していきます。

まず初めに

ここでは、次のようなブロックスタイルを作成します。

例 ) ボーダー線を引いた簡素なブロックスタイル

Jsファイル作成

テキストエディタで「editor.js」という名前のファイルを作成します。

そして、次のコードを入力してください。

   wp.blocks.registerBlockStyle(
        'core/paragraph',
        [
            {
                name: 'default',
                label: 'デフォルト',
                isDefault: true,
            },
            {
                name: 'p-border-bottom',
                label: '下ボーダー'
            },
        ]
    );

上記コードは、pタグに対して、デフォルトスタイルと、ボーダースタイルを設定しています。

  • core/paragraph : 「pタグを指定」
  • name : 「付加するClass名」
  • label : 「エディタに表示される名前」

CSSを編集

ブロックスタイルを追加するテーマのstyle.cssを開きます。

そして、次のコードを入力します。

.is-style-p-border-bottom {
    border-bottom: 1px solid #999;
}

「p-border-bottom」の前に「is-style-」が自動で付加されるので、「is-style-p-border-bottom」となります。

functions.php編集

ブロックスタイルを追加するテーマのfunctions.phpを開きます。

そして、次のコードを入力します。

function be_gutenberg_scripts() {
	
	wp_enqueue_script(
		'be-editor',
		get_stylesheet_directory_uri() . '/js/editor.js',
		array( 'wp-blocks', 'wp-dom' ),
		filemtime( get_stylesheet_directory() . '/js/editor.js' ),
		true
  );
}
add_action( 'enqueue_block_editor_assets', 'be_gutenberg_scripts' );

上記コードは「editor.js」をサイトに読み込ませる為に必要です。詳しくはこちら

ファイルをアップロード

アップロード先ディレクトリは、次の通りです。

  • style.css : 「ダウンロード元のディレクトリに再度アップロード」
  • functions.php : 「ダウンロード元のディレクトリに再度アップロード」
  • editor.js : 「適応しているテーマ直下にjsフォルダを作成してアップロード」

エディタで表示確認

エディタ画面で段落ブロックを選択します。

そして、右側のスタイルメニューを開くと、次のようになっているはずです。

これで、ブロックスタイルをアレンジすることができました。

ブロック名まとめ

pブロック以外にカスタムスタイルを付加する場合は、次を参照してください。

  • 見出し : 「core/heading」
  • 画像 : 「core/image」
  • ギャラリー : 「core/gallery」
  • 引用 : 「core/quote」
  • スペーサー : 「core/spacer」
  • リスト : 「core/list」
  • 表 : 「core/table」

ブロック名を確認するには ?

エディタ画面でブラウザの開発者ツールを開きます。

確認したいブロックの最上位階層にある、divタグを選択。

そして、divタグの「data-type属性」を確認することで、ブロック名を知ることができます。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

関連記事

特集記事

コメント

この記事へのコメントはありません。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

TOP