✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

Rapid Prototyping: Vom Prototyp zum Code, Teil 1

17

Was Rapid Prototyping und WordPress betrifft, haben wir bisher zwei Dinge getan:

  1. das Plugin geplant ,
  2. skizzierte ein Diagramm, wie der Code organisiert werden kann

An diesem Punkt haben wir genug Arbeit geleistet, um den Beginn der Umgestaltung unseres Codes zu rechtfertigen. Das heißt, wir beginnen mit der Umwandlung des Prototyps in Code. Aber das ist etwas, was in zwei Phasen geschehen muss.

Zuerst werden wir einfach Klassen einführen, die die Diagramme aus dem vorherigen Post darstellen und die Verantwortung jedes Projekts kapseln.

Danach werden wir uns mit der Organisation des Codes in Namespaces und Paketen befassen. Bevor wir das tun können, müssen wir jedoch sicherstellen, dass der Code objektorientiert ist und funktionsfähig bleibt. Darum geht es in diesem Beitrag.

Vom Prototyp zum Code

Wenn Sie die vorherigen Posts gelesen haben, beachten Sie, dass ich vorhabe, der Organisation zu folgen, die ich im letzten Post skizziert habe. Sie müssen sich natürlich nicht an dieses spezielle Design halten.

Ein Wort zur Quellcodeverwaltung

Wenn Sie die Quellcodeverwaltung verwenden, empfehle ich hier, einen Branch vom Master-Branch zu erstellen (wenn Sie Git verwenden), damit Sie Ihre Arbeit erledigen können, ohne die stabile Version des Codes zu beeinträchtigen.

Dies geht etwas über den Rahmen der Serie hinaus, also keine Sorge, wenn Sie die Quellcodeverwaltung nicht verwenden. Wenn ja, entscheide ich mich für den Namen dieses Zweigs. Ich werde es wieder in Master  zusammenführen, sobald ich sicher bin, dass es funktioniert.

Code schreiben

Gemäß der gestern skizzierten Arbeit werde ich zwei Klassen erstellen:

  1. die Meta-Box-Klasse,
  2. die Meta-Box-Anzeigeklasse.

Es wird eine gewisse Codewiederverwendung von dem geben, was wir bereits gesehen haben, wie Sie im folgenden Code sehen werden.

Der Code

Zuerst unsere Metabox :

<?php
/**
 * Registers the Meta Box with WordPress.
 *
 * @author Tom McFarlin
 * @since  0.2.0
 */

/**
 * Registers the Meta Box with WordPress. Defines the ID, title, display function,
 * and the post type on which it will live.
 *
 * @author Tom McFarlin
 * @since  0.2.0
 */
class Meta_Box {

    /**
     * A reference to the class that will display the contents in the meta box.
     *
     * @access private
     * @var    Meta_Box_Display
     */
    private $meta_box_display;

    /**
     * Instantiates the class by setting its property equal to a reference to its display.
     */
    public function __construct() {
        $this->meta_box_display = new Meta_Box_Display();
    }

    /**
     * The function responsible for hooking into the WordPress API.
     */
    public function init() {

        add_meta_box(
            'three-recent-posts',
            'Three Recent Posts',
            array( $this->meta_box_display, 'display' ),
            'post',
            'side'
        );
    }
}

Und als nächstes unsere Anzeige :

<?php
/**
 * Defines the display for the meta box.
 *
 * @author Tom McFarlin
 * @since  0.2.0
 */

/**
 * Defines the display for the meta box that will render the content in the
 * context of its meta box.
 *
 * @author Tom McFarlin
 * @since  0.2.0
 */
class Meta_Box_Display {

    /**
     * A reference to the class that will display the contents in the meta box.
     *
     * @access private
     * @var    Post_Messenger
     */
    private $messenger;

    /**
     * Instantiates the object by setting a property equal to that of the class
     * responsible for rendering the messages from the post query.
     */
    public function __construct() {
        $this->messenger = new Post_Messenger( $this );
    }

    /**
     * If there are posts to display, renders them in the metabox. Otherwise, displays
     * a note that there are no posts to display.
     */
    public function display( $message) {
        $this->messenger->get_message();
    }
}

Dass wir im Meta-Box-Code die Anzeige explizit instanziieren, damit wir bei Bedarf ihre Anzeigemethode aufrufen können.

