段落ブロックで行った改行を、画面幅に応じて無効にする方法(メモ)

公開日:2023(令和5)年8月29日/最終更新日:

WordPressのカスタマイズ方法についての画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



段落ブロックなどの文章の入力では、「Shift」+「Enter」で段落内改行ができるのはご存じだと思います。

一度改行を含めた入力をして「HTMLとして編集」に切り替えると、段落内改行をした場所にbr(改行)タグが挿入されていることが確認でき、このタグにより表示された際に改行が適用されるという仕組みになっています。

このbrタグに対して一度段落ブロックを「HTMLとして編集」へ切り替え、「br」を「br class=”no-br”」へ書き換えた上で、テーマのCSSなどへ以下のスタイルコードを追加すると、画面幅に応じてbrが効いたり効かなかったりという切り替えができます。

@media screen and (min-width: 651px) {
br.no-br{
display:none;
}
}

※「min-width」の「651px」を変えると、切り替える画面幅を調整できます

また、改行した文章を含む段落ブロックで、ブロックの「追加CSS」へ「no-br」を追加指定し、以下のスタイルコードをテーマのCSSなどへ追加することで、同様の切り替えができます。

@media screen and (min-width: 651px) {
.no-br br{
display:none;
}
}

※「min-width」の「651px」を変えると、切り替える画面幅を調整できます

前者はbrタグ自体にCSSクラスがある場合、後者はbrタグを含むp(段落)タグにCSSクラスがある場合なので、スタイルコードで割り当てるクラスの指定が異なる(赤字の部分)だけで、やっていることは同じです。

ただこれだと、「HTMLとして編集」のままにしておかず「ビジュアル編集」へ切り替えてしまうと、通常の改行含みのものと区別がつかず、プレビューなどで表示させて「あれ?」となることもあると思います。

そこで本ページでは、この機構を少し拡張して、以下のように動作させてみてはどうか?というカスタマイズ用のコードを紹介します。

  • 段落ブロックに「PCでは非改行」というボタンを追加する
  • 「PCでは非改行」というボタンがクリックされた段落では、幅に応じて改行を反映させたりさせなかったりの切り替えを自動で行う
  • 「PCでは非改行」が選択された段落ブロックは、ブロックエディター上に目印をつけて分かるようにする

こうすることで、以下のような効果があり、地味に便利になります。

  • いちいち改行させないためのCSSクラスを覚えておく必要がない(選択するだけになる)
  • 「追加CSSクラス」へクラス追加したり、「HTMLとして編集」へ切り替えて編集する必要がない
  • 編集画面の段落ブロックの改行は見た目のままで、機能が効いているかどうかが判別できる

以下は今回のカスタマイズコード通りに機能追加した場合の編集画面上の表示サンプルです。

モバイルで改行を無効にするブロックスタイルの選択画面

本ページでは、有効化しているテーマのfunctions.phpへコードを追加してカスタマイズします。慣れていない方やトラブル発生時に対処できない方は前述の方法の方が安全です
※トラブルが発生しても一切責任は負いませんので、了承の上参考にしてください

段落ブロックで行った改行を画面幅に応じて無効にするコード例

今回のカスタマイズでは、コードは大きく以下の3つで構成しています。

  1. 段落ブロックにボタンを表示してデザイン選択可能にする
  2. フロントエンド(閲覧画面)でスタイルを適用する
  3. エディター(編集画面)にアウトラインとメッセージを表示する

すべてのコードをテーマのfunctions.phpへ追加して機能させます。

以下、順に説明していきますので、1つ1つがどんな役割をするのかを理解しながら機能実装しましょう。

1.段落ブロックにボタンを表示してデザイン選択可能にする

以下のコードを追加します

function sample_no_br_block_style_init(){
	register_block_style('core/paragraph', array(
	'name' =>  'no-br',
	'label' => __( 'PCで非改行',''),
  ));
	
}
add_action( 'init', 'sample_no_br_block_style_init');

このコードを追加することで、「register_block_style」という関数を使用して、段落ブロックにスタイル選択ボタンを表示させる機能を実装します。

これにより、追加後に投稿編集画面を開いてこのボタンをクリックするたびに、「追加CSSクラス」へ「is-style-no-br」というCSSクラスが追加・削除されるようになります。

2.フロントエンド(閲覧画面)でスタイルを適用する

