Δημιουργία απλού WordPress plugin

Για κάποιο ανεξήγητο λόγο, κυκλοφορεί η φήμη πως η συγγραφή ενός WordPress plugin δεν είναι εύκολη υπόθεση. Η αλήθεια είναι πως εξαρτάται από το τι θες να κάνεις αλλά για απλά πράγματα που συναντάς καθημερινά δεν είναι τόσο δύσκολο. Ας δούμε ένα σενάριο.

Φτιάχνεις ένα site για πελάτη σου το οποίο αποφάσισες να χτίσεις – μιας και είναι λίγα τα λεφτά Άρη – πάνω σε ένα έτοιμο WordPress theme. Ψάχνεις και βρίσκεις theme το οποίο είναι αρκετά κοντά στις απαιτήσεις του πελάτη σου. Θα χρειαστούν κάποιες αλλαγές σε επίπεδο CSS. Αγοράζεις, ανεβάζεις και ενεργοποιείς το theme. Εντοπίζεις το βασικό stylesheet (style.css) και αρχίζει να κάνεις προσθήκες / αλλαγές. Περνάς το περιεχόμενο και το site είναι online. Πληρώνεσαι (αποκλείεται), ο πελάτης σε συγχαίρει για το αποτέλεσμα (αποκλείεται) και εσύ όπως υποσχέθηκες (χωρίς έξτρα πέσος) κρατάς την εγκατάσταση WordPress up to date όπως και το theme. Κυκλοφόρησε λοιπόν η έκδοση 1.1 του theme και κάνεις update (χωρίς backup). Ρίχνεις μια ματιά στο site απλά για να επιβεβαιώσεις πως όλα πήγαν καλά και διαπιστώνεις πως οι αλλαγές σου έχουν χαθεί μιας και το update αντικατέστησε και το παλιό style.css.

Holly mother of WordPress. Now what? 2 λύσεις.

Child themes. http://codex.wordpress.org/Child_Themes

Πρακτικά δεν υπάρχει πιο αποδοτική λύση όταν δουλεύεις με έτοιμο theme. Διάβασε προσεκτικά τις παραπάνω οδηγίες και θα καταλάβεις πως είναι ο καλύτερος τρόπος. Όμως εμείς για το συγκεκριμένο σενάριο θα χρειαστούμε μερικές απλές CSS αλλαγές τις οποίες θα θέλαμε να κρατάμε σε ένα ξεχωριστό αρχείο που θα φορτώνει μετά το style.css και θα θέλαμε να το κάνουμε δημιουργώντας ένα απλό plugin. Ένα plugin που σαν μοναδική λειτουργικότητα θα έχει να φορτώσει ένα αρχείο .css – ας το ονομάσουμε custom.css –  ακριβώς μετά το style.css του theme. Βλέπουμε αυτό το σενάριο γιατί είναι πολλά “premium” themes τα οποία είναι αλλεργικά στα child themes.

1. Στον φάκελο /plugins της εγκατάσταση WordPress, φτιάχνουμε ένα φάκελο με το όνομα theme-mods. Εκεί μέσα φτιάχνουμε ένα αρχείο με το όνομα theme-mods.php το οποίο για αρχή περιέχει μόνο το παρακάτω σχόλιο:

<?php
/**
 * Plugin Name: Theme Mods
 * Plugin URI: http://www.cssigniter.com
 * Description: A series of customizations for this site
 * Version: 1.0
*/
?>

Αποθηκεύουμε και επιστρέφουμε στο WordPress admin dashboard στην ενότητα Plugins > Installed Plugins. Θα δούμε το παρακάτω:

Τίποτα σπουδαίο ως εδώ. Απλά είπαμε στο WordPress πως έχουμε φτιάξει ένα νέο plugin το οποίο για την ώρα κάθεται και μας κοιτάζει. Αυτό λοιπόν που θέλουμε να κάνει είναι να φορτώσει to αρχείο custom.css το οποίο θα φτιάξουμε μέσα στο φάκελο theme-mods παρέα με το αρχείο theme-mods.php. Πρέπει λοιπόν μέσα στον φάκελο theme-mods να βλέπετε κάτι τέτοιο:
Screen Shot 2014-06-20 at 2.08.50 PM

Επιστροφή στο theme-mods.php όπου γράφουμε 3 γραμμές κώδικα:

<?php
/**
 * Plugin Name: Theme Mods
 * Plugin URI: http://www.cssigniter.com
 * Description: A series of customizations for this site
 * Version: 1.0
*/

add_action('wp_enqueue_scripts', 'cssigniter_add_custom_styles');

function cssigniter_add_custom_styles(){
    wp_enqueue_style( 'cssigniter-custom-css', plugins_url( 'custom.css' , __FILE__ ) );
}

?>

Ας ενεργοποιήσουμε τώρα το plugin. Εδώ να προσθέσω πως για το συγκεκριμένο παράδειγμα έχω ενεργοποιημένο το default WordPress theme Twenty Fourteen οπότε αν έχετε κάποιο άλλο το παρακάτω screenshot ίσως είναι λίγο διαφορετικό. Αν κάνουμε λοιπόν refresh στο site θα δούμε πως έχει προστεθεί ένα ακόμα CSS αρχείο μαζί με τα CSS αρχεία που φορτώνει το Twenty Fourteen:
Screen Shot 2014-06-20 at 2.20.51 PM

Τι έγινε ρε παιδιά, πως έγινε αυτό τώρα;

Ας δούμε τον κώδικα που γράψαμε γραμμή – γραμμή.

