専用プラグインを使えば、編集画面上でパソコンとモバイル個別にスペーサーブロックの高さを指定できることは知っているが、後々そのプラグインが更新停止したりするのが怖いという方向けに、標準のスペーサーブロックにスタイルを適用させるボタンを追加して簡易的に高さをレスポンシブ対応させる方法を紹介します。
これを実現するためには、以下の2つの手法を使います。
- スペーサーブロックにブロックスタイルを追加して、いろいろな高さパターンのボタンを設置して選択できるようにする
- clampというCSS関数を使って表示する幅に応じて高さが可変するスタイルコードを追加する
コードを使用する前に、ここをクリックして注意事項をご確認ください
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
プラグインなしでスペーサーブロックのレスポンシブスタイルを追加する方法
以下のコードを順に有効化しているテーマのfunctions.phpへ追加していきます。
ブロックスタイルの追加
まずはスペーサーブロックを挿入した際に右のツールバーの「スタイル」タブで選択できるボタンを追加するためのコードを追加します。
以下のコードをそのままコピペすれば、スペーサーブロックのスタイルに「clamp 30-10」「clamp 60-20」「clamp 90-30」というボタンが追加され、次項のコードを追加することで、順に「パソコン表示では30px、モバイル表示では10px」「パソコン表示では60px、モバイル表示では20px」「パソコン表示では90px、モバイル表示では30px」の高さでスペースが確保されます。
function pwcn_register_block_design_styles_space() {
/* スペーサー PC30px Mob10px */
register_block_style('core/spacer', array(
'name' => 'pwcn-space-clamp-30',
'label' => __( 'clamp 30-10',''),
));
/* スペーサー PC60px Mob20px */
register_block_style('core/spacer', array(
'name' => 'pwcn-space-clamp-60',
'label' => __( 'clamp 60-20',''),
));
/* スペーサー PC90px Mob30px */
register_block_style('core/spacer', array(
'name' => 'pwcn-space-clamp-90',
'label' => __( 'clamp 90-30',''),
));
}
add_action('init','pwcn_register_block_design_styles_space');コードを追加して保存したら投稿編集画面を開き（既に開いている場合はリロードし）、スペーサーブロックを挿入後、右のツールバーを出して「スタイル」タブをクリックしてみてください。「clamp 30-10」「clamp 60-20」「clamp 90-30」が表示されていればこのコードの追加は完了です。
この段階では選択肢が追加されただけで次項のスタイルを追加しないと何も変化はありませんのでご注意ください
ボタンの追加や削除の仕方
コードを見ると分かる通り、上記のコードでは以下の部分がひとまとまりになっています。
/* スペーサー PC30px Mob10px */
register_block_style('core/spacer', array(
'name' => 'pwcn-space-clamp-30',
'label' => __( 'clamp 30-10',''),
));「core/spacer」の部分はWordPress標準のスペーサーブロックを指し（ここではブロックのスラグと言うことにします）、「name」の「pwcn-space-clamp-30」は一意の名前、「label」の「clamp 30-10」はボタンに表示される文字列です。
話は脱線しますが、このコードの塊を追加し、WordPressのコアブロックの一覧で標準ブロックのスラグを見つけて同様に名前や文字列の指定をすれば、スペーサーブロック以外のブロックにも独自のスタイルボタンが追加できます。
これをブロックスタイルの追加といい、以下のページで詳しくやり方を紹介していますので参考にどうぞ。
ブロックスタイルに適用するスタイルの追加
選択されたボタンに対応するスタイルを追加していきます。
通常のstyle.cssを使ってスタイルコードを追加すると使用しているテーマや環境によってはブロックエディター側にスタイルが適用されないことがありますので、以下のコードをfunctions.phpへ追加してphpプログラムとしてスタイルを適用させます。
function pwcn_block_design_spacer_style_init(){
//スタイルコードをまとめる
$custom_css_pre = '
/* PWCN Block Design Spacer */
.is-style-pwcn-space-clamp-30{
height: clamp(0.625rem, 0.0436rem + 2.3256vw, 1.875rem) !important;
}
.is-style-pwcn-space-clamp-60{
height: clamp(1.25rem, 0.0872rem + 4.6512vw, 3.75rem) !important;
}
.is-style-pwcn-space-clamp-90{
height: clamp(1.875rem, 0.1308rem + 6.9767vw, 5.625rem) !important;
}
//タブを除去
$custom_css_deltab = preg_replace('/\t+/', '', $custom_css_pre);
//改行を除去
$custom_css = str_replace(PHP_EOL, '', $custom_css_deltab);
wp_add_inline_style( 'global-styles', $custom_css );
//追加したスタイルコードをサイトエディタ側へインライン出力
wp_add_inline_style( 'wp-edit-blocks', $custom_css );
}
add_action( 'init', 'pwcn_block_design_spacer_style_init');
add_action( 'wp_enqueue_scripts', 'pwcn_block_design_spacer_style_init');上記のコードを追加したら、投稿編集画面を開き（既に開いている場合はリロードし）、スタイルボタンを変更してスペーサーの高さが変わるかどうかを試してください。
変わるようでしたら、次にモバイルプレビューをするか、Google Chromeブラウザーであれば、「モバイル電話シミュレーター – レスポンシブサイトテスト」などのモバイル表示できる拡張機能などを使って、モバイル表示時とパソコン表示時でスペーサーの高さが変わるかを確認してください。
高さが変わらないときは
パソコン表示時（投稿編集画面上）でスタイルのボタンをいろいろクリックしても高さに変化がみられないときは、スタイルが適用されていない可能性があります。
このコードではwp_add_inline_style()という関数を使用して、HTMLへ直接スタイルコードを出力するようにしています。
上記のコードでは以下の部分でWordPressが標準的に出力する「global-styles」というIDを持つスタイルシートにコードを追加するようにしていますが、使用しているテーマやカスタマイズの内容によってはこのスタイルシートが読み込まれていない可能性があります。
その場合は、「global-styles」ではなく、HTML上に出力されているスタイルシートのIDへ書き換えて試してみてください。
どうしてもスタイルが適用されないという場合は以下のページを参考にしてみてください。
高さについて
先ほどは分かりやすくするために「パソコン表示では30px、モバイル表示では10px」などと表現しましたが、実はclamp関数は、画面の幅（viewport）によって最大で30px、最小で10pxの高さで表示するというもので、例えば最大幅を1260px、最小幅を400pxにした場合には、1260px以上の画面幅であれば30px、そこから徐々に高さが小さくなり、400px以下の幅の画面では10pxになるという微妙に計算された高さで表示してくれる便利な関数です。
今回スタイルに適用したコードでは、すべて最大幅は1260px、最小幅は400pxにおいて高さを可変させるようにしていますが、計算がとても面倒なので、「Font-size Clamp Generator」というオンラインツールを使うと便利です。
スタイルコード記述時の注意点
前項で紹介したボタンの追加を行った際、スタイルコードの出力もそれに合わせて追加していくのですが、一点注意があります。
それは、WordPressではregister_block_style()を使った場合のCSSセレクターには必ず「is-style-」という接頭辞が付くことです。
これも今回紹介している双方のコードを見ていただければわかると思いますので確認してみてください。
以上、プラグインなしでスペーサーブロックをレスポンシブ対応にする方法でした。
一応この下にスペーサーブロックを挿入し、120px-30pxで表示してますので、パソコンとモバイルで見比べてみてくださいね。
機能的には断然専用プラグインにかないませんが、サイトでスペーサーの高さを決めて作成しているサイトであれば、こんなカスタマイズで十分ではないかと思いますし、応用すれば他のブロックでもいろいろなものが追加できます。
こちらのアーカイブページで本サイトでregister_block_style()を使ってスタイルを追加するカスタマイズ方法を一覧で紹介していますので、よかったらどうぞ。
