আমি কীভাবে অন্তর্নির্মিত ওয়ার্ডপ্রেস "ব্রাউজ লিঙ্ক" কার্যকারিতা ব্যবহার করতে পারি?

Question

আমি একটি উইজেট কোডিং করছি এবং আমি চাই যে কোনও নিয়মিত পোস্ট বা পৃষ্ঠা সম্পাদনা করার সময় ব্যবহারকারীরা আপনার মতো একটি লিঙ্ক তুলতে সক্ষম হবে (যখন আপনি লিঙ্ক আইকনে ক্লিক করেন এবং পপ-আপে অ্যাজেএক্স অনুসন্ধান কার্যকারিতা পাবেন) )। কেউ কি জানেন যে আমি এই কাজটি করবো কীভাবে? আমি একটি এইচটিএমএল বোতাম পেয়েছি যা আমি সংযুক্ত করে এমনকি এখানে ক্লিক করতে চাই এবং মানটি প্রবেশের জন্য একটি ক্ষেত্র চাই।

ক্লাস- wp-edit.php এ আমি কয়েকটি আকর্ষণীয় জিনিস পেয়েছি এবং ভেবেছিলাম এই ফাইলগুলি আমার দরকার আছে কিনা ..?

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

কল করার সময় fullscreen.link();, উপরে উল্লিখিত ফাইলের মতো, আমি এই ত্রুটিটি পেয়েছি:

Uncaught ReferenceError: wpActiveEditor is not defined

.. এবং আমি আপাতত স্ট্যাম্পড, কারণ জেএস উল্লেখ করে যে পরিবর্তনশীলটি আমার কাছে পাগল দেখাচ্ছে looks

আমাকে সঠিক দিকে নির্দেশ করার জন্য যত্নশীল? আমি এই কাজ পেতে চাই, এটি আমার উইজেটগুলির জন্য একটি হত্যাকারী ব্যবহারকারী ইন্টারফেস তৈরি করবে!

------ সম্পাদন করা -------

এখন পর্যন্ত এতটা কোড নয়, স্ক্রিপ্ট অন্তর্ভুক্তিগুলি বাদ দিয়ে যা আমি আগে বলেছি;

<label for="<?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>

.. জেএসের যে অংশটি লিঙ্ক স্ক্রিপ্টটি খোলার জন্য ট্রিগার করবে বলে মনে করা হচ্ছে;

linkBrowserButton.on("click", function(e){
    e.preventDefault();
    fullscreen.link();
});

Comments

আপনি যা করতে চান দয়া করে একটি স্ক্রিনশট বা একটি অ্যানিমেটেড জিআইএফ ( লিসক্যাপ একটি দুর্দান্ত এবং নিখরচায় সরঞ্জাম) করুন। এখন পর্যন্ত কল্পনা করা শক্ত। এবং দয়া করে এটিকে সম্পাদনা করুন কোনও মন্তব্য নয়। ধন্যবাদ।

— কায়সার

@ কাইজার - ঠিক আছে, শেষ আপনি আমার পরে কার্যকারিতাটি দেখতে পাবেন। পিএস - লিসেক্যাপকে ভালবাসুন, টিপটির জন্য ধন্যবাদ!

— ড্যান

ঠিক আছে, তাহলে দয়া করে আমাদের আপনার উইজেট কোডটি দেখান (সামগ্রীটি তৈরি করে এমন অংশ)। আপনি ব্যবহার করেছেন wp_editor()?

— কায়সার

@ কাইজার - কিছু অতিরিক্ত কোড যুক্ত হয়েছে। এতদূর নয় তবে আমি কোনও ইভেন্ট সংযুক্ত করার পাশাপাশি স্ক্রিপ্টটি অন্তর্ভুক্ত করা ছাড়া (ফলাফলটি আপডেট হওয়ার সাথে সাথে পরিবর্তিত হতে পারে) পরিবর্তনের চেয়ে বেশি কিছু করার প্রত্যাশা করছিলাম না, তবে এখনও আমি পপ আপটি মোটেও খুলতে পারি না।

— ড্যান

দুর্ভাগ্যক্রমে, লিঙ্ক চয়নকারীটি বিশেষত টিনিএমসিএ সম্পাদকের জন্য রচিত। আমি এমন এক সংস্করণে কাজ করছি যা একা দাঁড়িয়ে আছে এবং এটি প্রায় 80% রয়েছে। এটি মূলত টিনিএমসিই নির্ভরতা ছাড়াই লিঙ্ক চয়নকারীর পুনরায় লেখার কাজ।

— hereswhatidid

Answer 1

