Kısa kod varken Kodları / Stilleri biçimlendirin


54

Eklentilerde kullanılmak üzere komut dosyalarını ve / veya stilleri kaydetmenin / bunları kodlamanın fikir yolu nedir?

Kısa süre önce kullanıcı avatarını / gravatarını eklemek için basit bir eklenti yaptım . Avatarı (kare, yuvarlak vb.) Görüntülemek için farklı stil seçeneklerine sahibim ve css'i doğrudan kısa kodun içine koymaya karar verdim.

Ancak, bunun iyi bir yaklaşım olmadığını anladım, çünkü kısa kod bir sayfada her kullanıldığında css'yi tekrarlayacaktır. Bu sitede birkaç başka yaklaşım gördüm ve wp kodeksi kendi iki örneğine bile sahipti, bu nedenle hangi yaklaşımın en tutarlı ve en hızlı olduğunu bilmek zor.

İşte şu anda farkında olduğum yöntemler:

Yöntem 1: Doğrudan kısa kod içine dahil et - Bu eklenti şu anda ne yapıyorum, ancak kodu tekrar ettiği için iyi görünmüyor.

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

Yöntem 2: Kodları veya stilleri koşullu olarak kodlamak için sınıf kullanın

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

Yöntem 3: kullanma 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' );

Yöntem 4: kullanma 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');

Bence Method 4: Using has_shortcode();en iyisi, çünkü yazı içeriği birden fazla kısa kod kullanımına bakmaksızın kısa kod içeriyorsa, komut dosyalarının ve stillerin bir kez yüklenmesini sağlayacak. Widget'lerde veya kenar çubuğunda kısa kod kullanımları için işe yaramasa da, emin değilim. Bir eklenti için, o zaman komut dosyalarını kısa kodla bağlamanızı tavsiye etmem, çünkü bazıları istenen çıktıyı elde etmek için işlevinizi kısa kod yerine çağırabilir.
Robert hue

Yanıtlar:


45

Benim için iyi sonuç veren başka bir yol buldum:

İşte get_avatar'ı kısa kod olarak kullanmanıza izin veren bu yöntemi kullanan örnek bir eklenti. Stil sayfası yalnızca kısa kod bulunduğunda sıkıştırılır.

Kullanım (geçerli kullanıcıya varsayılan kimliği):

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

Unutmayın, geçen yıl bu soruyu sordum, ancak birçok durumda da bu şekilde yapmaya başlamıştım. Bu yöntem 1 ve 2'yi birleştirmeye benziyor.
Bryan Willis

4
Bu yöntem, CSS'yi kesinlikle sınırlamaları olan altbilgiye yükler mi?
Jacob Raccuia

