मैं Wordpress "ब्राउज़ लिंक" कार्यक्षमता में निर्मित का उपयोग कैसे कर सकता हूं?

Question

मैं एक विजेट कोडिंग कर रहा हूं और मैं चाहूंगा कि उपयोगकर्ता एक लिंक चुन सके, जैसे आप एक नियमित पोस्ट या पेज को संपादित करते समय कर सकते हैं (जब आप छोटे लिंक आइकन पर क्लिक करते हैं और आपको पॉप अप में AJAX खोज कार्यक्षमता मिलती है )। क्या किसी को पता है कि मुझे यह काम कैसे मिलता है? मुझे एक HTML बटन मिला है, जिसे मैं संलग्न करना चाहूंगा और यहां तक ​​कि क्लिक भी कर सकता हूं, और मान में जाने के लिए एक फ़ील्ड भी।

वर्ग- wp-editor.php में मुझे कुछ दिलचस्प चीजें मिलीं, और मुझे आश्चर्य हुआ कि क्या मुझे इन फाइलों की आवश्यकता हो सकती है ..?

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

कॉल करने पर fullscreen.link();, ऊपर बताई गई फ़ाइल की तरह, मुझे यह त्रुटि मिलती है:

Uncaught ReferenceError: wpActiveEditor is not defined

..और मैं अभी के लिए स्तब्ध हूं, क्योंकि जेएस कि संदर्भ चर मुझे पागल लगता है।

मुझे सही दिशा में इंगित करने के लिए देखभाल? मुझे यह काम करना पसंद है, यह मेरे विजेट के लिए एक हत्यारा उपयोगकर्ता इंटरफ़ेस बना देगा!

------ संपादित -------

इतना अधिक कोड अब तक नहीं, इसके अलावा स्क्रिप्ट के निष्कर्षों के अलावा जो मैंने पहले कहा है;

<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

कृपया स्क्रीनशॉट या एनिमेटेड GIF बनाएं ( LiceCap एक अच्छा और मुफ्त टूल है) जो आप करना चाहते हैं। अब तक की कल्पना करना मुश्किल है। और कृपया इसे संपादित करें और टिप्पणी नहीं। धन्यवाद।

— कैसर

@kaiser - ठीक है, किया। अब आपके द्वारा की गई कार्यक्षमता को आप देख लेंगे। PS - प्यार लिसेकैप, टिप के लिए धन्यवाद!

— दान

ठीक है, तो कृपया हमें अपना विजेट कोड (वह भाग जो सामग्री बनाता है) दिखाएं। क्या आपने उपयोग किया wp_editor()?

— कैसर

@kaiser - कुछ अतिरिक्त कोड जोड़े गए। अभी तक बहुत ज्यादा नहीं है, लेकिन मैं एक घटना को संलग्न करने के अलावा बहुत कुछ करने की उम्मीद नहीं कर रहा था और इसमें स्क्रिप्ट शामिल है (शायद संशोधित करें जहां परिणाम अपडेट हो जाता है), लेकिन अभी तक मैं पॉप को खोलने के लिए बिल्कुल नहीं मिल सकता।

— दान

दुर्भाग्य से, लिंक चॉसर विशेष रूप से टाइनीएमसीई संपादक के लिए लिखा गया है। मैं एक ऐसे संस्करण पर काम कर रहा हूं जो अकेले खड़ा है और वहां इसका लगभग 80% है। यह मूल रूप से TinyMCE निर्भरता के बिना लिंक चयनकर्ता का पुनर्लेखन है।

— हर्सेवाथिडिड

Answer 1

मैं मेटाबोक्स वर्ग के भीतर लिंक संवाद को लागू करता हूं जिसे मैं विकास के लिए उपयोग करता हूं। इसकी एक हैड हैकी की जा सकती है, लेकिन तब तक किया जा सकता है, जब तक कि कुछ और मजबूत विकसित न हो जाए।

आप आवश्यक जेएस को पहले जोड़कर लिंक बॉक्स को लागू कर सकते हैं, और फिर डब्ल्यूपी-लिंक जेएस फाइलों के तरीकों के साथ बातचीत कर सकते हैं।

सुनिश्चित करें कि आपने wp-link एनकाउंटर किया है

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 // एन्क्यू स्क्रिप्ट। अपने functions.php फ़ाइल में निम्न जोड़ें, और सूट करने के लिए फ़ाइल नाम / पथ समायोजित करें।

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

डेल के लिए धन्यवाद - यह बहुत दिलचस्प लग रहा है। मुझे बटन बनाने से पहले, और wp-लिंक स्क्रिप्ट को कॉल करने के लिए मिला था, लेकिन यह नहीं पता था कि इसके बाद इसे कैसे प्राप्त किया जाए। मैं कोशिश कर रहा हूँ और परियोजनाओं के बीच अगले सप्ताह में कुछ और जेएस / AJAX जानने के लिए और यह एक शॉट दे। बहुत धन्यवाद।

— दान

आपको बस अपने विषय के व्यवस्थापक पक्ष पर एक .js फ़ाइल संलग्न करना होगा। यह दर्शाने के लिए मैं ऊपर संपादित करूँगा।

— डेल सटलर

Answer 2

RE: "आप इसे कैसे करेंगे? (मोटे तौर पर?)"

सबसे पहले, मैं इसे वर्डप्रेस में लिंक कार्यक्षमता के समान बनाऊंगा: एक इनपुट टेक्स्ट फ़ील्ड, परिणाम, कार्यक्षमता का चयन करें और लिंक जोड़ें (सबमिट करें) बटन।

अजाक्स - यह तब खोजा जाता है जब पाठ इनपुट में दर्ज किया जाता है, खोज शब्द के आधार पर परिणामों का सेट लौटाता है। एक नज़र डालिए कि हमने अपने क्विकसर्च प्लगइन WP जार्विस के साथ क्या किया । आपको बस ajaxurl (admin-ajax.php) को टार्गेट करने के लिए ajax कॉल सेट करने की आवश्यकता है और क्वेरी को निष्पादित करने और json फॉर्मेट में परिणाम इको करने के लिए अपने php में एक एक्शन हुक सेट करें। आप चाहते हैं कि परिणाम प्रत्येक परिणाम के लिए शीर्षक, पोस्ट-प्रकार और पर्मलिंक शामिल करें। प्लगइन्स में अजाक्स के बारे में और पढ़ें ।

अंत में, उस परिणाम का चयन करना जिसमें आप रुचि रखते हैं, json ऑब्जेक्ट से पर्मलिंक को पकड़कर विजेट फ़ील्ड में सम्मिलित करेगा।

मुझे पता है कि यह पूर्ण उत्तर नहीं है, लेकिन मुझे आशा है कि इससे मदद मिलेगी।