前項のコードで段落ブロックから出力されるHTMLタグに、「is-style-no-br」というCSSクラスを追加できるようになったので、これに対応するスタイルコードを書いていきます。

コードとしては以下のように短いものなので、テーマのstyle.cssへ追加してもいいでしょう。

@media screen and (min-width: 651px) {
.is-style-no-br br{
display:none;
}
}

ただこれも、後々テーマを変更したときなどに「このスタイルコード何だっけ?」となって無下に削除してしまってトラブルになることもありますから、以下のコードをテーマのfunctions.phpへプログラムとして追加しておくようにすると、忘れることが少ないかも知れません。

function sample_blank_style_sheet_for_inline_style_init() {
wp_register_style( 'blank-front-style', get_stylesheet_directory_uri() .'/blank-style.css' , array(), filemtime(get_stylesheet_directory() .'/style.css'), 'all' );
wp_enqueue_style('blank-front-style', '', array(), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'sample_blank_style_sheet_for_inline_style_init');

function sample_no_br_block_style_css_front_init(){
$custom_css_pre ='
/* Ignor para br for PC */
@media screen and (min-width: 651px) {
.is-style-no-br br{
display:none;
}
}
';

//タブを除去
$custom_css_deltab = preg_replace('/\t+/', '', $custom_css_pre);
//改行を除去
$custom_css = str_replace(PHP_EOL, '', $custom_css_deltab);

	wp_add_inline_style( 'blank-front-style', $custom_css_pre );
}
add_action( 'wp_enqueue_scripts', 'sample_no_br_block_style_css_front_init');

このコードは前後2つのユーザー定義関数(「sample_blank_style_sheet_for_inline_style_init」と「sample_no_br_block_style_css_front_init」)で構成されています。

このコードでは、1つ目の関数で実態のない「blank-front-style」スタイルシートを追加し、2つめの関数で、スタイルシートに対してスタイルコードを追加するという役割を果たします。

実際に「blank-front-style」というハンドルを持つスタイルシートはページのHTML上にタグ表示されることはなく、2の中のスタイルコードのみがインライン(HTML上にそのままコードが見える形)で出力されます。

こうしておくことで、テーマ内に別のスタイルシートを読み込ませてそこに記述するということをしなくても済み、空のスタイルシートにスタイルコードを追加する形なので、使用しているテーマやプラグインに影響されないというメリットがあります。

インラインでのスタイル出力については以下で詳しく書いていますのでよかったらどうぞ。

エディター(編集画面)にアウトラインとメッセージを表示する

最後に、「PCで非改行」を選択した際に、ブロックエディター側でアウトライン(囲み線)と「パソコン表示では改行は無視されます」というメッセージを表示するためのコードを追加します。

function sample_no_br_block_style_css_admin_init(){
$mes_content = "content:'パソコン表示では改行は無視されます';";

$style = '
p.is-style-no-br:before {
	position: absolute;
	top: 100%;
	right: 0;
	background: #96eb87;
	'.$mes_content.'
	font-size: 0.6em;
}

p.is-style-no-br {
    border: 1px solid #96eb87;
}
';

echo '<style>'.$style.'</style>';

}
add_action('admin_enqueue_scripts','sample_no_br_block_style_css_admin_init');

これは「admin_enqueue_scripts」というフックを使って管理画面側のみにスタイルを適用しています。

「border」で枠線を引き、「:before」という疑似要素を使って「パソコン表示では改行は無視されます」文字列を出力しつつ、「position:absolute」で浮動にして位置を調整しています。

スタイルが適用されないときは

今回のカスタマイズは以上です。

  • 編集画面でボタンが表示され、クリックしたけど何も変わらない
  • 有効にしたのに閲覧画面で幅の広い画面上でも改行されてしまう

といった不具合が出た時は、ブラウザのキャッシュ機能によってスタイルが保持されていることが原因で、それぞれの画面でキャッシュのクリア(キーボードの「Ctrl」+「F5」)を行うことで解消されます。

ついついキャッシュのクリアを忘れてしまう、クリアしていないことに気づかないことがある、キャッシュ?という方は、以下の方法でCSSやスクリプトを読み込ませるようにするといいかも知れませんね。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressブロックテーマのカスタマイズ方法画像
ブロックテーマでサイトの背景画像を設定する5つの方法