Skip Navigation

Home » โครงการที่เกี่ยวข้อง » WPML GraphQL – เพิ่มฟังก์ชันการทำงานหลายภาษาให้กับ WPGraphQL Schema

WPML GraphQL – เพิ่มฟังก์ชันการทำงานหลายภาษาให้กับ WPGraphQL Schema

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

ฟีเจอร์หลัก

ขยาย WPGraphQL ด้วยฟิลด์เพิ่มเติม ( ภาษา รหัสภาษา การแปล ) เพื่อดึงข้อมูลเฉพาะจากปลั๊กอิน WPML

กรองเนื้อหาภายในสคีมา Gatsby GraphQL

กรองโพสต์ อนุกรมวิธาน และความคิดเห็นตามภาษา

ดึงข้อมูลภาษาสําหรับอ็อบเจ็กต์และโหนด

สืบค้นข้อมูลตามภาษาที่ติดตั้งทั้งหมดหรือภาษาเฉพาะ

ทำงานร่วมกับ ACF, ACFML และ WPGraphQL สำหรับฟิลด์แบบกำหนดเองขั้นสูง

ในหน้าเพจนี้:

ปลั๊กอินและการตั้งค่าที่จําเป็น

ในการเริ่มต้น ให้ติดตั้งและเปิดใช้งานปลั๊กอินต่อไปนี้:

  • ปลั๊กอินหลัก WPML และโปรแกรมเสริม การแปลสตริง
  • ปลั๊กอิน WPGraphQL
  • ปลั๊กอิน WPML GraphQL

หากคุณใช้งานไซต์ด้วย ACF หรือ ACF Pro และต้องการแสดงฟิลด์หลายภาษาจากปลั๊กอิน ACF ไปยังสคีมา WPGraphQL ให้ติดตั้งและเปิดใช้งาน:

สำรวจ WPML GraphQL Schema

WPML GraphQL ทำงานร่วมกับ WPGraphQL และเพิ่มฟิลด์และตัวกรองใหม่ให้กับสคีมา WPGraphQL

เมื่อคุณติดตั้งปลั๊กอินแล้ว คุณสามารถไปที่ GraphQL → GraphQL IDE และใช้ Query Composer เพื่อสืบค้นและกรองเนื้อหาในภาษาต่างๆ ได้อย่างง่ายดาย ซึ่งรวมถึง:

  • การรับข้อมูลเกี่ยวกับภาษาของวัตถุที่สอบถาม
  • การรับคําแปลสําหรับออบเจ็กต์ เช่น ประเภทโพสต์ อนุกรมวิธาน และความคิดเห็น
  • การกรองวัตถุที่สอบถามตามภาษา

ตามตัวอย่าง รูปภาพด้านล่างแสดงวิธีที่คุณสามารถดึงรายการโพสต์ทั้งหมดบนไซต์ WordPress รวมถึงรหัสภาษา กระสุน และ URI รวมถึงข้อมูลที่คล้ายกันสำหรับการแปลของแต่ละโพสต์

การใช้เขตข้อมูลภาษาในตัวเขียนคิวรีเพื่อดึงข้อมูลโพสต์ในทุกภาษา

เพื่อสาธิตวิธีการทำงานของ WPML GraphQL เราได้ตั้งค่าไซต์โดยตั้งค่าภาษาอังกฤษเป็นภาษาเริ่มต้น และภาษาสเปนและอิตาลีเป็นภาษารอง ตลอดหน้าเอกสารนี้เราใช้ไซต์ทดสอบนี้เพื่อสืบค้นโพสต์และการแปลโพสต์ที่WPML

การสืบค้นภาษาและข้อมูลการแปล

