Dette er en lille guide til at gøre din WordPress installation lidt hurtigere. Jeg gør det ved at finde ud af hvilke javascripts og stylesheets jeg har kørende på mit site, og derefter sørge for, at de kun hentes, når der er behov for det.
Jeg vil i dette eksempel lege med WP-PostRating (et plugin der gør det muligt at vurdere indlæg) og Contact Form 7 (et kontakt formular plugin).
Pointen er at jeg kun vil have PostRatings til at loade på indlægssiderne, og jeg vil kun have Contact Form til at loade på min kontaktside og en anden side hvor jeg har et lille spørgeskema kørende.
Så jeg må ned i kildekoden og finde ud af hvad den loader. Du skal lede efter noget som ender på .css og .js Jeg finder disse to steder:
Her er CSS-kildekoden fra mit site
Her er JavaScript-kildekoden fra mit site
Nu skal jeg sørge for, at WordPress kun henter de to funktioner, på de sider som bruger dem. Det gør jeg ved at smide denne lille kodestump ind i functions.php (og jeg beklager, men vores tema styler ikke koden så pænt 🙁 ):
Denne funktion fjerner stylesheets
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
if ( !is_page('230') && !is_single('1228') ) {
wp_deregister_style( 'contact-form-7' );
}
if ( !is_single() ) {
wp_deregister_style( 'wp-postratings' );
}
}
Denne funktion fjerner javascripts
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
if ( !is_page('230') && !is_single('1228') ) {
wp_deregister_script( 'contact-form-7' );
}
if ( !is_single() ) {
wp_deregister_script( 'wp-postratings' );
}
}
Det som foregår er: Hvis IKKE (!) vi er på siden med ID 230 eller indlæget med ID 1228, så skal Contact Form ikke loade. Og hvis ikke vi er på en indlægsside, så skal PostRating ikke loade. Så simpelt er det, og nu har du sparet en masse loadtid hos dine brugere, Google og din host. Og det er alle glade for 🙂
Hej thomas,
Tak for dit indlæg. 🙂
Det er et super tip, idag hvor website speed virkelig betyder noget.
Det vil dog stadig være “lidt” svært uden kenskab til kode, så et plugin hvor dette kan styres fra admin, ville være brugbart for rigtig mange 🙂
Dbh
Morten.
Hej Morten
Tak for din kommentar 🙂
Umiddelbart så kan man sige at artiklen retter sig mest til folk som har lysten og gejsten til at lege med tingene, og der er vel/forhåbentlig mange af de folk vi har på WordPress.dk, der falder i den kategori.
Der er selvfølgelig mange brugere, som vil have lidt berøringsangst ved at lege med functions.php, men omvendt, så vil man drage nytte af at gøre sig bekendt med de muligheder som filen giver én. Det skyldes flere ting, men hovedsageligt, at det gør det lettere at samle alle rettelser/ændringer man har til et tema ét sted i stedet for at rette i alle de forskellige php filer.
I forhold til JavaScript logikken, så eksisterer der faktisk et plugin, som kan klare det lidt mere pædagogisk: http://wordpress.org/extend/plugins/javascript-logic men jeg har ikke kunne finde et til styring af stylesheets.
Nu sidder jeg og hygger med at lave et event plugin, og det er naturligvis med custom post type.
Den ovenstående model virker sådan lidt “omvendt” på mig, så jeg har prøvet følgende, for kun at inkludere css’en på sider (dvs. indlæg, eller rettere posts) af denne ene custom post type..
function wkevents_visitor_styles()
{
$posttype = get_post_type();
if ( $posttype == "wkevents" )
{
$csspath = WKEVENTS_PATH.'/css/wkevents.css';
wp_register_style('wkEventsVisitorStyles', $csspath);
wp_enqueue_style('wkEventsVisitorStyles');
};
};
add_action('wp_print_styles', 'wkevents_visitor_styles');
Der er så lidt specifikt variabler der, men det skulle være forståeligt – og det virker på en “single”… Men jeg har ingen anelse om hvordan det vil virke på en side med en oversigt over flere events.. og måske er det ikke så brugbart hvis jeg også vil benytte .css filen til den widget som kan loades.. dumdi dum..
anyways 🙂
—
( http://justintadlock.com/archives/2009/08/06/how-to-disable-scripts-and-styles )
( http://www.position-relative.com/2010/01/wordpress-only-load-plugins-on-pages-that-need-them/ )
Jeg er enig i, at det nok er en omvendt tilgang. For dybest set burde plugin udviklerne sørge for at man kun loadede deres css og js når det var nødvendigt.