web-dev-qa-db-ja.com

URLでシンボルをめちゃくちゃにせずにGoogle Webフォトをエンキューする

Google Web Fontsを通常の方法でエンキューする、つまり、wp_enqueue_style関数を次のように使用する。

function wpse_google_webfonts() {
    wp_enqueue_style( 'google-webfonts', 'http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700' );
}
add_action( 'wp_enqueue_scripts', 'wpse_google_webfonts' );

...はlinkタグをヘッダーに次のように配置します。

<link rel='stylesheet' id='google-webfonts-css'  href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed%7COpen+Sans%3A400italic%2C700italic%2C400%2C700&#038;ver=3.5' type='text/css' media='all' />

ご覧のとおり、結果のURLは encoded です。

問題ないと確信していますが、物事をきれいにして明確にするために、先に進んで質問したいと思います。（プラグインではなくfunctions.php経由で）Google Web Fontsをエンキューする方法はありますか出力はエンコードされていませんか？

それはそうです：

<link rel='stylesheet' id='google-webfonts-css'  href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700?ver=3.5' type='text/css' media='all' />

バウンティの理由

@ webawareの答えは、ほぼ完璧に近いです。なぜなら、それは Twenty 12で 'Open Sans' Google Web Fontをエンキューする _で採用されている方法に似ているからです。

出力の唯一の問題は、それがこのようなものであるということです。

<link rel='stylesheet' id='twentytwelve-fonts-css'  href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700&#038;subset=latin,latin-ext' type='text/css' media='all' />

&#038;に注意してください。 &でなければなりません、そうでなければ提供されるフォントファイルはlatinグリフのみを持ちます（すなわち、&を使い、そのHTMLエンティティを使わない限り、URLのsubsetパラメータは無視されます）。

出力がこのようになるように@ webawareの答えを修正することを手助けできる人は誰でも...

<link rel='stylesheet' id='twentytwelve-fonts-css'  href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext' type='text/css' media='all' />

...賞金を獲得します。

stylesheetwp-enqueue-style
7
its_me

WordPressはそれがここで何をしているのか知っています。正直なところ。

HTMLでアンパサンドをレンダリングするときは、常に&amp;または&#038;を使用する必要があります。ブラウザは実際にHTTPリクエストを実行する前にそれを&に変換します。 Webインスペクタツールでネットワーク通話を調べて自分の目で確かめてください。ラテン語ではないサブセットを実際に失うわけではありません。

&#038;に注意してください。そうでない場合は、提供されるフォントファイルはラテングリフのみを持ちます（つまり、＆を使用し、そのHTMLエンティティを使用しない限り、URLのサブセットパラメータは無視されます）。

これは、実際に結果として生じる振る舞いを検証することなく、アンパサンドのエスケープがあることをソースが調べたことを私に伝えています。はい。アドレスバーにアンパサンドをエスケープしたURLを貼り付けると発生します。ただし、HTMLのsrcまたはhref属性に正しくエンコードされてエスケープされたURLがある場合はそうではありません。

安全でない予約文字については http://www.blooberry.com/indexdot/html/topics/urlencoding.htm をご覧ください。両方のグループは常にエンコードされるべきです。

22
Andrew Nacin

これを試してみてください（HTTPとHTTPSの両方を扱うでしょう）：

function wpse_google_webfonts() {
    $protocol = is_ssl() ? 'https' : 'http';
    $query_args = array(
        'family' => 'Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700',
        'subset' => 'latin,latin-ext',
    );

    wp_enqueue_style('google-webfonts',
        add_query_arg($query_args, "$protocol://fonts.googleapis.com/css" ),
        array(), null);
}

add_action( 'wp_enqueue_scripts', 'wpse_google_webfonts' );
5
webaware

に基づいて この答え あなたはこのようなことを試すことができます 未テスト code：

add_filter( 'clean_url', 'wpse_77227_decode_googlefont_url' );

function wpse_77227_decode_googlefont_url( $url )
{
    $Host = parse_url ($url, PHP_URL_Host );

    if ( 'fonts.googleapis.com' === $Host )
        return urldecode( $url );

    return $url;
}
2
fuxia

実際、これはこれと同じくらい簡単です。

wp_enqueue_style( 'google-webfonts', 'http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext', array(), null );

そしてそれは出力する必要があります：

<link rel='stylesheet' id='google-webfonts-css'  href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700&#038;subset=latin,latin-ext' type='text/css' media='all' />

それは私が望んでいたことにかなり近いです（出力で&が&#038;になるのは残念です）。しかし、それから私はそれが問題にならないことに気づいた、本当に、 Andrew Nacinの答え のおかげです。

しかし、私は彼らの努力に対してみんなに感謝しなければなりません。

1
its_me