ใช้ WordPress พร้อม React เพื่อสร้าง Headless CMS สำหรับเว็บแอปพลิเคชันของคุณ

WordPress Rest API เป็นหนึ่งในคุณสมบัติที่ยอดเยี่ยมมากมายที่ WordPress นำเสนอ ช่วยให้นักพัฒนาสามารถสร้างปลั๊กอินและธีมที่น่าสนใจและช่วยให้สามารถขับเคลื่อนแอพพลิเคชันของบุคคลที่สามด้วย WordPress CMS

ระบบการจัดการเนื้อหายังได้รับการพัฒนาเพื่อจัดการเนื้อหาของเว็บไซต์ในแอปพลิเคชันเว็บสมัยใหม่ สิ่งนี้สามารถเพิ่มภาระงานพิเศษสำหรับนักพัฒนา ด้วยความเป็นไปได้มากมายที่ Rest API นำเสนอ เราจึงสามารถใช้ WordPress กับ React เป็น CMS ที่ไม่มีส่วนหัวสำหรับเว็บแอปพลิเคชันที่ใช้ JavaScript ได้

WordPress Headless คืออะไร?

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

Rest API ช่วยให้นักพัฒนาโต้ตอบกับอินเทอร์เฟซข้ามเทคโนโลยีได้ตราบเท่าที่ทั้งคู่พูดภาษาเดียวกันของ JSON WordPress Rest API แยกข้อมูลในรูปแบบ JSON ซึ่งเทคโนโลยีเว็บจำนวนมากเข้าใจได้ JSON คือการแสดงแบบข้อความของออบเจ็กต์ JavaScript ที่มีข้อมูลในคู่คีย์-ค่า

 "เพื่อน": [
      {
        "รหัส": 0
        "ชื่อ": "แฮเรียต สแตนลีย์"
      },
      {
        "ไอดี": 1,
        "ชื่อ": "เบนตัน โอดอม"
      },
      {
        "รหัส": 2,
        "ชื่อ": "แจ็กกี้ เอ็ดเวิร์ด"
      }
    ],

วันนี้ฉันจะสาธิตพลังของ WordPress Rest API โดยใช้ React และ WordPress เป็น CMS ที่ไม่มีส่วนหัวสำหรับเว็บแอปพลิเคชันพื้นฐานของฉัน

ประโยชน์ของการใช้ Headless WordPress CMS

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

คุณอาจเจอสถานการณ์ที่คุณต้องเพิ่มฟีเจอร์บล็อกในเว็บแอปที่มีอยู่ซึ่งสร้างด้วย React หรือ Angular แทนที่จะเขียนโค้ดระบบการจัดการเนื้อหาแบบเต็มรูปแบบในเฟรมเวิร์กดั้งเดิม ให้ใช้ WordPress CMS ที่ไม่มีส่วนหัวเพื่อจัดการเนื้อหาโดยใช้ Rest API

วิธีการตั้งค่าไซต์ WordPress สำหรับ ReactJS

เริ่มต้นด้วยการตั้งค่าไซต์ WordPress เนื่องจากจะทำหน้าที่เป็นแหล่งข้อมูลสำหรับแอปพลิเคชัน React ส่วนหน้าของเรา

ดาวน์โหลดไฟล์ zip ของปลั๊กอิน WP-Rest API จาก git และอัปโหลดโฟลเดอร์ zip ภายในโฟลเดอร์ปลั๊กอิน WordPress ของคุณ เมื่ออัปโหลดไฟล์แล้ว ให้เปิดใช้งานปลั๊กอิน สิ่งนี้จะเปิดใช้งาน WordPress Rest API ภายในเว็บไซต์ WordPress ของคุณ

ไปที่การตั้งค่า → ลิงก์ถาวร แล้วเลือกชื่อโพสต์หรือโครงสร้างที่กำหนดเอง

เนื่องจากเรากำลังทำงานกับการเรียก API ให้ดาวน์โหลดส่วนขยาย Chrome สำหรับ บุรุษไปรษณีย์ ภายในบุรุษไปรษณีย์ ให้ป้อน URL ในรูปแบบต่อไปนี้:

https://example.com/wp-json/wp/v2/posts

URL ด้านบนจะดึงข้อมูลโพสต์ภายในไซต์ WordPress ของคุณ

ดาวน์โหลดปลั๊กอิน Custom Post Type UI สำหรับสร้างประเภทโพสต์ที่กำหนดเอง โพสต์ที่กำหนดเองนี้จะปรากฏขึ้นเมื่อเราใช้ WordPress พร้อม React ในขั้นตอนถัดไป

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

ภายใน Post Type Slug ให้พิมพ์ชื่อโพสต์ที่คุณกำหนดเอง

ตรวจสอบให้แน่ใจว่าช่องทำเครื่องหมาย Show in REST API ถูกตั้งค่า เป็น true และ REST API base slug ถูกตั้งค่าไว้ด้วย นี่เป็นข้อบังคับหากคุณต้องการใช้ WordPress เป็น CMS ที่ไม่มีส่วนหัว