WPML GraphQL ช่วยให้คุณสามารถรวม ฟิลด์ ภาษา และ การแปล ในการสืบค้นของคุณ นี้ ช่วยให้คุณสามารถทำงานกับโหนดและองค์ประกอบใน GraphQL เพื่อดึงข้อมูลเฉพาะภาษาและการแปลที่เกี่ยวข้อง

  • คุณสามารถเพิ่มเขตข้อมูล ภาษา ลงในคิวรีเพื่อระบุภาษาของประเภทโพสต์ อนุกรมวิธาน และข้อคิดเห็นได้ แบบสอบถามนี้ให้ข้อมูลภาษาที่กว้างขวาง เช่น:
    • รหัสภาษา
    • URL ธงชาติ
    • ชื่อพื้นเมืองของภาษา
    • ชื่อที่แปลแล้วของภาษา
    • URL หน้าแรก
  • คุณสามารถใช้ฟิลด์ languageCode เพื่อรวบรวมรหัสภาษาสําหรับโพสต์ คําศัพท์ทางอนุกรมวิธาน และความคิดเห็น โดยไม่ต้องขอรายละเอียดเฉพาะภาษาอื่นๆ
  • คุณสามารถใช้ฟิลด์ การแปล เพื่อดึงคําแปลของประเภทโพสต์และคําศัพท์ทางอนุกรมวิธาน

คุณสามารถดูตัวอย่างของคิวรีสําหรับโพสต์ที่มีช่องเหล่านี้ได้ที่ด้านล่าง

WPML GraphQL query for posts using the language and translations fields 
query Posts{
  posts(where: {language: "en"}) {
    nodes {
      slug
      uri
      language {
        code
      }
      translations {
        slug
        uri
        language {
          code
        }
      }
    }
  }
}

การเรียกใช้แบบสอบถามนี้จะส่งกลับภาษาและข้อมูลการแปลสําหรับแต่ละทรัพยากร

WPML GraphQL outcome of the query for posts using the language and translations fields 
{
  "data": {
    "posts": {
      "nodes": [
        {
          "slug": "bye-world",
          "uri": "/bye-world/",
          "language": {
            "code": "en"
          },
          "translations": [
            {
              "slug": "adios-mundo",
              "uri": "/es/adios-mundo/",
              "language": {
                "code": "es"
              }
            },
            {
              "slug": "addio-mondo",
              "uri": "/it/addio-mondo/",
              "language": {
                "code": "it"
              }
            }
          ]
        },
        {
          "slug": "hello-world",
          "uri": "/hello-world/",
          "language": {
            "code": "en"
          },
          "translations": [
            {
              "slug": "hola-mundo",
              "uri": "/es/hola-mundo/",
              "language": {
                "code": "es"
              }
            },
            {
              "slug": "ciao-mondo",
              "uri": "/it/ciao-mondo/",
              "language": {
                "code": "it"
              }
            }
          ]
        }
      ]
    }
  }
}

การกรองภาษา

ปลั๊กอิน WPML GraphQL มาพร้อมกับตัวกรอง ภาษา ซึ่งช่วยให้คุณปรับแต่งข้อความค้นหาของคุณเพื่อรับข้อมูลภาษาที่คุณสนใจ

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

นี่คือตัวอย่างคําค้นหาที่กรองโพสต์ตามภาษาสเปนภาษารองของเรา:

WPML GraphQL query using the language filter 
query PostsES{
  posts(where: {language: "es"}) {
    nodes {
      slug
      uri
    }
  }
}

อย่างที่คุณเห็นแบบสอบถามนี้ดึงโพสต์ทั้งหมดเป็นภาษาสเปน

WPML GraphQL outcome of the query using the language filter 
{
  "data": {
    "posts": {
      "nodes": [
        {
          "slug": "adois-mundo",
          "uri": "/es/adios-mundo/"
        },
        {
          "slug": "hola-mundo",
          "uri": "/es/hola-mundo/"
        }
      ]
    }
  }
}

การสืบค้นข้อมูลจากภาษาที่ติดตั้ง

WPML GraphQL กำหนดการสืบค้นสองรายการซึ่งช่วยให้คุณสามารถสืบค้นข้อมูลจากภาษาที่ติดตั้งบนเว็บไซต์ของคุณ:

  • แบบสอบถามภาษาเพื่อรับภาษาที่ลงทะเบียนทั้งหมดพร้อมกับข้อมูลที่เกี่ยวข้องสําหรับแต่ละภาษา
  • คิวรี defaultLanguage เพื่อให้ชุดภาษาเป็นภาษาเริ่มต้น พร้อมกับข้อมูลที่เกี่ยวข้อง

สิ่งนี้อาจมีประโยชน์หากคุณต้องการสร้างตัวสลับภาษา

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

WPML GraphQL query to get all registered languages 
query Languages {
  languages {
    code
    country_flag_url
    default_locale
    native_name
    translated_name
    url
  }
}

