Bedingtes Einreihen des Skripts / Stylesheets eines Widgets in HEAD (nur wenn auf Seite vorhanden!)

13

Ich habe versucht, Skripte und Stile für ein WordPress-Widget unter den folgenden Bedingungen zu laden ...

  1. Die Skripte MÜSSEN in den HEAD geladen werden (sonst brechen sie).
  2. Die Skripte dürfen NUR geladen werden, wenn das Widget tatsächlich angezeigt wird (sie sind ziemlich schwer).

Ich habe viel gesucht, und dies scheint ein häufiges (ungelöstes) Problem zu sein ... aber ich hoffe, dass jemand hier eine Problemumgehung erfolgreich implementiert hat.

Das ist das Beste, was ich bisher habe ...

Das folgende einfache Widget druckt Text in die Seitenleiste. Es lädt erfolgreich jQuery bedingt (wenn das Widget tatsächlich angezeigt wird) ... allerdings immer nur in der Fußzeile! (Hinweis: Es funktioniert möglicherweise auch nur unter WordPress 3.3 , obwohl dieser Hack möglicherweise Abwärtskompatibilität bietet.)

class BasicWidget extends WP_Widget
{

    function __construct() {
        parent::__construct(__CLASS__, 'BasicWidget', array(
            'classname' => __CLASS__,
            'description' => "This is a basic widget template that outputs text to the sidebar"
        ));
    }

  function form($instance) {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
    $title = $instance['title'];
?>
  <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></label></p>
<?php
  }

  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = $new_instance['title'];
    return $instance;
  }

  function widget($args, $instance) {

    extract($args, EXTR_SKIP);

    echo $before_widget;
    $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);

    if (!empty($title))
      echo $before_title . $title . $after_title;;

    echo "<h1>This is a basic widget!</h1>";

    echo $after_widget;

        // if we're echoing out content, enqueue jquery.

        if (!empty($after_widget)) {
            wp_enqueue_script('jquery');
        }
    }
}
add_action( 'widgets_init', create_function('', 'return register_widget("BasicWidget");') );

Sobald WordPress mit der Bearbeitung von Widgets beginnt, ist es anscheinend zu spät, um die Warteschlange zu öffnen (oder sogar die Registrierung von zuvor eingereihten Elementen aufzuheben).

Irgendwelche Ideen wäre sehr dankbar!

Kennzeichen.

Mark Jeldi
quelle

Antworten:

15

Wordpress als nette Funktion is_active_widget, die Sie in Ihrem __construct verwenden können, und testen Sie, ob das Widget auf der aktuellen Seite vorhanden ist, und fügen Sie Ihre Skripte / Stile basierend auf diesem Beispiel hinzu:

function __construct() {
    parent::__construct(__CLASS__, 'BasicWidget', array(
        'classname' => __CLASS__,
        'description' => "This is a basic widget template that outputs text to the sidebar"
    ));
     if ( is_active_widget(false, false, $this->id_base) )
        add_action( 'wp_head', array(&$this, 'add_styles_and_scripts') );
}

function add_styles_and_scripts(){
    //since its wp_head you need to echo out your style link:
    echo '<link rel="stylesheet" href="http://example.com/css/style.css" type="text/css" />';
    //as for javascript it can be included using wp_enqueue_script and set the footer parameter to true:
    wp_enqueue_script( 'widget_script','http://example.com/js/script.js',array(),'',true );
}
Bainternet
quelle
Vielen Dank für Ihre Antwort, Bainternet! Ich habe gerade Ihren Code getestet und leider wird das Javascript zwar unter bestimmten Bedingungen geladen, es wird jedoch weiterhin in der Fußzeile geladen ... obwohl es in wp_head aufgerufen wird. Sehr eigenartig! (Übrigens macht es das immer noch ohne die "wahre" Fußzeile). Durch das Echo des Stylesheets wird es auch geladen, unabhängig davon, ob sich das Widget auf der Seite befindet. Irgendwelche Ideen?
Mark Jeldi
wp_headgenannt wird , nachdem die Kopf - Skripte bereits ausgedruckt , so dass es sie nur in der Fußzeile geladen wird , aber Sie können es echo (statt es en-Queuing) genauso wie das Stylesheet echo '<script src="path/to/script.js"></script>';und wie für das Stylesheet, es ist nicht möglich , dass seine loaded ist die Widgets ist nicht aktiv
Bainternet
versuchen Sie es mit wp_enqueue_scriptsanstatt wp_headin Ihrer Aktion. Auf diese Weise können Sie das Javascript entweder in die Kopf- oder Fußzeile einfügen. http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Nick
Danke, Nick! Ich habe versucht, wp_enqueue_scripts, und während es das Javascript in den Kopf lädt, wird es nicht bedingt geladen.
Mark Jeldi
0

