blog.nayma.pl


Dla miłośników HTML5, CSS3, JS, WordPress oraz systemu macOS

Dariusz Nayma.pl
Autor Wpisu

Podziel się


Tagi


SeoHost.pl

Automatyczne dodanie latin-ext dla Google Fonts

Dariusz Nayma.plDariusz Nayma.pl

Pewnie nie jeden z was miał problem z poprawnym wyświetlaniem znaków w WordPress. Mówimy oczywiście o czcionkach z Google Fonts. Rozwiązanie jest proste jeśli dany szablon ma opcje ustawienia atrybutów dla Google Fonts i możliwość wybrania latin-ext. Należy przy tym pamiętać, że nie wszystkie fonty posiadają ogonki i opcję latin-ext.

Możemy również ręcznie dodać/załadować font z Google Fonts. Dla używanej w tym serwisie czcionki Ubuntu kod do dodania na stronie powinien wyglądać tak:

<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,300,500,700,300italic,400italic,500italic,700italic&subset=latin,latin-ext" rel="stylesheet">

lub możemy zaimportować font bezpośrednio w naszym pliku style.css w szablonie potomnym Child Theme.

@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300,500,700,300italic,400italic,500italic,700italic&subset=latin,latin-ext);

Dzięki temu nie powinno być żadnych problemów z wyświetlaniem polskich znaków.

Co jednak, kiedy używany przez nas szablon nie posiada nigdzie opcji zmiany i ustawień ładowanych fontów a daje nam opcje wyboru fontów. Możemy wtedy skorzystać z poniższej funkcji i dodać ja do pliku functions.php szablonu potomnego Child Theme i to powinno rozwiązać nasze problemy z ogonkami. Poniższy kod wykorzystuje filtr style_loader_src i dodaje odpowiednią definicję do każdej dodanej przez motyw czy wtyczkę czcionki od Google o ile ten krój został dodany za pomocą funkcji wp_enqueue_style.

// Dodanie do fontow Google parametru Latin Extended
class iworks_subset_latin_extended
{
    public function __construct()
    {
        add_filter('style_loader_src', array($this,'style_loader_src'), 10, 2);
    }
 
    public function style_loader_src($src, $handle)
    {
        /**
         * check is google fonts url?
         */
        if ( !preg_match( '@fonts.googleapis.com/css@', $src ) ) {
            return $src;
        }
        $url = explode('?', $src);
        if ( sizeof($url) < 2 ) {
            return $src;
        }
        /**
         * parse arguments
         */
        $args = wp_parse_args($url[1]);
        /**
         * build subset array
         */
        $subset = array();
        if ( array_key_exists('subset', $args ) ) {
            $subset = explode(',', $args['subset']);
        }
        /**
         * add latin and latin-ext to subset
         */
        $subset[] = 'latin';
        $subset[] = 'latin-ext';
        /**
         * avoid duplicates
         */
        $args['subset'] = implode(',',array_unique($subset));
        /**
         * replace space to fiz add_query_arg
         */
        $args['family'] = preg_replace('/ +/', '+', $args['family']);
        return add_query_arg($args, $url[0]);
    }
}
 
new iworks_subset_latin_extended();

Pobierz wtyczkę: nayma_latin_etended.zip i zainstaluj ją jeśli nie chcesz dodawać kodu do pliku functions.php.

Źródło: http://iworks.pl/2014/08/15/filtr-dnia-style_loader_src-czyli-zawsze-polskie-znaki/

Komentarze