การสร้างแอปพลิเคชันหรือโปรเจ็กต์ส่วนหน้าขับเคลื่อนด้วย WordPress CMS

การสร้างแอปพลิเคชันส่วนหน้าที่ใช้ WordPress ต้องใช้ความรู้ WP REST API และ AngularJS คุณสามารถสร้างแอปพลิเคชันใดๆ ก็ได้โดยใช้ WordPress เป็นแบ็กเอนด์ คุณสามารถหลุดพ้นจากธีมธรรมดาและโมเดลผู้ดูแลระบบซึ่งเป็นที่นิยมใน WordPress ได้

ในบทความเกี่ยว กับการสร้างส่วนหน้าที่ใช้ WordPress เราจะสร้างอินเทอร์เฟซที่มีหน้ารายการบทความ หมวดหมู่ และผู้ใช้

คุณจะต้องใช้ wireframes เพื่อ สร้างแอปพลิเคชันส่วนหน้าที่ใช้ WordPress

ภาพรวมของโครงการ

ถึงเวลาทำความเข้าใจข้อกำหนดและวางแผนทั้งโครงการ สิ่งแรกที่เราต้องการคือการแสดงรายการหน้าและหน้าเดี่ยวสำหรับโพสต์ ผู้ใช้ และหมวดหมู่

ดังนั้น เราจึงต้องการเทมเพลตสำหรับหน้าเหล่านั้น หน้ารายการจะแสดงจำนวนโพสต์ที่มีการแบ่งหน้า ต่อไปนี้เป็นลักษณะที่หน้ารายชื่อควรมีลักษณะคร่าวๆ

ต่อไปนี้เป็นลักษณะของเทมเพลตโพสต์เดียว

คุณลักษณะส่วนใหญ่ที่เรามีในโครงร่างมีอยู่ใน WP REST API แต่มีคุณสมบัติเพิ่มเติมบางอย่างที่เราต้องเพิ่มด้วยตัวเอง เช่น ลิงก์รูปภาพเด่น ชื่อหมวดหมู่ และชื่อผู้แต่ง

ให้เราก้าวไปอีกขั้นและวิเคราะห์ว่าหมวดหมู่และโครงร่างโพสต์ควรมีหน้าตาเป็นอย่างไร นี่คือลักษณะที่เทมเพลตหมวดหมู่ควรมีลักษณะเช่นนี้

นี่คือลักษณะที่เทมเพลตผู้ใช้ควรมีลักษณะเช่นนี้

เพื่อให้มีคุณสมบัติเหล่านี้ คุณจะต้องมีปลั๊กอินเสริม นอกจากนี้ คุณจะสังเกตเห็นว่าคุณลักษณะบางอย่างมีอยู่ทั่วไปในเทมเพลตเหล่านี้ทั้งหมด และด้วยเหตุนี้ เราควรสร้างคำสั่ง AngularJS ทั่วไป เพื่อให้สามารถแชร์คุณลักษณะทั่วไปและไม่มีการทำซ้ำ

ความต้องการ

ก่อนที่คุณจะเริ่มโปรเจ็กต์ได้ คุณต้องติดตั้งแอปพลิเคชั่นบางตัวเสียก่อน

1. Node.js สำหรับการทำงานกับคำสั่งบางอย่าง

2. GulpJS สำหรับการเพิ่มประสิทธิภาพและ Git สำหรับการโคลน

3. การติดตั้ง WordPress พร้อมปลั๊กอิน WP REST API

ในบรรทัดคำสั่ง Github คุณต้องเขียนสิ่งต่อไปนี้เพื่อโคลนที่เก็บแพ็คเกจ HTML –

โคลน $ git https://github.com/bilalvirgo10/quiescent-rest-api-html.git

$ cd path/to/cloned/repository

บรรทัดต่อไปนี้จะติดตั้งโมดูล Node.js

$ npm ติดตั้ง

