it-swarm.com.de

Wie kann ich die in Wordpress integrierte Funktion zum Durchsuchen von Links verwenden?

Ich programmiere ein Widget und möchte, dass der Benutzer beim Bearbeiten eines normalen Beitrags oder einer Seite einen Link wie Sie auswählen kann (wenn Sie auf das kleine Link-Symbol klicken und das AJAX erhalten). Suchfunktion im Popup). Weiß jemand, wie ich das zum Laufen bringe? Ich habe eine HTML-Schaltfläche, die ich anhängen und darauf klicken möchte, und ein Feld, in das der Wert eingegeben werden kann.

In class-wp-editor.php habe ich ein paar interessante Dinge gefunden und mich gefragt, ob ich diese Dateien vielleicht brauche.

wp_enqueue_script('wp-fullscreen');
wp_enqueue_script('wplink');

Beim Aufruf von fullscreen.link(); erhalte ich wie in der oben genannten Datei den folgenden Fehler:

Uncaught ReferenceError: wpActiveEditor is not defined

..und ich bin erstmal ratlos, weil das JS, das auf diese Variable verweist, für mich verrückt aussieht.

Möchtest du mich in die richtige Richtung lenken? Ich würde es lieben, wenn dies funktioniert. Es wird eine umwerfende Benutzeroberfläche für meine Widgets sein!

enter image description here

------bearbeiten-------

Bisher nicht so viel Code, abgesehen von den Skript-Einschlüssen, die ich zuvor angegeben habe.

<label for="<?php echo $this->get_field_name('link'); ?>">Link URL (including http://) : </label>
<input type="text" id="<?php echo $this->get_field_id('link'); ?>" name="<?php echo $this->get_field_name('link'); ?>" value="<?php if(isset($link)) echo esc_attr($link); ?>" class="widefat" />
<button class="secondary" id="choose_link">Link Browser</button>

..der Teil des JS, der das Öffnen des Link-Skripts auslösen soll;

linkBrowserButton.on("click", function(e){
    e.preventDefault();
    fullscreen.link();
});
9
Dan

Ich rufe den Link-Dialog in der Metabox-Klasse auf, die ich für die Entwicklung verwende. Es ist ein bisschen kitschig, aber es kann getan werden, bis etwas mehr robust entwickelt wird.

Sie können das Linkfeld aufrufen, indem Sie zuerst die erforderlichen js einreihen und dann mit den js-Dateimethoden von wp-link interagieren.

Stellen Sie sicher, dass Sie wp-link in die Warteschlange gestellt haben

1/wp_enqueue_script( 'wp-link' );

2/Richten Sie Ihre Benutzeroberfläche ein. Normalerweise benutze ich eine Schaltfläche, um den Linkdialog aufzurufen, und ein Textfeld, um die Link-URL zu bearbeiten.

3/Verbindungsdialog aufrufen

var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

var link_btn = (function($){
'use strict';
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.

/* PRIVATE METHODS
-------------------------------------------------------------- */
//add event listeners

function _init() {
    $('body').on('click', '.lm-link-button', function(event) {
        _addLinkListeners();
        _link_sideload = false;

        var link_val_container = $('#your_input_field');

        if ( typeof wpActiveEditor != 'undefined') {
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        } else {
            window.wpActiveEditor = true;
            _link_sideload = true;
            wpLink.open();
            wpLink.textarea = $(link_val_container);
        }
        return false;
    });

}

/* LINK EDITOR EVENT HACKS
-------------------------------------------------------------- */
function _addLinkListeners() {
    $('body').on('click', '#wp-link-submit', function(event) {
        var linkAtts = wpLink.getAttrs();
        var link_val_container = $('#your_input_field');
        link_val_container.val(linkAtts.href);
        _removeLinkListeners();
        return false;
    });

    $('body').on('click', '#wp-link-cancel', function(event) {
        _removeLinkListeners();
        return false;
    });
}

function _removeLinkListeners() {
    if(_link_sideload){
        if ( typeof wpActiveEditor != 'undefined') {
            wpActiveEditor = undefined;
        }
    }

    wpLink.close();
    wpLink.textarea = $('html');//focus on document

    $('body').off('click', '#wp-link-submit');
    $('body').off('click', '#wp-link-cancel');
}

/* PUBLIC ACCESSOR METHODS
-------------------------------------------------------------- */
return {
    init:       _init,
};

})(jQuery);


// Initialise
jQuery(document).ready(function($){
 'use strict';
 link_btn.init();
});

4 // Skripte einreihen. Fügen Sie Ihrer functions.php-Datei Folgendes hinzu und passen Sie die Dateinamen/-pfade an.

function linkbtn_enqueue() {
    //register script
    wp_register_script('link_btn',get_template_directory_uri() . '/js/link_btn.js', array('jquery'), '1.0', true);
    //now load it
    wp_enqueue_script( 'link_btn');
}

 add_action( 'admin_enqueue_scripts', 'linkbtn_enqueue' );

Sollte es tun. Ich benutze den gleichen Ansatz in meiner Metabox-Klasse und es scheint in Ordnung zu funktionieren.

2
Dale Sattler

RE: "Wie würdest du das machen? (Grob?)"

Erstens würde ich es ähnlich wie die Link-Funktionalität in WordPress erstellen: Ein Eingabetextfeld, Ergebnisse, Funktionalität auswählen und Senden (Link hinzufügen).

Ajax - Dies würde ausgelöst, wenn Text in die Eingabe eingegeben wird, und eine Reihe von Ergebnissen basierend auf dem Suchbegriff zurückgeben. Schauen Sie sich an, was wir mit unserem QuickSearch-Plugin , WP Jarvis gemacht haben. Sie müssen nur den Ajax-Aufruf einrichten, um Ajaxurl (admin-ajax.php) als Ziel festzulegen, und einen Aktions-Hook in Ihrem PHP einrichten, um die Abfrage auszuführen und die Ergebnisse im json-Format auszugeben. Sie möchten, dass die Ergebnisse Titel, Post-Typ und Permalink für jedes Ergebnis enthalten. Lesen Sie mehr über Ajax in Plugins .

Wenn Sie das gewünschte Ergebnis auswählen, wird der Permalink aus dem json-Objekt abgerufen und in das Widget-Feld eingefügt.

Ich weiß, dass dies keine vollständige Antwort ist, aber ich hoffe, dass dies hilft.

0
MikeNGarrett