Eine andere Alternative wäre, die beiden Objekte separat zu instanziieren und dann die Anzeige per Konstruktorinjektion oder ähnlichem in die Metabox einzufügen. Dies müsste in einer Klasse eines Drittanbieters erfolgen.

Die Vorteile ergeben sich aus der etwas stärkeren Entkopplung der beiden Klassen. Vielleicht sehen wir uns im nächsten Beitrag an, wie das geht.

Danach müssen wir fortfahren und die Klasse definieren, die für die Anzeige von Nachrichten im Kontext der Meta-Box-Anzeige verantwortlich ist. Dies nennen wir den Post-Messenger :

<?php
/**
 * Display content for the meta box when requested.
 *
 * @author Tom McFarlin
 * @since  0.2.0
 */

/**
 * Retrieves information from the class responsible for querying the database and
 * renders it in the context of our meta box when called via the Meta Box Display.
 *
 * @author Tom McFarlin
 * @since  0.2.0
 */
class Post_Messenger {

    /**
     * A reference to the query resonsible for retrieving post information from
     * the database.
     *
     * @access private
     * @var    WP_Query
     */
    private $query;

    /**
     * A reference to the message that's displayed in the view of the
     * meta box.
     *
     * @access private
     */
    private $message;

    /**
     * Instantiates the class by setting a reference to the query.
     */
    public function __construct() {
        $this->query = new Post_Query();
    }

    /**
     * Retrieves the content to be displayed in the meta box.
     */
    public function get_message() {

        $this->get_description();

        if ($this->query->has_posts()) {
            $this->get_post_message();
        } else {
            $this->get_no_posts_message();
        }
    }

    /**
     * Displays the description of the content of the meta box.
     *
     * @access private
     */
    private function get_post_message() {
        include_once 'post-list.php';
    }

    /**
     * Displays the description of the content of the meta box.
     *
     * @access private
     */
    private function get_description() {
        include_once 'message-description.php';
    }

    /**
     * Displays a message of there are no recent posts.
     *
     * @access private
     */
    private function get_no_posts_message() {
        include_once 'no-post-list.php';
    }
}

Beachten Sie hier, dass der Post Messenger auch auf die Post Query verweist. Dies ist die Klasse, in der die Kommunikation mit der Datenbank stattfindet. Ich habe auch ein paar Hilfsfunktionen eingefügt, um den Ansichtscode etwas einfacher zu machen, wie wir gleich sehen werden.

<?php
/**
 * Queries the database for three most recent posts.
 *
 * @author Tom McFarlin
 * @since  0.2.0
 */

/**
 * Queries the database for three most recent posts. Returns the query to the
 * caller so that it can be interrogates for posts or not.
 *
 * @author Tom McFarlin
 * @since  0.2.0
 */
class Post_Query {

    /**
     * A reference to the WP_Query this class wraps.
     *
     * @access private
     * @var    WP_Query
     */
    private $query;

    /**
     * Instantiates the class by preparing instance data and executing the
     * query so the display can render the contents.
     */
    public function __construct() {

        $this->query = null;
        $this->get_posts();
    }

    /**
     * Executes the query for returning the post recent posts ordered by date.
     *
     * @access private
     */
    private function get_posts() {

        $args = array(
            'post_type'   => 'post',
            'post_status' => 'publish',
            'orderby'     => 'date',
            'order'       => 'desc',
        );
        $this->query = new WP_Query( $args );

        return $this->query;
    }

    /**
     * A helper function to determine if the query has any posts.
     */
    public function has_posts() {
        return! $this->query->have_posts();
    }

    /**
     * A helper function for retrieving the next post in the list of
     * posts
     */
    public function the_post() {
        return $this->query->the_post();
    }
}

Und das war’s für die Kernklassen. Natürlich müssen wir noch über die Ansichten sprechen.

Die Ansichten

Die Ansichten sind für das Rendern des HTML im Kontext der Metabox verantwortlich. Ich mag es nicht, HTML im Kontext von PHP zu schreiben (ich mag es auch nicht, PHP im Kontext von HTML zu mischen, aber das ist in diesem Projekt unvermeidlich).

Es gibt einige großartige Templating-Projekte, um dies zu vereinfachen, aber ich schweife ab. Wie auch immer, Sie werden feststellen, dass es in der  Datei post-list.php Verweise auf Hilfsfunktionen in der Klasse Post Query gibt. Damit soll sichergestellt werden, dass ich nicht zu viele Grundstücke preisgebe und gegen das Demeter-Gesetz verstoße.