การติดตั้งจะใช้เวลาสักครู่แล้วรันซอร์สโดยใช้คำสั่ง $ gulp สิ่งนี้จะสร้างโฟลเดอร์ชื่อ 'dist' ซึ่งเก็บไฟล์ต้นฉบับที่คอมไพล์ไว้ทั้งหมด

ถึงเวลาสร้างปลั๊กอิน Companion –

ดังที่เราได้กล่าวไว้ก่อนหน้านี้ว่า เราจำเป็นต้องสร้างปลั๊กอินเสริมสำหรับการ สร้างแอปพลิเคชันส่วนหน้าที่ใช้ WordPress ต่อไปนี้คือสิ่งที่เราจะบรรลุโดยการสร้างปลั๊กอินที่แสดงร่วม

คุณลักษณะต่างๆ ได้แก่ รูปภาพเด่นสำหรับโพสต์ ชื่อผู้เขียนสำหรับโพสต์ พร้อมด้วยรูปภาพของผู้เขียนจากบัญชี Gravatar และสุดท้ายคือรายการหมวดหมู่สำหรับแต่ละโพสต์

ไปที่โฟลเดอร์ wp-content/plugins และตั้งชื่อให้เหมือนกับปลั๊กอินของคุณ ตัวอย่างเช่น เรากำลังจะไปกับเพื่อนที่สงบนิ่ง

เข้าไปในโฟลเดอร์และสร้างไฟล์ php ด้วยชื่อเดียวกับโฟลเดอร์ เปิดและวางโค้ดต่อไปนี้ซึ่งเป็นเพียงจุดเริ่มต้นอย่างเป็นทางการในการสร้างปลั๊กอิน

/**
 * ชื่อปลั๊กอิน: Quiescent Companion
 * คำอธิบาย: ปลั๊กอินเพื่อทำงานกับธีม Quiescent WP REST API
 * ผู้แต่ง: Bilal Shahid
 * URI ผู้แต่ง: http://imbilal.com
 */

การสร้างฟิลด์แบบกำหนดเองสำหรับรูปภาพเด่น

วางโค้ดต่อไปนี้ซึ่งมีไว้สำหรับสร้างภาพเด่นสำหรับโพสต์ โดยพื้นฐานแล้ว มันจะสร้างฟิลด์ที่กำหนดเอง และคุณสามารถเพิ่มรูปภาพเด่นได้เหมือนกับที่คุณทำ

/**
 * แก้ไขการตอบกลับสำหรับวัตถุโพสต์
 */
ฟังก์ชั่น quiescent_modify_post_response () {
    // เพิ่มฟิลด์สำหรับรูปภาพเด่น
    register_rest_field ( 'โพสต์', 'quiescent_featured_image', อาร์เรย์ (
        'get_callback' ='quiescent_get_featured_image',
        'update_callback' = null
        'สคีมา' = null
    ) );
}
add_action( 'rest_api_init', 'quiescent_modify_post_response' );

รหัสต่อไปนี้ใช้สำหรับตั้งชื่อฟิลด์ที่กำหนดเองสำหรับรูปภาพเด่นและสำหรับการดึงรูปภาพ

/**
 * ฟังก์ชั่นดึงลิงค์รูปภาพเด่น
 */
ฟังก์ชัน 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' );
    ส่งคืน $attachment_info[0];
}

เมื่อใช้วิธีการที่สร้างขึ้นล่าสุด คุณสามารถดึงข้อมูลจำนวนมากเกี่ยวกับโพสต์ เช่น รหัส ชื่อเรื่อง เนื้อหา และอื่นๆ ในทำนองเดียวกัน

โค้ดต่อไปนี้ใช้สำหรับสร้างขนาดที่กำหนดเองสำหรับรูปภาพเด่น ขนาดถูกเก็บไว้ที่ 712 x 348 พิกเซล

**
 * เพิ่มขนาดรูปภาพสำหรับรูปภาพเด่น
 */
