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

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

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

ดังนั้นสิ่งที่ Heck คือ Headless WordPress?

การเป็น 'หัวขาด' ไม่ได้หมายความว่า CMS ไม่มีส่วนหัวอย่างแน่นอน หมายความว่าคุณสามารถใช้ CMS เป็นระบบจัดการเนื้อหาทั่วไปได้ โดยไม่คำนึงถึงเทคโนโลยีที่ใช้ในการสร้างส่วนหน้า

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

เริ่มต้นด้วยการตั้งค่าไซต์ 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 { title, excerpt } = 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 ที่ไม่มีส่วนหัวสำหรับเว็บแอปพลิเคชันของคุณ รหัส React ยังมีอยู่ใน Git เพื่อให้คุณดาวน์โหลด อย่างไรก็ตาม มันไม่ได้จำกัดอยู่ที่ React คุณยังสามารถทดลองกับ VueJS, Angular หรือเฟรมเวิร์ก JavaScript ใดก็ได้ มีหลายสิ่งที่คุณสามารถทำได้ด้วย WordPress Rest API ท้องฟ้ามีขีดจำกัด ดังนั้นไปข้างหน้าและใช้ WordPress สำหรับโครงการเว็บถัดไปของคุณ