แบบสอบถามข้างต้นให้ผลลัพธ์ต่อไปนี้:

WPML GraphQL outcome of the query to get all registered languages 
{
  "data": {
    "languages": [
      {
        "code": "en",
        "country_flag_url": "http://site.com/wp-content/plugins/sitepress-multilingual-cms-release/res/flags/en.svg",
        "default_locale": "en_US",
        "native_name": "English",
        "translated_name": "English",
        "url": "http://site.com"
      },
      {
        "code": "es",
        "country_flag_url": "http://site.com/wp-content/plugins/sitepress-multilingual-cms-release/res/flags/es.svg",
        "default_locale": "es_ES",
        "native_name": "Español",
        "translated_name": "Spanish",
        "url": "http://site.com/es/"
      },
      {
        "code": "it",
        "country_flag_url": "http://site.com/wp-content/plugins/sitepress-multilingual-cms-release/res/flags/it.svg",
        "default_locale": "it_IT",
        "native_name": "Italiano",
        "translated_name": "Italian",
        "url": "http://site.com/it/"
      }
    ]
  }
}

ใช้ WPML GraphQL กับ Gatsby และ ACF

เฟรมเวิร์ก Gatsby ช่วยให้คุณสามารถรวบรวมข้อมูลจากแหล่งแบ็กเอนด์ต่างๆรวมถึงไซต์ WordPress

หากไซต์ WordPress ของคุณใช้ WP GraphQL คุณสามารถให้บริการข้อมูลไปยังไซต์ Gatsby ได้ เมื่อติดตั้ง WPML GraphQL คุณสามารถให้บริการข้อมูลในภาษาต่างๆ และแม้แต่รับข้อมูลภาษาได้

เพื่อให้มีฟังก์ชันการทำงานเพิ่มเติม WP GraphQL จึงมีโปรแกรมเสริมสำหรับฟิลด์กำหนดเองขั้นสูง (ACF) เมื่อใช้ส่วนเสริมนี้ร่วมกับปลั๊กอิน ACF Multilingual จาก WPML คุณสามารถให้บริการทั้งข้อมูลหลักและข้อมูลฟิลด์ที่กำหนดเองตามข้อกำหนดภาษาเฉพาะได้

ลองพิจารณาสถานการณ์ตัวอย่าง: คุณมีการติดตั้ง Gatsby ด้วยแพ็คเกจเสริม gatsby-source-graphql ซึ่งดึงข้อมูลจากแบ็กเอนด์ WordPress ในแบ็กเอนด์ WordPress นี้:

  1. คุณได้ติดตั้ง WPML ด้วยชุดภาษาสเปนเป็นภาษารอง
  2. คุณได้ติดตั้ง ACF และเพิ่มกลุ่มฟิลด์ (slug postfields ) ที่มีฟิลด์ข้อความ (slug subtitle ) สำหรับการโพสต์
  3. คุณได้เติมข้อมูลบางส่วนแล้ว

ด้วยแบบสอบถาม GraphQL อย่างง่าย คุณสามารถรวบรวมข้อมูลนี้ได้

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

WPML GraphQL example query for language-specific information and ACF field data 
export const doQuery = graphql`
  {
    wordpress {
      posts(where: {language: "en"}) {
        nodes {
          title
          language {
            code
          }
          postfields{
            subtitle
          }
          translations {
            title
            language {
              code
            }
            postfields{
              subtitle
            }
          }
        }
      }
    }
  }
`;

Known Issues

WPML ทำงานได้ดีกับปลั๊กอินนี้ แต่บางครั้งอาจมีปัญหาเล็กน้อยที่เรากำลังแก้ไข นี่เป็นสิ่งที่คาดหวังได้เนื่องจากทั้งสองปลั๊กอินมีการอัปเดตอย่างบ่อยครั้ง

ปัญหาที่ยังไม่ได้รับการแก้ไข:

คุณยังสามารถค้นหาปัญหาที่ทราบอยู่ทั้งหมด รวมถึงปัญหาที่ได้รับการแก้ไขแล้วสำหรับปลั๊กอินนี้

การขอรับการสนับสนุน

หากคุณต้องการความช่วยเหลือในการใช้ WPML GraphQL กับ WPGraphQL โปรดไปที่ ฟอรัมสนับสนุน ของเรา

โครงการที่เกี่ยวข้อง