Podstawowe założenia:
1. Cień z prawej strony, jeżeli scroll jest na pozycji skrajnej lewej.
2. Cień z lewej strony, jeżeli scroll jest na pozycji skrajnej prawej.
3. Cień po lewej jak i prawej stronie równocześnie, gdy skroll się porusza 😉
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.
Następny kod do przyspieszenia wordpressa.
Kod umieszczamy w pliku z funkcjami np. w functions.php
Polecam sprawdzić stronę przed oraz po modyfikacji na GTmetrix oraz Google pagespeed
function kodywig_remove_css_js_ver($src)
{
if (strpos($src, '?ver='))
$src = remove_query_arg('ver', $src);
return $src;
}
add_filter('style_loader_src', 'kodywig_remove_css_js_ver', 10, 2);
add_filter('script_loader_src', 'kodywig_remove_css_js_ver', 10, 2);Najpierw zadajmy sobie pytanie. Ile reklam chcemy umieścić na stornie, jeżeli więcej niż jedną to zapewniam warto przeczytać poniższy tekst 😉
Na stornie Google AdSense kod wygenerowany zawsze wygląda podobnie jak ten poniżej.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- SiteName -->
<ins class="adsbygoogle"
style="display:block;"
data-ad-client="pub-111111111111111"
data-ad-slot="2222222222"
data-ad-width="250"
data-ad-height="250"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({}); });
</script>Problem jaki występuje przy większej liczbie reklam to to że wywołujemy kilka razy tę samą stronę, a to ma bardzo duże znaczenie przy optymalizacji strony i szybkości jej działania.
Najprostszym rozwiązaniem jest oczywiście wywołanie tylko raz 🙂
W uproszczeniu, emmet pomaga nam w szybkim pisaniu html
Może występować jako plugin czy może być wbudowany do edytora którego używamy.
Ja używam visual studio code i on jest tam wbudowany w dodatku bardzo ładnie podpowiada składnię.
Poniżej to tylko mała lista przydatnych funkcji resztę można znaleźć tutaj
Zaczniemy od podstaw.
Napisz ! dostaniemy podstawę HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body></body>
</html>