Wie kann ich die integrierte WordPress-function “Link durchsuchen” verwenden?

Ich kodiere ein Widget und möchte, dass der Benutzer einen Link auswählen kann, wie er es beim Bearbeiten von regulären Beiträgen oder Seiten tun kann (wenn Sie auf das kleine Link-Symbol klicken und die AJAX-Suchfunktion im Popup-Fenster erscheint) ). Weiß jemand, wie ich das funktioniere? Ich habe eine HTML-Schaltfläche, die ich anhängen möchte und klicke auf sogar, und ein Feld für den Wert zu gehen.

In class-wp-editor.php fand ich ein paar interessante Dinge und fragte mich, ob ich diese Dateien brauchen könnte ..?

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

Beim Aufruf von fullscreen.link(); , wie die oben erwähnte Datei, bekomme ich diesen Fehler:

Uncaught ReferenceError: wpActiveEditor is not defined

..und ich bin ratlos, denn das JS, das auf diese Variable verweist, sieht für mich verrückt aus.

Möchten Sie mich in die richtige Richtung weisen? Ich würde liebend gerne funktionieren, es wird eine Killer-Benutzeroberfläche für meine Widgets machen!

Bildbeschreibung hier eingeben

——bearbeiten——-

Nicht so viel Code bisher, abgesehen von den Skripteinschlüssen, die ich zuvor angegeben habe;

 <label for="get_field_name('link'); ?>">Link URL (including http://) :  <input type="text" id="get_field_id('link'); ?>" name="get_field_name('link'); ?>" value="" class="widefat" />  

..der Teil des JS, der das zu öffnende Link-Skript auslösen soll;

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

Solutions Collecting From Web of "Wie kann ich die integrierte WordPress-function “Link durchsuchen” verwenden?"

Ich rufe den Link-Dialog innerhalb der Metabox-class auf, die ich für die Entwicklung verwende. Es ist ein bisschen Hacky aber kann getan werden, bis etwas robuster entwickelt wird.

Sie können das Verknüpfungsfeld aufrufen, indem Sie zuerst die erforderliche js einbinden und dann mit den Methoden der wp-link js-Dateien interagieren.

Stellen Sie sicher, dass Sie wp-link eingereiht haben

1 / wp_enqueue_script( 'wp-link' );

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

3 / Link-Dialog 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 // Scripte in Warteschlange stellen. Fügen Sie Ihrer Datei functions.php Folgendes hinzu und passen Sie die Dateinamen / Pfade entsprechend 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-class und es scheint OK zu funktionieren.

RE: “Wie würdest du es machen? (Grob?)”

Zuerst würde ich es ähnlich wie die Link-functionalität in WordPress erstellen: Ein Eingabe-Textfeld, Ergebnisse, function auswählen und Schaltfläche (Link hinzufügen).

Ajax – dies würde ausgetriggers werden, wenn Text in die Eingabe eingegeben wird, wobei die Ergebnismenge basierend auf dem Suchbegriff zurückgegeben wird. Schauen Sie sich an, was wir mit unserem Quicksearch-Plugin WP Jarvis gemacht haben. Sie müssen nur den Ajax-Aufruf einrichten, um auf ajaxurl (admin-ajax.php) zu zielen, und einen Aktions-Hook in Ihrem PHP einrichten, um die Abfrage auszuführen und die Ergebnisse im JSON-Format zu senden. 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 Widgetfeld eingefügt.

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