Wplink डायलॉग में कस्टम विकल्प जोड़ें

Question

मैं छवियों के लिए एक कस्टम विकल्प-चयन जोड़ने में कामयाब रहा

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इस पर क्लिक करता हूं तो मुझे यह मिलेगा:

क्या मैं उन लिंक के लिए एक और विकल्प-चयन फ़ील्ड जोड़ सकता हूँ? उसको कैसे करे?

Answer 1

HTML से संवाद आता है WP_Editors::wp_link_dialog() लेकिन इसमें कोई हुक नहीं है।

इसके बजाय हम कस्टम डायलॉग को लिंक डायलॉग में जोड़ने के लिए jQuery का उपयोग कर सकते हैं और उदा 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 के साथ:

ps: इसका आगे परीक्षण किया जा सकता है और अनुवादों के समर्थन के लिए भी बढ़ाया जा सकता है

Comments

मुझे यह जवाब बहुत पसंद आया क्योंकि यह बहुत आसान लग रहा था। समस्या हालांकि केवल लिंक्स का अद्यतन नहीं थी, भले ही मेरे पास एक ही साइट पर कई लिंक हों, लेकिन मान एक आखिरी था जो एक अलग लिंक से चुना गया था। हालांकि अभी भी किसी के लिए उपयोगी हो सकता है!

— कारम्बा

मैंने जवाब को बिना किसी फ़ॉलो-लिंक के उदाहरण @caramba

— birgire

hrefयदि उपयोगकर्ता उपयोगकर्ता संवाद नहीं खोलता है, लेकिन अरेबियर, कैसे मान प्राप्त करें, लेकिन केवल पहले पॉपअप बॉक्स का उपयोग करें जिसमें प्लेसहोल्डर है Paste URL or type to search:?

— मिन्ट्री

मुझे लगता है कि मैंने इसका परीक्षण करने के लिए स्निपेट (एकल पंक्ति स्ट्रिंग के रूप में एपेंड भाग के साथ) को इंजेक्ट करने के लिए mce_external_pluginsस्क्रिप्ट फ़ाइल या after_wp_tiny_mceहुक को लोड करने के लिए फ़िल्टर का उपयोग किया । यहां getAttrsविधि केवल लिंक सेटिंग्स संवाद से मूल्य को ओवरराइड करेगी, मैंने इनलाइन इनपुट से मूल्य को ओवरराइड करने के तरीके पर ध्यान नहीं दिया है। हो wp_link_applyसके तो कमांड को ओवरराइड करें ? मुझे लगता है कि यह एक अच्छा नया प्रश्न हो सकता है ;-) @ Dan9

— birgire

@ ज़बरदस्त धन्यवाद! अंत में, मैंने पाया है कि इसे कहाँ प्राप्त करना है। tinymce.ui.Control.extend.setUrlप्लगइन में वर्डप्रेस का उपयोग करता है wp-includes/js/tinymce/plugins/wplink/plugin.js।

— मिन्ट्री

Answer 2

कोर को देखते हुए, किसी भी फिल्टर या एक्शन में कोई निशान नहीं है wp_link_dialog फ़ंक्शन , जो आपके जीवन को आसान बना देगा ...

यह जांचना कि अन्य लोगों ने इस समस्या को कैसे हल किया है, वहाँ एक प्लगइन है जो कम या ज्यादा जैसा आप चाहते हैं वैसा ही करता है। मूल रूप से यह wplink.js को डेरेपिस्ट करता है,wp_deregister_script('wplink'); और इस बार वांछित अतिरिक्त फ़ील्ड सहित, फ़ाइल के एक संशोधित संस्करण को पंजीकृत करता है।

हालांकि मुझे नहीं लगता कि यह सबसे अच्छी विधि है (वर्डप्रेस को अपडेट करते समय संभावित बाद के संघर्षों को ध्यान में रखते हुए), मुझे लगता है कि यह इसे प्राप्त करने के लिए सबसे आसान वाट है।

आशा करता हूँ की ये काम करेगा!

Comments

जानकारी और प्लगइन लिंक के लिए धन्यवाद। मैं प्लगइन को भी देखूंगा और देखूंगा कि उन्होंने इसे कैसे हल किया ...

— कारम्बा

मैंने इसे इस उत्तर में बताए गए प्लगइन के स्रोत को देखते हुए हल किया है जो कि github github.com/ffsantos92/rel-nofollow-checkbox पर पाया जा सकता है अगर किसी को इसकी आवश्यकता हो। मुझे केवल 5 शब्द या तो बदलना था ...

— कारम्बा