Alternativ können Sie das Plug-In "Widget Logic" verwenden. Es verwendet bedingte Anweisungen für das Laden des Widgets.

Das ist ganz anders herum gedacht - aber das Ergebnis sollte wie erwartet sein.

wp_print_scripts & wp_print_styles sind möglicherweise die richtigen Hooks. Fügen Sie diesen Hooks einfach Aktionen mit der Priorität 100 hinzu, um die allerletzten in der Warteschlange zu sein. wp_enqueue_script (), wp_enqueue_style (), wp_deregister_script (), wp_deregister_style () ...

Ihren Problemen mit dem obigen Code fehlt möglicherweise der Prioritätsparameter (nicht getestet)? WP-Kodex

Martin Zeitler
quelle
Vielen Dank, Syslogic! Ich habe Widget Logic auch ausprobiert und gedacht, ich könnte mich in den widget_content-Filter einklinken. Leider kein glück Es verwendet ob_start, um die Widget-Ausgabe zu puffern, damit Sie sie bearbeiten können, bevor sie auf den Bildschirm gedruckt wird. Dies geschieht jedoch immer noch zu spät, um etwas im Kopf abzufeuern. Es sei denn, Sie kennen möglicherweise eine Problemumgehung?
Mark Jeldi
Vielleicht eine Kombination aus Bainternets Lösung, die mit der Widget-Logik in Ordnung zu sein scheint? So können Sie festlegen, welches Widget wohin geladen werden soll - und was geladen werden soll. Das Hinzufügen eigener bedingter Anweisungen zur functions.php eines Themas kann dazu beitragen, sich weiter zu verbessern.
Martin Zeitler
-1

Sie können einfach wp_enqueue_script oder wp_enqueue_style in der Widget-Methode (Funktion) in Ihrer benutzerdefinierten Widget-Klasse verwenden. Die Skripts werden nur geladen, wenn das Widget aktiv ist. Details und Beispiel finden Sie hier: https://wpshed.com/wordpress/load-scripts-styles-widget-active/

iStefan
quelle
Nur-Link-Antworten sind einfach schlecht, da Links mit der Zeit brechen. Sie sollten zumindest zusammenfassen, was in dem Link steht. In jedem Fall ist das einfach falsch, da das OP die Skripte in der Kopfzeile der Seite benötigt.
Mark Kaplun
function widget( $args, $instance ) { wp_enqueue_script( 'wpshed-front-end', plugin_dir_url( __FILE__ ) . 'wpshed-front-end.js', array( 'jquery' ), '1.0.0', false ); }Das "false" am und bezieht sich auf das Laden des Skripts in Kopf- oder Fußzeile. Um es noch einmal zusammenzufassen, verwenden Sie wp_enqueue_script oder wp_enqueue_style in der Widget-Methode (Funktion) . So machen es Entwickler von WordPress.com/org.
iStefan
Der Kommentar sollte eine Bearbeitung der Antwort sein;) aber wenn das Widget "angezeigt" wird, haben Sie bereits den Kopfteil der Seite erstellt und können daher JS itno nicht in die Warteschlange einreihen.
Mark Kaplun