ฟังก์ชั่น quiescent_add_image_size () {
    add_image_size( 'quiescent_post_thumbnail', 712, 348, จริง );
}
add_action( 'เริ่มต้น', 'quiescent_add_image_size' );

บันทึกไฟล์เนื่องจากมีการเพิ่มฟิลด์กำหนดเองแรก เหลืออีกสองฟิลด์

โพสต์ที่เกี่ยวข้อง: ภาพหน้าปก Vs ภาพเด่นใน WordPress Block Editor

การสร้างฟิลด์ที่กำหนดเองสำหรับผู้ใช้และหมวดหมู่

ต่อไปนี้เป็นรหัสสำหรับเพิ่มฟิลด์เพื่อแสดงชื่อผู้เขียน

// เพิ่มฟิลด์สำหรับชื่อผู้เขียน
register_rest_field ( 'โพสต์', 'quiescent_author_name', อาร์เรย์ (
    'get_callback' = 'quiescent_get_author_name',
    'update_callback' = null
    'สคีมา' = null
) );

/**
 * ฟังก์ชั่นดึงชื่อผู้แต่ง
 */
ฟังก์ชั่น quiescent_get_author_name ( $post, $field_name, $request ) {
    ส่งคืน get_the_author_meta( 'display_name', $post['author'] );
}

รหัสต่อไปนี้ใช้สำหรับการเพิ่มชื่อหมวดหมู่

// เพิ่มฟิลด์สำหรับหมวดหมู่
register_rest_field ( 'โพสต์', 'quiescent_categories', อาร์เรย์ (
    'get_callback' = 'quiescent_get_categories',
    'update_callback' = null,
    'สคีมา' = null
) );

/**
 * ฟังก์ชั่นดึงหมวดหมู่
 */
ฟังก์ชั่น quiescent_get_categories( $post, $field_name, $request ) {
    ส่งคืน get_the_category( $post['id'] );
}

บันทึกฟิลด์ และตอนนี้ เรามี quiescent_featured_image, quiescent_author_name, quiescent_categories เป็นฟิลด์กำหนดเองที่แตกต่างกันสามฟิลด์สำหรับคุณลักษณะที่ไม่มีอยู่ในรูปแบบสำเร็จรูปของดีบุก

กำลังเรียกรูปภาพ Gravatar Pn 207 x 207 รูปแบบพิกเซล

สิ่งสุดท้ายที่ขาดหายไปคือภาพถ่ายของผู้เขียนจาก Gravatar รหัสต่อไปนี้มีไว้สำหรับสิ่งนั้นเท่านั้น

/**
 * แก้ไขการตอบสนองสำหรับวัตถุผู้ใช้
 */
ฟังก์ชั่น quiescent_modify_user_response () {
     
}
add_action( 'rest_api_init', 'quiescent_modify_user_response' );

/**
 * แก้ไขการตอบสนองสำหรับวัตถุผู้ใช้
 */
ฟังก์ชั่น quiescent_modify_user_response () {
    // เพิ่มฟิลด์สำหรับ 207 X 207 avatar
    register_rest_field ( 'ผู้ใช้', 'quiescent_avatar_url', อาร์เรย์ (
        'get_callback' ='quiescent_get_user_avatar',
        'update_callback' = null
        'สคีมา' = null
    ) );
}

/**
 * ดึงอวาตาร์สำหรับผู้ใช้
 */
ฟังก์ชัน quiescent_get_user_avatar (ผู้ใช้ $, $field_name, $request) {
    $args = อาร์เรย์ (
        'ขนาด' = 207
    );
     
    ส่งคืน get_avatar_url( $user['id'], $args );
}

ตอนนี้ สิ่งที่คุณต้องทำคือสร้างเทมเพลต เส้นทาง และบริการสำหรับทรัพยากร และ สร้างส่วนหน้าที่ใช้ WordPress ได้อย่างง่ายดาย