Erstellen einer WordPress-CMS-basierten Front-End-Anwendung oder eines Projekts

Das Erstellen einer WordPress-basierten Front-End-Anwendung erfordert Kenntnisse der WP REST API und AngularJS. Sie können jede Anwendung mit WordPress als Backend erstellen. Sie können sich vom konventionellen Theme- und Admin-Modell befreien, das in WordPress beliebt ist.

In diesem Artikel über den Aufbau eines WordPress-basierten Frontends werden wir eine Schnittstelle erstellen, die vorgestellte Beiträge, Kategorien und Seiten mit Benutzerlisten enthält.

Sie benötigen die Hilfe von Wireframes, um eine WordPress-basierte Front-End-Anwendung zu erstellen.

Der Überblick über das Projekt

Es ist an der Zeit, die Anforderungen zu verstehen und das gesamte Projekt zu planen. Das erste, was wir brauchen, ist das Auflisten von Seiten und Singles-Seiten für Beiträge, Benutzer und Kategorien.

Daher benötigen wir Vorlagen für diese Seiten. Die Auflistungsseite zeigt eine bestimmte Anzahl von Beiträgen mit Paginierung. Im Folgenden sehen Sie, wie eine Auflistungsseite ungefähr aussehen sollte.

Im Folgenden sehen Sie, wie eine einzelne Beitragsvorlage aussehen sollte.

Die meisten Funktionen, die wir im Wireframe haben, sind mit der WP REST API verfügbar, aber es gibt einige zusätzliche Funktionen, die wir selbst hinzufügen müssen, wie z.

Lassen Sie uns einen Schritt weiter gehen und analysieren, wie die Wireframes der Kategorien und Posts aussehen sollten. So sollte die Kategorievorlage aussehen.

So sollte die Benutzervorlage aussehen.

Um einige dieser Funktionen nutzen zu können, benötigen Sie ein Begleit-Plugin. Sie werden auch feststellen, dass einige der Funktionen in allen diesen Vorlagen gleich sind, und daher sollten wir eine gemeinsame AngularJS-Direktive erstellen, damit die gemeinsamen Funktionen geteilt werden können und es keine Wiederholungen gibt.

Die Anforderungen

Bevor Sie mit dem Projekt beginnen können, müssen Sie einige Anwendungen installieren.

1. Node.js zum Arbeiten mit bestimmten Befehlen.

2. GulpJS zur Optimierung und Git zum Klonen

3. WordPress-Installation mit WP REST API-Plugin

In der Github-Befehlszeile müssen Sie Folgendes schreiben, um das HTML-Paket-Repository zu klonen –

$ git-Klon https://github.com/bilalvirgo10/quiescent-rest-api-html.git

$ cd-Pfad/zu/geklont/Repository

Die folgende Zeile installiert Node.js-Module.

$ npm installieren

Die Installation dauert einige Zeit und führt dann die Quelle mit dem Befehl $ gulp aus. Dadurch wird ein Ordner mit dem Namen „dist“ erstellt, in dem alle kompilierten Quelldateien aufbewahrt werden.

Zeit, das Companion-Plugin zu erstellen –

Wie wir bereits erwähnt haben, müssen wir ein Begleit-Plugin erstellen, um eine WordPress-basierte Front-End-Anwendung zu erstellen. Das Folgende sind die Dinge, die wir durch die Erstellung eines begleitenden Plugins erreichen werden.

Die Merkmale sind das vorgestellte Bild für einen Beitrag, der Autorenname für einen Beitrag zusammen mit dem Autorenbild aus dem Gravatar-Konto und schließlich die Liste der Kategorien für jeden Beitrag.

Gehe zu deinem Ordner wp-content/plugins und benenne ihn genauso wie dein Plugin. Zum Beispiel gehen wir mit quiescent-companion.

Gehen Sie in den Ordner und erstellen Sie eine PHP-Datei mit demselben Namen wie der Ordner. Öffnen Sie es und fügen Sie den folgenden Code ein, der nur ein formaler Anfang zum Erstellen eines Plugins ist.

/**
 * Plugin-Name: Stiller Begleiter
 * Beschreibung: Plugin zur Arbeit mit dem Quiescent WP REST API-Design
 * Autor: Bilal Shahid
 * Autoren-URI: http://imbilal.com
 */

Erstellen des benutzerdefinierten Felds für das Beitragsbild

