Contact form 7 (CF7) je najpopularniji besplatni plugin za kreiranje kontakt formi. U trenutku pisanja ovog članka skinut je skoro 18 milijuna puta te je aktivan na preko milion WordPress instalacija.
Nakon instalacije, CF7 po defaultu “postavlja” svoje JavaScript i CSS datoteke na svim stranicama. Samo po sebi to ne znači ništa loše ali danas ćemo pričati o činjenici da prosječan korisnik na svom webu može koristiti desetak pluginova koji na isti način u head sekciju ubacuju svoje datoteke. Ovdje dolazimo do problema s brzinom učitavanja web stranice, koji nije važan isključivo zbog korisničkog iskustva, nego i zbog almighty Googla koji brzinu učitavanja stranice koristi u svojim logaritmima kao faktor koji utječe na ranking (položaj) vašeg weba u rezultatima pretrage.
Optimiziranje Contact form 7 plugina
Kako bismo koristili datoteke CF7 samo na stranicama na kojima se on zaista i koristi, prvo moramo globalno “od-registrirati” JS i CSS datoteke te ih učitati samo na stranicama gdje koristimo kontakt forme. Postoji više načina kako to učiniti, ali danas ću spomenuti samo dva.
1. način
Autor Contact form 7 plugina Takayuki Miyoshi, na svojim web stranicama predstavlja jedan način.
Ako koristite Contact Form 7 3.9 ili noviji (aktualna verzija je 4.2), dodavanjem slijedećeg koda u functions.php vaše AKTIVNE teme onemogućiti ćete učitavanje JS i CSS na svim stranicama:
add_filter( 'wpcf7_load_js', '__return_false' ); add_filter( 'wpcf7_load_css', '__return_false' );
Ako kontakt formu koristite samo na stranici “Kontakt”, velika je šansa da vaša tema ima zaseban predložak (template), koji se vrlo vjerojatno zove contact.php.
U folderu teme pronađite tu datoteku i u istu dodajte slijedeći kod:
<?php
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();
}
?>
Napomena: ovaj snippet obavezno mora biti pozvan prije nego što je pozvan wp_head()
2. način
Možda ste svoju kontakt formu(e) koristili na par različitih stranica (Kontakt, O nama i sl.) ili ste koristili običan predložak (tj. vaša tema nema zaseban predložak za kontakt stranicu).
U tom slučaju, u functions.php vaše teme možete dodati slijedeći kod:
add_action( 'wp_print_scripts', 'deregister_cf7_javascript', 100 );
function deregister_cf7_javascript() {
if ( !is_page(array(66, 'o-nama', 'Kontakt')) ) {
wp_deregister_script( 'contact-form-7' );
}
}
add_action( 'wp_print_styles', 'deregister_cf7_styles', 100 );
function deregister_cf7_styles() {
if ( !is_page(array(66, 'o-nama', 'Kontakt')) ) {
wp_deregister_style( 'contact-form-7' );
}
}
Koristimo funkciju is_page() čije vrste primjene možete pronaći u WordPress Codexu is_page()
Ova funkcija kao vrijednosti parametra prima Page ID, Page Title ili Page Slug. Osobno preferiram Page ID jer se on nikad ne mijenja, za razliku od Title-a ili Sluga kojeg korisnici često znaju prepravljati.
Napomena: u dio funkcije if ( !is_page(array(66, 102, 201)) ) { u array upišite Page ID-eve stranica na kojima koristite kontakt formu.
Kako doznati Page ID stranice?
U adminu idite na prikaz svih postova, pronađete željeni post i mišem prijeđete preko (hover) naslova posta. Na dnu preglednika prikazuje se traka s URL-om dotičnog posta. U našem slučaju, Page ID kontakt stranice je 66.
Drugi način je da u adminu otvorite post (uredi). U address baru vidite URL vašeg posta. Odmah nakon vrijednosti post= nalazi se broj koji označava Page ID. Njega iskopirate u funkciju i to je to 😉
Napomena: opisani koraci vrijede i za postove i za stranice.
Kako provjeriti da li se skripte učitavaju samo gdje je potrebno?
U web pregledniku (browseru) otvorite stranicu. Možete ili istovremeno pritisnuti CTRL i U ili desni klik i izaberete “View page source”. U novootvorenom tabu vidjet ćete kod stranice. Istovremeno kliknite na CTRL i F te upišite riječ contact. Ako se radi o stranici na kojoj ne koristite kontakt formu, ne bi trebalo biti rezultata. Na stranici Kontakt rezultati pretrage će vas dovesti do koda koji je zadužen za učitavanje JS i CSS datoteka CF7 plugina. Za CSS datoteku on izgleda otprilike ovako:
<link rel='stylesheet' id='contact-form-7-css' href='http://tvoj-web.hr/wp-content/plugins/contact-form-7/includes/css/styles.css' type='text/css' media='all' />
Zaključak
Na gore opisan način smo svom webu smanjili minimalno 2 HTTP requesta prilikom učitavanja stranice. U slijedećim člancima ću vam predstaviti načine kako isto učiniti za još neke popularne pluginove koji se također koriste samo na određenom broju stranica. Konkretno, obradit ćemo kako to učiniti s popularnim Revolution sliderom.
O utjecaju pluginova na brzinu učitavanja stranice bilo je riječi na mom predavanju “WP Pluginovi – prednosti i mane” održanom na 1. pulskom WP meetupu. Zainteresirani mogu škicnuti video na ovom linku. Konkretno, deregistriranje skripti spominjem negdje oko trinaeste minute 😉
