Comment puis-je utiliser la fonctionnalité intégrée de «lien de navigation» de Wordpress?

Je suis en train de coder un widget et j'aimerais que l'utilisateur puisse choisir un lien comme vous le pouvez lors de la modification d'un article ou d'une page ordinaire (lorsque vous cliquez sur la petite icône de lien et que vous obtenez la fonctionnalité de recherche AJAX dans la fenêtre contextuelle ). Est-ce que quelqu'un sait comment je fais fonctionner ça? J'ai un bouton HTML que je voudrais attacher et même cliquer, et un champ pour la valeur à entrer.

Dans class-wp-editor.php, j'ai trouvé quelques choses intéressantes et je me suis demandé si je pourrais avoir besoin de ces fichiers ..?

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

En appelant fullscreen.link();, comme le fichier mentionné ci-dessus, j'obtiens cette erreur:

Uncaught ReferenceError: wpActiveEditor is not defined

..et je suis perplexe pour l'instant, car le JS qui référence cette variable me semble fou.

Voulez-vous me diriger dans la bonne direction? J'adorerais que cela fonctionne, cela fera une interface utilisateur tueur pour mes widgets!

------Éditer-------

Pas beaucoup de code jusqu'à présent, à part les inclusions de script que j'ai déjà mentionnées;

<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>

..la partie du JS qui est censée déclencher l'ouverture du script de lien;

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

J'invoque le dialogue de liaison au sein de la classe de métabox que j'utilise pour le développement. C'est un peu hacky mais peut être fait jusqu'à ce que quelque chose de plus robuste soit développé.

Vous pouvez invoquer la zone de lien en activant d'abord les js requis, puis en interagissant avec les méthodes de fichiers wp-link js.

Assurez-vous d'avoir mis wp-link en file d'attente

1 / wp_enqueue_script( 'wp-link' );

2 / Configurez votre interface utilisateur. J'utilise généralement un bouton pour appeler la boîte de dialogue de lien et un champ de texte pour gérer l'URL des liens.

3 / Invoquer le dialogue de lien

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 // mettre les scripts en file d'attente. Ajoutez ce qui suit à votre fichier functions.php et ajustez les noms de fichier / chemins d'accès en fonction.

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' );

Devrait le faire. J'utilise la même approche dans ma classe metabox et cela semble fonctionner correctement.

RE: "Comment feriez-vous? (À peu près?)"

Tout d'abord, je le construirais de manière similaire à la fonctionnalité de lien dans WordPress: un champ de texte de saisie, des résultats, une fonctionnalité de sélection et un bouton d'envoi (ajouter un lien).

Ajax - cela se déclenche lorsque du texte est entré dans l'entrée, renvoyant un ensemble de résultats basé sur le terme de recherche. Jetez un œil à ce que nous avons fait avec notre plugin de recherche rapide , WP Jarvis. Vous avez juste besoin de configurer l'appel ajax pour cibler ajaxurl (admin-ajax.php) et définir un hook d'action dans votre php pour exécuter la requête et faire écho aux résultats au format json. Vous souhaitez que les résultats incluent le titre, le post-type et le permalien pour chaque résultat. En savoir plus sur ajax dans les plugins .

Enfin, la sélection du résultat qui vous intéresse récupérerait le permalien de l'objet json et l'insérerait dans le champ du widget.

Je sais que ce n'est pas une réponse complète, mais j'espère que cela vous aidera.