add_action('wp_enqueue_scripts', 'cssigniter_add_custom_styles');

Ένας από τους λόγους της μεγάλης επιτυχίας του WordPress είναι τα actions. Τι είναι τα actions ρωτάς. Ας δούμε την ερμηνεία που δίνει το ίδιο το WordPress.

In WordPress an Action is a PHP function that is executed at specific points throughout the WordPress Core.

Είναι λοιπόν PHP functions οι οποίες εκτελούνται σε συγκεκριμένα σημεία όταν π.χ. αιτούμαστε να δούμε μια σελίδα του site. Έρχεται λοιπόν το WordPress και σου λέει πως εσύ σαν καλός developer που είσαι μπορείς να κάνεις “hook” δικές σου functions σε αυτά τα actions μέσω της add_action της οποίας η σύνταξη είναι:

add_action('wordpress_hook','my_custom_function')

Η πρώτη παράμετρος είναι το WordPress hook στο οποίο θέλεις να εκτελεστεί η δεύτερη παράμετρος που είναι η δική σου function. Nice eh? Και μετά με ρωτάς αν υπάρχουν πολλά τέτοια actions. Ναι, υπάρχουν σου απαντάω εγώ.

Πάμε να δούμε και τον κώδικα της function που γράψαμε παραπάνω:

function cssigniter_add_custom_styles(){
    wp_enqueue_style( 'cssigniter-custom-css', plugins_url( 'custom.css' , __FILE__ ) );
}

Χρησιμοποιούμε λοιπόν την function wp_enqueue_style που μας δίνει το WordPress και της περνάμε 2 παραμέτρους. Η πρώτη είναι ένα μοναδικό όνομα (handle) και η δεύτερη το σημείο στο οποίο βρίσκεται το αρχείο custom.css. Στο Codex θα βρείτε περισσότερες πληροφορίες για την function plugins_url.

Με 2 απλές εντολές φορτώσαμε το δικό μας CSS αρχείο. Η wp_enqueue_style φροντίζει να φορτωθεί το αρχείο και το action wp_enqueue_scripts φροντίζει όλο αυτό να εκτελεστεί τη σωστή στιγμή.

Ε, όχι και τη σωστή στιγμή..

Πολύ σωστά. Όπως βλέπεις στο παραπάνω screenshot με τα κόκκινα γράμματα βλέπουμε πως το αρχείο custom.css έχει φορτωθεί ΠΡΙΝ το style.css ενω εμείς θέλουμε το αντίθετο. Πρώτα να φορτώσει το style.css και μετά το custom.css

Err.. γιατί;

Γιατί. Ας υποθέσουμε πως έχουμε το παρακάτω style στο style.css

body { background:red; }

Και στο custom.css έχουμε

body { background:green; }

Όπως πολύ σωστά μάντεψες το background θα παραμείνει κόκκινο. Αν δεν καταλαβαίνεις γιατί μπορείς να μελετήσεις την ενότητα Specificity του MDN.

Για να φορτώσουμε λοιπόν το custom.css ΜΕΤΑ το style.css θα πρέπει να δώσουμε προτεραιότητα στο style.css. Να πούμε δηλαδή στην add_action ότι κοίτα, άσε να φορτώσει πρώτα το default stylesheet (style.css) και μετά φορτώνεις και το custom.css. Αν ρίξεις μια πιο προσεκτική ματιά στο documentation της add_action θα δεις πως υπάρχει και μια τρίτη παράμετρος η οποία λέγεται $priority και έχει default τιμή 10. Oπότε αν αλλάξω τη παρακάτω γραμμή κώδικα από:

add_action('wp_enqueue_scripts', 'cssigniter_add_custom_styles');

Σε

add_action('wp_enqueue_scripts', 'cssigniter_add_custom_styles', 11);

Θα δούμε πως το custom.css φορτώνεται ΜΕΤΑ το style.css, αυτό που θέλουμε δηλαδή. Αυτό γίνεται γιατί είπαμε στο WordPress “Αφού έχεις default priority 10, ξεμπέρδευε με ό,τι έχεις να φορτώσεις μέσω της wp_enqueue_scripts (default stylesheet ή ότι άλλο σου έχει πει το theme) και μετά, αφού σου όρισα priority 11, πέρνα και μια βόλτα από εδώ να σου πω τι να κάνεις”.

Τι κέρδισα τώρα;

Έχεις τα δικά σου styles σε ένα αρχείο το οποίο δεν σχετίζεται με το active theme. Ακόμα και αν αλλάξεις theme και έχεις το συγκεκριμένο plugin ενεργοποιημένο το custom.css θα συνεχίζει να φορτώνεται no matter what. Σε πιθανό theme update λοιπόν θα δεις μια σημαντικη διαφορά στις άσπρες τρίχες που εμφανίζονται στο κεφάλι σου. Αυτό και μόνο είναι αρκετό για να κρατήσεις τα δικά σου styles σε ένα δικό σου αρχείο, κάπου μακριά από το theme folder. Επίσης μόλις έφτιαξες το πρώτο σου plugin. Εύκολο;

2 comments

  1. Καταπληκτικός ο οδηγός σου!! Τα λες πάρα πολύ ωραία!
    Πες μας και άλλα να μάθουμε για τα wordpress plugins!

    Ευχαριστούμε πάρα πάρα πολύ! Χάρις εσένα μπήκα ενδότερα στον κόσμο το wordpress και έκανα το πρώτο μου plugin!! 😀 😀

Leave a Reply

Your email address will not be published. Required fields are marked *