web-dev-qa-db-ja.com

Wordpressがページに埋め込まれたJavaScriptに改行を追加しないようにする

Wordpressのページで、次のコードを入力したとします。

var r='<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';

ブラウザでは次のようにレンダリングされます。

  var r='
<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>

';

そしてそれはFFコンソールSyntaxError: unterminated string literal var r='で私にこのエラーを与えます

これはシングルユーザーブログなので、私は "管理者"です。

Wordpressが自分のコードを汚さないようにするにはどうすればよいですか？

pagesjavascripthtml-editor
2
TecBrat

問題

本当に迷惑です！ WordPressのwpautopはページ全体を解析し、特定のタグの後にHTMLコードに改行を追加します。残念なことにWPはJavaScript文字列の中にHTML文字列があることを認識していないので、これはあなたのページのJSソースコードをめちゃくちゃにすることができます！

// This breaks your JS code:
<script>
json={"html":"<ul><li>one</li><li>two</li></ul>"};
</script>

// After wpautop is done with your code it becomes invalid JSON/JS:
<script>
json={"html":"<ul>
<li>one</li>
<li>two</li>
</ul>"};
</script>

★★簡単な解決策★★

wpautopには小さな例外が組み込まれています：<pre></pre>ブロックの中に改行を追加しません:) <script>タグを<pre>でラッピングすることでこれを使用することができます。

// Simple solution!
<pre><script>
json={"html":"<ul><li>one</li><li>two</li></ul>"};
</script></pre>

// Extra: Add |style| to ensure the empty <pre> block is not rendered:
<pre style="display:none"><script>
json={"html":"<ul><li>one</li><li>two</li></ul>"};
</script>
3
Philipp

新しいWordPress（WP 5+）エディタ - Gutenbergでは、自動改行や段落を防ぐために "Custom HTML"ブロックを使うことができます。

ビジュアルエディタで+>フォーマット>カスタムHTMLをクリックして、そこにあなたのJavaScriptを入れてください。

コードエディタでJavaScriptを<!-- wp:html --> <!-- /wp:html -->で囲みます

1
Dave

関数を<script>タグで囲み、その後に

1）WordPressが<p>タグを追加しないようにスクリプトからすべての空白を取り除いてください。そうすればJSは動作します

2）すべての投稿/ページに対して投稿エディタでautopを無効にします（ http://codex.wordpress.org/Function_Reference/wpautop を参照）ので、WPは段落区切りを追加しません

3）次のようにして、autopをグローバルに有効にしたままにします。ただし、個々の投稿やページでとタグで無効にすることができます。

以下の関数をfunctions.phpに追加し、2つのタグを使用します

<!-- noformat on -->と<!-- noformat off -->

あなたのページ/投稿エディタ、すなわち 

    text will be rendered *with* autop

    <!-- noformat on -->

    text will be rendered *without* autop

    <!-- noformat off -->

    text will be rendered *with* autop

前述のように、2つのフォーマットタグ以外のコンテンツでは自動処理が有効になります。

テーマのfunctions.phpに追加してください： 

// <!-- noformat on --> and <!-- noformat off --> functions

function newautop($text)
{
    $newtext = "";
    $pos = 0;

    $tags = array('<!-- noformat on -->', '<!-- noformat off -->');
    $status = 0;

    while (!(($newpos = strpos($text, $tags[$status], $pos)) === FALSE))
    {
        $sub = substr($text, $pos, $newpos-$pos);

        if ($status)
            $newtext .= $sub;
        else
            $newtext .= convert_chars(wptexturize(wpautop($sub)));      //Apply both functions (faster)

        $pos = $newpos+strlen($tags[$status]);

        $status = $status?0:1;
    }

    $sub = substr($text, $pos, strlen($text)-$pos);

    if ($status)
        $newtext .= $sub;
    else
        $newtext .= convert_chars(wptexturize(wpautop($sub)));      //Apply both functions (faster)

    //To remove the tags
    $newtext = str_replace($tags[0], "", $newtext);
    $newtext = str_replace($tags[1], "", $newtext);

    return $newtext;
}

function newtexturize($text)
{
    return $text;   
}

function new_convert_chars($text)
{
    return $text;   
}

remove_filter('the_content', 'wpautop');
add_filter('the_content', 'newautop');

remove_filter('the_content', 'wptexturize');
add_filter('the_content', 'newtexturize');

remove_filter('the_content', 'convert_chars');
add_filter('the_content', 'new_convert_chars');
1
markratledge

あなたが自分のコードを表示したいのか、それともアクティブとしてそれを埋め込むのかを私は本当に理解していません。

あなたの子テーマ（またはテーマ）フォルダーのfunction.phpファイルに入れる、 カスタムショートコード のようなものがあります。

// SHORTCODE REMOVING WORDPRESS AUTO FORMATING
if (!function_exists('no_wpautop')) {
    function no_wpautop( $atts , $content = null ) 
    {
        $content = do_shortcode( shortcode_unautop($content) );
        $content = preg_replace( '#^<\/p>|^<br \/>|<p>$#', '', $content );
        return $content;
    }
    add_shortcode( 'nautop', 'no_wpautop' );
}

あなたの投稿/ページでの使用法： [nautop] your code goes here [/nautop]

私はこれをテストしていません。私自身のショートコードの中で関数として使用しているからです。

あなたはそれをテストし、あなたのニーズに合うように正規表現'#^<\/p>|^<br \/>|<p>$#'を適応させる必要があります。
この正規表現は、テーマやコードに応じて'#^<\/p>|^<br \/>|^<br>|<p>$#'または'#^<\/p>|<p>$#'になることもあります。

0
LoicTheAztec

これは私のnewautopのバージョンです。

function toggleable_autop($text, $filter_state = 'autop_enabled') {
    /* Each tag is associated with the key that will toggle the state from current */
    $filter_driver = [
        'autop_enabled' => [ 'tag' => '<!-- noformat on -->', 'filter' => function($text) { return convert_chars(wptexturize(wpautop($text))); } ],
        'autop_disabled'  => [ 'tag' => '<!-- noformat off -->', 'filter' => function($text) { return $text; } ],
    ];

    if ( strlen($text) === 0 ) {
        return '';
    }

    $end_state_position = strpos($text, $filter_driver[$filter_state]['tag']);
    if ( $end_state_position === false ) {
        $end_state_position = strlen($text);
    }
    return $filter_driver[$filter_state]['filter'](substr($text, 0, $end_state_position))
        . toggleable_autop(
            substr($text, $end_state_position + strlen($filter_driver[$filter_state]['tag'])),
            $filter_state === 'autop_enabled' ? 'autop_disabled' : 'autop_enabled'
        );
}
0
BaseZen