こんにちは
nl2brとHTMLを混在させて使用する
ことはできませんでしょうか？
$string = "<h1 titie=\"日本
\">日本</h1>";
echo esc_html( nl2br($string) );
// <h1 titie="日本<br /> ">日本</h1>
通常は、htmlタグ内に改行を含めることはないと思いますが、もしあれば上記のような事になるので、望ましくないでしょう。
wpautop()等では、何か問題があるといった事でしょうか？
sp-onとpc-onは、どんなスタイルを指定していますか？
luarceさん
CSS的には、BRタグにclassを付けるのはオススメではない気がします。
上位タグにクラスを振り、BRにはCSSのみを聞かせた方が一般的な気がします。
例えば、下記のようにすれば、同じ効果が得れると思います。
//CSS
@media only screen and (max-width : 640px) {
.content br{}/* 改行させたくないときのCSS */
}
また、ユーザーエージェント利用すればのような方法もあります。
わたくしも、よく似たような用法を用いますが、個人的には「wp_kses()」が使いやすいです
if(is_mobile())://is_mobile()はfunctions.phpで定義
$allowed_html_tag = array(
//pタグを無効化しない
'p' => array(),
);
$custom_field = wp_kses($custom_field, $allowed_html_tag);
endif;
nobita 様
お世話になります。
ご回答ありがとうございます。
すみません、あまり関数に詳しくないため憶測を含めた回答になってしまいますが、
自動でpタグを付与すると、スマホ表示を意識して1行を連続して書くと
ＰＣ表示の際に1行が長くなってしまいます。
かと言って短文にするとスマホ表示の際に折り返し位置が変な位置になってしまいます。
そのため、sp-onとpc-onは、どんなスタイルを指定していますか？
メディアクエリで768pxを境にdisplay:noneとblockで表示/非表示を指定しています。
photographer hiro. 様
お世話になります。
ご回答ありがとうございます。
すみません、詳しくご説明いただいているのだと思うのですが、
CSSの方は何となく理解できたのですが、
wp_kses()の方が上手く理解できないでおります。
本当にすみません。
何となくですが、
スマホ表示の際にはpタグはそのままでbrタグは無効化する、、
ことでPC時には改行、スマホ時には改行なし、
という形にしているという理解になるのでしょうか？
理解が悪くすみません。
ちなみに、上記コードをそのままfunctions.phpに付け加えてやればいいのでしょうか？
よろしくお願い致します。
luarceさん
後者の場合ですが、まず条件分岐でスマートデバイスだったらという分岐ができるようにします。
//functions.php
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android', // 1.5+ Android
'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
'phone' // Other phone
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
次にカスタムフィールドの取得をします。
スマートカスタムフィールドを使っていませんので（私）一般的な取得方法書くので、書き換えてください。
「wp_kses()」はarray()で指定したタグが使用できるようになります。
関数リファレンス/wp kses
<?php
$key = 'custom_field';
$meta_values = get_post_meta($id, $key);
$meta_values = apply_filters( 'the_content' , $meta_values );//BR+Pを有効にする
//Eesc_htmlだとhtmlタグが使えないので、ホワイトリストを作る
//BRとP以外使用させない
$allowed_html_tag = array(
'p' => array(),
'br' => array(),
);
//BR以外使用させない
$allowed_html_tag_br = array(
'br' => array(),
);
//p以外使用させない
$allowed_html_tag_p = array(
'p' => array(),
);
if(is_mobile())://すスマホだったら
$meta_values = wp_kses($meta_values, $allowed_html_tag_p);//Pタグのみ使用可
else://スマホ以外
$meta_values = wp_kses($meta_values, $allowed_html_tag);//P・BRタグ使用可
endif;
echo $meta_values; //条件分岐の結果をもとにカスタムフィールドをｇ表示
?>
photographer hiro. 様
おはようございます。
お世話になります。
返信が遅くなりすみません。
詳しくご教授いただき、
誠にありがとうございます。
ようやくできました！
本当にありがとうございました。
またの機会にもぜひよろしくお願い申し上げます。
あ、解決したんですね。よかったですね
以下のようなエラーが表示されてしまいました。
エラーのついては、nl2br()を削除すれば、OKだと思います。
カスタムフィールドの、htmlタグ交じりの文字列の中で、<br />を手書きしている場合はこれ以上の対策は必要ないのではないかと思います。
そうでは無くて、nl2br()で変換された、br要素にjavascript等で768px以下なら、sp-on そうでないならpc-onといったクラスを追加しているなら、要素外の改行だけ、brに変換する工夫が必要になると思います。
正規表現を使ったり、いろいろと方法はあると思いますが、一番簡単で確実なのは、br要素を手書き追加する事ではないかと思います。
nobita 様
お世話になります。
御礼が遅くなり、大変失礼いたしました。
親身ご相談に乗っていただきまして、
誠にありがとうございます。
ご回答いただきました通り、
手書きが一番良いのですが、
クライアントサイトになりますので、
タグ打ちをさせるわけにもいかず・・・といったことで
相談させて頂いた次第です。
今後もまたいろいろと課題が発生すると思いますので、
ぜひまたの機会にもお助け下さい。
ありがとうございました。
またよろしくお願い申し上げます。
