शॉर्टकोड मौजूद होने पर एन्क्लेव स्क्रिप्स / स्टाइल्स


54

प्लगइन्स में उपयोग के लिए स्क्रिप्ट और / या शैलियों को दर्ज करने का विचार तरीका क्या है?

मैंने हाल ही में एक शोर्ट के साथ उपयोगकर्ता अवतार / ग्रेवटर को जोड़ने के लिए एक प्लगइन सरल प्लगइन बनाया है । मेरे पास अवतार (चौकोर, गोल आदि) प्रदर्शित करने के लिए अलग-अलग शैली के विकल्प हैं और सीएसएस को सीधे शॉर्टकोड में डालने का फैसला किया।

हालाँकि, मुझे पता है कि यह एक अच्छा तरीका नहीं है क्योंकि यह हर बार सीएसएस को दोहराएगा जब पृष्ठ पर शोर्ट का उपयोग किया जाता है। मैंने इस साइट पर कई अन्य दृष्टिकोण देखे हैं और wp कोडेक्स के पास अपने स्वयं के दो उदाहरण हैं, इसलिए यह जानना मुश्किल है कि दृष्टिकोण सबसे सुसंगत और सबसे तेज़ क्या है।

यहाँ वे विधियाँ हैं जिनसे मैं वर्तमान में अवगत हूँ:

विधि 1: सीधे शोर्ट में शामिल करें - यह वही है जो मैं वर्तमान में प्लगइन में कर रहा हूं, लेकिन यह कोड दोहराते समय अच्छा नहीं लगता है।

class My_Shortcode {
function handle_shortcode( $atts, $content="" ) {
/* simply enqueue or print the scripts/styles in the shortcode itself */
?>
<style type="text/css">

</style>
<?php
    return "$content";
     }
}
add_shortcode( 'myshortcode', array( 'My_Shortcode', 'handle_shortcode' ) );

विधि 2: लिपियों या शैलियों को सशर्त रूप से लागू करने के लिए कक्षा का उपयोग करें

class My_Shortcode {
    static $add_script;
    static function init() {
        add_shortcode('myshortcode', array(__CLASS__, 'handle_shortcode'));
        add_action('init', array(__CLASS__, 'register_script'));
        add_action('wp_footer', array(__CLASS__, 'print_script'));
    }
    static function handle_shortcode($atts) {
        self::$add_script = true;
        // shortcode handling here
    }
    static function register_script() {
        wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);
    }
    static function print_script() {
        if ( ! self::$add_script )
            return;
        wp_print_scripts('my-script');
    }
}
My_Shortcode::init();

विधि 3: का उपयोग कर get_shortcode_regex();

function your_prefix_detect_shortcode() {

    global $wp_query;   
    $posts = $wp_query->posts;
    $pattern = get_shortcode_regex();

    foreach ($posts as $post){
        if (   preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches )
            && array_key_exists( 2, $matches )
            && in_array( 'myshortcode', $matches[2] ) )
        {
            // css/js 
            break;  
        }    
    }
}
add_action( 'wp', 'your_prefix_detect_shortcode' );

विधि 4: का उपयोग कर has_shortcode();

function custom_shortcode_scripts() {
    global $post;
    if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'myshortcode') ) {
        wp_enqueue_script( 'my-script');
    }
}
add_action( 'wp_enqueue_scripts', 'custom_shortcode_scripts');

मुझे लगता Method 4: Using has_shortcode();है कि सबसे अच्छा है क्योंकि यह सुनिश्चित करेगा कि स्क्रिप्ट और शैलियाँ एक बार लोड हो जाएँगी यदि पोस्ट सामग्री में शोर्ट के कई उपयोगों की परवाह किए बिना शोर्ट है। हालाँकि यह विगेट्स या साइडबार में शोर्ट के उपयोग के लिए काम नहीं कर सकता है, हालाँकि यह निश्चित नहीं है। यदि यह एक प्लगइन के लिए है, तो मैं आपको शॉर्टकोड के साथ स्क्रिप्ट को टाई करने की सलाह नहीं दूंगा क्योंकि कुछ वांछित आउटपुट प्राप्त करने के लिए शोर्ट के बजाय अपने फ़ंक्शन को कॉल कर सकते हैं।
रॉबर्ट ह्यू

जवाबों:


45