1
Bu kesinlikle bunu yapmanın doğru yoludur. wp_enqueue_scriptsKanca zaten oluştuğunda şartlı olarak bir komut dosyasını veya stil sayfasını yüklemeniz gerektiğinde bu yöntemi kullanın . (Kısa kodlar the_content, the_postkancanın bir parçası olan ayrıştırılır, bu, daha önce komut dosyasını kaydetmediğiniz sürece ayrıştırıldığında çok geç
kalmayı gerektirir

26

Cevabı başlatmadan önce, bu konuyla ilgili css ve js'nin aynı olmadığını söylemeliyim.

Nedeni basit: sayfanın gövdesine js eklerken (altbilgide) genel ve geçerli bir yoldur, css <head>sayfanın bölümüne yerleştirilmelidir : tarayıcıların çoğu css'in sayfa içinde doğru şekilde oluşturulmasını sağlarsa bile gövde, bu geçerli bir HTML kodu değil.

Bir kısa kod oluşturulduğunda, <head>bölüm zaten basılmıştır, bu, js'nin altbilgide sorun çıkarmadan eklenebileceği, ancak kısa kod oluşturulmadan önce css'nin eklenmesi gerektiği anlamına gelir .

Kodlar

Eğer kısa kodunuz sadece js’e ihtiyaç duyuyorsa, şanslısınız ve yalnızca kısa wp_enqueue_scriptkod geri çağırma gövdesinde kullanabilirsiniz :

add_shortcode( 'myshortcode', 'my_handle_shortcode' );

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

Bunu yaparak, komut dosyanız altbilgiye eklenir ve yalnızca bir kez, kısa kod sayfada birden fazla kullanılsa bile eklenir.

stiller

Kod stillere gereksinim duyarsa, kısa kodun oluşturulmasından önce harekete geçmeniz gerekir .

Bunu yapmanın farklı yolları var:

  1. Geçerli sorgudaki tüm yazılara bakın ve gerekirse kısa kod stillerini ekleyin. OP'de # 3 ve # 4 yöntemlerinde yaptığınız şey budur. Aslında, her iki yöntem de aynı şeyi yapar, ancak has_shortcodeWP 3.6'da get_shortcode_regexsürüm 2.5'ten beri kullanılabilir olmasına rağmen eklenir , bu nedenle get_shortcode_regexyalnızca eklentinizi eski sürümlerle uyumlu hale getirmek istiyorsanız kullanın .

  2. her zaman tüm sayfalarda kısa kod stili ekle

Sorunlar

# 1 numaralı sayı performanstır. Regex oldukça yavaş işlemlerdir ve regex'i başlatmak tüm mesajların bir döngüsünde sürekli sayfa yavaşlatabilir. Dahası, temalarda yalnızca arşivlerde alıntı sonrası göstermek ve yalnızca tekil görünümlerde kısa kod içeren tam içerik göstermek, temalarda oldukça yaygın bir görevdir. Bu durumda, bir arşiv gösterildiğinde, eklentiniz, hiç kullanılmayacak bir stil eklemek amacıyla bir döngüde regex eşleştirmesi başlatacak: gereksiz bir çifte performans etkisi: sayfa oluşturma + gereksiz gereksiz HTTP talebi

# 2 olan sayı yine performanstır. Tüm sayfalara stil eklemek, gerekmediğinde bile tüm sayfalar için ek bir HTTP isteği eklemek anlamına gelir. Sunucu tarafı sayfa oluşturma süresi etkilenmemiş olsa bile, toplam sayfa oluşturma süresi ve tüm site sayfaları için olacaktır.

Peki, bir eklenti geliştirici ne yapmalı?

Bence yapılacak en iyi şey, kullanıcıların kısa kodun yalnızca tekil görünümde mi, yoksa arşivlerde mi ele alınacağını seçebilecekleri eklentiye bir seçenek sayfası eklemek olduğunu düşünüyorum. Her iki durumda da, hangi posta tiplerinin kısa kodu etkinleştireceğini seçmek için başka bir seçenek sunmak daha iyidir.

Bu şekilde, "template_redirect"geçerli sorgunun gereksinimleri karşılayıp karşılamadığını kontrol etmek için kanca bağlamak mümkündür ve bu durumda stil ekleyin.

Kullanıcı yalnızca tekil yazı görünümlerinde kısa kod kullanmayı seçerse, yazının kısa kod içerip içermediğini kontrol etmek iyi bir fikirdir: yalnızca bir regex gerektiğinde sayfayı çok yavaşlatmaması gerekir.

Kullanıcı arşivlerde bile kısa kod kullanmayı tercih ederse, eğer mesaj sayısı yüksekse tüm yazılar için regex çalıştırmaktan kaçınırdım ve sadece sorgu uygunlukları için stili zorlardım.

Bu konuda "yüksek" sayılması gerekenler, bazı performans testleri kullanmak veya alternatif olarak başka bir seçenek eklemek ve kullanıcılara seçim yapmak olmalıdır.


2
Burada <style>, belge gövdesindeki etiketlerin W3C spesifikasyonlarına göre geçerli olduğunu belirtmekte fayda var . w3.org/TR/html52/document-metadata.html#the-style-element
Isaac Lubow

5

Eklentim için bazen kullanıcıların meta verilerde depolanan kısa kodlu bir tema oluşturucusuna sahip olduğunu buldum . Eklenti kısa kodumun geçerli gönderi veya yazı meta verilerinde mevcut olup olmadığını saptamak için kullanıyorum :

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

Ben öyle:

class My_Shortcode {

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

ve diğer işlevlerde (veya diğer eklentilerde) kanca tutma:

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

1

Metin eklentisinde kısa kod varsa, kendi eklentim için öğrendim.

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

WordPress, belirli bir Kısa Kod sunma durumuna dayanarak bir şeyler yapmak için yerleşik bir işleve sahiptir. İşlev adıdır has_shortcode(). Tarzınızı ve komut dosyalarınızı biçimlendirmek için aşağıdaki kodu kullanabilirsiniz.

İşte kullandığım is_a( $post, 'WP_Post' )olmadığını kontrol etmek $postnesne taşımaktadır WP_Postsınıf ve kullandığım $post->post_contentyayın içeriğini kontrol etmek.

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

Ben Wordpress sayfasından örnek kod kombinasyonunu yapılan has_shortcode () ve cevap zndencka verdi. Has_shortcode işlevinin Wordpress 3.6'da eklendiğini fark ettim, bu yüzden öncelikle işlevin var olup olmadığını kontrol ettim. Belki de bu kontrol biraz eskidir, çünkü kendi istatistiklerine göre artık wordpress 3.6'dan aşağıya pek fazla kullanıcı kalmamıştır .

// 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

Gerçekten çok fazla karmaşık işlev kullanmadan CSS ve JS dosyalarını kısa kodla koşullu olarak yükleyebiliriz :

İlk olarak, daha önce tüm CSS / JS dosyalarımızı kaydettiğimizi varsayalım (belki wp_enqueue_scriptsçalıştırıldığında)

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

Ardından, kısa kod fonksiyonumuzu inceleyelim:

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

Basit. Bitti. Ergo: "koşullu olarak" css / js dosyalarını yükleyebiliriz, (sadece [shortcode] çalıştığında).

Aşağıdaki ideolojiyi düşünelim:

  • Bazı CSS / JS dosyalarını yüklemek istiyoruz (ancak yalnızca kısa kod tetiklendiğinde)
  • Belki bu dosyaların her sayfaya veya kısa kod bir sayfada / yayında kullanılmıyorsa yüklenmesini istemiyoruz. (hafif)
  • Bunu, WP'nin kısa kodu çağırmadan önce ve enqueue öncesinde css / js dosyalarının TÜMÜNÜ kaydetmesini sağlayarak gerçekleştirebiliriz.
  • IE: Belki de prep_css_and_js()fonksiyonum sırasında belirli klasörlerdeki TÜM .css / .js dosyalarını yüklüyorum ...

Şimdi WP onları kayıtlı senaryolar olarak görüyorsa, bunlarla sınırlı olmamak üzere, bunlarla sınırlı olmamak üzere, koşullu olarak, onları koşullu olarak adlandırabiliriz. my_shortcode_func()

Avantajlar: (MySQL yok, gelişmiş fonksiyon yok ve filtreye gerek yok)

  • bu "WP ortodiks", zarif, hızlı yükleme, kolay ve basit
  • derleyicilerin / küçük resimlerin bu tür komut dosyalarını algılamalarına izin verir
  • WP işlevlerini kullanır (wp_register_style / wp_register_script)
  • birçok nedenden ötürü bu komut dosyalarını silmek isteyebilecek daha fazla tema / eklenti ile uyumludur.
  • birden çok kez tetiklemeyecek
  • çok az işlem veya kod söz konusudur

Referanslar:

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.