Schauen wir uns zuerst diese Datei an, da sie die komplizierteste ist :

<ol>
    <?php while ($this->query->has_posts()) {  ?>
        <?php $this->query->the_post(); ?>
        <li>
            <a href="<?php get_the_permalink(); ?>" target="_blank">
                <?php echo get_the_title(); ?>
            </a>
        </li>
    <?php } ?>
</ol>

Es sieht aus wie dieser Standard-WordPress-Code, aber denken Sie daran, dass diese Datei, da sie innerhalb des Post Messenger aufgerufen wird, auf die Abfrage als die Abfrage verweist, die von dieser Klasse umschlossen ist.

Die letzten beiden Dateien sind ziemlich geradlinig. Einer von ihnen liefert eine Beschreibung :

<p>
    <span class="description">
        Displays up to the three most recent posts.
    </span><!-- .description -->
</p>

Der andere liefert eine Nachricht, wenn keine Beiträge vorhanden sind :

<p>There are no recent posts.</p>

Ansonsten ist die Grundfunktionalität erledigt.

Bootstrapping des Plugins

Als letztes müssen wir das Plugin starten. Dazu ändern wir den Code in der Haupt-Plugin-Datei so ab, dass er so aussieht :

<?php
/**
 * Three Recent Posts
 *
 * @package     TRP
 * @author      Tom McFarlin
 * @copyright   2017 Tom McFarlin
 * @license     MIT
 *
 * @wordpress-plugin
 * Plugin Name: Three Recent Posts
 * Plugin URI:  https://tommcfarlin.com/three-recent-posts/
 * Description: Displays the three mot recent posts in your post editor screen.
 * Version:     0.2.0
 * Author:      Tom McFarlin
 * Author URI:  https://tommcfarlin.com
 * Text Domain: three-recent-posts
 * License:     GPL
 * License URI: http://www.gnu.org/licenses/gpl-3.0.txt
 */

include 'class-meta-box.php';
include 'class-meta-box-display.php';
include 'class-post-messenger.php';
include 'class-post-query.php';

add_action( 'add_meta_boxes', 'trp_start' );
/**
 * Starts the plugin.
 */
function trp_start() {

    $meta_box = new Meta_Box();
    $meta_box->init();
}

Das wird sich in WordPress einklinken, unser Plugin instanziieren und es dann in Gang setzen. Wenn Sie es in Ihrer Installation von WordPress ausführen, sollte es genauso aussehen wie in der ersten Version.

Der einzige Unterschied besteht darin, dass wir die Dinge jetzt in Klassen und nicht mehr in einzelnen Funktionen organisiert haben.

Anmerkungen

Erstens gibt es hier Möglichkeiten zum Refactoring, die die Entkopplung noch weiter reduzieren würden (z. B. verschiedene Arten von Dependency Injection usw.), aber der Zweck dieser Serie besteht nicht darin, dies zu behandeln.

Stattdessen geht es darum, Plugins zu sehen, die von vielen prozeduralen Funktionen geschrieben wurden, und sie dann in konzeptionellere Klassen aufzuteilen, die ihre Verantwortlichkeiten kapseln.

Zweitens, wenn Sie den Quellcode im Repository für diese Version des Projekts überprüfen, werden Sie feststellen, dass ich auch composer.json eingeführt habe. Auf diese Weise kann ich beim Schreiben von Code PHP CodeSniffer und die WordPress Coding Standards nutzen.

Im letzten Teil der Serie werden wir die Namensräume durchgehen und die Dateien neu organisieren. Wenn es die Zeit erlaubt, fügen wir einen Autoloader hinzu, damit wir Dateien nicht manuell oben in unsere Plugin-Datei einfügen müssen.

Schließlich habe ich diesen Code in Master gemergt und als 0.2.1 gekennzeichnet (da ich einen kleinen Hotfix machen musste), da er immer noch in Arbeit ist.

Serienbeiträge

  1. Rapid Prototyping mit WordPress: Vom Konzept zum Plugin
  2. Rapid Prototyping mit WordPress: Konzeptanalyse
  3. Rapid Prototyping: Vom Prototyp zum Code, Teil 1
  4. Rapid Prototyping: Vom Prototyp zum Code, Teil 2
  5. Rapid Prototyping: Einführung in das automatische Laden

Aufnahmequelle: tommcfarlin.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen