Dzisiaj coś prostego, czyli hamburger menu.
Najpierw html:
<button class="hamburger">
<div class="hamburger-center"></div>
</button>
Dzisiaj coś prostego, czyli hamburger menu.
<button class="hamburger">
<div class="hamburger-center"></div>
</button>
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 😉
Powiedzmy że mamy bardzo długą listę linków. Chciałbym aby ta lista łamała się na 2, 3 a może więcej kolumn. W naszym przykładzie lista będzie składać się z 20 elementów.
Taką listę można uzyskać przez emmet aby nie klepać tego samodzielnie wystarczy wpisać ul#ul>li{text $}*20
<ul id="ul">
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
<li>text 4</li>
...
</ul>
Chciałby aby ta lista została podzielona na dwie kolumny. Do tego użyjemy column-count Które jest wpierane nawet przez IE od wersji 10
Oczywiście też trochę upiększymy wygląd naszej listy.
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.
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 🙂