簡単！ブロックエディタでデバイス別改行ができるショートコードを実装する[WordPress]

2024年7月6日

当サイトには広告が含まれています。

こんにちは、WEB担当菅井です。

WordPressのブロックエディタで作業していると、スマホ・モバイル表示で文章が変なところで改行されて嫌だな〜って時ありますよね。
そういう時に便利な、モバイル時だけ・あるいはPC時だけ改行させることができるショートコードを実装するためのコードを以下に紹介します。

これを実装すれば、簡単なショートコードを文章間に挟むだけで、レスポンシブ対応の際にモバイル時の改行を制御することができますので、是非使ってみてください。

プラグインに頼らずにできるスマートな方法だと思います。

慣れていない方は必ずバックアップを取り、作業自体は子テーマで行ってください。
また、SWELLテーマを利用している方は、もともとこの機能がついてますので、このカスタマイズは必要ありません。

作業工程は２つ。CSSとfunctions.phpを編集します

１）まずはCSSを指定する

以下のCSSをカスタマイザーなどの追加CSS欄にコピペしてください。メディアクエリの数値はお好みで調整してください。

CSS

br.sp{
	display: none;
}

/* 768px以下のデバイスでspとpcの改行タグを切り替える */
@media screen and (max-width: 768px) {
    br.sp {
        display: block;
    }
    br.pc {
        display: none;
    }
}

２）次はfunctions.phpに以下のコードを追加

以下のコードをfunctions.phpに追加してください。

PHP

// スマートフォン用の改行ショートコード 

function spbr_shortcode() {
    return '<br class="sp">';
}
add_shortcode( 'spbr', 'spbr_shortcode' );

// PC用の改行ショートコード 

function pcbr_shortcode() {
    return '<br class="pc">';
}
add_shortcode( 'pcbr', 'pcbr_shortcode' );