Mise en file d'attente des polices Web Google sans salir les symboles dans l'URL

9

Mise en file d'attente des polices Web Google de la manière habituelle, c'est-à-dire en utilisant la wp_enqueue_stylefonction comme ça ...

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

... entraîne une linkbalise placée dans l'en-tête comme suit:

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

Comme vous pouvez le voir, l'URL résultante est codée .

Je suis sûr que cela ne pose aucun problème, mais pour garder les choses propres et claires, je voudrais aller de l'avant et demander - Existe-t-il un moyen de mettre en file d'attente les polices Web de Google (via functions.phpet non un plugin) de manière à ce que la sortie de l'URL n'est pas codé?

C'est comme ça:

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

Raison de la prime

La réponse de @ webaware est presque parfaite, surtout parce qu'elle est similaire à la méthode utilisée pour mettre en file d'attente la police Web Google «Open Sans» dans le thème Twenty Twelve .

Le seul problème dans la sortie est que c'est comme ça:

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

Remarquez le &#038;? Cela devrait être le &cas, sinon les fichiers de polices servis n'ont que les latinglyphes (c'est-à-dire que le subsetparamètre dans l'URL est négligé sauf si vous utilisez &et NON son entité HTML).

Quiconque peut aider à modifier la réponse de @ webaware pour que la sortie ressemble à ceci ...

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

... gagne la prime.

c'est moi
la source
Je ne sais pas vraiment ce que vous voulez ici; voulez-vous avoir des sous-ensembles latin + latin-ext (ce que cela fait), ou voulez-vous qu'il ne sous-ensemble pas (ce qui peut être réalisé en supprimant l'élément 'subset' du tableau)?
Webaware

Réponses:

24

WordPress sait ce qu'il fait ici. Honnête.

Lors du rendu d'une esperluette en HTML, vous devez toujours utiliser &amp;ou &#038;. Le navigateur le convertit ensuite en &avant de réellement lancer la requête HTTP. Voyez par vous-même en inspectant les appels réseau dans un outil d'inspection Web. Vous ne perdez pas réellement vos sous-ensembles non latins.

Remarquez le &#038;? Il devrait être &, sinon les fichiers de polices servis n'ont que les glyphes latins (c'est-à-dire que le paramètre de sous-ensemble dans l'URL est négligé à moins que vous n'utilisiez & et NON son entité HTML).

Cela m'indique que vous avez inspecté la source pour voir s'il y a une esperluette échappée, sans vérifier réellement le comportement résultant. Oui, cela se produit lorsque vous collez une URL avec une esperluette échappée dans une barre d'adresse. Mais pas quand vous avez une URL correctement encodée et échappée dans un attribut HTML src ou href.

Vous devez rechercher sur http://www.blooberry.com/indexdot/html/topics/urlencoding.htm des caractères supplémentaires dangereux et réservés. Les deux groupes doivent toujours être codés.

Andrew Nacin
la source
1
Une très belle explication, merci d'avoir pris le temps Andrew!
Webaware
Donc, vous dites ... quand vous avez une URL correctement encodée dans un attribut HTML src ou href (c.-à-d. http://fonts.googleapis.com/css?family=Ubuntu+Condensed&#038;subset=latin,latin-ext), La façon dont le navigateur la traite est équivalente à la saisie de l'utilisateur http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,latin-ext(c.-à-d. Avec l' &entité réelle et non l'entité HTML) dans la barre d'adresse. Est-ce exact? Si oui, merci pour l'explication claire. :)
its_me
2
Correct. J'ai légèrement modifié ma réponse pour la rendre un peu plus claire. Dans ce cas, l'esperluette est une entité HTML échappée, non encodée en URL. Il ne doit pas être codé (ce qui serait le cas %38) car il est utilisé dans son rôle d'URL spécial. URL codant pour un caractère réservé ou dangereux comme |, :ou des espaces sont séparés, et aussi encouragé.
Andrew Nacin
@AndrewNacin: juste un peu, mais: cette URL vers blooberry.com concerne en fait des caractères d'encodage d'URL, pas des caractères d'encodage HTML. Le problème que vous abordez est le dernier, pas le premier.
Webaware
J'ai parlé des deux dans ma réponse et mon commentaire. Vous étiez inquiet pour les deux dans votre question initiale.
Andrew Nacin
5

Essayez ceci (gérera également 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' );
connaissance du Web
la source
Par hasard, est-ce basé sur le thème des vingt-douze ? : P
its_me
Très probablement où je l'ai vu :) mais ce n'est plus qu'une partie du kit maintenant.
Webaware
1
En fait, ce sont les mêmes. Le navigateur voit &#038;comme &et charges exactement le même URI. Pour tester, j'ai chargé des pages HTML simples avec les deux et vidé le cache avant le chargement; les deux ont chargé les mêmes fichiers de polices (même taille). Essayez-le.
Webaware
2

Sur la base de cette réponse, vous pouvez essayer quelque chose comme ce code non testé :

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;
}
fuxia
la source
Oui, cela fonctionne un peu, sauf la façon dont le versioning est fait (à tort?). La sortie ressemble à: <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' />- notice & # 038; ver = 3.5 ? Ce devrait plutôt être ? Ver = 3.5 . Une solution à l'esprit? Merci d'avoir répondu. :)
its_me
Vous ne pouvez pas utiliser une seconde ?. Cela entraînerait une URL non valide pour Google.
fuxia
http://fonts.googleapis.com/css?family=Ubuntu%20Condensed|Open%20Sans:400italic,700italic,400,700?ver=3.5se charge très bien. Ou est-ce que je manque votre point?
its_me
Le séparateur d'arguments n'est &pas ?. Vous ne pouvez pas compter sur la générosité de Google.
fuxia
Cette fonction est déconseillée "clean_url" -> codex.wordpress.org/Function_Reference/clean_url , vous devez en utiliser une autre.
Ed T.
1

En fait, c'est aussi simple que cela:

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

Et cela devrait produire:

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

C'est assez proche de ce que je voulais (je regrette seulement que cela &devienne &#038;en sortie). Mais j'ai réalisé que cela n'avait pas vraiment d'importance, en grande partie grâce à la réponse d'Andrew Nacin .

Mais je dois remercier tout le monde pour leurs efforts.

c'est moi
la source