Fügen Sie den folgenden Code ein, der ein Featured Image für einen Beitrag erstellen soll. Grundsätzlich wird ein benutzerdefiniertes Feld erstellt, und Sie können das vorgestellte Bild genau so hinzufügen, wie Sie es tun.

/**
 * Ändern der Antwort für das Post-Objekt
 */
Funktion quiescent_modify_post_response() {
    // Hinzufügen eines Feldes für das vorgestellte Bild
    register_rest_field( 'post', 'quiescent_featured_image', array(
        'get_callback' ='quiescent_get_featured_image',
        'update_callback' = null,
        'schema' = null
    ) );
}
add_action( 'rest_api_init', 'quiescent_modify_post_response' );

Der folgende Code dient dazu, dem benutzerdefinierten Feld für das vorgestellte Bild einen Namen zu geben und das Bild abzurufen.

/**
 * Funktion zum Abrufen des vorgestellten Bildlinks
 */
function quiescent_get_featured_image( $post, $field_name, $request ) {
    $attachment_id = $post['featured_media'];
    $attachment_info = wp_get_attachment_image_src( $attachment_id, 'quiescent_post_thumbnail' );
    gib $attachment_info[0] zurück;
}

Mit der zuletzt erstellten Methode können Sie viele Informationen zu einem Beitrag abrufen, z. B. ID, Titel, Inhalt und dergleichen.

Der folgende Code dient zum Erstellen einer benutzerdefinierten Größe für das vorgestellte Bild. Die Größe wurde bei 712 x 348 Pixeln beibehalten.

**
 * Hinzufügen der Bildgröße für das vorgestellte Bild
 */
Funktion quiescent_add_image_size() {
    add_image_size( 'quiescent_post_thumbnail', 712, 348, true );
}
add_action( 'init', 'quiescent_add_image_size' );

Speichern Sie die Datei, da das erste benutzerdefinierte Feld hinzugefügt wird und zwei weitere folgen.

Verwandter Beitrag: Titelbild vs. Beitragsbild im WordPress-Blockeditor

Erstellen der benutzerdefinierten Felder für Benutzer und Kategorien

Das Folgende ist der Code zum Hinzufügen des Felds zum Anzeigen des Autorennamens.

// Ein Feld für den Autorennamen hinzufügen
register_rest_field( 'post', 'quiescent_author_name', array(
    'get_callback' = 'quiescent_get_author_name',
    'update_callback' = null,
    'schema' = null
) );

/**
 * Funktion zum Abrufen des Autorennamens
 */
function quiescent_get_author_name( $post, $field_name, $request ) {
    return get_the_author_meta( 'Anzeigename', $post['Autor'] );
}

Der folgende Code dient zum Hinzufügen der Kategorienamen.

// Ein Feld für Kategorien hinzufügen
register_rest_field( 'post', 'quiescent_categories', array(
    'get_callback' = 'quiescent_get_categories',
    'update_callback' =null,
    'schema' = null
) );

/**
 * Funktion zum Abrufen von Kategorien
 */
Funktion quiescent_get_categories( $post, $field_name, $request ) {
    return get_the_category( $post['id'] );
}

Speichern Sie das Feld und jetzt haben wir quiescent_featured_image, quiescent_author_name, quiescent_categories als die drei verschiedenen benutzerdefinierten Felder für die Funktionen, die nicht in einem fertigen Formular vorhanden sind.

Abrufen des Gravatar-Bildes Pn 207 x 207 Pixel Format

Als letztes fehlt noch das Autorenfoto von Gravatar. Der folgende Code ist genau dafür gedacht.

/**
 * Ändern der Antwort für das Benutzerobjekt
 */
Funktion quiescent_modify_user_response() {
     
}
add_action( 'rest_api_init', 'quiescent_modify_user_response' );

/**
 * Ändern der Antwort für das Benutzerobjekt
 */
Funktion quiescent_modify_user_response() {
    // Hinzufügen eines Feldes für 207 x 207 Avatar
    register_rest_field( 'user', 'quiescent_avatar_url', array(
        'get_callback' ='quiescent_get_user_avatar',
        'update_callback' = null,
        'schema' = null
    ) );
}

/**
 * Abrufen des Avatars für den Benutzer
 */
Funktion quiescent_get_user_avatar( $user, $field_name, $request ) {
    $args = array(
        'Größe' = 207
    );
     
    return get_avatar_url( $user['id'], $args );
}

Jetzt müssen Sie nur noch Vorlagen, Routen und Dienste für die Ressourcen erstellen und ganz einfach ein WordPress-basiertes Frontend erstellen.