আমি উন্নয়নের জন্য যে মেটাবক্স ক্লাসটি ব্যবহার করি তার মধ্যে লিঙ্ক কথোপকথনটি প্রার্থনা করি। এটি একটি বাচ্চা হ্যাকি তবে আরও শক্তিশালী কিছু বিকাশ না করা পর্যন্ত এটি করা সম্ভব ।

আপনি প্রথমে প্রয়োজনীয় জেএস এনকুইভ করে লিংক বক্সটি চালু করতে পারেন এবং তারপরে ডাব্লুপি-লিংক জেএস ফাইল পদ্ধতিগুলির সাথে ইন্টারঅ্যাক্ট করতে পারেন।

নিশ্চিত করুন যে আপনি ডাব্লুপি-লিঙ্কটি সারিবদ্ধ করেছেন

1 / wp_enqueue_script( 'wp-link' );

2 / আপনার ui সেট আপ করুন। আমি সাধারণত লিঙ্কের কথোপকথনটি থেকে একটি বোতাম এবং লিঙ্কগুলির URL হ্যান্ডেল করার জন্য একটি পাঠ্য ক্ষেত্র ব্যবহার করি।

3 / লিঙ্ক কথোপকথন আহ্বান

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 // এনকুই স্ক্রিপ্ট। আপনার ফাংশন.এফপি ফাইলে নিম্নলিখিতটি যুক্ত করুন, এবং ফাইলের নাম / পাথের সাথে সামঞ্জস্য করুন।

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

এটা করা উচিত। আমি আমার মেটাবক্স ক্লাসে একই পদ্ধতি ব্যবহার করি এবং এটি ঠিক আছে বলে মনে হয়।

Comments

ডেল পোস্টের জন্য ধন্যবাদ - এটি খুব আকর্ষণীয় দেখায়। আমি বোতামটি তৈরি করার আগে এবং ডাব্লুপি-লিংক স্ক্রিপ্টটি কল করেছিলাম, তবে কীভাবে এটি এর পরে চলবে তা জানতাম না। আমি প্রকল্পের মধ্যে পরের সপ্তাহে আরও কিছু জেএস / এজেএক্স চেষ্টা করতে এবং শিখতে যাচ্ছি এবং এটিকে একটি শট দেব। অনেক ধন্যবাদ.

— ড্যান

আপনাকে কেবল আপনার থিমের অ্যাডমিন দিকে একটি .js ফাইল সজ্জিত করতে হবে। আমি প্রতিফলিত করতে উপরেরটি সম্পাদনা করব।

— ডেল স্যাটারল

Answer 2

পুনরায়: "আপনি এটি কীভাবে করবেন? (মোটামুটি?)"

প্রথমত, আমি এটিকে একইভাবে ওয়ার্ডপ্রেসের লিঙ্ক কার্যকারিতার সাথে তৈরি করব: একটি ইনপুট পাঠ্য ক্ষেত্র, ফলাফল, কার্যকারিতা নির্বাচন করুন এবং (লিঙ্ক যুক্ত করুন) বোতামটি জমা দিন।

অ্যাজাক্স - অনুসন্ধানের শব্দটির উপর ভিত্তি করে পাঠ্যের ইনপুটটিতে প্রবেশ করা হলে ফলাফলের সেটটি ফেরানো হবে। আমাদের কুইকসার্ক প্লাগইন , ডব্লিউপি জার্ভিস দিয়ে আমরা কী করেছি তা একবার দেখুন । আপনাকে কেবল এজ্যাকারল (অ্যাডমিন-অজ্যাক্স.এফপি) টার্গেট করার জন্য এজ্যাক্স কল সেট আপ করতে হবে এবং কোয়েরিটি সম্পাদন করতে আপনার পিএইচপিতে একটি অ্যাকশন হুক সেট করতে হবে এবং জেসন ফর্ম্যাটে ফলাফলগুলি প্রতিধ্বনিত করতে হবে। আপনি ফলাফলগুলি শিরোনাম, পোস্ট-টাইপ এবং প্রতিটি ফলাফলের জন্য পারমিলিংক অন্তর্ভুক্ত করতে চান। প্লাগইনগুলিতে আজাক্স সম্পর্কে আরও পড়ুন ।

অবশেষে, আপনার আগ্রহী ফলাফলটি নির্বাচন করা জেসন অবজেক্ট থেকে পারমালিঙ্কটি ধরে ফেলবে এবং উইজেট ক্ষেত্রে প্রবেশ করবে।

আমি জানি এটি একটি সম্পূর্ণ উত্তর নয়, তবে আমি আশা করি এটি সাহায্য করবে।