Jak przyspieszyć stronę w WordPressie? Więcej niż recenzja. „Skup się. Prosta droga do sukcesu” – Babauta Leo


Szczęśliwa 7-ka wartościowych skrawków kodu z dokumentacji jQuery


17 września 2014, 20:52 | 2 komentarze | 3 850

Biblioteka jQuery ostatnimi laty stała się bardzo popularnym narzędziem. To, co dawniej można było osiągnąć w javascripcie przy pomocy kilkunastu czy kilkudziesięciu linijek kodu, obecnie po podpięciu jquery.js można zrobić przy pomocy kilku linii. Poniżej znajdziecie snippety, z których często korzystam.

1. Pierwszy i ostatni element z własną klasą

Kiedy chcesz dodać np. separator do menu na początku albo końcu nawigacji lub np. zwiększyć ostatni element menu:

[code type=”javascript”]
$(document).ready(function() {
$(‚.menu ul li’).last().addClass(‚last’);
$(‚.menu ul li’).first().addClass(‚first’);
});
[/code]

Jak działa?
Linia nr 2 odpowiada za wyszukiwanie ostatniego elementu .menu ul li, po czym nadaje mu klasę „last”.
Analogicznie w l linii wyszukiwany jest pierwszy element .menu ul li, po czym nadawana mu jest klasa „first”.

2. Podmiana tekstu na inny

[code type=”javascript”]
$(document).ready(function() {
$(".widget-event-month, .event-month").each(function () {
if (jQuery(this).children().length == 0) {
$(this).text(jQuery(this).text().replace(‚Jan’,’Sty’));
}
});
});
[/code]

Naturalnie lepiej jest zmienić tekst bezpośrednio w skrypcie, bo powyższe rozwiązanie jest półśrodkiem i działa na zasadzie podmieniania odnalezionego ciągu znaków. Czasami jednak nie ma takiej możliwości i trzeba sobie radzić inaczej. W pozostałych przypadkach, polecam (jeśli pracujecie na Wordpressie)

Jak działa?
W 2 linii określamy elementy, które mają być przeszukane. W linii 4 wpisujemy do funkcji .replace jako pierwszą pozycję, która ma być zmieniona, a drugą, po przecinku, pozycję zmienianą. W powyższym przykładzie zmieniany jest skrót angielskiej nazwy miesiąca ‚Jan’ na ‚Sty’.

3. Element nawigacji na krawędzi ekranu wysuwany po najechaniu.

[code type=”javascript”]
$(‚.main-menu li.nav1’).mouseenter(function(){
$(this).stop(true, false).animate({"left": "0"}, ‚fast’);
});
$(‚.main-menu li.nav1’).mouseleave(function(){
$(this).stop(true, false).animate({"left": "-70px"}, ‚fast’);
});
[/code]

Ten kod jest żywcem wzięty z pliku js bloga, który teraz czytacie. Nawigacja witryny z lewej strony jest schowana (widać tylko ikony) ale po najechaniu pojawia się pełna nazwa.

Jak działa?

Pierwsza część skryptu odpowiada za animację – wysuwanie zakładki po najechaniu na li.nav1. Kiedy kursor myszy znajdzie się na elemencie <li> wtedy w CSS cecha left zmienia się z -70px na 0px. Druga część odpowiada za chowanie wtedy, kiedy kursor myszy znajdzie się poza elementem <li>.

4. Użycie elementu „rel” zamiast target

[code type=”javascript”]
$(‚a[rel=external]’).attr(‚target’,’_blank’);
[/code]

Każdy kto jest wielkim fanem walidacji strony w XHTML 1.0 Strict spotkał się niejednokrotnie z problemem niewalidujących się elementów target=”_blank” w linkach zewnętrznych. Ta prosta linijka kodu rozwiąże ten problem.

Jak działa?

Każdy element a, który posiada cechę rel=”external” będzie miał dołączaną linijkę target=”_blank” a problem błędów przy walidacji zniknie.

5. Dodanie kilku pustych linków do strony

[code type=”javascript”]
$("li.oferta a, li.dla-klienta a, li.promocje a, li.realizacje a, li.zarabiaj-w-sieci a, li.szablony a, li.artykuly a, li.kontakt a").attr({ href: "javascript:void(0);" });
[/code]

Czasami menu generuje się w CMS-ie automatycznie i nie ma co przerabiać pętli generującej poszczególne linki. Wygodniej jest w tym wypadku dopisać linijkę kodu odpowiadającą za umieszczenie do wybranych linków javascriptowego polecenia, które nic nie robi. Cóż, myślę że wiecie o tym że tak czasami trzeba :)

Jak działa?

Do każdego elementu a zawartego w <li> o podanych wyżej klasach dodawana jest magiczna formuła „javascript:void(0);”. Jest to zdecydowanie lepsze rozwiązanie aniżeli href=”#” ponieważ nie zostawia śladu w adresie URL.

6. Umieszczenie na stronie wyjeżdżającego „znikąd” obrazka

[code type=”javascript”]
$(‚.ganesh’).animate({
opacity: 100,
top: "10px",
right: "-250px"
}, 2500 );
[/code]

Aby zobaczyć efekt zajrzyj na przygotowaną przeze mnie jakiś czas temu stronę http://dancingganesh.eu/. Jeśli widzisz fioletowego słonia który nagle wyjeżdża z prawej strony ekranu to znaczy że wszystko funkcjonuje jak należy.

Jak działa?

Wcześniej musiałem przygotować obrazek któremu nadałem w CSS atrybuty position: absolute i right: -9999px. Po ich dodaniu umieściłem kod javascript, który zmusza słonia do przyjechanie do prawego elementu witryny (-9999px z prawej zmniejsza się do -250px). Całość odbywa się w czasie 2500 milisekund czyli nie mniej, nie więcej jak w 2,5 sekundy. Wygląda ciekawie i dodaje stronie charakteru. Właścicielowi witryny się podobało.

7. Powrót na górę strony

[code type=”javascript”]
$("a[href=’#top’]").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
[/code]

Coraz modniejszym elementem jest odnośnik pozwalający wrócić na górę strony. Co z tego, że klawisz Home robi to samo. Korzystająca z myszki osoba wędrująca od strony do strony nie będzie przecież sięgała do skrótów klawiszowych. One są dla specjalistów. A tak na serio klienci sobie życzą więc czasami taki element trzeba umieścić, a jest on bardzo prosty.

Jak działa?

Kliknięcie na odnośnik <a href=”#top”>Tekst odnośnika albo jakiś obrazek</a> sprawia że wywoływana jest linijka z funkcją .animate. Jako szczegółowa cecha tej funkcji podane jest „scrollTop: 0” co znaczy mniej więcej tyle co: przejdź do zerowej pikseli od góry na stronie. Dodatkowy atrybut „slow” pozwala sądzić, że programista chce doprowadzić odwiedzającego stronę do pełni zachwytu, bowiem witryna będzie przewijać się wolniej i efekt animacji do góry będzie bardziej uwypuklony.

Będzie mi niezmiernie miło, jeśli dołączysz do mnie na Facebooku!

Kamil Lipiński – przedsiębiorca, bloger, projektant stron www, założyciel Mocnej Grupy Blogerów oraz człowiek, który ma wielką nadzieję na to, że można się czegoś sensownego o WordPressie dowiedzieć w 500 sekund.
Wierzący (bynajmniej nie w technologię) geek.

Subscribe without commenting




Instagram

Spelling error report

The following text will be sent to our editors: