Adicionar opções personalizadas à caixa de diálogo wplink


16

Consegui adicionar uma opção personalizada - selecionar imagens com

function attachment_field_credit( $form_fields, $post ) {
    $field_value = get_post_meta( $post->ID, 'first_image', true );
    $isSelected1 = $field_value == '1' ? 'selected ' : '';
    $isSelected2 = $field_value != '1' ? 'selected ' : '';
    $form_fields['first_image'] = array(
        'label' => __( 'Use as first image' ),
        'input' => 'html',
        'html' => "<select name='attachments[{$post->ID}][first_image]' id='attachments[{$post->ID}][first_image]'>
                    <option ".$isSelected1." value='1'>Yes</option>
                    <option ".$isSelected2."  value='2'>No</option>
                   </select>"
    );
    return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'attachment_field_credit', 10, 2 );

Agora eu preciso fazer quase o mesmo para os links. Então, se eu clicar em Pages -> Add New -> Insert / Edit Link, recebo o seguinte:

insira a descrição da imagem aqui

Posso adicionar outro campo de seleção de opção para esses links? Como fazer isso?

Respostas:


18

A caixa de diálogo HTML vem WP_Editors::wp_link_dialog()mas não há ganchos.

Em vez disso, poderíamos usar o jQuery para anexar o HTML personalizado à caixa de diálogo do link e tentar substituir, por exemplo wpLink.getAttrs(), o , porque é muito curto ;-)

Exemplo de demonstração:

jQuery( document ).ready( function( $ ) {
    $('#link-options').append( 
        '<div> 
            <label><span>Link Class</span>
            <select name="wpse-link-class" id="wpse_link_class">
                <option value="normal">normal</option>
                <option value="lightbox">lightbox</option>
           </select>
           </label>
       </div>' );

    wpLink.getAttrs = function() {
        wpLink.correctURL();        
        return {
            class:      $( '#wpse_link_class' ).val(),
            href:       $.trim( $( '#wp-link-url' ).val() ),
            target:     $( '#wp-link-target' ).prop( 'checked' ) ? '_blank' : ''
        };
    }
});

Acabei de fazer um teste rápido e parece funcionar, mas precisa de mais testes e ajustes ao atualizar os links. Aqui está um truque antigo que eu fiz que pode precisar de uma atualização.

Atualizar

Parece que você deseja adicionar a rel="nofollow"opção à caixa de diálogo do link, então vamos atualizar a abordagem acima para esse caso:

Nós adicionamos o relatributo link com:

/**
 * Modify link attributes
 */
wpLink.getAttrs = function() {
    wpLink.correctURL();        
    return {
        rel:        $( '#wpse-rel-no-follow' ).prop( 'checked' ) ? 'nofollow' : '',
        href:       $.trim( $( '#wp-link-url' ).val() ),
        target:     $( '#wp-link-target' ).prop( 'checked' ) ? '_blank' : ''
    };
}

Se o relatributo estiver vazio, ele será automaticamente removido do link no editor.

Em seguida, podemos nos conectar ao wplink-openevento que é acionado quando a caixa de diálogo do link é aberta. Aqui, podemos injetar nosso HTML personalizado e atualizá-lo de acordo com a seleção de links atual:

$(document).on( 'wplink-open', function( wrap ) {

    // Custom HTML added to the link dialog
    if( $('#wpse-rel-no-follow').length < 1 )
        $('#link-options').append( '<div> <label><span></span> <input type="checkbox" id="wpse-rel-no-follow"/> No Follow Link</label></div>');

    // Get the current link selection:
    var _node = wpse_getLink();

    if( _node ) {
        // Fetch the rel attribute
        var _rel = $( _node ).attr( 'rel' );

        // Update the checkbox
        $('#wpse-rel-no-follow').prop( 'checked', 'nofollow' === _rel );
    }

});

onde usamos a seguinte função auxiliar, com base na getLink()função principal, para obter o HTML do link selecionado:

function wpse_getLink() {
    var _ed = window.tinymce.get( window.wpActiveEditor );
    if ( _ed && ! _ed.isHidden() ) {
        return _ed.dom.getParent( _ed.selection.getNode(), 'a[href]' );
    } 
    return null;
}

Aqui está a saída:

opção de não seguir

com o seguinte HTML:

html

ps: isso pode ser testado ainda mais e também pode ser estendido para oferecer suporte a traduções


Eu gostei muito desta resposta porque parecia tão fácil. O problema, porém, não foi apenas a atualização de links, também se eu tivesse vários links no mesmo site, o valor continuaria sendo o último escolhido, mesmo que fosse de um link diferente. Ainda pode ser útil para alguém!
Caramba

Eu atualizei a resposta com um exemplo @caramba no-follow-link
birgire

Hey @birgire, como recuperar o valor de hrefse o usuário não abrir a caixa de diálogo, mas apenas usar a primeira caixa pop-up que possui o espaço reservado Paste URL or type to search:?
MinhTri 27/08

1
Acho que usei o mce_external_pluginsfiltro para carregar o arquivo de script ou o after_wp_tiny_mcegancho para injetar o trecho (com a parte anexada como uma sequência de linhas única), para testar isso. O getAttrsmétodo aqui substituirá apenas o valor da caixa de diálogo de configurações do link. Não examinei como substituir o valor da entrada embutida. Talvez substitua o wp_link_applycomando, se possível? Acho que isso pode ser uma boa nova pergunta ;-) @ Dan9
birgire

@birgire Obrigado! Finalmente, eu encontrei onde obtê-lo. O WordPress usa tinymce.ui.Control.extend.setUrlno plug-in wp-includes/js/tinymce/plugins/wplink/plugin.js.
MinhTri 27/08/16

3

Olhando para o núcleo, não há vestígios de nenhum filtro ou ação na wp_link_dialogfunção, o que tornaria sua vida mais fácil ...

Investigando como os outros resolveram esse problema, há um plugin que faz mais ou menos o mesmo que você deseja. Basicamente, ele cancela o registro do wplink.js wp_deregister_script('wplink');e registra novamente uma versão modificada do arquivo, desta vez incluindo o campo extra desejado.

Embora eu não pense que esse seja o melhor método (levando em consideração possíveis conflitos subseqüentes durante a atualização do WordPress), acho que é o mais fácil de obtê-lo.

Espero que ajude!


Obrigado pelas informações e link do plugin. Além disso, vou olhar para o plugin e ver como eles resolveram isso ...
caramba

Eu o resolvi olhando a fonte do plug-in mencionado nesta resposta, que pode ser encontrada no github github.com/ffsantos92/rel-nofollow-checkbox, se alguém precisar. Eu só tive que mudar 5 palavras ou então ...
caramba
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.