Ставить в очередь веб-шрифты Google, не путая символы в URL

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 закодирован .

Я почти уверен, что это не создает никаких проблем, но чтобы держать вещи в чистоте и ясности, я хотел бы продолжить и спросить - есть ли способ поставить в очередь Google Web Fonts (через, functions.phpа не плагин) таким образом, чтобы вывод URL не кодируется?

Вот так вот:

<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 близок к идеальному, особенно потому, что он похож на метод, использованный при постановке в очередь веб-шрифта Google «Open Sans» в теме «Двадцать двенадцать» .

Единственная проблема в выводе - это так:

<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 (что это делает), или вы не хотите, чтобы это было подмножество (что может быть достигнуто удалением элемента 'subset' из массива)?
webaware 30.12.12

Ответы:

24

WordPress знает, что здесь делает. Честный.

При рендеринге амперсанда в HTML вы всегда должны использовать &amp;или &#038;. Затем браузер преобразует его &до фактического запуска HTTP-запроса. Убедитесь сами, проверив сетевые вызовы в инструменте веб-инспектора. Вы на самом деле не теряете свои нелатинские подмножества.

Заметьте &#038;? Это должно быть &, в противном случае обслуживаемые файлы шрифтов имеют только латинские глифы (т. Е. Параметр подмножества в URL игнорируется, если вы не используете &, а НЕ его HTML-сущность).

Это говорит мне о том, что вы проверили источник, чтобы увидеть, что существует амперсанд, без фактической проверки результирующего поведения. Да, это происходит при вставке URL-адреса с экранированным амперсандом в адресной строке. Но не тогда, когда у вас есть правильно закодированный и экранированный URL в атрибуте HTML src или href.

Вам следует поискать http://www.blooberry.com/indexdot/html/topics/urlencoding.htm дополнительные небезопасные и зарезервированные символы. Обе группы всегда должны быть закодированы.

Андрей Нацин
источник
1
Очень хорошее объяснение, спасибо, что нашли время, Андрей!
webaware 30.12.12
Итак, вы говорите ... если у вас есть правильно закодированный URL-адрес в атрибуте HTML src или href (т. Е. http://fonts.googleapis.com/css?family=Ubuntu+Condensed&#038;subset=latin,latin-ext), То, как браузер обрабатывает его, эквивалентно вводу пользователя http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,latin-ext(т. Е. С фактической, &а не с HTML-сущностью) в адресная строка. Это верно? Если так, спасибо за ясное объяснение. :)
its_me
2
Правильный. Я немного отредактировал свой ответ, чтобы сделать его более понятным. В этом случае амперсанд представляет собой экранированный объект HTML, а не кодированный URL. Он не должен быть закодирован (что было бы %38), потому что он используется в своей специальной роли URL. URL , кодирующий зарезервированный или небезопасный характер , как |, :или пространства разделены, а также поощряется.
Андрей Нацин
@AndrewNacin: просто глупость, но: этот URL для blooberry.com на самом деле о символах кодировки URL, а не символах HTML-кодировки. Проблема, которую вы решаете, - последняя, ​​а не первая.
webaware 30.12.12
Я говорил об этом как в своем ответе, так и в комментарии. Вы были обеспокоены обоими в своем первоначальном вопросе.
Андрей Нацин
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' );
webaware
источник
Случайно ли это основано на теме «Двадцать двенадцать» ? : P
its_me
Очень вероятно, где я видел это :), но теперь это всего лишь часть комплекта.
webaware 26.12.12
1
На самом деле они одинаковы. Браузер видит &#038;как &и загружает точно такой же URI. Чтобы проверить, я загрузил простые HTML-страницы с обоими, и очистил кеш перед загрузкой; оба загружали одинаковые файлы шрифтов (одинакового размера). Попробуй это.
webaware 30.12.12
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;
}
Фуксия
источник
Да, это работает, за исключением того, как выполняется управление версиями (неправильно?). Вывод выглядит так: <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 ? Скорее должно быть ? Ver = 3,5 . Любое исправление в виду? Спасибо за ответ. :)
its_me
Вы не можете использовать секунду ?. Это приведет к неверному URL для Google.
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 , вам следует использовать другую.
Эд Т.
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;на выходе). Но потом я понял, что это не имеет значения, на самом деле, во многом благодаря ответу Эндрю Нацина .

Но я должен поблагодарить всех за их усилия.

это я
источник