こんにちは、WEB担当菅井です。
WordPressのブロックエディタで作業していると、スマホ・モバイル表示で文章が変なところで改行されて嫌だな〜って時ありますよね。
そういう時に便利な、モバイル時だけ・あるいはPC時だけ改行させることができるショートコードを実装するためのコードを以下に紹介します。
これを実装すれば、簡単なショートコード
プラグインに頼らずにできるスマートな方法だと思います。
慣れていない方は必ずバックアップを取り、作業自体は子テーマで行ってください。
また、SWELLテーマを利用している方は、もともとこの機能がついてますので、このカスタマイズは必要ありません。
目次
作業工程は2つ。CSSとfunctions.phpを編集します
1)まずは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;
}
}
2)次は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' );
これでショートコードを利用できるようになります。
実際の編集画面でショートコードがちゃんと使えているか確認
ブロックエディタにて改行したいところにショートコードを入れてみてください。
[]内にspbrと入れるとモバイルでは改行が有効になり、pcbrと入れるとPCでのみ改行されるはずです。
今までは自分も別途プラグインを入れたりしてたのですが、SWELL以外のテーマの時にはこの方法が一番良いかなと思いますので、プラグインなしでやりたい方はぜひ使ってみてください。