W poście poniżej opisałem jak usunąć "?ver" ze statycznych linków - [ tutaj ]
Po tej zmianie pojawił się problem z "cashowaniem" plików. Rozwiązanie jest dość proste.
W związku z tym że do generowania plików użyty został "gulp" oraz biblioteka "gulp-rev" za pomącą której do nazw plików dodany jest hash - style-ecf06381de.css
Problem jaki napotykamy to jak wczytać pliki css i js w wordpressie, które za każdym razem gdy zmieniamy coś we frontendzie mają inną nazwę.
Na potrzeby tego bloga stworzyłem poniższą funkcję.
/**
* match file name
*/
function kodywig_matchFile($partOfName, $folder)
{
$handler = get_template_directory() . '/assets/' . $folder;
$openHandler = opendir($handler);
while ($file = readdir($openHandler)) {
if ($file !== '.' && $file !== '..') {
if (preg_match("/^" . $partOfName . "\w+.(" . $folder . ")/i", $file, $name)) {
return $name[0];
}
}
}
closedir($openHandler);
}Do powyższej funkcji przekazywane są dwa parametry, pierwszy $partOfName czyli cześć nazwy. Drugi parametr $folder czyli gdzie znajduje się nasz plik css|js
Najpierw budujemy ścieżkę do folderu, później w pętli wyciągamy nazwę pliku przez preg_match i zwracamy nazwę z dopasowania.
Na przykładzie tego pliku style-ecf06381de.css chcemy go dodać do weodpressa.
W miejscu w którym dodajemy js czy css do strony modyfikujemy wpis na poniższy.
wp_enqueue_style('kodywig-main', get_template_directory_uri() . '/assets/css/' . kodywig_matchFile('style-', 'css'), null, KODYWIG_THEME_VERSION);W ten sam sposób dodałem krytyczne css w moim wypadku "bootstrap" do head strony jako inline.
/**
* adding boostrap style inline
*/
function kodywig_inline_css()
{
$cssFile = kodywig_matchFile("bootstrap-", "css");
$critical_css = file_get_contents(get_template_directory_uri() . '/assets/css/' . $cssFile);
echo '<style>' . $critical_css . '</style>';
}
add_action('wp_head', 'kodywig_inline_css', 0);