web-dev-qa-db-ja.com

ショートコード内のスタイルをエンキューしますが、ページの下部に読み込まれます（フッタースクリプトの前）。

ショートコード内にスタイルを追加/エンキューしました。それはうまく機能しますが、ヘッダーではなくフッター（.jsファイルを開始する前）に読み込まれます。私はこの解決策と同じようにしました：

ショートコードが存在する場合はスクリプト/スタイルをエンキューする

WPでは正常ですか？それともヘッダーにスタイルを読み込むにはどうすればよいですか？

ここにサンプルコード：

class Cbwsppb_Related {

    public function __construct() 
    {
        add_shortcode('cbwsppb_related', array($this, 'shortcode_func'));
    }

    public function shortcode_func($atts, $content = null) 
    {
        $atts = shortcode_atts( array(
          'style'    => '',
          'display_style'    => '',
          'show'    => '',
          'orderby' => ''
        ), $atts );

        if ($atts['display_style'] === 'carousel') {
            wp_enqueue_style('flexslider-style');
        }

        $show = (!empty($atts['show'])) ? $atts['show'] : 2;
        $orderby = (!empty($atts['orderby'])) ? $atts['orderby'] : 'Rand';

        $output = '';
        ob_start();

            if ($atts['style'] === 'custom') {
                $output .= woocommerce_get_template( 'single-product/related.php', array(
                        'posts_per_page' => $show,
                        'orderby' => $orderby,
                    ) 
                );                 
            } else {
                $output .= woocommerce_get_template( 'single-product/related.php');                
            }

            $output .= ob_get_clean();
        return $output;
    }
}
pluginsplugin-developmentshortcodehooksactions
3
Zinan

フッターに追加された理由

これは予想される動作です。

スタイルShortcodeフック関数内）をエンキューしたので、実行時にはWordPressはすでにあなたのページの<head>セクションの生成を終えています。コンテンツのショートコード.

したがって、ショートコードフック関数内でスタイルをエンキューする場合は、スタイルをフッターセクションに配置する以外に方法はありません。

ヘッダに追加する方法：

<head>セクションに出力したい場合は、次のようにしてエンキューする必要があります。

function enqueue_your_styles() {
    // the following line is just a sample, use the wp_enqueue_style line you've been using in the shortcode function 
    wp_enqueue_style( 'style-name', get_stylesheet_directory_uri() . '/css/your-style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_your_styles' );

注：ページにショートコードがなくても、スタイルが追加されます。

注2： あなたが言及した質問の答えの1つ 既に選択肢と長所と短所についての詳細な説明があります。

3
Fayaz

can投稿コンテンツ内のショートコードの存在を事前に確認し、見つかった場合はヘッダー内のスクリプトをキューに入れます。

ただし、ショートコードmayは他の場所（ウィジェット、テンプレート、またはプログラムなど）から実行されるため、フッターに追加する必要もあります。

public function __construct() {
    add_shortcode('cbwsppb', array($this => 'shortcode_func'));
    add_action('wp', array($this => 'shortcode_check'));
}

public function shortcode_check() {
    if (is_single() && (is_product()) {
        global $post; $content = $post->post_content;

        // global $wpdb;
        // $query = "SELECT 'post_content' FROM "'.$wpdb->prefix.'"posts WHERE ID = '".$post->ID."'";
        // $content = $wpdb->get_var($query);

        // quick and dirty check for shortcode in post content
        if ( (stristr($content,'[cbwsppb')) 
          && (stristr($content,'display_style')) 
          && (stristr($content,'carousel')) ) {
            add_action('wp_enqueue_scripts', array($this,'enqueue_styles'));
        }
    }
}

public function enqueue_styles() {
    wp_enqueue_style('flexslider-style');
}

public function shortcode_func($atts, $content = null) {

   // ... $atts = shortcode_atts etc ...

   // change this to:
   if ( ($atts['display_style'] === 'carousel')
      && (!wp_style_is('flexslider-style','enqueued')) ) {
       wp_enqueue_style('flexslider-style');
   }

   // ... the rest of the shortcode function ...
}
1
majick

あなたはこれを試すべきです：

function prefix_add_styles() {
    wp_enqueue_style( 'your-style-id', get_template_directory_uri() . '/stylesheets/somestyle.css' );
};
add_action( 'get_header', 'prefix_add_styles' );
0
Arsalan Mithani

以下のコードを試してください。 wp_enqueue_style から参照してください。

   function my_shortcode_style(){
      wp_enqueue_style( 'my_css', plugin_dir_url( __FILE__ ).'style.css', array( '' ), false, 'all' );
   }
   add_action('wp_enqueue_scripts', 'my_shortcode_style');

注：プラグインディレクトリのパスには plugin_dir_url（） を使用し、現在のテーマパスには get_template_directory_uri（）を使用してください

0
AddWeb Solution Pvt Ltd