ของคุณดู : ฝังองค์ประกอบการตอบสนองใน wordpress

WordPress

WordPress อ้างว่าเป็น “ผู้สร้างเว็บไซต์ที่ได้รับความนิยมมากที่สุดในโลก” ตามสถิติที่ 38% ของเว็บสร้างขึ้นบน WordPress แม้จะมีการจัดประเภทเป็น ‘เครื่องมือสร้างเว็บไซต์’ แต่ฟีเจอร์ที่โด่งดังที่สุดของ WordPress ก็คือความง่ายในการแก้ไขเนื้อหาที่มีให้ ผู้ใช้ด้านเทคนิคและผู้ใช้ที่ไม่ใช่ด้านเทคนิคสามารถเพิ่มและแก้ไขเนื้อหาได้อย่างรวดเร็ว ซึ่งจะนำข้อมูลของตนไปทั่วโลกได้เร็วขึ้น WordPress ช่วยให้ผู้คนสร้างเว็บไซต์ แต่เป็นระบบจัดการเนื้อหา (CMS)

WordPress CMS เปิดตัวในปี 2546 เพื่อรองรับการเขียนบล็อก มันเขียนโดยใช้ภาษาการเขียนโปรแกรม PHP และมีปลั๊กอินมากมายที่ผู้ใช้สามารถแนบไปกับไซต์ของตนเพื่อเพิ่มฟังก์ชันการทำงานได้

ที่เกี่ยวข้อง: วิธีใช้ภายนอก API กับ WordPress

WordPress เผชิญกับการวิพากษ์วิจารณ์มากมายในช่วงหลายปีที่ผ่านมา เกี่ยวกับ:

  • ภัยคุกคามด้านความปลอดภัย
  • การใช้งาน ของ PHP
  • ความเร็ว

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

ในบทความนี้ เราจะพูดถึงวิธีที่เราสามารถรวมพลังระบบการจัดการเนื้อหาของ WordPress เข้ากับ:

  • ReactJS สำหรับสร้างอินเทอร์เฟซผู้ใช้
  • GatsbyJS สำหรับ HTML ที่โหลดเร็ว
  • GraphQL สำหรับการสืบค้นข้อมูลภายใน Gatsby

แนวทางนี้ช่วยให้นักพัฒนาลดทั้งหมด สามข้อวิพากษ์วิจารณ์ดังกล่าวด้วยเทคโนโลยีใหม่

React

ReactJS เป็นเฟรมเวิร์กเว็บ Javascript สำหรับ การสร้างอินเทอร์เฟซผู้ใช้ Stack Overflow ซึ่งเป็นฟอรัมยอดนิยมสำหรับการถามและตอบคำถามเกี่ยวกับการเขียนโปรแกรม ได้เผยแพร่แบบสำรวจสำหรับนักพัฒนาซอฟต์แวร์ประจำปี 2020 พวกเขาสำรวจนักพัฒนากว่า 65,000 รายโดยมีส่วนเดียวซึ่งครอบคลุม กรอบงานเว็บที่มีความรัก น่ากลัว และต้องการมากที่สุด ReactJS ถูก ‘รัก’ โดย 68.9% ของนักพัฒนา เปอร์เซ็นต์คือนักพัฒนา “ที่กำลังพัฒนาด้วยภาษาหรือเทคโนโลยีและได้แสดงความสนใจในการพัฒนาต่อไป” สิ่งนี้ทำให้ ReactJS จบอันดับที่สองรองจาก ASP.NET Core (70.7%)

ReactJS ปฏิวัติความสามารถในการสร้างประสบการณ์ผู้ใช้ที่ดูเหมือนรวดเร็วด้วยการรวมคุณสมบัติต่างๆ เช่น ส่วนประกอบ สถานะ อุปกรณ์ประกอบฉาก JSX และแบบจำลองวัตถุเอกสารเสมือน (DOM) หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ ReactJS คุณสามารถ:

Gatsby

