web-dev-qa-db-fra.com

Mettre les polices Web Google en file d'attente sans gâcher les symboles dans l'URL

Mettre en ligne les polices Web de la manière habituelle, c’est-à-dire utiliser la fonction 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' );

... résulte dans une balise link 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 constater, l’URL résultante est encoded .

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

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, en particulier parce qu'elle est similaire à la méthode utilisée dans la mise en file d'attente de 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' />

Notez le &#038;? Il doit s'agir de &, sinon les fichiers de polices servis ont uniquement les glyphes latin (le paramètre subset de l'URL est négligé, sauf si vous utilisez & et PAS son entité HTML).

Tous ceux qui peuvent aider à modifier la réponse de @ webaware afin 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.

stylesheetwp-enqueue-style
7
its_me

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 lancer la demande HTTP. Constatez par vous-même en inspectant les appels réseau dans un outil d’inspecteur Web. Vous ne perdez pas réellement vos sous-ensembles non latins.

Notez le &#038;? Il devrait être &, sinon les fichiers de polices servis ont uniquement les glyphes latins (c’est-à-dire que le paramètre de sous-ensemble de l’URL est négligé sauf si vous utilisez & et PAS son entité HTML).

Cela me dit que vous avez inspecté la source pour voir s'il y avait une esperluette échappée, sans réellement vérifier 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 lorsque vous avez une URL correctement encodée et échappée dans un attribut HTML src ou href.

Vous devez rechercher http://www.blooberry.com/indexdot/html/topics/urlencoding.htm pour rechercher davantage de caractères non sécurisés et réservés. Les deux groupes doivent toujours être codés.

22
Andrew Nacin

Essayez ceci (gérera aussi 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' );
5
webaware

Basé sur cette réponse vous pouvez essayer quelque chose comme ceci non testé 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

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 souhaitais (le seul regret étant que & devienne &#038; en sortie). Mais ensuite 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.

1
its_me