मुझे एक और तरीका मिला जो मेरे लिए अच्छा काम करता है:

  • प्लगइन को इनिशियलाइज़ करते समय, अपनी स्क्रिप्ट और स्टाइल को एंक्यू न करें, लेकिन उन्हें रजिस्टर करें wp_register_styleऔर wp_register_script

  • आगे आप मांग पर स्क्रिप्ट / शैली लोड कर सकते हैं। उदाहरण के लिए जब आप एक शोर्ट के साथ प्रस्तुत करते हैं wp_enqueue_style("your_style")और wp_enqueue_script("your_script")

इस विधि का उपयोग करने वाला एक उदाहरण प्लगइन है जो आपको get_avatar को शोर्ट के रूप में उपयोग करने देता है। शोर्टशीट मौजूद होने पर ही स्टाइलशीट की कल्पना की जाती है।

उपयोग (वर्तमान उपयोगकर्ता के लिए आईडी चूक):

[get_avatar id="" size="32" default="mystery" alt="Profile Photo" class="round"]

function wpse_165754_avatar_shortcode_wp_enqueue_scripts() {
    wp_register_style( 'get-avatar-style', plugins_url( '/css/style.css', __FILE__ ), array(), '1.0.0', 'all' );
}

add_action( 'wp_enqueue_scripts', 'wpse_165754_avatar_shortcode_wp_enqueue_scripts' );
if ( function_exists( 'get_avatar' ) ) {
    function wpse_165754_user_avatar_shortcode( $attributes ) {

        global $current_user;
        get_currentuserinfo();

        extract( shortcode_atts(
                     array(
                         "id"      => $current_user->ID,
                         "size"    => 32,
                         "default" => 'mystery',
                         "alt"     => '',
                         "class"   => '',
                     ), $attributes, 'get_avatar' ) );

        $get_avatar = get_avatar( $id, $size, $default, $alt );

        wp_enqueue_style( 'get-avatar-style' );

        return '<span class="get_avatar ' . $class . '">' . $get_avatar . '</span>';
    }

    add_shortcode( 'get_avatar', wpse_165754_user_avatar_shortcode' );
}

भूल गया कि मैंने यह सवाल पिछले साल पूछा था, लेकिन मैंने वास्तव में इसे इस तरह से करना शुरू कर दिया था और बहुत सारे मामलों में भी। यह विधि 1 और 2 के संयोजन की तरह है
ब्रायन विलिस

4
यह विधि सीएसएस को पाद लेख में लोड करती है, जिसमें निश्चित रूप से सीमाएं हैं?
याकूब रेकुआ

1
ऐसा करने का यह बिल्कुल सही तरीका है। जब भी wp_enqueue_scriptsहुक पहले से हो तो किसी स्क्रिप्ट या स्टाइलशीट को सशर्त लोड करने के लिए किसी भी समय इस पद्धति का उपयोग करें । (शॉर्टकोड पार्स किए जाते हैं, the_contentजिसके दौरान the_postहुक का एक हिस्सा होता है , जिसका अर्थ है कि जब यह पार्स किया जाता है तब तक बहुत देर हो चुकी होती है जब तक आप स्क्रिप्ट को पंजीकृत नहीं कर लेते हैं)
JRad Bad Bad

26

जवाब शुरू करने से पहले मुझे यह कहना होगा कि इस विषय के बारे में सीएसएस और जेएस समान नहीं हैं।

कारण सरल है: पृष्ठ के पाद में (पाद लेख में) js जोड़ते समय जाने का एक सामान्य और मान्य तरीका है, css <head>को पृष्ठ के अनुभाग में रखा जाना चाहिए : भले ही अधिकांश ब्राउज़र पृष्ठ में css को उचित रूप से प्रस्तुत कर सकें शरीर, यह मान्य HTML कोड नहीं है।

जब एक शोर्ट-कोड प्रदान किया जाता है, तो <head>अनुभाग पहले से ही मुद्रित था, इसका मतलब है कि पाद लेख पर किसी समस्या के बिना js जोड़ा जा सकता है, लेकिन शोर्ट-प्रदान किए जाने से पहले css को जोड़ना होगा ।

स्क्रिप्ट

यदि आपके शोर्ट को केवल js की जरूरत है तो आप भाग्यशाली हैं और wp_enqueue_scriptशोर्ट कॉलबैक के शरीर में उपयोग कर सकते हैं :

add_shortcode( 'myshortcode', 'my_handle_shortcode' );

function my_handle_shortcode() {
  wp_enqueue_script( 'myshortcodejs', '/path/to/js/file.js' );
  // rest of code here...
}

ऐसा करने से आपकी स्क्रिप्ट पाद में और केवल एक बार जोड़ी जाती है, भले ही पृष्ठ में एक से अधिक बार शोर्ट का उपयोग किया गया हो।

शैलियाँ

यदि आपको कोड की शैलियों की आवश्यकता है, तो आपको शॉर्टकोड वास्तव में प्रदान किए जाने से पहले कार्य करने की आवश्यकता है ।

ऐसा करने के विभिन्न तरीके हैं:

  1. वर्तमान क्वेरी में सभी पोस्ट देखें और यदि आवश्यक हो तो शोर्ट स्टाइल जोड़ें। यह आप ओपी में विधि # 3 और # 4 दोनों में करते हैं। वास्तव में, दोनों दो तरीके एक ही काम करते हैं, लेकिन has_shortcodeWP 3.6 में जोड़ा गया था, जबकि get_shortcode_regexसंस्करण 2.5 के बाद से उपलब्ध है, इसलिए get_shortcode_regexकेवल तभी उपयोग करें जब आप अपने प्लगइन को पुराने संस्करणों के साथ संगत बनाना चाहते हैं।

  2. सभी पृष्ठों में हमेशा शोर्ट शैली जोड़ें

मुद्दे

# 1 के साथ समस्या प्रदर्शन है। रेगेक्स बहुत धीमी गति से कार्य कर रहे हैं और सभी पोस्टों के एक लूप में रेगेक्स लॉन्च कर सकते हैं जो पृष्ठ को लगातार धीमा कर सकते हैं। इसके अलावा, यह केवल पुरालेखों में केवल पोस्ट अभिलेखों को दिखाने और शॉर्टकोड के साथ पूर्ण सामग्री दिखाने के लिए विषयों में एक बहुत ही सामान्य कार्य है। यदि ऐसा होता है, जब एक संग्रह दिखाया जाता है, तो आपका प्लगइन एक लूप में एक रेगेक्स मिलान शुरू करेगा, जिसका उद्देश्य एक ऐसी शैली जोड़ना होगा, जिसका उपयोग कभी नहीं किया जाएगा: एक अनावश्यक दोहरा प्रदर्शन प्रभाव: पृष्ठ पीढ़ी + अतिरिक्त अनावश्यक HTTP अनुरोध धीमा

# 2 के साथ समस्या फिर से प्रदर्शन है। सभी पृष्ठों के लिए शैली जोड़ने का मतलब है कि सभी पृष्ठों के लिए अतिरिक्त HTTP अनुरोध जोड़ें, जब भी आवश्यकता न हो। भले ही सर्वर साइड पेज पीढ़ी समय प्रभावित न हो, कुल पेज रेंडरिंग समय, और सभी साइट पृष्ठों के लिए।

तो, एक प्लगइन डेवलपर को क्या करना चाहिए?

मुझे लगता है कि सबसे अच्छी बात यह है कि प्लगइन में एक विकल्प पृष्ठ जोड़ रहा है, जहां उपयोगकर्ता यह चुन सकते हैं कि शोर्ट केवल एकल दृश्य में या यहां तक ​​कि अभिलेखागार में भी संभाला जाना चाहिए। दोनों मामलों में बेहतर है कि किस प्रकार के पोस्ट को शोर्ट सक्षम किया जाए, यह चुनने के लिए एक और विकल्प प्रदान करना बेहतर है।

"template_redirect"यदि वर्तमान क्वेरी आवश्यकताओं को पूरा करती है और उस स्थिति में शैली को जोड़ते हैं तो इस तरह से जांच करना संभव है ।

यदि उपयोगकर्ता केवल एकवचन पोस्ट दृश्यों में शोर्ट का उपयोग करना चुनते हैं, तो एक अच्छा विचार है कि क्या पोस्ट में शोर्ट है या नहीं: एक बार केवल एक regex की आवश्यकता होती है, यह पृष्ठ को इतना धीमा नहीं करना चाहिए।

यदि उपयोगकर्ता अभिलेखागार में भी शोर्ट का उपयोग करना चुनते हैं, तो मैं सभी पदों के लिए regex चलाने से बचूंगा यदि पदों की संख्या अधिक है और क्वेरी की आवश्यकताओं के अनुसार स्टाइल को लागू करें।

इस संबंध में "उच्च" पर विचार करने के लिए क्या कुछ प्रदर्शन परीक्षणों का उपयोग करना चाहिए या, विकल्प के रूप में, एक और विकल्प जोड़ें और उपयोगकर्ताओं को विकल्प दें।


2
यहां यह ध्यान देने योग्य है कि <style>दस्तावेज़ निकाय में टैग अब W3C कल्पना के अनुसार मान्य हैं। w3.org/TR/html52/document-metadata.html#the-style-element
इसहाक

5

मेरे प्लगइन के लिए मैंने पाया कि कभी-कभी उपयोगकर्ताओं के पास एक थीम बिल्डर होता है जिसमें पोस्ट मेटा डेटा में शॉर्टकोड संग्रहीत होता है । यहां मैं यह पता लगाने के लिए उपयोग कर रहा हूं कि क्या मेरा प्लगइन शोर्ट वर्तमान पोस्ट या पोस्ट मेटा डेटा में मौजूद है :

function abcd_load_my_shorcode_resources() {
       global $post, $wpdb;

       // determine whether this page contains "my_shortcode" shortcode
       $shortcode_found = false;
       if ( has_shortcode($post->post_content, 'my_shortcode') ) {
          $shortcode_found = true;
       } else if ( isset($post->ID) ) {
          $result = $wpdb->get_var( $wpdb->prepare(
            "SELECT count(*) FROM $wpdb->postmeta " .
            "WHERE post_id = %d and meta_value LIKE '%%my_shortcode%%'", $post->ID ) );
          $shortcode_found = ! empty( $result );
       }

       if ( $shortcode_found ) {
          wp_enqueue_script(...);
          wp_enqueue_style(...);
       }
}
add_action( 'wp_enqueue_scripts', 'abcd_load_my_shorcode_resources' );

2

मैं ऐसा ही करता हूँ:

class My_Shortcode {

    function __construct() {
        do_action('my_start_shortcode'); // call
....

और अन्य कार्यों (या अन्य प्लगइन्स) में हुक को पकड़ें:

function wpse_3232_load_script(){
    wp_enqueue_script('js-myjs');
}
add_action('my_start_shortcode','wpse_3232_load_script',10);

1

मुझे अपने स्वयं के प्लगइन के लिए पता चला, अगर पाठ विजेट में शोर्ट मौजूद है।

function check_shortcode($text) {

  $pattern = get_shortcode_regex();

   if (   preg_match_all( '/'. $pattern .'/s', $text, $matches )
        && array_key_exists( 2, $matches )
        && in_array( 'myshortcode', $matches[2] ) )
    {
        // myshortcode is being used

        // enque my css and js
        /****** Enqueu RFNB  ******/
        wp_enqueue_style('css-mycss');
        wp_enqueue_script('js-myjs');

        // OPTIONAL ALLOW SHORTCODE TO WORK IN TEXT WIDGET
        add_filter( 'widget_text', 'shortcode_unautop');
        add_filter( 'widget_text', 'do_shortcode'); 

    }

  return $text;

}
add_filter('widget_text', 'check_shortcode');

1

वर्डप्रेस में एक विशिष्ट शॉर्टकोड प्रस्तुत करने की स्थिति के आधार पर कुछ करने के लिए एक अंतर्निहित फ़ंक्शन है। समारोह का नाम है has_shortcode()। आप अपनी शैली और स्क्रिप्ट को समझने के लिए निम्न कोड का उपयोग कर सकते हैं।

यहाँ मैं जाँचता था कि is_a( $post, 'WP_Post' )क्या $postवस्तु WP_Postवर्ग की है और मैं $post->post_contentपोस्ट सामग्री की जाँच करता था।

if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'shortcode_tag') ) {
    wp_enqueue_style( 'handle', get_template_directory_uri() . '/your_file_filename.css' );
}

0

मैंने has_shortcode () के लिए वर्डप्रेस पेज से उदाहरण कोड का एक संयोजन बनाया और जवाब zndencka दिया। मैंने नोटिस किया कि has_shortcode function वर्डप्रेस 3.6 में जोड़ा गया है, इसीलिए मैं पहले चेक करता हूं कि फ़ंक्शन मौजूद है या नहीं। हो सकता है कि चेक थोड़ा अप्रचलित हो, क्योंकि वर्डप्रेस 3.6 के नीचे से कई उपयोगकर्ता नहीं हैं, अपने स्वयं के आँकड़ों के अनुसार

// This makes sure the styling is already enqueued in the header, so before the shortcode loads in the page/post
function enqueue_shortcode_header_script() {
    global $post;
    if ( function_exists( 'has_shortcode' ) ){  // is added in wordpress 3.6
        // Source: https://codex.wordpress.org/Function_Reference/has_shortcode
        if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'my_shortcode') ) {
            wp_enqueue_style( 'shortcode-css' );
        }
    }
    else if ( isset($post->ID) ) { // Small percentage wordpress users are below 3.6 https://wordpress.org/about/stats/
        global $wpdb;
        $result = $wpdb->get_var(
          $wpdb->prepare(
              "SELECT count(*) FROM $wpdb->postmeta " .
              "WHERE post_id = %d and meta_value LIKE '%%my_shortcode%%'",
               $post->ID )
        );
        if (!empty( $result )) { wp_enqueue_style( 'shortcode-css' ); }
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_shortcode_header_script');

0

हम वास्तव में बिना किसी विस्तृत कार्य का उपयोग किए बिना शोर्ट के माध्यम से CSS और JS फाइलों को सशर्त रूप से लोड कर सकते हैं :

पहले, मान लें कि हमने अपनी सभी सीएसएस / जेएस फाइलों को पहले पंजीकृत किया था (शायद जब wp_enqueue_scriptsदौड़ा हो)

function prep_css_and_js() {
     wp_register_style('my-css', $_css_url);
     wp_register_script('my-js', $_js_url);
}
add_action( 'wp_enqueue_scripts', 'prep_css_and_js', 5 );

अगला, हमारे शोर्ट फ़ंक्शन की जांच करने देता है:

function my_shortcode_func( $atts, $content = null ) {
  if( ! wp_style_is( "my-css", $list = 'enqueued' ) ) { wp_enqueue_style('my-css'); }
  if( ! wp_script_is( "my-js", $list = 'enqueued' ) ) { wp_enqueue_script('my-js'); }
  ...
}

सरल। किया हुआ। एर्गो: हम सीएसएस / जेएस फाइलों को "सशर्त लोड" कर सकते हैं, (केवल जब [शोर्टकोड चलता है)।

आइए निम्नलिखित विचारधारा पर विचार करें:

  • हम कुछ सीएसएस / जेएस फाइलें लोड करना चाहते हैं (लेकिन केवल तभी जब शोर्ट ट्रिगर हो)
  • हो सकता है कि हम नहीं चाहते कि वे फाइलें हर पेज पर लोड हों, या अगर किसी पेज / पोस्ट पर शॉर्टकोड का इस्तेमाल नहीं हुआ है। (हल्का वजन)
  • हम यह सुनिश्चित कर सकते हैं कि WP यह सुनिश्चित करता है कि शोर्ट और कॉल करने से पहले सभी css / js फाइलों को रजिस्टर किया जाए।
  • IE: शायद मेरे prep_css_and_js()फ़ंक्शन के दौरान मैं सभी .css / .js फ़ाइलों को लोड करता हूं जो कुछ फ़ोल्डरों में हैं ...

अब जब WP उन्हें पंजीकृत लिपियों के रूप में देखता है, तो हम वास्तव में, उन्हें सशर्त रूप से कॉल कर सकते हैं, स्थितियों की एक सत्यता पर आधारित है, जिसमें शामिल हैं लेकिन सीमित नहीं my_shortcode_func()

लाभ: (कोई MySQL नहीं, कोई उन्नत कार्य और कोई फ़िल्टर आवश्यक नहीं)

  • यह "WP ऑर्थोडिक्स", सुरुचिपूर्ण, तेज लोडिंग, आसान और सरल है
  • ऐसी स्क्रिप्ट्स का पता लगाने के लिए कंपाइलर्स / मिनीफायर्स की अनुमति देता है
  • WP फ़ंक्शंस का उपयोग करता है (wp_register_style / wp_register_script)
  • और अधिक विषयों / प्लगइन्स के साथ संगत जो उन स्क्रिप्ट को कारणों की सत्यता के लिए डी-रजिस्टर करना चाहते हैं।
  • कई बार ट्रिगर नहीं होगा
  • बहुत कम प्रसंस्करण या कोड शामिल है

संदर्भ:

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.