web-dev-qa-db-fra.com

Comment utiliser la fonctionnalité "lien de navigation" intégrée à 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 l'édition d'un article ou d'une page normale (lorsque vous cliquez sur la petite icône de lien et que vous obtenez le AJAX fonctionnalité de recherche dans la fenêtre contextuelle). Est-ce que quelqu'un sait comment je fonctionne? J'ai un bouton HTML que je voudrais attacher et cliquer sur, et un champ pour la valeur à entrer.

Dans class-wp-editor.php, j'ai trouvé quelques éléments intéressants 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 le moment, car le JS qui fait référence à cette variable me semble fou.

Voulez-vous me diriger dans la bonne direction? J'adorerais que cela fonctionne, cela créera une interface utilisateur géniale pour mes widgets!

enter image description here

------modifier-------

Pas beaucoup de code jusqu'à présent, mis à 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 supposée déclencher l'ouverture du script de lien;

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

J'appelle le dialogue de liaison dans 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 appeler la boîte de lien en commençant par la recherche du js requis, puis en interagissant avec les méthodes de fichiers wp-link js.

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

1/wp_enqueue_script( 'wp-link' );

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

3/Invoquer un 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 en file d'attente les scripts. Ajoutez ce qui suit à votre fichier functions.php et ajustez les noms de fichiers/chemins d’accès en conséquence.

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.

2
Dale Sattler

RE: "Comment le ferais-tu? (À peu près?)"

Premièrement, je le construirais de la même manière que la fonctionnalité de lien dans WordPress: un champ de saisie de texte, les résultats, sélectionner une fonctionnalité et soumettre le bouton (ajouter un lien).

Ajax - il se déclenche lorsque du texte est entré dans l'entrée, renvoyant un ensemble de résultats basé sur le terme recherché. Regardez ce que nous avons fait avec notre plugin de recherche rapide , WP Jarvis. Il vous suffit de configurer l'appel ajax pour cibler ajaxurl (admin-ajax.php) et de définir un crochet d'action dans votre php pour exécuter la requête et afficher les résultats au format JSON. Vous voudriez que les résultats incluent le titre, le post-type et le lien permanent pour chaque résultat. En savoir plus sur ajax dans les plugins .

Enfin, la sélection du résultat qui vous intéresse capturera le lien permanent de l’objet json et l’insérera dans le champ du widget.

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

0
MikeNGarrett