パルどうナレッジ WEB屋の備忘録

【ワードプレス】スマホ表示だけ本文の改行(br)を無くす方法

パソコンでは1行ずつ改行するのが見やすい。
スマホは改行を無くした方が見やすい。

これを対応にするコードです。

※クラシックエディタのみ対応しています。
新エディタについてはこちらの記事を見てください。
完璧版:ワードプレスのスマホの表示だけ本文の改行(br)を無くす方法

1、まずはパソコンとスマホの振り分け関数を作る

functions.phpに下記を追加。

<?php
function is_mobile(){
$useragents = array(
    'iPhone', // iPhone
    'iPod', // iPod touch
    'Android.*Mobile', // 1.5+ Android *** Only mobile
    'Windows.*Phone', // *** Windows Phone
    'dream', // Pre 1.5 Android
    'CUPCAKE', // 1.5+ Android
    'blackberry9500', // Storm
    'blackberry9530', // Storm
    'blackberry9520', // Storm v2
    'blackberry9550', // Storm v2
    'blackberry9800', // Torch
    'webOS', // Palm Pre Experimental
    'incognito', // Other iPhone browser
    'webmate' ,// Other iPhone browser
    'Mobile.*Firefox', // Firefox OS
    'Opera Mini', // Opera Mini Browser
    'BB10', // BlackBerry 10
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
?>

すでに作っているのならばそれを使ってください。

2、single.phpのthe_content()部分を変える

次に、「single.php」の<?php the_content(); ?>を下記に変更します。

<?php if(is_mobile()) {
$honbun = apply_filters('the_content',get_the_content());
$subject = array(
'<br />・',
'<br />$1',
'<br />$1',
'<br />$1',
'',
'<br />',
'</p>'
); 
$pattern = array(
'#\n・#',
'#\n(<[^/p]+?>・)#',
'#\n([\d]+?、)#u',
'#\n(<[^/p]+?>[\d]+?、)#u',
'#<br />\n#',
'#<br /><br />#',
'#</p><br />#'
);
$brnuki = preg_replace($pattern, $subject, $honbun);
echo $brnuki;
}else{
the_content();
}?>

スマホの場合だけ強引に置換しています。
「・」と「1、」で作った改行リストはそのまま改行しています。
(このあたりは各自工夫を)

動作サンプルは当サイトで確認ください。
(同じコードを入れています)

ワードプレスの記事一覧

記事一覧はこちら:ワードプレス

管理コード(復活の呪文)
【ワードプレス】スマホ表示だけ本文の改行(br)を無くす方法
けひザプど マスヂルェ ほゃゅピみ ザとうピプ ボぼせぺツ カフづてよ ュタもペヒ びゅなこネ ンヨゥスダ ズだキレト ノゲガろム マッゃヲピ ぷたヒょぉ だろらズダ ぷんドべサ おめせぁギ サュもダノ ぃくロシぎ ォムユポュ ゥテぺウダ まズめげく ひはへなツ ヘしガクそ ぶばあぬん げけトぅも ノジペダを ぬジなぅび ぁァッフふ プゲトヲナ ネトエだリ ナっはグわ コつうぇる ダビんどて にコだズま ポずギれべ ネユェチゴ ごゲナマぇ ルシギぇね スぺぴリラ