Με την χρήση τον hooks, όπως θα δούμε και παρακάτω, μπορούμε να προσαρμόσουμε την ιστοσελίδα μας. εύκολα και γρήγορα, όπως επιθυμούμε και φυσικά όπου μας επιτρέπει η πλατφόρμα του WordPress (και του WooCommerce εάν μιλάμε για ηλεκτρονικό κατάστημα),
Τα hooks μπορεί να είναι δύο ειδών:
- Action hooks, τα οποία μας επιτρέπουν να προσθέσουμε περαιτέρω λειτουργικότητα σε ένα σημείο της σελίδας και
- Filter hooks, τα οποία μας επιτρέπουν να παρέμβουμε σε κάποιο σημείο της σελίδας μας και να αλλάξουμε αυτό που θα γινόταν χωρίς το hook.
Ας δούμε όμως και στην πράξη …
Παίρνοντας παράδειγμα από την πλατφόρμα του WooCommerce, που υλοποιείται σε WordPress, έχουμε το εξής:
- Στο παρασκήνιο, μεταφορικά μιλώντας, το WooCommerce είναι προγραμματισμένο να εμφανίζει την σελίδα ενός προϊόντος κάπως έτσι:
- Προγραμματίστηκε όμως, φροντίζοντας να μας “εξοπλίσει” με μερικά hooks σε διάφορα σημεία της παραπάνω σελίδας, τα οποία περιμένουν να τα αξιοποιήσουμε. (και τα οποία μπορείτε να δείτε αναλυτικά εδώ)
- Τα hooks στην σελίδα ενός προϊόντος, όπως το παράδειγμα μας, είναι Action hooks, που σημαίνει, όπως είδαμε νωρίτερα ότι μπορούμε να προσθέσουμε κάτι σε αυτά.
Για παράδειγμα, ένα από τα Action hooks που υπάρχουν διαθέσιμα στην συγκεκριμένη σελίδα είναι το ‘woocommerce_after_add_to_cart_button’, το οποίο όπως εξηγεί και το όνομα, “κρέμεται” μετά το κουμπί “Προσθήκη στο καλάθι”
Άρα, εάν εμείς θέλουμε να εμφανίσουμε οτιδήποτε σε εκείνο το σημείο, το μόνο που έχουμε να κάνουμε είναι να γράψουμε το εξής:
// Το παρακάτω, όπως και όλες οι τροποποιήσεις θέματος σε μια σελίδα, πηγαίνει στο /wp-content/themes/my-theme/functions.php
<?php
add_action( 'woocommerce_after_add_to_cart_button', 'clr_add_text');
function clr_add_text(){
echo "Ένα δοκιμαστικό κείμενο";
}
Το οποίο θα έχει το παρακάτω αποτέλεσμα:
Τι κάναμε;
Στην ουσία, το WordPress κάθε φορά που εκτελεί κάποια ενέργεια (Action), της δίνει ένα όνομα.
Στην προκειμένη περίπτωση η ενέργεια είναι η ‘woocommerce_after_add_to_cart_button’ και στην οποία εμείς προσθέσαμε κι άλλη μία ενέργεια.
Τόσο απλό!
Δανείζοντας ένα ακόμη παράδειγμα από την πλατφόρμα του WooCommerce, αυτή τη φορά για Filter hook, έχουμε την προβολή ενός άδειου καλαθιού, που συνήθως μοιάζει κάπως έτσι:
Όπως είναι λογικό, εάν ο χρήστης πατήσει στο κουμπί “Επιστροφή στο κατάστημα”, θα συμβεί ακριβώς αυτό.
Και γιατί όχι;
Αν θέλαμε όμως ο χρήστης να μεταφερθεί στο κατάστημα, αλλά να δει τα προϊόντα που είναι σε προσφορά; (έστω ότι ο σύνδεσμος του καταστήματος με τα προϊόντα σε προσφορά είναι https://my_store.gr/on-sale )
Τότε θα κάναμε το εξής:
// Το παρακάτω, όπως και όλες οι τροποποιήσεις θέματος σε μια σελίδα, πηγαίνει στο /wp-content/themes/my-theme/functions.php
<?php
function clr_empty_cart_redirect_url() {
return 'https://my_store.gr/on-sale';
}
add_filter( 'woocommerce_return_to_shop_redirect', 'clr_empty_cart_redirect_url', 10 );
Έτσι, με αυτόν τον απλό τρόπο, κάθε φορά που ένας χρήστης χρησιμοποιεί το κουμπί αυτό για να γυρίσει στη σελίδα των προϊόντων του καταστήματος, πλέον θα γυρίζει στην σελίδα των προϊόντων με προσφορά στο κατάστημα.
Τι κάναμε;
Στην ουσία, το WordPress σε διάφορα σημεία του κώδικά του φιλτράρει κάποιες μεταβλητές, ονομάζοντας το φίλτρο, έτσι ώστε να μπορεί να χρησιμοποιηθεί εξωτερικά.
Στην προκειμένη περίπτωση το φίλτρο είναι το ‘woocommerce_return_to_shop_redirect’ και στην οποία εμείς αλλάξαμε το περιεχόμενο της μεταβλητής που περιέχει τον υπερσύνδεσμο στον οποίο επιστρέφει το κουμπί.
Εξίσου απλό με το action hook!
Με τα παραπάνω έχουμε καλύψει την βασική ιδέα των hooks. Τι είναι, όπως και που και πως χρησιμοποιούνται.
Η χρήση των hooks που παρέχει η πλατφόρμα καθιστά την προσαρμογή της σελίδας μας ακόμα πιο μοναδική, με αρκετά εύκολο τρόπο!
