Δημιουργώντας ένα Προσαρμοσμένο Σύστημα Αποστολής Μηνυμάτων στο Wordpress, Μέρος 1

Greek (ελληνικά) translation by Iris Diakoumi (you can also view the original English article)

Νωρίτερα αυτό το έτος, δουλέψαμε πάνω σε μια σειρά από tutorials που καλύπτουν τη διαδικασία δημιουργίας προσαρμοσμένων σελίδων διαχείρισης στο WordPress. Παρόλο που αυτή η σειρά δεν είναι απαραίτητα προαπαιτούμενη για την ύλη που πρόκειται να καλύψουμε, δε θα ήταν κακό να της ρίξετε μια ματιά.

Από μόνο του, το WordPress παρέχει αρκετή λειτουργικότητα μέσα από τα πολλά του API. Εαν, για παράδειγμα, θέλετε να δουλέψετε στο να δημιουργήσετε σελίδες διαχείρισης εστιάζοντας μόνο στις επιλογές που θα εμφανίζονται στο χρήστη, μπορείτε να το κάνετε αυτό χρησιμοποιώντας το Settings API.

Επιπλέον, υπάρχουν πολλά πλεονεκτήματα στο να χρησιμοποιήσετε αυτό το συγκεκριμένο API. Μερικά από αυτά είναι:

εξυγίανση και επικύρωση
προσαρμοσμένα στοιχεία μενού
ευκολία δημιουργίας σελίδων διαχείρισης
εργασία με διάφορους τύπους δεδομένων
αυτοματοποιημένη αποστολή μηνυμάτων σε περίτπωση επιτυχίας ή αποτυχίας
και πολλά περισσότερα

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

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

Όπως ανέφερα, το προηγούμενο tutorial δεν είναι απαραίτητα προαπαιτούμενο για αυτή τη σειρά, ωστόσο αν είστε καινούριος σε ό,τι αναφέρθηκε παραπάνω, τότε παρακαλώ αφιερώστε λίγο χρόνο για να δείτε εκείνη τη σειρά, αφού θα σας προσφέρει μια θεμελιώδη γνώση πάνω στην κατεύθυνση στην οποία θα κινηθούμε.

Και αφού είπαμε όλα αυτά, ας ξεκινήσουμε.

Τί θα Χρειαστείτε για αυτήν τη Σειρά

Εαν έχετε διαβάσει οποιοδήποτε από τα προηγούμενα μου tutorials, θα γνωρίζετε ότι θέλω να ξεκινάω κάθε tutorial (ή ακόμα την κάθε σειρά) με δύο πράγματα:

Παρέχω μια λίστα με το λογισμικό που θα χρειαστείτε για να ξεκινήσετε.
Παρέχω ένα χάρτη για το πού κατευθυνόμαστε έτσι ώστε να αποφασίσετε αν θέλετε να προχωρήσετε με τη σειρά ή όχι.

Ας το κάνουμε αυτό τώρα.

Το Περιβάλλον Υλοποίησης

Σε γενικές γραμμές, αυτά θα χρειαστείτε για να μπορέσετε να ξεκινήσετε με το project που θα υλοποιήσουμε.

PHP 5.6.25
MySQL 5.6.28
Apache (ή Nginx αν είστε πιο εξοικειωμένος με αυτό)
WordPress 4.6.1
Τον αγαπημένο σας editor ή IDE

Εαν έχετε περιέργεια για το πώς όλα αυτά δουλεύουν μαζί, σας προτείνω να διαβάσετε αυτή τη σειρά.

Γενικά, δεν συνιστώ ένα συγκεκριμένο λογισμικό ώς καλύτερο από άλλα, επειδή υπάρχουν τόσες πολλές επιλογές, αλλά αν είστε εντελώς καινούργιοι σε όλα αυτά, τότε συστήνω ανεπιφύλακτα τη δωρεάν έκδοση του MAMP. Είναι συμβατό με macOS και Windows, οπότε θα πρέπει να είναι συμβατό με πολλά από τα συστήματά σας. Είναι εύκολο στη χρήση, εύκολο να ξεκινήσετε μαζί του και παρέχει όλα αυτά που χρειάζεστε με την εγκατάσταση του.

Ο Χάρτης μας

Συνεχίζοντας, δείτε εδώ την ενδεικτική ανάλυση αυτής της σειράς:

Σε αυτό το tutorial, θα χτίσουμε τα θεμέλια για τα απολύτως απαραίτητα στοιχεία του προσθέτου μας και όλα αυτά που χρειαζόμαστε για να ξεκινήσουμε.
Στο δεύτερο μέρος, θα προχωρήσουμε λίγο με το πρόσθετο, προσθέτοντας μια πολύ απλή σελίδα διαχείρισης Wordpress. Επίσης θα κάνουμε μια κλήση στην προσαρμοσμένη ζεύξη (hook) που θα χρησιμοποιήσουμε, και θα το συνδέσουμε με την μεριά του server. Ακόμα, θα σετάρουμε τα βασικά στοιχεία του Settings Messenger.
Στο επόμενο tutorial, θα ξεκινήσουμε να υλοποιόυμε τον Settings Messenger προσθέτοντας υποστήριξη για μηνύματα σφαλμάτων και επιτυχίας, καθώς επίσης θα καλύψουμε μερικά σημεία σχετικά με την ασφάλεια.
Θα ολοκληρώσουμε ενώνοντας τα όλα μαζί, βλέποντας τα στην πράξη και θέτοντας το τελικό πρόσθετο δημοσίως διαθέσιμο για να το κατεβάσετε.

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

Αλλά η τελική έκδοση που σας παρέχετε θα τα περιέχει όλα αυτά.

Ξεκινώντας το Πρόσθετο

Αυτήν τη στιγμή, γνωρίζουμε ότι θα χρειαστούμε τα παρακάτω για το πρόσθετό μας:

μια βασική σελίδα διαχείρισης
ένα στοιχείο μενού για να μας μεταφέρει στη σελίδα διαχείρισης
ένα bootstrap αρχείο για να ξεκινήσουμε το πρόσθετο

Ας συλλέξουμε όλα αυτά τα στοιχεία και ας τα ενώσουμε μαζί σε κάτι λειτουργικό.

1. Το Στοιχείο Μενού

Το πρώτο πράγμα που θέλουμε είναι να εισάγουμε τη λειτουργικότητα που θα προσθέσει ένα στοιχείο υπομενού στο μενού Ρυθμίσεις μέσα στο μενού πλοήγησης της διαχείρισης του Wordpress.

Για να το κάνουμε αυτό, χρειαζόμαστε δύο κλάσεις και ένα αρχείο: μία κλάση που θα εμφανίζει το υπομενού, μια κλάση που θα εμφανίζει τη σελίδα του υπομενού, και ένα αρχείο που θα εμφανίζει το περιεχόμενο της σελίδας.

Πρίν το κάνουμε αυτό, προτείνω την παρακάτω δομή φακέλων:

Αυτό σημαίνει ότι ο φάκελος admin θα έχει έναν υποφάκελο views. O φάκελος admin θα περιέχει τα class-submenu.php και class-submenu-page.php . Θα μιλήσουμε για τη σελίδα διαχείρισης στην επόμενη ενότητα.

Αρχικά, ας ρίξουμε μια ματιά σε καθένα από αυτά τα αρχεία.

class-submenu.php

Αυτή η κλάση είναι υπεύθυνη για την προσθήκη του στοιχείου μενού στην σελίδα των ρυθμίσεων:

<?php

class Submenu {

    private $submenu_page;

  public function __construct( $submenu_page ) {
		$this->submenu_page = $submenu_page;
	}

	public function init() {
		add_action( 'admin_menu', array( $this, 'add_options_page' ) );
	}

	public function add_options_page() {

		add_options_page(
			'Tuts+ Custom Messages',
			'Tuts+ Custom Message Example',
			'manage_options',
			'tutsplus-custom-messages',
			array( $this->submenu_page, 'render' )
		);
	}
}

Εαν έχετε διαβάσει την κλήση API στο Codex, θα δείτε ότι αυτό θα εισάγει ένα στοιχείο μενού στο μενού Εργαλεία που θα είναι προσβάσιμο από το "Tuts+ Custom Messages" και θα κρατάει έναν τίτλο που θα δούμε αμέσως.

Παρατηρήστε επίσης ότι υπάρχει μια μέθοδος init. Αυτή η συνάρτηση εγγράφει το add_options_page στη ζεύξη (hook) admin_menu του Wordpress έτσι ώστε να καταγράφεται (και να εμφανίζεται) σωστά καθόλη τη διάρκεια του κύκλου ζωής μιας σελίδας Wordpress.

Επιπλέον, αυτό το μενού είναι προσβάσιμο σε οποιονδήποτε έχει την δυνατότητα manage_options, και θα καλέσει την μέθοδο render στο submenu_page που ανήκει σε αυτό.

Το πρόβλημα; Δεν υπάρχει σελίδα submenu. Ας δημιουργήσουμε αυτήν την κλαση τώρα.

class-submenu-page.php

Ο κώδικας για αυτήν την κλάση είναι παρακάτω:

<?php

class Submenu_Page {

    public function render() {
        include_once( 'views/settings.php' );
    }
}

Η κλάση Submenu_Page είναι προφανώς απλή. Το μόνο που κάνει είναι να εμφανίζει τη σελίδα settings.php, την οποία θα δούμε σε λίγο.

Παρατηρήστε ότι δε θα είναι όλες οι σελίδες υπομενού τόσο απλές. Ωστόσο η πολυπλοκότητα του προσθέτου μας θα εμφανιστεί σύντομα. Θα το δούμε σε μελλοντική ανάρτηση.

