Σωστή ενσωμάτωση CSS και JavaScript στο WordPress.

02 Φεβ 2011 | Wordpress

Δεν επιτρέπονται τα σχόλια.


Wordpress

Από την πρώτη μου κιόλας φορά που κατασκεύασα το πρώτο μου theme για WordPress πρόσεξα τον βαθμό ευκολίας και ευχρηστίας που έχει ώστε να κάνει τη δουλειά του Developer ευκολότερη και ταχύτερη. Από τότε και μέχρι σήμερα δεν έχει πάψει το WordPress να εκπλήσσει βλέποντας καθημερινά το πόσο απίστευτο εργαλείο είναι ! Υπάρχει μια πληθώρα συναρτήσεων και σταθερών που βοηθούν όχι μόνο στην ανάπτυξη, αλλά και στο να διατηρήσετε τον κώδικα σας καθαρό και να είναι και εύκολος στη συντήρηση.

Σε αυτό το άρθρο θα σας παρουσιάσω ένα απλό κόλπο που θα πρέπει να το κρατήσετε καλά στο μυαλό σας καθώς θα σας γλιτώσει από μερικούς μπελάδες. Αν στο theme σας πρέπει να έχετε περισσότερα από ένα stylesheets ή να έχετε JavaScript αρχεία ενσωματωμένα ο καλύτερος τρόπος για να τα ενσωματώσετε στο WordPress σας είναι οι δυο συναρτήσεις που παρέχει το WordPress για αυτό το σκοπό. Αυτές οι συναρτήσεις είναι οι wp_enqueue_script και η wp_enqueue_style.

Στο πρώτο θέμα που είχα κατασκευάσει, είχα κάνει το λάθος να γράψω ολόκληρη τη διαδρομή προς το αρχείο CSS, κάτι που βέβαια είναι φρικτό ως πρακτική, αλλά τότε δεν γνώριζα γα την ύπαρξη αυτών των συναρτήσεων. Έτσι όταν έμαθα για την ύπαρξή τους άρχισα να διατηρώ τα αρχεία μου όλα στο σωστό σημείο και να κάνω την ζωή μου ποιο εύκολη.

WP_ENQUEUE_SCRIPT

Αν θέλετε να ενσωματώσετε στο θέμα σας ή στο plugin σας κάποιο JavaScript αρχείο, ο καλύτερος τρόπος είναι να χρησιμοποιήσετε τη συνάρτηση enqueue_script(). Αυτή η συνάρτηση είναι ο ασφαλής τρόπος για να βεβαιωθείτε πως το θέμα σας ή/και το plugin σας δεν θα φορτώσουν στη σελίδα σας το ίδιο script περισσότερες από μια φορές. Όπως μπορείτε να δείτε στο Codex, το WordPress συνοδεύεται ήδη από πάρα πολλές βιβλιοθήκες. Στην περίπτωση που θέλετε να εισάγετε ένα προσαρμοσμένο script ή κάποια βιβλιοθήκη που δεν υπάρχει στη συλλογή του WordPress, απλά προσθέστε το στο θέμα σας με αυτή τη συνάρτηση. Τέλος θα πρέπει να βεβαιωθείτε πως την εισαγωγή την κάνετε στο αρχείο functions.php του θέματος σας.

<?php
    wp_enqueue_script(
        'Το όνομα του script, με πεζά γράμματα',
        'διαδρομή προς το αρχείο .js',
        'array με τα scripts από τα οποία εξαρτάτε',
        'έκδοση του script',
        'Τιμή boolean για να επιλέξετε αν θέλετε το script να ενσωματωθεί στο header ή στο footer'
    );
?>

Ένα παράδειγμα θα μπορούσε να είναι το ακόλουθο :

<?php
    wp_enqueue_script(
        'my-custom-script',
        'get_bloginfo('template_url') . '/js/scriptname.js',
        array('jquery'),
        '1.0',
        true
    );
?>

WP_ENQUEUE_STYLE

Τώρα αν θέλετε να συμπεριλάβετε ένα αρχείο css ο τρόπος είναι παρόμοιος, με τη διαφορά που χρησιμοποιούμε τη συνάρτηση enqueue_style. Αυτή η συνάρτηση εξασφαλίζει επίσης πως το css θα φορτωθεί μόνο μια φορά στο theme σας. Να βεβαιωθείτε πως χρησιμοποιείτε τη συγκεκριμένη συνάρτηση στο αρχείο functions.php

<?php
    wp_enqueue_style(
        'Το όνομα του στυλ, με πεζά γράμματα',
        'διαδρομή για το αρχείο .css',
        'array από αρχεία stylesheets που εξαρτάτε',
        'έκδοση του αρχείου',
        'τιμη΄για να επιλέξετε τον τύπο του μέσου που θέλετε να αναθέσετε στο stylesheet'
    );
?>

Ένα παράδειγμα θα μπορούσε να είναι το ακόλουθο :

<?php
    wp_enqueue_style(
        'my-custom-style',
        'get_bloginfo('template_url') . '/css/my-style.css',
        false,
        '1.1',
        'all'
    );
?>

Πηγή : Ελληνική Κοινότητα WordPress

Περισσότερα για τον CorfuGmr

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.








Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Συγνώμη, τα σχόλια για αυτό το άρθρο είναι κλειστά.



^
Top
css.php