wplink 대화 상자에 사용자 정의 옵션 추가

나는 이미지가있는 사용자 정의 옵션 선택을 추가했습니다.

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

이제 링크에 대해서도 거의 동일하게해야합니다. 따라서 클릭 Pages -> Add New -> Insert / Edit Link하면 다음을 얻습니다.

해당 링크에 다른 옵션 선택 필드를 추가 할 수 있습니까? 그렇게하는 방법?

대화 상자 HTML은 WP_Editors::wp_link_dialog()거기 에서 온 것이지만 후크는 없습니다.

우리는 대신에 링크 대화 상자에 사용자 정의 HTML을 추가 할 jQuery를 사용하여 예를 오버라이드 (override)을 시도 할 수 wpLink.getAttrs()는 매우 짧은이기 때문에, ;-)

데모 예 :

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

방금 빠른 테스트를 수행했는데 작동하는 것 같지만 링크를 업데이트 할 때 추가 테스트 및 조정이 필요합니다. 여기에 내가 해낸 오래된 해킹 이 새로 고침이 필요할 수 있습니다.

최신 정보

rel="nofollow"링크 대화 상자에 옵션 을 추가하려는 것 같으 므로 해당 경우에 대한 위의 접근 방식을 업데이트하십시오.

다음 rel과 같이 링크 속성을 추가합니다 .

/**
 * 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' : ''
    };
}

경우 rel속성이 비어 후 자동으로 편집기에있는 링크에서 제거됩니다.

그런 다음 wplink-open링크 대화 상자가 열릴 때 발생 하는 이벤트에 연결할 수 있습니다 . 여기에서 사용자 정의 HTML을 삽입하고 현재 링크 선택에 따라 업데이트 할 수 있습니다.

$(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 );
    }

});

여기서 getLink()핵심 함수를 기반으로 다음과 같은 도우미 함수를 사용 하여 선택한 링크의 HTML을 가져옵니다.

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

출력은 다음과 같습니다.

다음 HTML로 :

추신 : 이것은 더 테스트 할 수 있으며 번역을 지원하기 위해 확장 될 수도 있습니다

핵심을 살펴보면 wp_link_dialog함수 에 필터 나 동작이 전혀 없으므로 인생을 더 쉽게 만들 수 있습니다 ...

다른 사람들이이 문제를 어떻게 해결했는지 조사해 보면 원하는대로 거의 같은 플러그인 을 사용할 수 있습니다. 기본적으로 wplink.js를 등록 취소하고 이번에 wp_deregister_script('wplink');는 원하는 추가 필드를 포함하여 수정 된 버전의 파일을 다시 등록합니다.

이것이 최선의 방법이라고 생각하지는 않지만 (WordPress를 업데이트하는 동안 가능한 후속 충돌을 고려하여) 얻는 것이 가장 쉬운 방법이라고 생각합니다.

그것이 도움이되기를 바랍니다!