Enqueue Google Web Fonts Tanpa Mengacaukan Simbol Dalam URL


9

Enqueuing Google Web Fonts seperti biasa, yaitu, menggunakan wp_enqueue_stylefungsi seperti ...

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' );

... menghasilkan linktag yang ditempatkan di header seperti:

<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' />

Seperti yang Anda lihat, URL yang dihasilkan dikodekan .

Saya cukup yakin itu tidak menimbulkan masalah, tetapi untuk menjaga hal-hal tetap bersih dan jelas, saya ingin melanjutkan dan bertanya - Apakah ada cara untuk membuat huruf Google Web Font (melalui functions.phpdan bukan plugin) dengan cara yang URL output tidak dikodekan?

Seperti itulah:

<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' />

Alasan Bounty

Jawaban @ webaware hampir sempurna, terutama karena mirip dengan metode yang digunakan dalam memunculkan Font Web Google 'Open Sans' dalam tema Twenty Twelve .

Satu-satunya masalah dalam output adalah seperti ini:

<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' />

Perhatikan &#038;? Seharusnya &, jika file font yang dilayani hanya memiliki latinmesin terbang (yaitu subsetparameter dalam URL diabaikan kecuali Anda menggunakan &dan BUKAN entitas HTML-nya).

Siapa pun yang dapat membantu memodifikasi jawaban @ webaware sehingga hasilnya terlihat seperti ini ...

<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' />

... memenangkan hadiah.


Tidak yakin apa yang Anda inginkan di sini; Anda ingin memiliki himpunan bagian latin + latin-ext (yang memang demikian), atau Anda tidak ingin subset (yang dapat dicapai dengan menghapus elemen 'himpunan bagian' dari array)?
webaware

Jawaban:


24

WordPress tahu apa yang dilakukannya di sini. Jujur.

Saat merender ampersand dalam HTML, Anda harus selalu menggunakan &amp;atau &#038;. Browser kemudian mengubahnya &sebelum benar-benar menembak permintaan HTTP. Lihat sendiri dengan memeriksa panggilan jaringan dalam alat pemeriksa web. Anda sebenarnya tidak kehilangan himpunan bagian non-latin Anda.

Perhatikan &#038;? Seharusnya &, jika file font yang dilayani hanya memiliki mesin terbang latin (yaitu parameter subset dalam URL diabaikan kecuali Anda menggunakan & dan BUKAN entitas HTML-nya).

Ini memberitahu saya bahwa Anda telah memeriksa sumber untuk melihat ada ampersand yang lolos, tanpa benar-benar memverifikasi perilaku yang dihasilkan. Ya, itu terjadi ketika Anda menempelkan URL dengan tanda yang keluar dan di bilah alamat. Tetapi tidak ketika Anda memiliki URL yang dikodekan dengan benar dan lolos dalam atribut HTML src atau href.

Anda harus memeriksa http://www.blooberry.com/indexdot/html/topics/urlencoding.htm untuk mengetahui karakter tambahan yang tidak aman dan dilindungi undang-undang. Kedua kelompok harus selalu dikodekan.


1
Penjelasan yang sangat bagus, terima kasih telah meluangkan waktu Andrew!
webaware

Jadi, Anda mengatakan ... ketika Anda memiliki URL yang dikodekan dengan benar dalam atribut HTML src atau href (yaitu http://fonts.googleapis.com/css?family=Ubuntu+Condensed&#038;subset=latin,latin-ext), cara browser memperlakukannya sama dengan memasukkan pengguna http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,latin-ext(yaitu dengan &entitas HTML aktual dan bukan entitas) di bilah alamat. Apakah itu benar? Jika demikian, terima kasih atas penjelasan yang jelas. :)
its_me

2
Benar. Saya mengedit jawaban saya sedikit untuk membuatnya sedikit lebih jelas. Dalam hal ini, ampersand adalah entitas HTML yang lolos, bukan URL yang disandikan. Seharusnya tidak dikodekan (yang akan %38) karena sedang digunakan dalam peran URL khusus. URL encoding karakter dilindungi atau tidak aman seperti |, :, atau ruang yang terpisah, dan juga mendorong.
Andrew Nacin

@AndrewNacin: hanya sebuah nitput, tetapi: bahwa URL untuk blooberry.com sebenarnya tentang karakter penyandian URL, bukan karakter penyandian HTML. Masalah yang Anda tangani adalah yang terakhir, bukan yang pertama.
webaware

Saya berbicara tentang keduanya dalam jawaban saya, dan komentar. Anda khawatir tentang keduanya dalam pertanyaan awal Anda.
Andrew Nacin

5

Coba ini (juga akan menangani HTTP vs 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' );

Secara kebetulan, apakah ini berdasarkan tema Dua Puluh Dua Belas ? : P
its_me

Sangat mungkin di mana saya melihatnya :) tapi itu semua hanya bagian dari kit sekarang.
webaware

1
Sebenarnya mereka sama. Browser melihat &#038;sebagai &dan beban persis sama URI. Untuk menguji, saya memuat halaman HTML sederhana dengan keduanya, dan membersihkan cache sebelum memuat; keduanya memuat file font yang sama (ukuran yang sama). Cobalah.
webaware

2

Berdasarkan jawaban ini Anda dapat mencoba sesuatu seperti kode yang belum diuji ini :

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

Ya, itu agak berhasil, kecuali cara versi dilakukan (salah?). Outputnya terlihat seperti: <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' />- perhatikan & # 038; ver = 3.5 ? Seharusnya agak ? Ver = 3.5 . Adakah yang perlu diperbaiki? Terima kasih atas jawabannya. :)
its_me

Anda tidak dapat menggunakan yang kedua ?. Itu akan menghasilkan URL yang tidak valid untuk Google.
fuxia

http://fonts.googleapis.com/css?family=Ubuntu%20Condensed|Open%20Sans:400italic,700italic,400,700?ver=3.5sedang memuat dengan baik. Atau apakah saya kehilangan poin Anda?
its_me

Pemisah argumennya adalah &tidak ?. Anda tidak dapat mengandalkan kemurahan hati Google.
fuxia

Fungsi ini telah ditinggalkan "clean_url" -> codex.wordpress.org/Function_Reference/clean_url , Anda harus menggunakan yang lain.
Ed T.

1

Sebenarnya, sesederhana ini:

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

Dan itu akan menghasilkan:

<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' />

Itu cukup dekat dengan apa yang saya inginkan (hanya penyesalan yang &menjadi &#038;output). Tetapi kemudian saya menyadari bahwa itu tidak masalah, sungguh, sebagian besar berkat jawaban Andrew Nacin .

Tetapi saya harus berterima kasih kepada semua orang atas upaya mereka.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.