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

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

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

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

詳細はこちら

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

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

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

グループブロックにスタイルを追加して枠線をつける方法

既存のグループブロックにスタイルを追加して枠線をつける方法を紹介します。

具体例として下記のように、グループブロックの操作パネル内で追加したスタイルを選択できるようになります。

追加するスタイル事例

デフォルトスタイル(枠線なし)以外に、グレイブルー枠、グレイグリーン枠、グレイオレンジ枠の3つのスタイルを追加します。

本記事でわかること

既存のブロックにスタイルを追加する方法。

実施内容としては、子テーマフォルダ内にJavascriptファイル、CSSファイルを1つづつ準備してfunctions.phpでそれらを読み込ませます。使うコードはいたって簡単でコピペだけで十分です(簡単な解説もします)。

もちろん、CSSを変更すれば別の自分の好きな枠線スタイルにすることが可能です。

グループブロックの基本的な使い方は以下の記事を参照ください。

今回作成するスタイル枠

冒頭に見たとおり既存のグループブロックにスタイルを追加して枠線をつけていきます。実際に出来上がるスタイルは以下の通りです。
(グループブロック内には段落ブロックが2つ配置した状態で表示しています)

グレイブルー枠

グレイブルー枠を選択

グレイグリーン枠

グレイグリーン枠

グレイオレンジ枠

グレイオレンジ枠

スタイルを変更したあとでも、もともとグループブロックが持っている機能は使うことができます。

例えばグレイオレンジ枠を選択した状態で、テキスト色・背景色を変更すると以下の通り。
(ついでに段落ブロックも増やしてみました)

グレイオレンジ枠で文字色と背景色を変更

スタイルの追加方法概要

手順概要は以下の通りです。念のためにサイトのバックアップを取っておくかローカル環境で試してください。

  1. 子テーマのフォルダ内にファイルblock-script.jsを作成
    (追加するスタイルのクラス名とラベルをブロックに登録する)
  2. 子テーマのフォルダ内にファイルblock-style.cssを作成
    (①で追加したクラス名をセレクターとしてスタイルを記述する)
  3. 子テーマのfunctions.phpに①②を読み込む記述を追記する

スタイルの追加方法詳細

①子テーマのフォルダ内にファイルblock-script.jsを作成

block-script.jsには以下のコードを記述します。

wp.blocks.registerBlockStyle('core/group', {
    name: 'border-grblue',
    label: 'グレイブルー枠'
});
wp.blocks.registerBlockStyle('core/group', {
    name: 'border-grgreen',
    label: 'グレイグリーン枠'
});
wp.blocks.registerBlockStyle('core/group', {
    name: 'border-grorange',
    label: 'グレイオレンジ枠'
});

wp.blocks.registerBlockStyleで既存のブロックにクラス名を登録することができます
(公式ページは以下の通り)

書式は以下の通りです。今回は3通りのスタイルが必要なのでwp.blocks.registerBlockStyleも3つ記述しています。

