Kde změním cestu k style.css? Refresh stránek.

[lucky.manParticipant Web]

Ahoj, kde můžu změnit cestu ke stylům šablony? Resp. udělal jsem změny ve stylech a samozřejmě vzniká problém s cache prohlížečů u návštěvníků – zobrazuje se původní podoba, která teď nesedí. Potřeboval bych styly přejmenovat a změnit k nim cestu.

Popřípadě, nedá se “refresh” stránek ošetřit i jinak?

[adminKeymaster Web]

Není třeba měnit cestu ke stylům, možností je ve WordPressu více:

1) Můžete nastavit, aby se načítaná stránka v prohlížeči vůbec neukládala (návod):

<META http-equiv="cache-control" content="no-cache">

To ale není ideální, protože se budou soubory pokaždé znovu načítat.

2) Proto je lepší varianta s verzováním souboru style.css. Teoreticky pokaždé když ho změníte, tak můžete zasáhnout do souboru header.php, kde je obvykle načítán a přiřadit mu např. parametr ?v=1.01. Ručně to ale není ideální, takže je lepší nechat to dělat WordPress automaticky podle nějaké podmínky, kterou je datum změněného souboru style.css. Stačí pak využít PHP funkce filemtime() a tedy pokaždé, když bude soubor style.css aktualizován, tak se automaticky změní i verze souboru style.css (příklad). Stačí tedy změnit stávající kód s načítaným souborem style.css na tento:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

Jednoduché a funkční… Jakmile změníte styly, tak u všech návštěvníků vyvoláte refresh souboru se styly…

[lucky.manParticipant Web]

Jak přesně se chová funkce filemtime(), netahá se potom style.css pořád znovu bez cache?

[adminKeymaster Web]

Soubor style.css se načítá každému znovu (bez cache) v případě, kdy došlo ke změně souboru. Funkce filemtime() zjišťuje datum a čas poslední úpravy souboru style.css. Takže pokud teď změníte soubor a návštěvník byl na webu naposledy včera, tak se mu soubor style.css načte znovu. Pokud přijde znovu zítra a soubor style.css už nebude aktualizován, tak si bude brát prohlížeč soubor z cache. Alespoň tak by to mělo fungovat…

[lucky.manParticipant Web]

Mám originál kód trochu komplikovanější vzhledem k možnosti zvolit si světlou nebo tmavou podobu šablony. Jak by měl potom vypadat kód s funkcí filemtime()?

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style<?php echo get_option('theme_site_style')=='light' ? '-light' : ''; ?>.css" type="text/css" media="screen" />

[neteyesczParticipant]

Dělané ve spěchu, ale mělo by fungovat:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>/style<?php echo get_option('theme_site_style')=='light' ? '-light' : ''; ?>.css" type="text/css" media="screen" />

[lucky.manParticipant Web]

Hraje nějakou roli template_url x stylesheet_url?

[adminKeymaster Web]

lucky.man: Ano, stylesheet_url je obecnější a počítá i s odvozenými šablonami, které na webu nepoužíváš. Pokud bys využíval odvozenou šablonu (child theme), což je mimochodem správný (!) způsob vlastních úprav šablony, tak stylesheet_url bude odkazovat na soubor style.css přímo v adresáři odvozené šablony, zatímco template_url bude odkazovat do adresáře nadřazené (rodičovské, parent) šablony. Každá má trochu jiné účely a použití, nelze říci, která je lepší/vhodnější…

Důležité je ještě zmínit funkci get_stylesheet_directory(), pomocí které získáme absolutní cestu na serveru do adresáře se souborem style.css.

neteyescz: Vypadá to dobře, ale je tam jedna chybka. Testuješ pomocí funkce filemtime() obě dvě varinaty souboru se styly, ale zobrazuješ stále jenom jeden, a to style.css :-) Každopádně dobrá práce…

Řešili jsme to už s tazatelem emailem a podle mě je to asi ideálně takto (podmínka změněna na klasickou kvůli přehlednosti kódu):

<?php if ( get_option( 'theme_site_style' ) == 'light' ) { $append_color = '-light'; }  else { $append_color = ''; } ?><br />
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); echo '/style' . $append_color . '.css?' . filemtime( get_stylesheet_directory() . '/style' . $append_color . '.css' ); ?>" type="text/css" media="screen" />

[adminKeymaster Web]

A ještě doplním, že celou problematikou se zabývá nový článek (anglicky), který to řeší v případě načítání souborů pomocí parametru $ver u funkcí wp_enqueue_script() a wp_enqueue_style(). Kromě přidávání aktuálního času a data, času změněného souboru přidává i možnost snychronizace verzování souborů s aktuální verzí vlastního pluginu.

[MikeParticipant]

Zdravím,
před časem jsem podle Vašeho návodu (výše) ve své šabloně přepsal řádek:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />

na:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

…a bylo to ok.

Teď jsem ale updatoval na novou verzi šablony a tam ten řádek není. Co se týče “stylesheet” tam mám teď toto:

<?php
wp_deregister_style( 'style-css' );
wp_register_style( 'style-css', get_stylesheet_uri() );
wp_enqueue_style( 'style-css' );
?>
<!--[if lte IE 8]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/ie8.css" />
<![endif]-->

<!--[if IE]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/ie.css" />
<![endif]-->

Poradili byste prosím, jak do toho naimplementovat opět to s tou funkcí filemtime()?
(Nejsem odborník)

Děkuji.

[Autor]

Příspěvky