Gatsby เป็นเฟรมเวิร์กโอเพนซอร์สที่ใช้ React สำหรับการสร้าง เว็บไซต์และแอพ สร้างทุกสิ่งที่คุณสามารถจินตนาการได้ ด้วยปลั๊กอินมากกว่า 2,000 รายการและ ประสิทธิภาพ ความสามารถในการปรับขนาด และ ความปลอดภัย ในตัวโดยค่าเริ่มต้น

< span>gatsbyjs.com

ในแบบสำรวจเดียวกันที่กล่าวถึงข้างต้น Gatsby อยู่ในอันดับที่ห้า—เป็น ‘ที่รัก’ จาก 60% ของผู้ตอบแบบสอบถาม แม้จะยังใหม่ต่อการสำรวจนี้ วิธีหนึ่งในการตีความนั่นคือ GatsbyJS กำลังเพิ่มขึ้น

Gatsby เป็นโปรแกรมสร้างไซต์แบบคงที่ นั่นหมายความว่าจะคอมไพล์โค้ด React และข้อมูลลงในสินทรัพย์แบบคงที่ (HTML, รูปภาพ, CSS) เนื้อหาเหล่านี้ประกอบขึ้นเป็นเว็บแอปพลิเคชันและเผยแพร่ไปทั่วโลกด้วยบริการอย่าง Netlify

Gatsby เช่น WordPress มีสถาปัตยกรรมปลั๊กอินที่ช่วยให้ผู้ใช้สามารถรวมแหล่งข้อมูลต่างๆ เว็บไซต์ มันกลายเป็นส่วนหนึ่งของ JAMstack ซึ่งย่อมาจากกลุ่มเทคโนโลยีที่ใช้ Javascript, API และ Markdown อย่างไรก็ตาม นั่นไม่ใช่วิธีเดียวที่จะใช้เครื่องมือได้

ปลั๊กอินสำหรับ Gatsby ให้ผู้ใช้ดึงข้อมูลจากเว็บไซต์เช่น Shopify, Stripe และ WordPress ซึ่งหมายความว่าไซต์ต่างๆ สามารถแยกออกจากโครงสร้างเว็บไซต์แบบเสาหิน (เช่น Shopify, WordPress) และสร้างไซต์ที่กำหนดเองด้วย React ผู้ใช้ค้นหาข้อมูลจากแหล่งที่มาโดยใช้ GraphQL

GraphQL

GraphQL ช่วยให้นักพัฒนาดึงข้อมูลที่ต้องการจากจุดปลาย API เดียวโดยใช้ สตริงการสืบค้น ใน REST API คุณอาจต้องดึงข้อมูลชื่อผู้ใช้ อย่างไรก็ตาม ในการรับชื่อ คุณต้องดึงข้อมูลของผู้ใช้ทั้งหมด ดังนั้น คุณต้องเพิ่มโค้ดเพิ่มเติมในโปรแกรมของคุณเพื่อประมวลผลส่วนของข้อมูลเพื่อรับคุณสมบัติชื่อเท่านั้น ด้วย GraphQL คุณสามารถค้นหาคุณสมบัติของชื่อและระบุการเรียก API ของคุณสำหรับข้อมูลที่แน่นอนที่คุณต้องการ

หากต้องการเรียนรู้เกี่ยวกับ GraphQL และเหตุใดจึงได้รับความนิยม คุณสามารถดูแหล่งข้อมูลต่อไปนี้:

p>

เราสามารถรวมสองปลั๊กอิน WordPress เข้ากับปลั๊กอิน Gatsby หนึ่งตัว เพื่อเปิด GraphQL API กับไซต์ WordPress ของเรา จากนั้น เราสามารถสืบค้นข้อมูลจากไซต์นั้นและใส่ลงในแอป ReactJS ของเรา ส่วนต่อไปของบทความเป็นบทแนะนำเกี่ยวกับวิธีที่เราสามารถรวมเทคโนโลยีเหล่านี้เพื่อใช้ประโยชน์จากคุณลักษณะต่างๆ ได้ ด้วยวิธีนี้ ผู้ใช้ที่ไม่ใช่ด้านเทคนิคยังคงสามารถใช้ CMS ที่พวกเขาชื่นชอบได้ และนักพัฒนาสามารถควบคุมได้โดยใช้เฟรมเวิร์กเว็บที่ทันสมัย ​​เช่น React!

