Budowanie aplikacji lub projektu frontendowego opartego na CMS WordPress

Budowanie aplikacji frontendowej opartej na WordPressie wymaga znajomości WP REST API i AngularJS. Możesz zbudować dowolną aplikację z WordPress jako backendem. Możesz uwolnić się od konwencjonalnego modelu motywu i administratora, który jest popularny w WordPress.

W tym artykule poświęconym tworzeniu interfejsu opartego na WordPressie stworzymy interfejs zawierający polecane posty, kategorie i strony z listą użytkowników.

Będziesz potrzebować pomocy w postaci szkieletów do zbudowania aplikacji frontendowej opartej na WordPressie.

Przegląd projektu

Czas zrozumieć wymagania i zaplanować cały projekt. Pierwszą rzeczą, jakiej potrzebujemy, jest lista stron i stron singli dla postów, użytkowników i kategorii.

Dlatego potrzebowalibyśmy szablonów dla tych stron. Strona z listą pokaże określoną liczbę postów z paginacją. Poniżej przedstawiamy, jak z grubsza powinna wyglądać strona z ofertą.

Oto jak powinien wyglądać pojedynczy szablon posta.

Większość funkcji, które mamy w modelu szkieletowym, jest dostępna w API WP REST, ale jest kilka dodatkowych funkcji, które musimy dodać samodzielnie, takich jak polecany link do obrazu, nazwy kategorii i nazwiska autorów.

Pójdźmy o krok dalej i przeanalizujmy, jak powinny wyglądać makiety kategorii i postów. Tak powinien wyglądać szablon kategorii.

Tak powinien wyglądać szablon użytkowników.

Aby mieć niektóre z tych funkcji, potrzebujesz wtyczki towarzyszącej. Zauważysz również, że niektóre cechy są wspólne we wszystkich tych szablonach i dlatego powinniśmy stworzyć wspólną dyrektywę AngularJS, aby wspólne cechy mogły być współdzielone i nie było powtórzeń.

Wymagania

Zanim zaczniesz projekt, musisz zainstalować kilka aplikacji.

1. Node.js do pracy z niektórymi poleceniami.

2. GulpJS do optymalizacji i Git do klonowania

3. Instalacja WordPressa z wtyczką WP REST API

W wierszu poleceń Github musisz napisać następujące polecenie, aby sklonować repozytorium pakietów HTML –

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

$ cd ścieżka/do/sklonowane/repozytorium

Poniższa linia zainstaluje moduły Node.js.

Instalacja $ npm

Instalacja zajmie trochę czasu, a następnie uruchom źródło za pomocą polecenia $ gulp. Spowoduje to utworzenie folderu o nazwie „dist”, w którym przechowywane są wszystkie skompilowane pliki źródłowe.

Czas zbudować wtyczkę towarzyszącą –

Jak wspomnieliśmy wcześniej, do tworzenia aplikacji frontendowych opartych na WordPressie wymagamy stworzenia wtyczek towarzyszących. Oto rzeczy, które zamierzamy osiągnąć, budując wtyczkę towarzyszącą.

Funkcje to wyróżniony obraz postu, imię i nazwisko autora posta wraz z obrazem autora z konta Gravatar i wreszcie lista kategorii dla każdego postu.

Przejdź do folderu wp-content/plugins i nadaj mu taką samą nazwę jak wtyczka. Na przykład idziemy ze spokojną towarzyszką.

Wejdź do folderu i utwórz plik php o tej samej nazwie co folder. Otwórz go i wklej następujący kod, który jest tylko formalnym początkiem tworzenia wtyczki.

/**
 * Nazwa wtyczki: cichy towarzysz
 * Opis: Wtyczka do pracy z motywem Quiescent WP REST API
 * Autor: Bilal Shahid
 * URI autora: http://imbilal.com
 */

Tworzenie niestandardowego pola dla wyróżnionego obrazu

Wklej następujący kod, który ma na celu utworzenie polecanego obrazu dla posta. Zasadniczo utworzy niestandardowe pole i możesz dodać wyróżniony obraz, tak jak to robisz.