2. Η Σελίδα Διαχείρισης

Όπως η Submenu_Page ήταν απλή, έτσι είναι και η σελίδα ρυθμίσεων. Στην πραγματικότητα, αν είστε εξοικειωμένοι με βασικό κώδικα markup, θα πρέπει να είναι εύκολο να καταλάβετε ακριβώς τί συμβαίνει:

<div class="wrap">

    <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>

	<p class="description">
		We aren't actually going to display options on this page. Instead, we're going
		to use this page to demonstration how to hook into our custom messenger.
	</p><!-- .description -->
</div><!-- .wrap -->

Συνοπτικά, αυτό εμφανίζει ένα μήνυμα στο Wordpress ότι δε θα χρησιμοποιήσουμε αυτήν τη σελίδα για τίποτα άλλο εκτός από την εμφάνιση προσαρμοσμένων μηνυμάτων.

Άλλωστε, αυτό ακριβώς θα κάνουμε.

3. Πραγματοποιώντας το

Σε αυτό το σημείο, είμαστε έτοιμοι να σετάρουμε το boostrap αρχείο για να ξεκινήσουμε την υλοποίηση του προσθέτου. Αυτό είναι το βασικό bootstrap αρχείο:

<?php
/**
 * The plugin bootstrap file
 *
 * @link              TODO
 * @since             1.0.0
 * @package           TutsPlus_Custom_Messaging
 *
 * @wordpress-plugin
 * Plugin Name:       Tuts+ Custom Messaging Example
 * Plugin URI:        TODO
 * Description:       Import your employee directory as users manually or automatically, populate employees' birthdays and anniversaries into a CPT, and create a front-end directory page.
 * Version:           0.1.0
 * Author:            Tom McFarlin
 * Author URI:        https://tommcfarlin.com
 * License:           GPL-2.0+
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.txt
 */

// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
    die;
}

// We *could* use an autoloader here but I'm not sure everyone has read the series.
foreach ( glob( plugin_dir_path( __FILE__ ) . 'admin/*.php' ) as $file ) {
	include_once $file;
}

add_action( 'plugins_loaded', 'tutsplus_custom_messaging_start' );
/**
 * Starts the plugin.
 *
 * @since 1.0.0
 */
function tutsplus_custom_messaging_start() {

	$plugin = new Submenu(
		new Submenu_Page()
	);

	$plugin->init();
}

Παρατηρήστε το σχόλιο πάνω από το foreach βρόχο. Παρόλο που έχουμε ήδη καλύψει το autoloading σε προηγουμένη σειρά, δε θέλω να υποθέσω ότι έχετε διαβάσει όλες τις σειρές πριν από αυτήν.

Όταν έχουν γίνει όλα αυτά, θα πρέπει να μπορείτε να κάνετε είσοδο ώς χρήστης στο λογαριασμό σας Wordpress, να ενεργοποιήσετε το πρόσθετο και να δείτε την παρακάτω οθόνη:

Εαν όχι, διπλοτσεκάρετε τον πηγαίο κώδικα σας σε σχέση με το υπόδειγμα σε αυτήν την ανάρτηση και επιβεβαιώστε ότι όλα είναι ακριβώς όπως πρέπει.

Εαν όχι, κάντε τις απαραίτητες διορθώσεις και προσπαθήστε ξανά. Αν σας πάρει μερικές προσπάθειες, μην προβληματιστείτε. Ο προγραμματισμός μπορεί να είναι δύσκολη δουλειά μερικές φορές, ειδικά αν έχετε μολίς ξεκινήσει.

Συμπέρασμα

Αν έχετε ακολουθήσει τη δουλειά μου μέχρι στιγμής, πολλά από αυτά μπορεί να σας φαίνονται οικεία. Εαν όχι, τότε χαίρομαι που ξεκινήσατε να μαθαίνετε. Όσο περιμένετε για το δεύτερο tutorial, σας προτείνω να κοιτάξετε κάποιο από το υλικό που έχω ήδη δημοσιεύσει για να έχετε μια εικόνα του τί θέματα μου αρέσει να προσεγγίζω και πώς διδάσκω αυτές τις έννοιες.

Με χαρά μου να απαντήσω σε ερωτήσεις στα σχόλια, και μπορείτε να επισκεφθείτε το blog μου και να με ακολούθησετε στο Twitter. Συνήθως μιλάω για ανάπτυξη λογισμικού σε Wordpress και άλλα σχετικά θέματα.

Μέχρι το επόμενο tutorial, μελετήστε τον κώδικα, κατεβάστε τα αρχεία και δείτε πώς τρέχει στο τοπικό σας μηχάνημα. Στο επόμενο μέρος, θα συνεχίσουμε από εκεί ακριβώς που σταματήσαμε.