URLの記号を変更せずにGoogle Webフォントをエンキュー


9

通常の方法で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はエンコードされています。

私はそれが問題を引き起こさないと確信していますが、物事を明確かつ明確に保つために、私は先に進んで質問したいと思いfunctions.phpます-URLが出力する方法で(プラグインではなく)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 Twelveテーマの「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グリフのみが含まれます(つまりsubset、URL のパラメーターは、&HTMLエンティティではなく、使用しない限り無視されます)。

出力が次のようになるように@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' />

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


ここで何が必要かはよくわかりません。latin + latin-extサブセットを作成しますか(これを実行します)、サブセット化しません(配列から「サブセット」要素を削除することで実現できます)。
webaware

回答:


24

WordPressはここで何をしているのかを知っています。正直。

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

に注意して&#038;ください?それは&である必要があります。そうでない場合、提供されるフォントファイルにはラテン文字のみが含まれます(つまり、HTMLエンティティではなく&を使用しない限り、URLのサブセットパラメータは無視されます)。

これは、結果の動作を実際に確認することなく、エスケープされたアンパサンドがあることをソースを調べたことがわかります。はい、アンパサンドがエスケープされたURLをアドレスバーに貼り付けると発生します。ただし、HTML srcまたはhref属性に適切にエンコードおよびエスケープされたURLがある場合はそうではありません。

安全でない、予約済みの文字がないか、http://www.blooberry.com/indexdot/html/topics/urlencoding.htmを確認する必要があります。どちらのグループも常にエンコードする必要があります。


1
アンドリューに時間を割いていただきありがとうございます。
webaware

つまり、HTML srcまたはhref属性(つまりhttp://fonts.googleapis.com/css?family=Ubuntu+Condensed&#038;subset=latin,latin-ext)に適切にエンコードされたURLがある場合、ブラウザがそれを処理する方法は、ユーザーが入力したhttp://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,latin-ext(つまり&、HTMLエンティティではなく実際のアドレスバー。あれは正しいですか?もしそうなら、明確な説明をありがとう。:)
its_me

2
正しい。少しわかりやすくするために、回答を少し編集しました。この場合、アンパサンドはエスケープされたHTMLエンティティであり、URLエンコードされていません。%38特別なURLロールで使用されているため、エンコードしないでください(これはになります)。URLは次のように予約したり、安全でない文字をコードする|:またはスペースが別々の、また奨励されています。
アンドリューナシン

@AndrewNacin:ほんの少しだけですが、そのblooberry.comへのURLは、実際にはHTMLエンコード文字ではなく、URLエンコード文字に関するものです。あなたが取り組んでいる問題は前者ではなく後者です。
webaware

私は答えとコメントの両方で話しました。あなたは元の質問で両方について心配していました。
Andrew Nacin、

5

これを試してください(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' );

たまたま、これはTwenty Twelveテーマに基づいていますか?:P
its_me

私が見たところは非常にありそうです:)しかし、それは今ではすべてキットの一部にすぎません。
webaware

1
実は同じです。ブラウザは&#038;&まったく同じURIを認識し、ロードします。テストするために、両方の単純なHTMLページをロードし、ロードする前にキャッシュをクリアしました。どちらも同じフォントファイルをロードしました(同じサイズ)。それを試してみてください。
webaware

2

この答えに基づいて次のテストされていないコードのようなものを試すことができます:

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;
}

はい、バージョン管理が行われる方法を除いて、それはちょっとうまくいきます(間違っていますか?)。出力は次のようになります。-&#038; ver = 3.5に<link rel='stylesheet' id='google-webfonts-css' href='http://fonts.googleapis.com/css?family=Ubuntu Condensed|Open Sans:400italic,700italic,400,700&#038;ver=3.5' type='text/css' media='all' />注意してください?むしろ?ver = 3.5である必要があります。何か修正はありますか?答えてくれてありがとう。:)
its_me

秒は使用できません?。その結果、GoogleのURLが無効になります。
fuxia

http://fonts.googleapis.com/css?family=Ubuntu%20Condensed|Open%20Sans:400italic,700italic,400,700?ver=3.5正常にロードされています。または私はあなたのポイントを逃していますか?
its_me

引数のセパレータはであり&、ではありません?。Googleの寛大さに頼ることはできません。
fuxia

この関数は廃止されました "clean_url"-> codex.wordpress.org/Function_Reference/clean_url。他の関数を使用する必要があります。
Ed T.

1

実際、これは次のように簡単です。

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の回答のおかげです。

しかし、私は皆の努力に感謝しなければなりません。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.