web-dev-qa-db-fra.com

Empêcher Wordpress d'ajouter des sauts de ligne au javascript incorporé dans une page

Sur une page de Wordpress, si je saisis le code suivant:

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

il est rendu dans le navigateur comme

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

';

et cela me donne cette erreur dans la console FF SyntaxError: unterminated string literal var r='

Ceci est un blog mono-utilisateur, je suis donc "administrateur".

Comment empêcher Wordpress d'encrasser mon code?

pagesjavascripthtml-editor
2
TecBrat

Le problème

Vraiment énervant! WordPress wpautop analyse la page entière et ajoute des sauts de ligne dans le code HTML après certaines balises. Malheureusement, WP ne reconnaît pas le moment où les chaînes HTML apparaissent à l'intérieur de javascript, ce qui peut gâcher le code source JS de votre page!

// 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>

★★ Solution facile ★★

wpautop a une petite exception intégrée: il n’ajoutera pas de sauts de ligne dans les blocs <pre></pre> :) Nous pouvons utiliser cela à notre avantage, simplement en enveloppant nos balises <script> avec <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

Dans le nouvel éditeur WordPress (WP 5+) - Gutenberg, vous pouvez utiliser un bloc "HTML personnalisé" pour empêcher les sauts de ligne et les paragraphes automatiques:

sous Visual Editor, cliquez sur +> Formatage> HTML personnalisé - et entrez votre code JavaScript ici.

sur l'éditeur de code, insérez votre code JavaScript avec <!-- wp:html --> <!-- /wp:html -->

1
Dave

Vous devez mettre la fonction entre crochets dans les balises <script>, puis

1) retirez tous les espaces du script afin que WordPress n’ajoute pas de balises <p> et que le JS fonctionnera, ou

2) désactivez autop dans l'éditeur de publication pour toutes les publications/pages (voir http://codex.wordpress.org/Function_Reference/wpautop ) afin que WP n'ajoute pas de sauts de paragraphe, ou

3) procédez comme suit, ce qui laisse autop activé globalement, mais vous permet de le désactiver avec et des balises dans des publications et des pages individuelles.

Ajoutez la fonction ci-dessous à functions.php et utilisez les deux balises

<!-- noformat on --> et <!-- noformat off -->

dans votre éditeur de page/publication, c'est-à-dire 

    text will be rendered *with* autop

    <!-- noformat on -->

    text will be rendered *without* autop

    <!-- noformat off -->

    text will be rendered *with* autop

Le contenu en dehors des deux balises de format aura l'autop activé, comme indiqué.

Ajouter à functions.php du thème: 

// <!-- 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

Je ne comprends pas vraiment si vous voulez afficher votre code ou l'intégrer en tant qu'actif.

Une soution pourrait être un shortcode personnalisé que vous placerez dans le fichier function.php de votre dossier de thème enfant (ou thème):

// 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' );
}

Utilisation dans vos publications/pages: [nautop] your code goes here [/nautop]

Je ne l'ai pas testé de cette façon, car je l'utilise comme une fonction de mes propres codes courts.

Vous devez le tester et adapter la regex '#^<\/p>|^<br \/>|<p>$#' à vos besoins.
Cette expression régulière peut être aussi '#^<\/p>|^<br \/>|^<br>|<p>$#' ou '#^<\/p>|<p>$#' en fonction de votre thème et de votre code.

0
LoicTheAztec

Ceci est ma version de newautop adaptée d'en haut:

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