web-dev-qa-db-ja.com

プラグイン内のショートコードからCSSを生成する方法

私はクラスを使用してプラグイン内にあるショートコードから「オンザフライ」でCSSを生成するのに苦労しています。これがショートコード関数です。

public function shortcode($atts, $content = NULL) {

        $data = shortcode_atts ( 
            array(
                'id'    => '',
                'img'   => '',
                'speed' => '5',
            ), $atts 
        );

        $id_tmp = $data['id'];

        $src = wp_get_attachment_image_src( $data['img'], 'full');
        $image_url =  $src[0];

        return  '<section id="'. $data['id'] .'" data-speed="'. $data['speed'] .'" data-type="background">' .do_shortcode($content). '</section>';
    }

私がやろうとしているのは、idとimage_urlの値を取得し、それらをCSSファイルに入れて次のようなものを作成することです。

#intro01 <-- THE ID SHORTCODE VALUE {    
    background: url(../images/fly.jpg <-- THE $image_url VALUE ) 50% 0 fixed;
}

これはパブリック（フロントエンド）CSSです。

pluginsshortcodecss
1
Daniel

ショートコードからCSSファイルに生成されたCSSルールを入れることは、あなたがショートコードを実行するたびにファイルを開いてそれに書き込む必要があるので非常に悪い習慣となり得ます。私はあなたが必要としている本当に本当にではないと思います。あなたの場合は、例えば、style属性を要素自体に設定することができます。それで十分です：

public function shortcode($atts, $content = NULL) {

    $data = shortcode_atts ( 
        array(
            'id'    => '',
            'img'   => '',
            'speed' => '5',
        ), $atts 
    );

    $id_tmp = $data['id'];

    $src = wp_get_attachment_image_src( $data['img'], 'full');
    $image_url =  $src[0];

    $style = "style = background: url(".$image_url.") 50% 0 fixed;";

    return  '<section id="'. $data['id'] .'" data-speed="'. $data['speed'] .'" data-type="background" '.$style.'>' .do_shortcode($content). '</section>';
}

また、 wp_add_inline_style（） 関数を試すこともできます。

2
cybmeta