Membangun Aplikasi atau Proyek Ujung Depan Bertenaga CMS WordPress

Diterbitkan: 2021-08-17

Membangun aplikasi front end yang didukung WordPress membutuhkan pengetahuan tentang WP REST API dan AngularJS. Anda dapat membangun aplikasi apa pun dengan WordPress sebagai backend. Anda dapat membebaskan diri dari tema konvensional dan model admin yang populer di WordPress.

Dalam artikel membangun front end yang didukung WordPress ini, kita akan membuat antarmuka yang berisi posting unggulan, kategori, dan halaman daftar pengguna.

Anda akan memerlukan bantuan wireframes untuk membangun aplikasi front end yang didukung WordPress.

Gambaran Umum Proyek

Inilah saatnya untuk memahami persyaratan dan merencanakan seluruh proyek. Hal pertama yang kita butuhkan adalah membuat daftar halaman dan halaman tunggal untuk posting, pengguna, dan kategori.

Oleh karena itu, kami memerlukan template untuk halaman tersebut. Halaman daftar akan menampilkan sejumlah posting dengan pagination. Berikut ini adalah bagaimana tampilan halaman daftar secara kasar.

Berikut ini adalah tampilan template single post.

Sebagian besar fitur yang kami miliki di gambar rangka tersedia dengan WP REST API, tetapi ada beberapa fitur tambahan yang harus kami tambahkan sendiri seperti tautan gambar unggulan, nama kategori, dan nama penulis.

Mari kita melangkah lebih jauh dan menganalisis bagaimana kategori dan gambar bingkai posting seharusnya terlihat. Seperti inilah seharusnya template kategori.

Seperti inilah tampilan template pengguna.

Untuk memiliki beberapa fitur ini, Anda memerlukan plugin pendamping. Anda juga akan melihat bahwa beberapa fitur umum di semua template ini dan karenanya, kita harus membuat direktif AngularJS umum sehingga fitur umum dapat dibagikan dan tidak ada pengulangan.

Persyaratan

Sebelum Anda dapat memulai proyek, Anda perlu menginstal beberapa aplikasi.

1. Node.js untuk bekerja dengan perintah tertentu.

2. GulpJS untuk pengoptimalan dan Git untuk kloning

3. Instalasi WordPress dengan plugin WP REST API

Di baris perintah Github, Anda harus menulis yang berikut untuk mengkloning repositori paket HTML –


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

$ jalur cd/ke/kloning/repositori

Baris berikut akan menginstal modul Node.js.

$npm instal

Instalasi akan memakan waktu dan kemudian jalankan sumber menggunakan perintah $ gulp. Ini akan membuat folder bernama 'dist' tempat semua file sumber yang dikompilasi disimpan.

Saatnya Membangun Plugin Pendamping –

Seperti yang kami nyatakan sebelumnya bahwa kami memerlukan pembuatan plugin pendamping untuk membangun aplikasi front end yang diberdayakan WordPress . Berikut ini adalah hal-hal yang akan kita capai dengan membangun sebuah plugin pendamping.

Fitur-fiturnya adalah gambar unggulan untuk sebuah posting, nama penulis untuk sebuah posting bersama dengan gambar penulis dari akun Gravatar dan akhirnya daftar kategori untuk setiap posting.

Buka folder wp-content/plugins Anda dan beri nama yang sama dengan plugin Anda. Misalnya, kita pergi dengan teman yang diam.

Masuk ke dalam folder dan buat file php dengan nama yang sama dengan folder. Buka dan tempel kode berikut yang merupakan awal formal untuk membuat plugin.

/**
 * Nama Plugin: Pendamping Diam
 * Deskripsi: Plugin untuk bekerja dengan tema WP REST API Diam
 * Pengarang: Bilal Shahid
 * Penulis URI: http://imbilal.com
 */

Membangun Bidang Kustom Untuk Gambar Unggulan

Rekatkan kode berikut yang dimaksudkan untuk membuat gambar unggulan untuk sebuah posting. Pada dasarnya, ini akan membuat bidang khusus, dan Anda dapat menambahkan gambar unggulan seperti yang Anda lakukan.

