Das Laden einer externen Seitenvorlage und eines Warteschlangenskripts vom Plugin verursacht einen verbotenen Fehler

7

Ich habe ein Plugin, das auf der folgenden Seite ein Panel erstellt:

mysite.com/wp-content/plugins/myplugin/includes/mypanel.php

Ich möchte dieses Panel auf der folgenden Seite verwenden

mysite.com/mypanel

Die Lösung, die ich versucht habe, war die Verwendung mypanel.phpals Seitenvorlage wie folgt:

add_filter( 'page_template', 'wpa3396_page_template' );
function wpa3396_page_template( $page_template )
{
    if ( is_page( 'mypanel' ) ) {
        $page_template = dirname( __FILE__ ) . '/includes/mypanel.php';
    }
    return $page_template;
}

Auf diese Weise wird die Seite angezeigt, aber kein Javascript funktioniert. Also habe ich versucht, das Javascript des Plugins in Funktionen PHP zu importieren.

add_action('wp_enqueue_scripts','Load_Template_Scripts_wpa83855');
function Load_Template_Scripts_wpa83855(){

    if ( strpos(get_page_template(), 'mypanel.php') !== false ) {
        wp_enqueue_script('wtd', $_SERVER['DOCUMENT_ROOT'].'/wp-content/plugins/myplugin/js/wtd.js');
    }

}

Was zu 403 verbotenen Fehlern führte. Ich habe versucht, einen .htaccess-Ordner zur Seite des Plugins hinzuzufügen, aber es gab weiterhin Fehler.

Bitte sagen Sie mir, wie Sie dieses Problem richtig lösen können.

EDIT: Nach einigen Antworten unten (danke an alle). Ich habe meine Codes auf die Seite meines Plugins verschoben und keinen verbotenen Fehler mehr. Aber meine Schaltflächen funktionieren nicht und ich habe das Gefühl, dass meine JS-Datei nicht über die Seite läuft.