สร้างแอพโดยใช้ WordPress และ React

บทช่วยสอนนี้อิงตาม บทช่วยสอน โดย ไทเลอร์ บาร์นส์ ซึ่งเป็นผู้มีส่วนร่วมใน gatsby-source-wordpress-experimental และผู้สร้างร่วมของปลั๊กอิน WordPress WP Gatsby

ข้อกำหนดเบื้องต้น

  • ความรู้เกี่ยวกับวิธีการเปิดและใช้เครื่องมือบรรทัดคำสั่ง (เช่น BASH, PowerShell)
  • ความเข้าใจพื้นฐานของ:
    • ReactJS
    • GraphQL
  • ติดตั้ง NodeJS
  • การเชื่อมต่ออินเทอร์เน็ต (สำหรับดาวน์โหลดซอฟต์แวร์พัฒนา)

1. ตั้งค่าโครงการ

ตั้งค่าโฮสติ้ง WordPress ในพื้นที่

เราจะใช้ ท้องถิ่นเพื่อพัฒนาไซต์ WordPress ในพื้นที่ ไปที่ https://localwp.com/ และคลิกปุ่ม ดาวน์โหลด

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

จากนั้นเปิดแอปพลิเคชันและสร้างเว็บไซต์ใหม่ชื่อ wordpress-react

ในส่วนถัดไป การตั้งค่าสภาพแวดล้อม เลือกแท็บกำหนดเอง เลือกเวอร์ชัน PHP ล่าสุด เว็บเซิร์ฟเวอร์ Apache และตัวเลือก MySQL ล่าสุด

See also  ปลั๊กอินอัปโหลดไฟล์ที่ดีที่สุดสำหรับ WordPress - ปลั๊กอินแบบฟอร์ม wordpress พร้อมการอัปโหลดไฟล์

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

จดโดเมนของเว็บไซต์ นี่คือ URL สำหรับไซต์ WordPress ที่ทำงานอยู่ในเครื่อง เราจะใช้สิ่งนี้ในภายหลังเพื่อตั้งค่าจุดสิ้นสุด GraphQL

 

ตอนนี้คุณควรจะสามารถเยี่ยมชมไซต์ WordPress ของคุณที่ทำงานอยู่ในเครื่องที่ http://wordpressreact.local/.

ต่อไป เราต้องสร้างไซต์ Gatsby ในพื้นที่ใหม่

ตั้งค่า New Gatsby Project

เปิดเครื่องมือบรรทัดคำสั่งและติดตั้ง Gatsby CLI

npm install -g gatsby-cli

จากนั้นสร้างเว็บไซต์ใหม่

gatsby new wordpress-react

เปลี่ยน ไดเร็กทอรีลงในโฟลเดอร์ที่สร้างขึ้นใหม่ wordpress-react.

cd wordpress-react

เริ่มไซต์ Gatsby ใหม่โดยเรียกใช้ < รหัส>แกสบี้พัฒนา เว็บไซต์จะสร้าง จากนั้นคุณสามารถเยี่ยมชมเว็บไซต์ได้ที่ http://localhost:8000/.

ขณะนี้เรามีไซต์ WordPress ในพื้นที่ ทำงานที่ http://wordpressreact.local และไซต์ Gatsby ในพื้นที่ทำงานที่ http://localhost:8000

ในหัวข้อถัดไป เราจะดาวน์โหลดและกำหนดค่า GraphQL API สำหรับทั้งสองไซต์

2. สร้าง GraphQL API ด้วย WordPress และ Gatsby

กำหนดค่าปลั๊กอิน Gatsby

ถัดไป ดาวน์โหลดปลั๊กอิน WordPress สำหรับแกสบี้ ตรวจสอบให้แน่ใจว่าคุณยังคงอยู่ในโฟลเดอร์โปรเจ็กต์รูทสำหรับไซต์ Gatsby

npm ติดตั้ง gatsby-source-wordpress-experimental

