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

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

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

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

詳細はこちら

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

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

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

スペーサーブロックに独自スタイルを追加【記事作成スピードアップ】

ワードプレスのスペーサーブロックに、自分がよく使うスタイル(スペーサーの高さ)を登録する方法を紹介します。

スペーサーの高さを毎回設定する手間が省略でき、記事作成がさくさく進むようになりますよ。

この記事でわかること

スペーサーブロックに自分がよく使うスペーサー高さを登録して、選択クリックできるようにする方法。

CSS、javascriptファイルの作成およびfunctions.phpの編集が必要ですが、コードはコピペでOKです。

スペーサーブロックに追加するスタイル

今回はスペーサー高さとして次の3種類を登録します。

  • 高さ40px
  • 高さ30px
  • 高さ20px

登録したスタイルは、スペーサーブロックの画面右の操作パネル内で選択できるようになります。

3種類のスタイルが選択できるようになる

私が記事作成時によく使う高さ3種を選んだわけですが、もちろん好きな高さを何種類でも登録可能です。

スタイル追加の手順

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

以上の手順を順番に進めていきます。

ただし、手順②でテーマ内のstyle.cssやエディター用CSSファイルであるeditor-style.cssにスタイルを記述する方法もあります。これについては後述します。

※作成したファイルは、FileZillaなどのFTPソフトでサーバーにアップロードする必要があります。またfunctions.phpの編集作業もあるので、必ず事前にバックアップを取ってから作業を進めてください。

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

子テーマのフォルダ内に次のコードを記述したファイルblock-script.jsを作成します。

wp.blocks.registerBlockStyle('core/spacer', {
    name: 'space-40px',
    label: '高さ40px'
});
wp.blocks.registerBlockStyle('core/spacer', {
    name: 'space-30px',
    label: '高さ30px'
});
wp.blocks.registerBlockStyle('core/spacer', {
    name: 'space-20px',
    label: '高さ20px'
});

コード内の高さを好きなものに変更してもOKです。nameで指定している半角文字の頭にis-style-を付けたものが、クラス名としてスペーサーブロックに付与されることになります。

例えばnameが 'space-40px’ の場合は、class="is-style-space-40px"が付与されます。したがって、このクラスをセレクターとしたCSSを次のblock-style.cssに記述すればよいわけです。

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

子テーマのフォルダ内に次のコードを記述したファイルblock-style.cssを作成します。

.is-style-space-40px {
	height: 40px !important;
}
.is-style-space-30px {
	height: 30px !important;
}
.is-style-space-20px {
	height: 20px !important;
}

先に作成したblock-script.js内のnameを変更した場合は、CSS内のセレクター名も変更してください

また、heightの値を好きな高さに設定することも可能です。!importantをつけているのは、デフォルトのスタイルがインラインでHTMLタグ内に記述されているのを打ち消すためです。

③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 );
} );

これで子テーマフォルダ内に作成したblock-script.jsとblock-style.cssを読み込んでくれるようになります

以上でスペーサーブロックへのスタイル登録が完了です。

CSSをテーマ内の既存のcssファイルに記述してもよい

CSSをblock-style.cssでなく、テーマ側の既存CSSファイルであるstyle.cssやeditor-style.cssに記述した方が良い場合があります。

私が使用しているテーマLuxeritasなどのように、子テーマのstyle.cssを親テーマCSSと結合させてHTML内にインライン記述するなど、高速化を図っているテーマの場合です。

そのような場合はblock-style.cssは作成せずに、同じCSSををstyle.cssとeditor-style.cssに記述してやったほうが、テーマのメリットを活かすことができるでしょう。

ただしfunctions.phpではblock-style.cssを読み込む必要がなくなるので、次のようにしてください(存在しないblock-style.css読み込み記述を残すとエラーとなります)。

//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 );
} );

まとめ

スペーサーブロックは、記事作成時によく使うかと思いますが、使用するスペーサー高さのパターンは限られていると思います。

私の場合、単なる段落間のスペーサーは20px、見出しの前にスペーサーは40pxというように決めていましたが、ブロックスタイルとして登録することで、記事作成が快適になりスピードアップを図ることができました。

あなたも自分のスタイルを登録してみてはいかがでしょうか。

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

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

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