/**
 * Modyfikowanie odpowiedzi dla obiektu Post
 */
funkcja quiescent_modify_post_response() {
    // dodanie pola dla wyróżnionego obrazu
    register_rest_field( 'post', 'quiescent_featured_image', array(
        'get_callback' ='quiescent_get_featured_image',
        'update_callback' = null,
        'schemat' = null
    ) );
}
add_action( 'rest_api_init', 'quiescent_modify_post_response' );

Poniższy kod służy do nadawania nazwy polu niestandardowemu dla polecanego obrazu i do pobierania obrazu.

/**
 * Funkcja pobierania polecanego linku do obrazu
 */
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' );
    zwróć $attachment_info[0];
}

Korzystając z ostatnio utworzonej metody, możesz pobrać wiele informacji o poście, takich jak jego identyfikator, tytuł, treść i tym podobne.

Poniższy kod służy do tworzenia niestandardowego rozmiaru polecanego obrazu. Rozmiar został utrzymany na poziomie 712 x 348 pikseli.

**
 * Dodanie rozmiaru obrazu dla wyróżnionego obrazu
 */
funkcja quiescent_add_image_size() {
    add_image_size( 'quiescent_post_thumbnail', 712, 348, prawda );
}
add_action( 'init', 'quiescent_add_image_size' );

Zapisz plik, ponieważ dodano pierwsze pole niestandardowe, pozostały jeszcze dwa.

Powiązany post: Obraz okładki a obraz polecany w edytorze bloków WordPress

Tworzenie niestandardowych pól dla użytkowników i kategorii

Poniżej znajduje się kod do dodania pola w celu wyświetlenia nazwiska autora.

// dodanie pola na nazwisko autora
register_rest_field( 'post', 'quiescent_author_name', array(
    'get_callback' = 'quiescent_get_author_name',
    'update_callback' = null,
    'schemat' = null
) );

/**
 * Funkcja pobierania nazwiska autora
 */
function quiescent_get_author_name( $post, $field_name, $request ) {
    return get_the_author_meta( 'display_name', $post['autor'] );
}

Poniższy kod służy do dodawania nazw kategorii.

// dodanie pola dla kategorii
register_rest_field('post','quiescent_categories', array(
    'get_callback' = 'quiescent_get_categories',
    'update_callback' = null,
    'schemat' = null
) );

/**
 * Funkcja pobierania kategorii
 */
function quiescent_get_categories( $post, $field_name, $request ) {
    return get_the_category( $post['id'] );
}

Zapisz to pole, a teraz mamy quiescent_featured_image, quiescent_author_name, quiescent_categories jako trzy różne niestandardowe pola dla funkcji, których nie ma w gotowym formularzu.

Pobieranie obrazu Gravatar Pn w formacie 207 x 207 pikseli

Ostatnia rzecz, której brakuje, to autorskie zdjęcie z Gravatara. Poniższy kod jest przeznaczony właśnie do tego.

/**
 * Modyfikowanie odpowiedzi dla obiektu użytkownika
 */
funkcja quiescent_modify_user_response() {
     
}
add_action( 'rest_api_init', 'quiescent_modify_user_response' );

/**
 * Modyfikowanie odpowiedzi dla obiektu użytkownika
 */
funkcja quiescent_modify_user_response() {
    // dodanie pola na awatar 207 X 207
    register_rest_field( 'użytkownik', 'quiescent_avatar_url', tablica(
        'get_callback' ='quiescent_get_user_avatar',
        'update_callback' = null,
        'schemat' = null
    ) );
}

/**
 * Pobieranie awatara dla użytkownika
 */
function quiescent_get_user_avatar( $user, $field_name, $request ) {
    $argumenty = tablica(
        „rozmiar” = 207
    );
     
    return get_avatar_url( $user['id'], $args );
}

Teraz wszystko, co musisz zrobić, to stworzyć szablony, trasy i usługi dla zasobów i łatwo ukończyć budowanie frontendu opartego na WordPressie .