เลือกช่องทั้งหมดสำหรับข้อมูลที่คุณต้องการรับจาก REST API

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

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

หากต้องการตรวจสอบว่าข้อมูลพร้อมใช้งานผ่าน API ให้กด URL ภายในบุรุษไปรษณีย์

ตอนนี้ URL ควรมีลักษณะดังนี้ https://exampe.com/wp-json/wp/v2/ books

นอกจากนี้เรายังสามารถเพิ่มฟิลด์อื่นๆ เช่น ผู้เผยแพร่ โดยใช้ปลั๊กอิน ACF และ ACF ไปยัง RestAPI

ติดตั้งและเปิดใช้งานปลั๊กอินทั้งสอง

โดยค่าเริ่มต้น ACF จะไม่พูดกับ WordPress Rest API ดังนั้น เราจำเป็นต้องดาวน์โหลดปลั๊กอิน ACF REST API ด้วย

การใช้ปลั๊กอินฟิลด์แบบกำหนดเอง ฉันจะเพิ่มฟิลด์ผู้จัดพิมพ์สำหรับหนังสือของฉัน

อย่าลืมเลือกประเภทโพสต์ที่ต้องการจากรายการ หลังจากนั้น ให้กด ' เผยแพร่ '

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

เริ่มต้นใช้งาน React

ReactJS คืออะไร

React เป็นไลบรารี JavaScript สำหรับเว็บที่ดูแลโดย Facebook และชุมชนนักพัฒนา JavaScript เป็นเครื่องมือที่ทรงพลังสำหรับการพัฒนาเว็บ และมีหลายไลบรารีที่เขียนด้วย JavaScript เพื่อปรับปรุงการทำงานของเว็บไซต์ ReactJS ส่วนใหญ่จะใช้ในการพัฒนาแอพพลิเคชั่นหน้าเดียวที่รวดเร็ว แข็งแกร่ง และไดนามิก

กำลังตั้งค่าแอป React

ในการสร้างแอป React คุณต้องติดตั้งการพึ่งพาต่อไปนี้ในคอมพิวเตอร์ของคุณ

• NodeJS & NPM.
• โปรแกรมแก้ไขข้อความ เช่น Sublime หรือ Visual Studio Code
• Git สำหรับการควบคุมเวอร์ชัน (ไม่บังคับ)

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

 npx create-react-app ส่วนหน้า

เมื่อสร้างแอปแล้ว cd (เปลี่ยนไดเร็กทอรี) ไปที่โฟลเดอร์แอปพลิเคชันและพิมพ์คำสั่งต่อไปนี้เพื่อติดตั้งแพ็คเกจ Axios สำหรับการเรียก API

 npm ฉัน axios

ตอนนี้ เปิดโฟลเดอร์ภายในโปรแกรมแก้ไขข้อความที่คุณชื่นชอบ ฉันใช้รหัส Visual Studio

เปิดแอปพลิเคชันโดยรันคำสั่ง npm start

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

สร้างโฟลเดอร์ใหม่ ' ส่วนประกอบ ' ภายในโฟลเดอร์ src และภายในโฟลเดอร์ ' ส่วนประกอบ ' ให้สร้างไฟล์ใหม่ ' Books.js '

วิธีแสดงผลข้อมูลโพสต์บน ReactJS

ภายในไฟล์ Book.js เราจะดึงข้อมูลจาก WordPress Rest API ด้านล่างนี้คือรหัสที่ร้องขอจุดสิ้นสุด Rest API ซึ่งในกรณีของฉันคือ ' /books ' และแสดงข้อมูลในรูปแบบ JSON

 นำเข้า React { ส่วนประกอบ } จาก 'react'
นำเข้า axios จาก 'axios';

คลาสการส่งออกหนังสือขยายส่วนประกอบ {
   รัฐ = {
       หนังสือ: [],
       isLoaded: เท็จ
   }

 componentDidMount () {
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({)
           หนังสือ: res.data,
           isLoaded: จริง
       }))
       .catch(err => console.log(err))
   }


   เรนเดอร์ () {
      console.log (this.state);
       กลับ (
           <div>
              
           </div>
       )
   }
}

ส่งออกหนังสือเริ่มต้น

โค้ดด้านบนจะแสดงอาร์เรย์ของข้อมูลในคอนโซล ซึ่งจะถูกนำไปใช้ในบล็อกการเรนเดอร์

ตอนนี้ ภายในไฟล์ App.js ให้เรียกองค์ประกอบ หนังสือ ดังที่แสดงด้านล่าง

 นำเข้า React จาก 'react';
นำเข้า './App.css';
นำเข้าหนังสือจาก './components/Books';

แอปฟังก์ชัน () {
 กลับ (
   <div className="App">
    <หนังสือ/>
   </div>
 );
}

ส่งออกแอปเริ่มต้น;