Meine js-Datei beginnt mit: jQuery(document).ready(function()

Hier der endgültige Code auf der Plugin-Seite:

/* Make tisort-tasarla page as template */
add_filter( 'page_template', 'wpa3396_page_template' );
function wpa3396_page_template( $page_template )
{
    if ( is_page( 'tisort-tasarla' ) ) {
        $page_template = dirname( __FILE__ ) . '/includes/tshirt-designer-design-template.php';
    }
    return $page_template;
}
/* Add Javascript to T-Shirt Design Page */

add_action('wp_enqueue_scripts','Load_Template_Scripts_wpa83855');
function Load_Template_Scripts_wpa83855(){

    if ( is_page( 'tisort-tasarla' ) ) {
        wp_enqueue_script( 'wtd', plugins_url( '/js/wtd.js' , __FILE__ ), array( 'jquery' ));        
    }    
}
HOY
quelle
Sind Sie sicher, dass Ihr Server den Zugriff auf Ihr Skript nicht über eine .htaccessDatei blockiert ? Versuchen Sie auch plugins url(), den Pfad zu Ihrem Plugins-Verzeichnis abzurufen und zu prüfen, ob dies hilfreich ist.
Jack Johansson
1
Hallo, warum denkst du, wird plugins_url funktionieren? Es gibt nur den Pfad als Zeichenfolge zurück, nicht wahr? @ JackJohansson, ich habe die folgende Lösung versucht: stackoverflow.com/a/37559573/1235655
HOY
1
Hallo. Der absolute Pfad und die URL werden vom Server unterschiedlich angegangen. Wie Sie sehen können, gibt es bereits 2 Antworten auf Ihre Frage, die auf meinem Kommentar basieren. Ich schlage daher vor, dass Sie es versuchen und die Frage mit den Ausgabeergebnissen aktualisieren.
Jack Johansson

Antworten:

5

Ihr CODE ist in Ordnung. Der Grund für die Fehlermeldung 403 ist, dass $_SERVER['DOCUMENT_ROOT']der absolute Pfad an Ihr Webstamm und nicht an die URL zurückgegeben wird.

JavaScript muss als URL hinzugefügt werden. Sie können also die Load_Template_Scripts_wpa83855Funktion in Ihrem Plugin verwenden und dann Folgendes verwenden:

wp_enqueue_script( 'wtd', plugins_url( '/js/wtd.js' , __FILE__ ) );

CODE zum Hinzufügen von JavaScript.

Hinweis: Natürlich können Sie den CODE noch besser machen, indem Sie eine Logik verwenden, wie sie @nathan in seiner Antwort verwendet hat , dh hinzufügen:

add_action('wp_enqueue_scripts','Load_Template_Scripts_wpa83855');

innerhalb der wpa3396_page_template()Funktion im if ( is_page( 'mypanel' ) ) {}Bedingungsblock; aber das ist nicht der Grund des Fehlers. Auf den Serverpfad kann nicht über den Browser zugegriffen werden. Aus diesem Grund gibt der Server einen Access ForbiddenFehler zurück.

Vollständiger CODE (aktualisiert):

Hier ist der vollständige CODE für Ihre Bequemlichkeit (fügen Sie ihn in Ihre Haupt-Plugin-Datei ein):

add_filter( 'page_template', 'wpse_262042_page_template' );
function wpse_262042_page_template( $page_template ) {
    if( is_page( 'mypanel' ) ) {
        add_action( 'wp_enqueue_scripts', 'wpse_262042_enqueue_scripts' );
        $page_template = plugin_dir_path( __FILE__ ) . 'includes/mypanel.php';
    }
    return $page_template;
}

function wpse_262042_enqueue_scripts() {
    wp_enqueue_script( 'wtd', plugins_url( 'js/wtd.js' , __FILE__ ), array( 'jquery' ) );
}
Fayaz
quelle
403 Fehler ist weg, aber nichts ist passiert, Schaltflächen funktionieren nicht, meine js-Datei beginnt wie folgt: jQuery (document) .ready (function () ... bedeutet das, dass es nicht funktioniert, wenn ich es später manuell hinzufüge? Wie Kann ich das überwinden?
HOY
Sie müssen Ihr Skript auch nach jQuery laden. Sie können dies tun mit : wp_enqueue_script( 'wtd', plugins_url( '/js/wtd.js' , __FILE__ ), array( 'jquery' ) );. Dieser CODE weist WordPress an, Ihr Skript nach jQuery zu laden. Außerdem plugins_url()funktioniert die Funktion in der functions.phpDatei Ihres Themas nicht . Fügen Sie diesen CODE in Ihre Haupt-Plugin-Datei ein, wie ich bereits sagte.
Fayaz
Ich habe verwendet, wie Sie erwähnt haben, aber es hat sich nicht ausgewirkt. Können Sie bitte die BEARBEITUNG überprüfen, die ich zu meiner Frage unten vorgenommen habe? Wenn mir etwas fehlt? @ Fayaz
HOY
1
Ihr CODE sollte funktionieren, wenn: (1) Sie alle Dateien und CODE an den richtigen Stellen haben (2) Ihr JavaScript fehlerfrei ist (überprüfen Sie die Konsole und zeigen Sie die Quelle an, wenn die JS-Datei geladen wird) (3) Ihre /includes/tshirt-designer-design-template.phpVorlagendatei enthält Rufen Sie die wp_head()WordPress-Funktion kurz vor dem HTML-Ending- </head>Tag auf und wp_footer()rufen Sie kurz vor dem Ending- </body>Tag auf. Ohne diese beiden Funktionen werden Kopf- und Fußzeilenskripte und -stile nicht geladen.
Fayaz
1

Wenn Sie bereits eine Seite namens "mypanel" haben oder haben möchten, können Sie den page_templateFilter verwenden, um die auf dieser Seite verwendete Vorlage zu filtern. Ich gehe davon aus, dass Sie das tun.

Wir können den page_templateFilter verwenden, um eine benutzerdefinierte Vorlage für diese Seite zu verwenden. Bei Verwendung dieses Filters können wir eine Aktion hinzufügen, um für diese Seite spezifische Skripte in die Warteschlange zu stellen.

add_filter( 'page_template', 'wpse_262042_page_template', 10, 1 );
function wpse_262042_page_template( $page_template ) {
  if( is_page( 'mypanel' ) ) {
    add_action( 'wp_enqueue_scripts', 'wpse_262042_enqueue_scripts' );
    $page_template = plugin_dir_path( __FILE__ ) . 'includes/mypanel.php';
  }
  return $page_template;
}
function wpse_262042_enqueue_scripts() {
  wp_enqueue_script( 'wpse-262042', plugins_url( '/js/wpse-262042.js', __FILE__ ) );
}

In der /includes/mypanel.phpTemplate - Datei, stellen Sie sicher anrufen wp_head()und wp_footer()ansonsten die Warteschlange eingereiht Skripten werden nicht gedruckt.

Nathan Johnson
quelle
1
Bitte korrigieren Sie Ihren CODE, $page_templatemuss Pfad sein, nicht URL.
Fayaz