web-dev-qa-db-ja.com

インラインスクリプトを追加しながらカスタム属性を追加できますか？

コアを変更せずにいくつかのアンダースコアテンプレートを管理画面に挿入する必要があります。テンプレートは次のようになります。

<script type="text/template" id="template-123">
    <div class="section intro">
        {{{ data.section.intro }}}
    </div>

    <div class="section content">
        {{{ data.section.content }}}
    </div>
    ...
</script>

すべてのテンプレートは特定のスクリプトハンドルに依存しているので、 wp_add_inline_script() の使用を考えましたが、typeおよびid属性を指定することはできません。

それで、インラインスクリプトを追加しながらその属性を追加するためのハックな解決策はありますか？それとももっと良い方法がありますか？

私はあなたが助けてくれて本当に感謝しています！

wp-adminjavascriptunderscore
3
MinhTri

これがデモの提案です。

add_action( 'admin_enqueue_scripts', function()
{
   wp_enqueue_script(    'my-script', '/my-script.js', ['underscore', 'backbone'], '1.0' );
   wp_add_inline_script( 'my-script', 'alert("hello world");' );

   // Add our template
   if( function_exists( 'wpse_add_inline_tmpl' ) )
       wpse_add_inline_tmpl( 
           $handle = 'my-script', 
           $id     = 'my-tmpl', 
           $tmpl   = '<div class="section intro">{{{ data.section.intro }}}</div>' 
       );

} );

カスタムのwpse_add_inline_tmpl()関数を次のように定義します。

function wpse_add_inline_tmpl( $handle, $id, $tmpl )
{
    // Collect input data
    static $data = [];
    $data[$handle][$id] = $tmpl;

    // Append template for relevant script handle
    add_filter( 
        'script_loader_tag', 
        function( $tag, $hndl, $src ) use ( &$data, $handle, $id )
        {   
            // Nothing to do if no match
            if( ! isset( $data[$hndl][$id] ) )
                return $tag;

            // Script tag replacement aka wp_add_inline_script()
            if ( false !== stripos( $data[$hndl][$id], '</script>' ) )
                $data[$hndl][$id] = trim( preg_replace( 
                    '#<script[^>]*>(.*)</script>#is', 
                    '$1', 
                     $data[$hndl][$id] 
                ) );

            // Append template
            $tag .= sprintf(
                "<script type='text/template' id='%s'>\n%s\n</script>" . PHP_EOL,
                esc_attr( $id ),
                $data[$hndl][$id]
            );

            return $tag;
        }, 
   10, 3 );
}

ここではscript_loader_tagフィルタを使ってテンプレートコードを挿入し、それを参照するためにhandleとidの両方を使います。コアのwp_add_inline_script()関数からscripttag replacement を使うこともできます。

あなたがこれをさらにテストしてあなたのニーズに合わせて修正できることを願っています。これをクラスとして書くのがより良いアプローチかもしれません;-)

3
birgire