wp.blocks.registerBlockStyle( '対象ブロックのスラッグ’ , { (クラス名・ラベル) } );

第1引数には対象ブロックのスラッグ名を入力します。今回はグループブロックなのでcore/groupとなります。

ブロックのスラッグ名を知りたければ、ブロックエディターでGoogle Chromeの開発者ツールを開け、そのブロックのHTMLタグ内のdata-type属性を確認するとよいでしょう。

第2引数にはnameとlabelが必須です。name: 〇〇 で、is-style-〇〇 というクラス名が付与されます。labelはブロックエディターのパネルで表示されるスタイル名です。

②子テーマのフォルダ内にファイルblock-style.cssを作成

block-style.cssには以下のコードを記述します。

.is-style-border-grblue {
    border: 3px solid #72bac1;
    background: #effeff;
    border-radius: 10px;
    padding: 1em 1.5em !important;
}
.is-style-border-grgreen {
    border: 3px solid #77c9a0;
    background: #ecfff5;
    border-radius: 10px;
    padding: 1em 1.5em !important;
}
.is-style-border-grorange {
    border: 3px solid #eda387;
    background: #fff4ef;
    border-radius: 10px;
    padding: 1em 1.5em !important;
}

各セレクターには、block-script.jsのregisterBlockStyleで説明したように、name属性で指定した名前の頭にis-style-をつけたクラス名を使います

ここでCSSを変更すれば、好みの枠線のスタイルとすることができます

③functions.phpでblock-script.jsとblock-style.cssを読み込む

functions.phpに次のコードを追記します。

//blockスタイルの読み込み
add_action( 'enqueue_block_editor_assets', function() {
    // CSSの読み込み
    $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/block-style.css' ) );
    wp_enqueue_style( 'my-block-style', get_stylesheet_directory_uri() . '/block-style.css', [], $timestamp );

    // JSの読み込み
    $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/block-script.js' ) );
    wp_enqueue_script( 'my-block-script', get_stylesheet_directory_uri() . '/block-script.js', [], $timestamp, true );
} );
//web表示側でもblock-style.cssを読み込む
add_action( 'wp_enqueue_scripts', function() {
    $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/block-style.css' ) );
    wp_enqueue_style( 'my-block-style', get_stylesheet_directory_uri() . '/block-style.css', [], $timestamp );
} );

アクションフックenqueue_block_editor_assetsを使って、ブロック用のJavascriptファイルとCSSファイルを読み込んでいます。

注意点として、 block-script.js を読み込むwp_enqueue_script関数の第5引数はtrueとしておきます。本来は第3引数としてblock-script.jsの中で使用する registerBlockStyle関数の依存先を指定する必要があるのですが、面倒なのでfooterで読み込ませているのです。

また、web表示側のCSSは通常のスタイル読み込みと同じくwp_enqueue_scriptsにフックさせて読み込む必要があります。

テーマによっては既存のCSSファイルに記述してもよい

ここまでの手順でグループブロックにスタイルを追加することができますが、CSSファイルはテーマによってはすでに準備されているCSSファイルに記述した方がよい場合があります。

例えばテーマLuxritasのように、子テーマのstyle.css(web表示用CSS)とeditor-style.css(エディター用CSS)を自動的に圧縮させて高速化を実現しているテーマの場合です。

この場合次のようにします。

  • ブロックエディター側のCSSは子テーマのeditor-style.cssに記述。
  • web表示側のCSSは子テーマのstyle.cssに記述。

記述内容はblock-style.cssの内容をそのまま記述します。

そうするとblock-style.cssを読み込む必要はなくなるので、functions.phpへの記述はblock-script.jsの読み込み部だけとなります。

//blockスタイルの読み込み
add_action( 'enqueue_block_editor_assets', function() {
    // JSの読み込み
    $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/block-script.js' ) );
    wp_enqueue_script( 'my-block-script', get_stylesheet_directory_uri() . '/block-script.js', [], $timestamp, true );
} );

まとめ

最後にもう一度手順概要を説明しておきます。

  1. 子テーマのフォルダ内にファイルblock-script.jsを作成
    (追加するスタイルのクラス名とラベルをブロックに登録する)
  2. 子テーマのフォルダ内にファイルblock-style.cssを作成
    (①で追加したクラス名をセレクターとしてスタイルを記述する)
  3. 子テーマのfunctions.phpに①②を読み込む記述を追記する

このように簡単な手順だけで、既存ブロックに好きなスタイルを追加することができます。もちろんグループブロックだけでなく、他のブロックにも有用です。

グループブロックに枠線をつける作業は私もブログ記事を書くときよく使います。従来は、『ブロックの”高度な設定”でクラスを付加する』という方法をとってきましたが、本記事の方法によって執筆スピードがアップしました。何よりも楽ちん、快適なのでおすすめですよ。

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

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

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