/**
 * Memodifikasi respons untuk objek Post
 */
fungsi quiescent_modify_post_response() {
    // menambahkan bidang untuk gambar unggulan
    register_rest_field( 'posting', 'quiescent_featured_image', array(
        'get_callback' ='quiescent_get_featured_image',
        'update_callback' = nol,
        'skema' = null
    ) );
}
add_action('rest_api_init', 'quiescent_modify_post_response');

Kode berikut adalah untuk memberi nama pada bidang khusus untuk gambar unggulan dan untuk mengambil gambar.

/**
 * Fungsi untuk mengambil tautan gambar unggulan
 */
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' );
    kembalikan $attachment_info[0];
}

Dengan menggunakan metode yang terakhir dibuat, Anda dapat mengambil banyak informasi tentang posting seperti ID, judul, konten, dan lainnya.

Kode berikut adalah untuk membuat ukuran khusus untuk gambar unggulan. Ukurannya dipertahankan pada 712 x 348 piksel.

**
 * Menambahkan ukuran gambar untuk gambar unggulan
 */
fungsi quiescent_add_image_size() {
    add_image_size('quiescent_post_thumbnail', 712, 348, benar );
}
add_action( 'init', 'quiescent_add_image_size' );

Simpan file karena bidang khusus pertama ditambahkan, dua lagi tersisa.

Posting Terkait: Gambar Sampul Vs Gambar Unggulan Di Editor Blok WordPress

Membangun Bidang Kustom Untuk Pengguna dan Kategori

Berikut ini adalah kode untuk menambahkan bidang untuk menunjukkan nama penulis.


// menambahkan bidang untuk nama penulis
register_rest_field( 'posting', 'quiescent_author_name', array(
    'get_callback' = 'quiescent_get_author_name',
    'update_callback' = nol,
    'skema' = null
) );

/**
 * Fungsi untuk mengambil nama penulis
 */
function quiescent_get_author_name( $post, $field_name, $request ) {
    return get_the_author_meta( 'display_name', $post['author'] );
}

Kode berikut adalah untuk menambahkan nama kategori.

// menambahkan bidang untuk kategori
register_rest_field( 'posting', 'quiescent_categories', array(
    'get_callback' = 'quiescent_get_categories',
    'update_callback' = nol,
    'skema' = null
) );

/**
 * Fungsi untuk mengambil kategori
 */
function quiescent_get_categories( $post, $field_name, $request ) {
    return get_the_category( $post['id'] );
}

Simpan bidang dan sekarang kami memiliki quiescent_featured_image, quiescent_author_name, quiescent_categories sebagai tiga bidang khusus yang berbeda untuk fitur yang tidak ada dalam bentuk siap pakai.

Mengambil Gambar Gravatar Pn 207 x 207 Format Piksel

Hal terakhir yang hilang adalah foto penulis dari Gravatar. Kode berikut dimaksudkan hanya untuk itu.


/**
 * Memodifikasi respons untuk objek Pengguna
 */
fungsi quiescent_modify_user_response() {
     
}
add_action('rest_api_init', 'quiescent_modify_user_response');

/**
 * Memodifikasi respons untuk objek Pengguna
 */
fungsi quiescent_modify_user_response() {
    // menambahkan bidang untuk avatar 207 X 207
    register_rest_field( 'pengguna', 'quiescent_avatar_url', array(
        'get_callback' ='quiescent_get_user_avatar',
        'update_callback' = nol,
        'skema' = null
    ) );
}

/**
 * Mengambil avatar untuk pengguna
 */
function quiescent_get_user_avatar( $user, $field_name, $request ) {
    $args = array(
        'ukuran' = 207
    );
     
    return get_avatar_url( $user['id'], $args );
}

Sekarang, yang perlu Anda lakukan hanyalah membuat template, rute, dan layanan untuk sumber daya dan menyelesaikan pembuatan front end yang diberdayakan WordPress dengan mudah.