rel属性を変更するためのadd_filterを使用したLESS CSS enqueue_style


8

私がやろうとしていることは、WordPressで使用するcss少なくすることです。

rel属性が 'stylesheet / less'に設定された.lessファイルにリンクすることになっています。しかし、enqueue_styleの出力を行うコードを変更する方法がわかりません。

フィルターを適用して出力に影響を与える方法はありますか?

編集:私がこれをどのように機能させるかについて興味がある人は、ここにコードスニペットがあります:

function enqueue_less_styles($tag, $handle) {
    global $wp_styles;
    $match_pattern = '/\.less$/U';
    if ( preg_match( $match_pattern, $wp_styles->registered[$handle]->src ) ) {
        $handle = $wp_styles->registered[$handle]->handle;
        $media = $wp_styles->registered[$handle]->args;
        $href = $wp_styles->registered[$handle]->src . '?ver=' . $wp_styles->registered[$handle]->ver;
        $rel = isset($wp_styles->registered[$handle]->extra['alt']) && $wp_styles->registered[$handle]->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
        $title = isset($wp_styles->registered[$handle]->extra['title']) ? "title='" . esc_attr( $wp_styles->registered[$handle]->extra['title'] ) . "'" : '';

        $tag = "<link rel='stylesheet' id='$handle' $title href='$href' type='text/less' media='$media' />";
    }
    return $tag;
}
add_filter( 'style_loader_tag', 'enqueue_less_styles', 5, 2);

.lessスタイルシートをロードする理由は何ですか?あなたはそれが:) enqueue_styleで動作するようにする方法を求めているので、彼らは最高の、私は考えていない通常のCSSに輸出開発プロセスで使用されていることはあなたのケースである
onetrickpony

ビルドプロセスでそれらをcssに変換します。そうです、これはあくまでも開発目的のみです。
cbaigorri 2011

私の問題を解決したので、コードスニペットを投稿していただきありがとうございます。他の場所で同様のスクリプトを見つけましたが、機能しませんでした。
ScottS 2013

$ tag値の最後に "\ r \ n"を追加しました。これは、HTMLの行を結合するためです。$tag = "<link rel='stylesheet/less' id='$handle' $title href='$href' type='text/less' media='$media' />\r\n";
jnthnclrk 2013

回答:


5

はい、最終的なスタイルのリンク出力はstyle_loader_tagフィルターを通過します。


2

WP_Dependanciesクラスのquery()メソッドを使用する関数を作成しました。さらに、出力を再生成するのではなく、必要な部分を書き換えるだけです。

この関数は、グローバル$ wp_stylesオブジェクトにアクセスし、クエリを実行してスタイルシートオブジェクトを取得します。正規表現では、srcに.lessファイルが含まれているかどうかがチェックされ、trueの場合、それに応じてrel属性が変更されます。私の関数では、IDの-cssサフィックスを-lessサフィックスにさらに置き換えました。気に入らなければ、この行を削除してください。

function allow_less_stylesheets( $style_tag, $handle )
{
    global $wp_styles;

    $obj = $wp_styles->query( $handle );
    if( $obj === false )
    {
        return $style_tag;
    }
    if( !preg_match( '/\.less$/U', $obj->src ) )
    {
        return $style_tag;
    }

    // the current stylesheet is a LESS stylesheet, so make according changes
    $rel = isset( $obj->extra['alt'] ) && $obj->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
    $style_tag = str_replace( "rel='" . $rel . "'", "rel='stylesheet/less'", $style_tag );
    $style_tag = str_replace( "id='" . $handle . "-css'", "id='" . $handle . "-less'", $style_tag );
    return $style_tag;
}

0

変更するrel=stylesheetrel=stylesheet/lessして$tagも..定義rel=alternate stylesheet/less、動作しません。..


2
「この回答は、その長さと内容のために、自動的に低品質としてフラグが付けられました」。これは、あなたが望んでいないと確信しています。解決策の説明と、それが問題を解決すると考える理由を説明してください。
s_ha_dum 2013年

-1

ご回答有難うございます。私がリターンの代わりにエコーを置くまでそれは私のために機能しませんでした:

function enqueue_less_styles($tag, $handle) {
    global $wp_styles;
    $match_pattern = '/\.less$/U';
    if ( preg_match( $match_pattern, $wp_styles->registered[$handle]->src ) ) {
        $handle = $wp_styles->registered[$handle]->handle;
        $media = $wp_styles->registered[$handle]->args;
        $href = $wp_styles->registered[$handle]->src . '?ver=' . $wp_styles->registered[$handle]->ver;
        $rel = isset($wp_styles->registered[$handle]->extra['alt']) && $wp_styles->registered[$handle]->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
        $title = isset($wp_styles->registered[$handle]->extra['title']) ? "title='" . esc_attr( $wp_styles->registered[$handle]->extra['title'] ) . "'" : '';

        $tag = "<link rel='stylesheet' id='$handle' $title href='$href' type='text/less' media='$media' />";
    }
    echo $tag;
}
add_filter( 'style_loader_tag', 'enqueue_less_styles', 5, 2);

1
それは正しくないように見えます。フィルターは絶対に出力を返す必要があります。そうしないと、フィルターチェーンが壊れ、物事が台無しになります。
Rarst
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.