【Cocoon】PCだけ改行・スマホだけ改行のショートコード設定

2025年2月24日2025年2月25日

当サイトでも使用しているWordPressテーマ「SWELL」で標準搭載されいている「PCだけ改行」「スマホだけ改行」を「Cocoon」でもショートコードで使用出来るようにする方法です。

ショートコードを “functions.php” に追加

外観＞テーマファイルエディタ＞functions.phpに下記の内容を追加。

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

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

CSSを “style.css” に追加

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加。

br.pcbr {
	display: block;
}
br.spbr{
	display: none;
}

@media screen and (max-width: 600px) {
br.spbr {
	display: block;
}
br.pcbr {
	display: none;
}
}

以上でWordPressテーマ「SWELL」と同じようにPCだけ改行・スマホだけ改行のショートコードを追加する方法となります。

動作確認： Mac mini M2 – Safari iPad Air 4 – Safari iPhone 12 – Safari