App.js เป็นจุดเริ่มต้นของเว็บแอปพลิเคชันของเรา ดังนั้นจึงเป็นสิ่งสำคัญที่จะอ้างอิงถึงองค์ประกอบ "หนังสือ" ภายในไฟล์นี้

วิธีแสดงข้อมูลโพสต์บน ReactJS

ข้อมูลสามารถแสดงได้โดยการเพิ่มโค้ดภายในวิธีการเรนเดอร์

 เรนเดอร์ () {
       const {หนังสือ isLoaded} = this.state;
       กลับ (
           <div>
               {books.map(หนังสือ =>
               <h4>{book.title.rendered}</h4>
               )}
           </div>
       );
   }

แทนที่จะแสดงข้อมูลที่นี่ เราจะสร้างองค์ประกอบใหม่และตั้งชื่อว่า ' BookItems.js ' เนื่องจากฉันต้องการแยกองค์ประกอบออกจากองค์ประกอบหลัก

เปลี่ยนวิธีการเรนเดอร์ภายใน Bookk.js เป็นดังนี้:

 เรนเดอร์ () {
       const {หนังสือ isLoaded} = this.state;
       กลับ (
           <div>
               {books.map(หนังสือ =>
               <BookItems คีย์={book.id} book={book}/>
               )}
           </div>
       );
   }

ตอนนี้ เราต้องแสดงองค์ประกอบ BookItems แทน

ภายใน BookItems.js ให้ เพิ่มรหัสต่อไปนี้:

 นำเข้า React { ส่วนประกอบ } จาก 'react'
นำเข้า axios จาก 'axios';
นำเข้า PropTypes จาก 'prop-types';

BookItems คลาสการส่งออกขยายส่วนประกอบ {
 
   เรนเดอร์ () {
       const { title } = this.props.book;
       กลับ (
           <div>
              <h2>{title.rendered}</h2>
           </div>
       )
   }
}

ส่งออก BookItems เริ่มต้น

ในโค้ดด้านบนนี้ ฉันกำลังอ้างอิงอุปกรณ์หนังสือเพื่อรับชื่อและข้อมูลอื่นๆ

หมายเหตุ: ตรวจสอบให้แน่ใจว่าได้อ้างอิงองค์ประกอบ BookItems ภายในองค์ประกอบ "หนังสือ"

BookItems.js เวอร์ชันสุดท้ายของฉันมีลักษณะดังนี้:

 นำเข้า React { ส่วนประกอบ } จาก 'react'
นำเข้า PropTypes จาก 'prop-types';
นำเข้า axios จาก 'axios';
BookItems คลาสการส่งออกขยายส่วนประกอบ {

   รัฐ = {
       imgUrl: '',
       ผู้เขียน: '',
       isLoaded: เท็จ
   }

   propTypes แบบคงที่ = {
       หนังสือ: PropTypes.object.isRequired
   }

   componentDidMount () {
       const {featured_media, ผู้แต่ง} = this.props.book;
       const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_media}`);
       const getAuthor = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/${author}`);
      
       Promise.all ([getImageUrl, getAuthor]). จากนั้น (res => {

           console.log(res);
           this.setState({
               imgUrl: res[0].data.media_details.sizes.full.source_url,
               ผู้แต่ง: res[1].data.name,
               isLoaded: จริง

           });
       });
    }
 
   เรนเดอร์ () {
       const { หัวเรื่อง, ข้อความที่ตัดตอนมา } = this.props.book;
       const {ผู้เขียน imgUrl, isLoaded} = this.state;
       กลับ (
           <div>
              <h2>{title.rendered}</h2>
              <img src={imgUrl} alt={title.rendered}/>
              <strong>{ผู้เขียน}</strong><br/>
              <div dangerlySetInnerHTML={{__html: excerpt.rendered}}></div>
           </div>
       )
   }
}

ส่งออก BookItems เริ่มต้น

และผลลัพธ์ในเบราว์เซอร์จะมีลักษณะดังนี้:

ไม่ใช่คนที่สวยที่สุดใช่ไหม นั่นเป็นเพราะว่าการจัดสไตล์อยู่นอกขอบเขตของบทช่วยสอนนี้

ห่อ!

วันนี้ ฉันได้แสดงวิธีใช้ WordPress กับ React เป็น CMS ที่ไม่มีส่วนหัวสำหรับเว็บแอปพลิเคชันของคุณ รหัสตอบโต้ยังมีอยู่ใน Git ให้คุณดาวน์โหลด อย่างไรก็ตาม มันไม่ได้จำกัดอยู่ที่ React คุณยังสามารถทดลองกับ VueJS, Angular หรือเฟรมเวิร์ก JavaScript ใดก็ได้ มีหลายสิ่งที่คุณทำได้ด้วย WordPress Rest API ท้องฟ้ามีขีดจำกัด ดังนั้น ไปข้างหน้าและใช้ WordPress สำหรับโครงการเว็บถัดไปของคุณ