サポート » 使い方全般 » カスタムフィールド内の改行について

  • 解決済 LUARCE

    (@luarce)


    お世話になります。
    ご教授何卒よろしくお願い申し上げます。

    カスタム投稿出力時に改行させたく、
    <?php echo nl2br($hoge); ?>
    または、
    <?php echo nl2br(esc_html($hoge)); ?>
    といった方法で改行に対応しているのですが、
    レスポンシブになっているため改行位置の
    調節をPCとスマホでそれぞれ何とかしたいと
    考えています。

    そこで、brタグにクラスを付けて、
    <br class=”sp-on”>スマホの時に改行
    <br class=”pc-on”>PCの時に改行
    を併用してフィールドに入力したのですが、
    プレビュー画面、更新後の画面でページトップに
    以下のようなエラーが表示されてしまいました。

    エラー
    改行テスト、
    ああああああ。”>

    プラグインはスマートカスタムフィールドを使っています。

    nl2brとHTMLを混在させて使用する
    ことはできませんでしょうか?

    何卒よろしくお願い申し上げます。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • nobita

    (@nobita)

    こんにちは

    nl2brとHTMLを混在させて使用する
    ことはできませんでしょうか?

    
    $string = "<h1 titie=\"日本
    	\">日本</h1>";
    echo esc_html( nl2br($string) );
    // <h1 titie="日本<br /> ">日本</h1>
    

    通常は、htmlタグ内に改行を含めることはないと思いますが、もしあれば上記のような事になるので、望ましくないでしょう。

    wpautop()等では、何か問題があるといった事でしょうか?

    sp-onとpc-onは、どんなスタイルを指定していますか?

    • この返信は5年前にnobitaが編集しました。
    • この返信は5年前にnobitaが編集しました。

    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;
    
    
    トピック投稿者 LUARCE

    (@luarce)

    nobita 様

    お世話になります。
    ご回答ありがとうございます。
    すみません、あまり関数に詳しくないため憶測を含めた回答になってしまいますが、
    自動でpタグを付与すると、スマホ表示を意識して1行を連続して書くと
    PC表示の際に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; //条件分岐の結果をもとにカスタムフィールドをg表示
    
    ?>
    
    
    トピック投稿者 LUARCE

    (@luarce)

    photographer hiro. 様

    おはようございます。
    お世話になります。

    返信が遅くなりすみません。

    詳しくご教授いただき、
    誠にありがとうございます。

    ようやくできました!

    本当にありがとうございました。

    またの機会にもぜひよろしくお願い申し上げます。

    nobita

    (@nobita)

    あ、解決したんですね。よかったですね

    以下のようなエラーが表示されてしまいました。

    エラーのついては、nl2br()を削除すれば、OKだと思います。

    カスタムフィールドの、htmlタグ交じりの文字列の中で、<br />を手書きしている場合はこれ以上の対策は必要ないのではないかと思います。

    そうでは無くて、nl2br()で変換された、br要素にjavascript等で768px以下なら、sp-on そうでないならpc-onといったクラスを追加しているなら、要素外の改行だけ、brに変換する工夫が必要になると思います。

    正規表現を使ったり、いろいろと方法はあると思いますが、一番簡単で確実なのは、br要素を手書き追加する事ではないかと思います。

    • この返信は5年前にnobitaが編集しました。
    トピック投稿者 LUARCE

    (@luarce)

    nobita 様

    お世話になります。
    御礼が遅くなり、大変失礼いたしました。

    親身ご相談に乗っていただきまして、
    誠にありがとうございます。

    ご回答いただきました通り、
    手書きが一番良いのですが、
    クライアントサイトになりますので、
    タグ打ちをさせるわけにもいかず・・・といったことで
    相談させて頂いた次第です。

    今後もまたいろいろと課題が発生すると思いますので、
    ぜひまたの機会にもお助け下さい。

    ありがとうございました。

    またよろしくお願い申し上げます。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「カスタムフィールド内の改行について」には新たに返信することはできません。