Como posso usar o recurso interno do Wordpress?

9

Estou codificando um widget e gostaria que o usuário escolhesse um link como você pode ao editar postagens ou páginas comuns (quando você clica no ícone do pequeno link e obtém a funcionalidade de pesquisa AJAX em o pop up). Alguém sabe como eu faço isso funcionar? Eu tenho um botão HTML que eu gostaria de anexar e clicar mesmo para, e um campo para o valor entrar.

No class-wp-editor.php eu encontrei algumas coisas interessantes, e me perguntei se eu poderia precisar desses arquivos ..?

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

Ao chamar fullscreen.link(); , como o arquivo mencionado acima, recebo este erro:

Uncaught ReferenceError: wpActiveEditor is not defined

.. e estou perplexo por enquanto, porque o JS que faz referência a essa variável parece loucura para mim.

Cuidado para me apontar na direção certa? Eu adoraria ter esse trabalho, ele fará uma interface de usuário matadora para meus widgets!

------editar-------

Nãohátantocódigoatéomomento,alémdasinclusõesdescriptquemencioneianteriormente;

<labelfor="<?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>

.. a parte do JS que deve acionar o script de link para abrir;

linkBrowserButton.on("click", function(e){
    e.preventDefault();
    fullscreen.link();
});
    
por Dan 19.12.2013 / 19:20

2 respostas

2

Eu invoco o diálogo de link dentro da classe metabox que uso para desenvolvimento. É um pouco hacky, mas pode ser feito, até que algo mais robusto seja desenvolvido.

Você pode invocar a caixa de links primeiro inserindo os js necessários e, em seguida, interagindo com os métodos dos arquivos js do wp-link.

Verifique se você enfileirou o wp-link

1 / wp_enqueue_script( 'wp-link' );

2 / Configure seu ui. Eu costumo usar um botão para invocar o diálogo de link e um campo de texto para lidar com a URL dos links.

3 / Invocar diálogo de links

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 // scripts de enfileiramento. Adicione o seguinte ao seu arquivo functions.php e ajuste os nomes / caminhos dos arquivos para se adequar.

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

Deveria fazer isso. Eu uso a mesma abordagem na minha classe metabox e parece funcionar bem.

    
por Dale Sattler 25.02.2014 / 02:17
0
  

RE: "Como você faria isso (mais ou menos?)"

Primeiro, eu criaria de forma semelhante à funcionalidade de link no WordPress: Um campo de texto de entrada, resultados, funcionalidade de seleção e botão enviar (adicionar link).

Ajax - isso é acionado quando o texto é inserido na entrada, retornando um conjunto de resultados com base no termo de pesquisa. Dê uma olhada no que fizemos com nosso plugin de busca rápida , WP Jarvis. Você só precisa configurar a chamada do ajax para direcionar ajaxurl (admin-ajax.php) e definir um gancho de ação em seu php para executar a consulta e ecoar os resultados no formato json. Você deseja que os resultados incluam title, post-type e permalink para cada resultado. Leia mais sobre ajax em plug-ins .

Finalmente, selecionando o resultado em que você está interessado, você pode pegar o permalink do objeto json e inserir no campo do widget.

Eu sei que esta não é uma resposta completa, mas espero que isso ajude.

    
por MikeNGarrett 14.01.2014 / 18:22