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

ডায়ালগটি এইচটিএমএল থেকে এসেছে 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লিঙ্ক ডায়ালগটি খোলার পরে যে ইভেন্টটি আগুন জ্বলতে পারে তার মধ্যে ookুকতে পারি । এখানে আমরা আমাদের কাস্টম এইচটিএমএল ইনজেক্ট করতে পারি এবং বর্তমান লিঙ্ক নির্বাচন অনুযায়ী এটি আপডেট করতে পারি:

$(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()নির্বাচিত লিঙ্কটির এইচটিএমএল পাওয়ার জন্য আমরা মূল ফাংশনের উপর ভিত্তি করে নিম্নলিখিত সহায়ক সহায়ক ফাংশনটি ব্যবহার করি :

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

আমি এই উত্তরটি খুব পছন্দ করেছি কারণ এটি এত সহজ বলে মনে হয়েছিল। সমস্যা যদিও কেবল লিঙ্কগুলি আপডেট করা ছিল না, একই স্থানে যদি আমার একাধিক লিঙ্ক থাকে তবে মানটি সর্বশেষটি থেকে যায় যা অন্য কোনও লিঙ্ক থেকে বেছে নেওয়া হলেও। এখনও কারও জন্য দরকারী হতে পারে!

— করমবা

আমি উত্তর-অনুসরণ-লিঙ্কের উদাহরণটি @ কারাম্বা

— বার্গিরে

আরে @birgire, কিভাবে মান পুনরুদ্ধার করতে href, তাহলে ব্যবহারকারী ডায়লগ খুলবেন না কিন্তু প্রথম পপআপ বক্স যা স্থানধারক আছে ব্যবহার করুন: Paste URL or type to search?

— MinhTri

আমি মনে করি আমি এটি পরীক্ষা mce_external_pluginsকরতে স্ক্রিপ্ট ফাইল বা after_wp_tiny_mceহুক স্নিপেট (একক লাইন স্ট্রিং হিসাবে সংযোজন অংশ সহ) ইনজেক্ট করতে ব্যবহার করেছি। এখানে getAttrsপদ্ধতিটি কেবলমাত্র লিঙ্ক সেটিংস ডায়ালগ থেকে মানটিকে ওভাররাইড করবে, আমি কীভাবে ইনলাইন ইনপুট থেকে মানটিকে ওভাররাইড করব তা সন্ধান করিনি। wp_link_applyসম্ভব হলে কমান্ড ওভাররাইড করবেন ? আমি মনে করি এটি একটি ভাল নতুন প্রশ্ন হতে পারে ;-) @ ডান 9

— বার্জায়ার

@ বিবিরগায়ার আপনাকে ধন্যবাদ! শেষ পর্যন্ত, আমি এটি কোথায় পেয়েছি তা খুঁজে পেয়েছি। ওয়ার্ডপ্রেস tinymce.ui.Control.extend.setUrlপ্লাগ ইন ব্যবহার করে wp-includes/js/tinymce/plugins/wplink/plugin.js।

— MinhTri

Answer 2

মূলটির দিকে তাকালে, ফাংশনটিতে কোনও ফিল্টার বা ক্রিয়া সম্পর্কিত কোনও চিহ্ন নেই wp_link_dialog, যা আপনার জীবনকে আরও সহজ করে তুলেছিল ...

অন্যরা কীভাবে এই সমস্যার সমাধান করেছে তা তদন্ত করছে, এমন একটি প্লাগইন রয়েছে যা আপনার ইচ্ছামতো কম বেশি কাজ করে does মূলত এটি wplink.js কে নিবন্ধভুক্ত করে, wp_deregister_script('wplink');এবং এই বারে কাঙ্ক্ষিত অতিরিক্ত ক্ষেত্র সহ ফাইলটির একটি পরিবর্তিত সংস্করণ রেজিস্ট্রেশন করে।

যদিও আমি এটি সেরা পদ্ধতি বলে মনে করি না (ওয়ার্ডপ্রেস আপডেট করার সময় পরবর্তী বিরোধগুলি বিবেচনায় নেওয়া) তবে আমি মনে করি এটি এটির পক্ষে সবচেয়ে সহজ ওয়াট।

আশা করি এটা সাহায্য করবে!

Comments

তথ্য এবং প্লাগইন লিঙ্কের জন্য আপনাকে ধন্যবাদ। আমি প্লাগইনটিও খতিয়ে দেখব এবং কীভাবে তারা এটিকে সমাধান করেছে ...

— ক্যারামবা

আমি এই উত্তরে উল্লিখিত প্লাগইনের উত্সটি দেখে এটি সমাধান করেছি যা গিথুব github.com/ffsantos92/rel-nofollow-checkbox এ পাওয়া যেতে পারে যদি কারও প্রয়োজন হয়। আমাকে কেবল 5 টি শব্দ বা

— তারপরে