it-swarm.com.de

So fügen Sie Inline-CSS/JS in einen Shortcode ein

Ich arbeite an der Erstellung eines Shortcodes, der die CSS- und JS-Werte für diesen Shortcode je nach Situation dynamisch ändern soll. Jetzt ist das Problem, dass ich keine Ahnung habe, wie man add_action() innerhalb einer add_shortcode() verwendet. Lassen Sie mich Ihnen einen Beispiel-Snippet-Code geben, damit Sie mich besser verstehen können:

add_shortcode('example', function( $atts ) {
    //extracting the shortcode attributes
    extract( shortcode_atts( array(
        'value1' => null,
        'value2' => null, 
        'value3' => null
    ), $atts ) );

    //Now here I wll do my code for the shortcode
    // But the shortcode needs some js and css to work
    // so, I'm trying like this

    //For the CSS
    add_action('wp_head', function() {
        echo '<style type="text/css">
            .class {
                background-color: '. $value2 .';
            }
        </style>';
    });

    //For the JS
    add_action('wp_footer', function() {
        echo '<script type="text/javascript">
            var a = '. $value3 .'
        </script>';
    });

});

Offensichtlich funktioniert es nicht, also habe ich gehofft, dass mich einer von Ihnen anleiten kann, wie man auf die richtige Art und Weise etwas Ähnliches macht.

Wenn Sie können, helfen Sie bitte, anstatt die Frage abzustimmen.

2
iSaumya

Nein, das wird nicht funktionieren. Zu dem Zeitpunkt, an dem WordPress mit der Auswertung des Shortcodes in Ihrem Inhalt beginnt, ist der Kopf der Site bereits zusammengestellt, sodass Sie keine Aktion mehr hinzufügen können.

Ein Blick auf die Ausführungsreihenfolge von Hooks gibt Ihnen einen Anhaltspunkt dafür.

Zunächst müssen Sie das Echo von Skripten vermeiden. Vielmehr ist wp_enqueue_script (identisch mit wp_enqueue_style) die Methode, mit der Sie Konflikte zwischen Skripten vermeiden möchten. Da sich die Skripte im Kopf befinden, möchten Sie, dass Ihre Aktion deklariert wird, bevor wp_head aufgerufen wird. Da Sie Informationen aus einem Beitrag extrahieren müssen, müssen Sie sich einhaken, nachdem WP weiß, welcher Beitrag sich auf dieser Seite befindet. Dieser Haken ist wp . Hier müssen Sie den Inhalt des Beitrags vorab auswerten, um den entsprechenden Shortcode mit regex zu extrahieren. In etwa sieht Ihre Funktion so aus:

add_action ('wp', 'add_shortcode_script');

function add_shortcode_script () {
  global $post;
  ... use regex to scan $post->$post_content for your shortcode
  ... and extract $value2 and $value3
  wp_enqueue_script (...vars based on $value2...);
  wp_enqueue_style (...vars based on $value3...);
}

Oben ist, was Sie brauchen, wenn der Shortcode das Hinzufügen einer CSS/JS-Datei anzeigt. In Ihrem Beispiel fügen Sie nur ein Snippet hinzu, das angeblich das Verhalten einer Haupt-CSS/JS-Datei verändert. Das heißt, Sie sollten wp_add_inline_script und wp_add_inline_style verwenden. Der letzte Teil des Codes wird dann:

  wp_enqueue_script ('my_script','http:/.../main.js');
  wp_enqueue_style ('my_style','http:/.../main.css');
  wp_add_inline_script ('my_script', $string_based_on_value2);
  wp_add_inline_style ('my_style', $string_based_on_value3);
1
cjbj

Wenn Sie darüber nachdenken, wird wp_head bereits ausgelöst, wenn Ihr Shortcode analysiert wird (der Inhalt der Posts kommt viel später als der <head> der Seite). Das wird also nicht funktionieren.

(Siehe diese Frage für den WordPress-Ladevorgang)

Sie können das JS & CSS entweder direkt dort ausdrucken (laut HTML-Spezifikation nicht zulässig, aber der Browser versteht es einwandfrei) oder alles in die Fußzeile verschieben.

1
swissspidy