เปิด IDE ของคุณ หรือโปรแกรมแก้ไขข้อความในโฟลเดอร์ wordpress-react หลัก โปรดทราบว่าฉันกำลังใช้ Visual Studio Code

วางโค้ดต่อไปนี้ลงใน gatsby-config.js โดยแทนที่โค้ดใดๆ ที่อยู่ในไฟล์

module.exports = {
  ข้อมูลเมตาของไซต์: {
    หัวข้อ: `Wordpress + React Tutorial`,
    คำอธิบาย: `การใช้ WordPress เป็น CMS พร้อม React`,
    ผู้เขียน: `@gatsbyjs`,
  },
  ปลั๊กอิน: [
    {
      แก้ไข: `gatsby-source-wordpress-experimental',
      ตัวเลือก: {
        URL: `http://wordpressreact.local/graphql`,
      },
    },
    `แกสบี้-ปลั๊กอิน-ปฏิกิริยา-หมวกกันน็อค',
    {
      แก้ไข: `gatsby-source-filesystem',
      ตัวเลือก: {
        ชื่อ: `ภาพ`,
        เส้นทาง: `${__dirname}/src/images`,
      },
    },
    `แกสบี้-หม้อแปลง-คม',
    `แกสบี้-ปลั๊กอิน-ชาร์ป',
    {
      แก้ไข: `gatsby-plugin-manifest',
      ตัวเลือก: {
        ชื่อ: `gatsby-starter-default',
        short_name: `สตาร์ทเตอร์',
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        จอแสดงผล: `minimal-ui`,
        ไอคอน: `src/images/gatsby-icon.png`,
      },
    },
  ],
}

รหัสส่วนใหญ่เป็นรหัสเริ่มต้นทั่วไป ส่วนที่สำคัญคือการกำหนดค่า gatsby-source-wordpress-experimental ปลั๊กอิน ที่นี่ เราให้ URL ไปยังจุดปลาย GraphQL ของไซต์ของเรา เราต้องรีสตาร์ทเซิร์ฟเวอร์การพัฒนาเพื่อดูการเปลี่ยนแปลงที่เราทำใน gatsby-config.js หรือ gatsby-node.js

อย่างไรก็ตาม ไม่มี URL http://wordpressreact.local/graphql ดังนั้นจะสร้างเว็บไซต์ไม่สำเร็จ

อัปโหลดและกำหนดค่าปลั๊กอิน WordPress

เปิดเบราว์เซอร์และไปที่ https://github.com/gatsbyjs/wp-gatsby คลิกปุ่มรหัสสีเขียวเพื่อเปิดเมนูแบบเลื่อนลง จากนั้นเลือกดาวน์โหลด Zip

จากนั้นไปที่ https://github.com/wp-graphql/wp-graphql

span> และดาวน์โหลดไฟล์ zip สำหรับปลั๊กอินนั้นด้วย

เหล่านี้เป็นปลั๊กอินสองตัวที่เราจำเป็นต้องติดตั้งบนไซต์ WordPress ของเราเพื่อใช้ Gatsby และ GraphQL

เปิด < span>http://wordpressreact.local/wp-admin และลงชื่อเข้าใช้ไซต์ของคุณด้วยชื่อผู้ใช้และรหัสผ่านที่คุณป้อนเมื่อสร้างไซต์ด้วย Local

คลิกที่ ปลั๊กอินในการนำทางด้านข้าง จากนั้นคลิกปุ่ม เพิ่มใหม่ ที่ด้านบน

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

หลังจากเปิดใช้งานปลั๊กอิน ให้รีสตาร์ทเซิร์ฟเวอร์การพัฒนา Gatsby

ไม่มีอะไรจะดูแตกต่างไปจากนี้ในไซต์ แต่ควรสร้างและเข้าถึงได้จาก URL ในเครื่อง

3. ดึงข้อมูลจาก WordPress ไปยังไซต์ Gatsby

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

ขั้นแรก เปิดไฟล์ src/pages/index.js

ลบโค้ดทั้งหมดในองค์ประกอบ <Layout> ยกเว้นองค์ประกอบ <SEO /> จากนั้น เพิ่มโค้ดต่อไปนี้ใต้คอมโพเนนต์ <SEO />

....
      <h1>บล็อก WordPress ของฉัน</h1>
      <h4>โพสต์</h4>
      <section className="posts-container">
        {data.allWpPost.nodes.map((โพสต์) => (
          <div className="post-preview" key={post.slug}>
            <ลิงก์ไปยัง={post.slug}>
              {post.title}
            </ลิงค์>
          </div>
        ))}
      </ส่วน>
....

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

ที่ด้านล่างของ index.js ให้เพิ่ม:

...
ส่งออก const pageQuery = graphql`
  แบบสอบถาม {
    allWpPost (เรียงลำดับ: { ฟิลด์: [วันที่] }) {
        โหนด {
            ชื่อ
            กระสุน
        }
    }
  }
`

สุดท้ายเป็นพารามิเตอร์ของคอมโพเนนต์ IndexPage ให้เพิ่ม { data } ซึ่งจะแยกโครงสร้างค่า data ของอุปกรณ์ประกอบฉากที่ Gatsby แทรกลงในส่วนประกอบ พร็อพเพอร์ตี้ data เก็บข้อมูลที่ดึงมาจากการสืบค้น GraphQL

See also  8 สุดยอดปลั๊กอินตะกร้าสินค้า WooCommerce พร้อมบทช่วยสอน - วิธีตั้งค่าตะกร้าสินค้าใน wordpress

โค้ดภายใน index.js จะเป็นดังนี้:

< pre class="EnlighterJSRAW">นำเข้า React จาก “react”
นำเข้า { ลิงก์ } จาก “gatsby”

นำเข้าเค้าโครงจาก “../components/layout”
นำเข้ารูปภาพจาก “../components/image”
นำเข้า SEO จาก “../components/seo”

const IndexPage = ({ ข้อมูล }) => (
<เค้าโครง>
<SEO title=”หน้าแรก” />
<h1>บล็อก WordPress ของฉัน</h1>
<h4>โพสต์</h4>
<section className=”posts-container”>
{data.allWpPost.nodes.map((โพสต์) => (
<div className=”post-preview” key={post.slug}>
<ลิงก์ไปยัง={post.slug}>
{post.title}
</ลิงค์>
</div>
))}
</ส่วน>
</เลย์เอาต์>
)

ส่งออกดัชนีหน้าเริ่มต้น

ส่งออก const pageQuery = graphql`
แบบสอบถาม {
allWpPost (เรียงลำดับ: { ฟิลด์: [วันที่] }) {
โหนด {
ชื่อ
กระสุน
}
}
}
`

เซิร์ฟเวอร์การพัฒนาจะเริ่มต้นใหม่และแอปจะดึงข้อมูลสำหรับโพสต์บล็อกเดียวในปัจจุบันบนไซต์ WordPress (สวัสดีชาวโลก!)

< /p>

ตอนนี้ หากคุณลงชื่อเข้าใช้ไซต์ WordPress แก้ไขชื่อและเผยแพร่โพสต์ซ้ำ ชื่อเรื่องจะอัปเดตในไซต์ Gatsby ขออภัย ไม่มีหน้าจริงสำหรับบล็อกโพสต์ ดังนั้นการคลิกลิงก์จะนำไปสู่หน้า 404

3. สร้างหน้าโพสต์ในบล็อก

Gatsby สามารถสร้างหน้าเว็บได้หลายหน้าจากข้อมูลที่สืบค้น เสร็จสิ้นในไฟล์ gatsby-node.js

เปิดไฟล์ gatsby-node.js และเพิ่มโค้ด

const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = การกระทำ
  ส่งคืน graphql(`
    {
      allWpPost (เรียงลำดับ: { ฟิลด์: [วันที่] }) {
        โหนด {
            ชื่อ
            ข้อความที่ตัดตอนมา
            เนื้อหา
            กระสุน
        }
      }
    }
  `). จากนั้น (ผลลัพธ์ => {
    result.data.allWpPost.nodes.forEach ((โหนด) => {
      สร้างเพจ({
        เส้นทาง: node.slug,
        ส่วนประกอบ: path.resolve(`./src/templates/blog-post.js`),
        บริบท: {
          ทาก: node.slug,
        },
      })
    })
  })
}

โค้ดด้านบนใช้ฟังก์ชัน createPage ของ Gatsby ฟังก์ชันนี้ใช้วัตถุที่กำหนดค่าหน้าที่จะสร้าง พารามิเตอร์พาธคือพาธที่พบเพจ (เช่น /hello-world) พารามิเตอร์ส่วนประกอบนำพาธไปยังส่วนประกอบที่รับผิดชอบในการแสดงข้อมูล ส่วนประกอบนี้ยังไม่มีอยู่ วัตถุบริบทเป็นวิธีที่เราจะส่งตัวแปรไปยังองค์ประกอบเพื่อใช้ในแบบสอบถามหรือองค์ประกอบ

ณ จุดนี้ คุณอาจสงสัยว่าข้อความค้นหาเหล่านี้มาจากไหน เปิดเบราว์เซอร์เพื่อ http://localhost:8000/__graphql

นี่คือตัวสำรวจ GraphQL ที่ช่วยให้เราสร้างและทดสอบการสืบค้นจากสคีมาที่ปลั๊กอิน GraphQL ทำได้ การค้นหา. ป้อนข้อความค้นหาต่อไปนี้ลงในแผงตรงกลาง

query MyQuery {
  allWpPost (เรียงลำดับ: { ฟิลด์: [วันที่] }) {
    โหนด {
        ชื่อ
        ข้อความที่ตัดตอนมา
        เนื้อหา
        กระสุน
    }
  }
}

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

เราสามารถใช้ฟีเจอร์ Gatsby นี้เพื่อสร้างและทดสอบการสืบค้นที่เลือกเฉพาะข้อมูลที่เราต้องการ จาก WordPress GraphQL API ของเรา

ในการสร้างหน้าบล็อก เราจำเป็นต้องสร้างองค์ประกอบที่ src/templates/blog-post.js

เพิ่มโฟลเดอร์ เทมเพลต/ ใต้ไดเร็กทอรี src สร้างไฟล์ blog-post.js และเพิ่มโค้ด:

import React from "react"
นำเข้าเค้าโครงจาก "../components/layout"
นำเข้า { graphql } จาก "gatsby"

ส่งออกฟังก์ชันเริ่มต้น BlogPost ({ data }) {
  โพสต์ const = data.allWpPost.nodes[0]
  console.log (โพสต์)
  กลับ (
    <เค้าโครง>
      <div>
        <h1>{post.title}</h1>
        <div dangerlySetInnerHTML={{ __html: post.content }} />
      </div>
    </เลย์เอาต์>
  )
}
ส่งออกข้อความค้นหา const = graphql`
  แบบสอบถาม ($slug: สตริง!) {
    allWpPost (ตัวกรอง: { กระสุน: { เช่น: $slug } }) {
        โหนด {
          ชื่อ
          เนื้อหา
        }
    }
  }
`

รหัสนี้สร้างองค์ประกอบที่จะแสดงเนื้อหาโพสต์ ข้อความค้นหา GraphQL ใช้ตัวแปรบริบท slug ที่ส่งผ่านไปยังวัตถุบริบทใน gatsby-node.js จากนั้นเราจะสามารถสืบค้นข้อมูลของโพสต์บนบล็อกโดยอิงจากบล๊อก

รีสตาร์ทเซิร์ฟเวอร์การพัฒนาเพื่อสร้างหน้าโพสต์บล็อก

ตอนนี้ เมื่อคุณคลิกลิงก์ไปยัง บล็อกโพสต์ “สวัสดีชาวโลก!” คุณจะถูกนำไปที่บล็อกโพสต์

4. เพิ่มบล็อกโพสต์อื่น

ลงชื่อเข้าใช้ไซต์ WordPress ของคุณ (หากคุณยังไม่ได้ลงชื่อเข้าใช้) และคลิก โพสต์ ในการนำทางด้านข้าง จากนั้นคลิกปุ่ม เพิ่มใหม่

  • ตั้งชื่อโพสต์ว่า “ลองดูสิ!”
  • เพิ่มรูปภาพเด่น
  • เพิ่มข้อความที่ตัดตอนมา

เผยแพร่โพสต์

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

See also  วิธีหยุดสแปมแบบฟอร์มการติดต่อใน WordPress (คู่มือฉบับสมบูรณ์) - ตัวกรองสแปมแบบฟอร์มติดต่อ wordpress

ย้อนกลับไปใน src/templates/index.js เพิ่มข้อความที่ตัดตอนมาและรูปภาพเด่นลงในข้อความค้นหาที่ด้านล่างของหน้า

ส่งออก const pageQuery = graphql`
  แบบสอบถาม {
    allWpPost (เรียงลำดับ: { ฟิลด์: [วันที่] }) {
        โหนด {
            ชื่อ
            ข้อความที่ตัดตอนมา
            กระสุน
            ภาพที่โดดเด่น {
              โหนด {
                localFile {
                  childImageSharp {
                    ของเหลว {
                      src
                      อัตราส่วนภาพ
                      ฐาน64
                      ต้นฉบับImg
                      ชื่อเดิม
                      การนำเสนอความสูง
                      การนำเสนอความกว้าง
                      ขนาด
                      srcSet
                      srcSetWebp
                      srcWebp
                    }
                  }
                }
              }
            }
        }
    }
  }
`

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

....
    <เค้าโครง>
      <SEO title="หน้าแรก" />
      <h1>บล็อก WordPress ของฉัน</h1>
      <h4>โพสต์</h4>
      <section className="posts-container">
        {data.allWpPost.nodes.map((โพสต์) => (
          <div className="post-preview" key={post.slug}>
            <Image className="featured-image" ของเหลว={post.featuredImage.node.localFile.childImageSharp.fluid} /> // ใหม่
            <ลิงก์ไปยัง={post.slug}>
              {post.title}
            </ลิงค์>
            <div className='excerpt' friendshiplySetInnerHTML={{ __html: post.excerpt }} /> // ใหม่
          </div>
        ))}
      </ส่วน>
    </เลย์เอาต์>
....

สุดท้าย ที่ด้านบนสุดของไฟล์ ให้เปลี่ยนการนำเข้า Image จาก import Image from '../components/image' เพื่อ นำเข้ารูปภาพจาก 'gatsby-image'

โค้ดนี้แสดงรูปภาพเด่นและข้อความที่ตัดตอนมาสำหรับแต่ละโพสต์ อย่างไรก็ตาม มันต้องการ CSS บางส่วน

5. เพิ่มสไตล์

เปิด src/components/header.js และเปลี่ยนคุณสมบัติสไตล์พื้นหลัง <header> จาก  `rebeccapurple` เป็น `black`.

จากนั้น ในไฟล์ layout.css ให้เพิ่มโค้ดต่อไปนี้ที่ด้านล่าง แบบสอบถามสื่อ

.posts-container {
  จอแสดงผล: ดิ้น;
  justify-content: ช่องว่างรอบ ๆ;
}
.ข้อความที่ตัดตอนมา {
  ระยะขอบ: 0.5rem;
  ช่องว่างภายใน: 0.5rem;
}
.ภาพที่โดดเด่น {
  ความสูง: 200px;
  ระยะขอบล่าง: 1rem;
}
ร่างกาย {
  พื้นหลัง: #EEE;
}
ชั่วโมง1 {
  ตระกูลแบบอักษร: monospace;
}
ก {
  ช่องว่างภายใน: 0.2rem 0.5rem;
  เส้นขอบ: 2px สีดำทึบ;
  สีดำ;
  ตกแต่งข้อความ: ไม่มี;
  กล่องเงา: 0px 0px 11px -4px สีดำ;
  ระยะขอบ: 1rem;
}
.โพสต์ตัวอย่าง {
  กล่องเงา: 0 0 20px 10px #CCC;
  ระยะขอบ: 1rem;
  ช่องว่างภายใน: 1rem;
}

บันทึกไฟล์และรีเฟรชแอปหากจำเป็น แอปของคุณควรดูดีขึ้นเล็กน้อยแล้ว!

บทสรุป

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

สำหรับ CSS และลักษณะที่ปรากฏ มีงานอีกมากที่ต้องทำเพื่อจัดแนวธีม (และการแก้ไขเนื้อหา) ไปจนถึงสไตล์ชีทที่กำลังเล่นอยู่ในโปรเจ็กต์ Gatsby สิ่งนี้ต้องการความรู้ที่ดีขึ้นเกี่ยวกับ WordPress แต่อยู่นอกเหนือขอบเขตของบทความนี้ นอกจากนี้ ยังสามารถดึงพารามิเตอร์ข้อมูลจำนวนมากจากไซต์ WordPress ได้ และควรสำรวจตัวเลือกต่างๆ ใน ​​GraphiQL Explorer (http://localhost:__graphql)

GraphQL API สามารถ หากินเป็นมือใหม่ ฉันขอแนะนำแหล่งข้อมูลต่อไปนี้สำหรับการอ่านเพิ่มเติม:

ขอบคุณที่อ่าน!

5/5 – (1 โหวต)


ดูบทความเพิ่มเติมที่เกี่ยวข้องกับหัวข้อ ฝังองค์ประกอบปฏิกิริยาใน wordpress

วิธีการใส่ลิงค์แบบต่าง ๆ ใน wordpress

  • ผู้เขียน: bunkul
  • วันที่ส่ง: 2017-03-27
  • ความคิดเห็น: 4 ⭐ ( 1359 ความคิดเห็น )
  • ตรงกับผลการค้นหา: สอนวิธีการใส่ลิงค์ ข้อความ รูปภาพ ลิงค์ดาวน์โหลดเอกสาร PDF Word Excel ใน WordPress

    ==============================================================
    สนใจเรียนทำเว็บด้วย WordPress สอนตัวต่อตัว หรือกลุ่มเล็ก กลุ่มใหญ่ ติดต่อเราได้ที่
    Line ID : https://line.me/ti/p/%40WebWithWP
    Mobile : 094-345-8998
    website : https://www.webwithwp.com

ปลั๊กอิน 5 WordPress เพื่อใช้ GIFs ในบล็อกของคุณ

  • ผู้เขียน: th.blogpascher.com
  • ความคิดเห็น: 4 ⭐ ( 7159 ความคิดเห็น )
  • ตรงกับผลการค้นหา: นี่คือรายการปลั๊กอิน WordPress ที่ดีที่สุดสำหรับการใช้ GIF ในบล็อกของคุณ ทำให้เว็บไซต์ของคุณน่าสนใจยิ่งขึ้น!

ร่วมทำบุญบูชา ชุด”มรดกสมเด็จ”ช่วงชิงปรารถนาปทุมจักรเปิดโลก(แท่งผงสำเร็จจิต “โต”) พ่ออาจารย์พล

  • ผู้เขียน: palungjit.org
  • ความคิดเห็น: 5 ⭐ ( 5012 ความคิดเห็น )
  • ตรงกับผลการค้นหา: ร่วมทำบุญบูชา หยาดน้ำตาเทพสงครามพระมุรุกันไตรโลกาธิบดี (ชุดจ้าวแห่งสรรพสัตว์-หนึ่งจักรพรรดิ-สี่ราชัน)

    หยาดน้ำตาเทพสงคราม…

ธีม WordPress ปลั๊กอินและโฮสติ้งที่ดีที่สุด

  • ผู้เขียน: tabthemes.com
  • ความคิดเห็น: 5 ⭐ ( 8480 ความคิดเห็น )
  • ตรงกับผลการค้นหา: ข้อผิดพลาดในการอัปโหลดรูปภาพใน WordPress – ธีมและปลั๊กอินของ WordPress คำตอบสำหรับคำถามทั้งหมดที่คุณมีเมื่อสร้างเว็บไซต์บล็อกของคุณ

ดูบทความเพิ่มเติมในหมวดหมู่: เวิร์ดเพรสส์

By Admin