การทำให้บล็อก Gutenberg แบบกำหนดเองสามารถแปลได้

เรียนรู้วิธีระบุว่าบล็อก Gutenberg ที่กำหนดเองซึ่งคุณพัฒนาขึ้นนั้นควรแปลได้ คุณสามารถทำได้โดยการกำหนดค่าไฟล์ wpml-config.xml ด้วยความช่วยเหลือของปลั๊กอินทดสอบ Multilingual Tools

คู่มือนี้มีไว้สำหรับนักพัฒนาที่สร้างบล็อกที่กำหนดเองสำหรับ Gutenberg หากคุณไม่ใช่ผู้พัฒนาปลั๊กอิน โปรดดูวิธีแปลเนื้อหาที่สร้างด้วยตัวแก้ไข Gutenberg

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

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

ปลั๊กอิน WPML ตัวหลัก
WPML การแปลสตริง
Multilingual Tools

ไม่ควรใช้ปลั๊กอิน Multilingual Tools บนเว็บไซต์ที่ใช้งานจริง ใช้สำหรับการทดสอบเท่านั้น

การสร้างและทดสอบโค้ด XML เพื่อลงทะเบียนบล็อก Gutenberg สำหรับการแปล

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

เลื่อนลงไปที่ส่วน WPML: Gutenberg Blocks และคัดลอกโค้ด XML ที่สร้างขึ้น

คัดลอกโค้ด XML ที่สร้างไว้ล่วงหน้าเพื่อตรวจสอบ

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

2. ไปที่ WPML → การตั้งค่า และวาง XML ที่สร้างขึ้นภายใต้แท็บ การกำหนดค่า XML ที่กำหนดเอง

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

บันทึก เมื่อคุณพร้อม

3. กลับไปที่หน้าเว็บที่คุณเผยแพร่และทำการอัปเดตเล็กน้อย เช่น การแก้ไขข้อความของปุ่มหรือส่วนหัว

คลิกไอคอน บวก ภายใต้ส่วน ภาษา เพื่อเปิด ตัวแก้ไขการแปลขั้นสูง ฟิลด์จากบล็อก Gutenberg จะปรากฏในตัวแก้ไขและพร้อมสำหรับการแปล

ตรวจสอบบล็อก Gutenberg ที่สามารถแปลได้ในตัวแก้ไขการแปลขั้นสูงของ WPML

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

ตัวอย่างของการลงทะเบียนบล็อก Gutenberg ให้สามารถแปลได้

การแปลรูปภาพ

สมมติว่าคุณมีรูปภาพที่แสดงโดยใช้โค้ดต่อไปนี้:

ตัวอย่างของรูปภาพที่ต้องได้รับการแปล

<!-- wp:image {"id":3} -->
<figure class="wp-block-image"><img src="http://example.com/wp-content/uploads/2018/07/figure-2.png" alt="Image alt text" class="wp-image-3"/><figcaption>Image Caption</figcaption></figure>
<!-- /wp:image -->

คุณต้องการแปลค่าแอตทริบิวต์ figcaption และ alt ของรูปภาพนี้

เพื่อให้บรรลุสิ่งนี้ คุณต้องแทรกโค้ดต่อไปนี้ลงใน wpml-config.xml:

ตัวอย่างการตั้งค่าสำหรับการแปลบล็อก Gutenberg

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="core/image" translate="1">
        <xpath>//figure/figcaption</xpath>
        <xpath>//figure/img/@alt</xpath>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

โปรดทราบว่า type คือ core/image และไม่ใช่ wp:image เนื่องจากนี่คือค่าที่ API ของบล็อกส่งคืนมา

การแปลลิงก์

คุณสามารถระบุได้ว่าฟิลด์ใดของบล็อก Gutenberg ที่เป็นลิงก์ จากนั้น WPML จะแทนที่ลิงก์ใด ๆ ด้วยคำแปลหากมี

การแปลลิงก์ในบล็อก Gutenberg

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="core/some-block" translate="1">
        <xpath type="link">//a/@href</xpath>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

การแปลแอตทริบิวต์ของบล็อก

นี่คือตัวอย่างหนึ่งของรูปแบบสำหรับการกำหนดบล็อกตัวแก้ไข:

รูปแบบสำหรับการกำหนดบล็อกตัวแก้ไข

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin/my-block" translate="1">
        <xpath label="My Block">//p</xpath>
        <key name="title" />
        <key name="foo">
            <key name="bar1" />
            <key name="bar2" />
        </key>
        <key name="/^[^_]\S+$/" search-method="regex" />
        <key name="something" search-method="wildcards" />
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

คุณสามารถใช้อีลิเมนต์ key ได้ในลักษณะเดียวกับที่ใช้ในการกำหนดค่าข้อความผู้ดูแลระบบ / wp_options ซึ่งหมายความว่าคุณสามารถมีอีลิเมนต์ key อยู่ภายในอีลิเมนต์ key หลักได้เช่นกัน

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

ตัวอย่างป้ายกำกับสำรอง

<wpml-config>
    <gutenberg-blocks>
        <gutenberg-block type="my-plugin/mybutton" translate="1" label="My fallback block label">
            <xpath>//span</xpath>
            <xpath>//a@href</xpath>
        </gutenberg-block>
    </gutenberg-blocks>
</wpml-config>

แอตทริบิวต์ search-method สามารถมีค่าใดค่าหนึ่งจากสองค่านี้:

wildcards (ค่าเริ่มต้น)
regex

คุณสามารถใช้ wildcards ได้ในลักษณะเดียวกับข้อความผู้ดูแลระบบ ซึ่งหมายความว่าสามารถใช้เครื่องหมายดอกจัน (*) ในแอตทริบิวต์ name ได้ นี่คือตัวอย่างของบล็อกหนึ่ง:

ตัวอย่างของบล็อก

<!-- wp:my-plugin/my-block
    {
        "myp": {
            "mypTitle":"The title",
            "mypContent":"The Content",
            "_mypSystem:"Meta attribute to not translate"
        }
    }
/-->

คุณสามารถตั้งค่าการกำหนดบล็อกโดยใช้ wildcard:

การกำหนดบล็อกโดยใช้ wildcard

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin/my-block" translate="1">
      <key name="myp">
          <key name="myp*" />
      </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

สิ่งนี้จะช่วยให้คุณสามารถแปล "The title" และ "The content" ได้ เนื่องจากเป็นเพียงแอตทริบิวต์เดียวที่เริ่มต้นด้วย myp

regex ช่วยให้คุณมี regular expression ในแอตทริบิวต์ name ได้ ซึ่งจะมีประโยชน์อย่างยิ่งสำหรับการกำหนดค่าที่ซับซ้อน นี่คือตัวอย่างของบล็อกหนึ่ง:

การกำหนดค่าที่ซับซ้อน – ตัวอย่าง

<!-- wp:my-plugin/my-block
    {
        "data": {
            "title":"The title",
            "_title":"e980759463943209f6f1ae09a239e353",
            "content":"The Content",
            "_content":"1502a7b825dfe7b789c63830609f1701"
        }
    }
/-->

คุณสามารถตั้งค่าการกำหนดบล็อกด้วย regular expression:

การกำหนดบล็อกด้วย regular expression

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin/my-block" translate="1">
        <key name="data">
            <key name="/^[^_]\S+$/" search-method="regex" />
        </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

สิ่งนี้จะช่วยให้คุณสามารถแปล "The title" และ "The content" ได้ เนื่องจากเป็นเพียงแอตทริบิวต์เดียวที่ไม่ได้เริ่มต้นด้วยขีดล่าง (_)

ปลั๊กอินบล็อกบางตัวจะบันทึกข้อมูลในสตริง JSON ที่เข้ารหัส URL ภายในแอตทริบิวต์ของบล็อก แอตทริบิวต์ encoding ช่วยให้คุณสามารถถอดรหัสสตริงและลงทะเบียนคีย์ย่อยสำหรับการแปลได้

ตัวอย่างเช่น ปลั๊กอิน LazyBlocks จะจัดเก็บเนื้อหาฟิลด์แบบทำซ้ำในสตริง JSON ที่เข้ารหัส:

ตัวอย่างของบล็อก LazyBlocks ที่มีสตริง JSON ที่เข้ารหัส URL

<!-- wp:lazyblock/testwpml {"name":"%5B%7B%22firstname%22:%22Shekhare%22,%22lastname%22:%22Bhandari%22%7D,%7B%22firstname%22:%22Compatibility%22,%22lastname%22:%22Escalation%22%7D%5D","blockId":"Z169b0O","blockUniqueClass":"lazyblock-testwpml-Z169b0O"} /-->

คุณสามารถลงทะเบียนคีย์ย่อย firstname และ lastname โดยใช้การกำหนดค่า XML ต่อไปนี้:

ตัวอย่างการลงทะเบียนสตริง JSON ที่เข้ารหัส URL ภายในแอตทริบิวต์ของบล็อก

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="lazyblock/team" translate="1">
      <key name="name" encoding="json">
        <key name="*">
          <key name="firstname" />
          <key name="lastname" />
        </key>
      </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

การแปลลิงก์แอตทริบิวต์ของบล็อก

หากต้องการให้ WPML แปล URL โดยอัตโนมัติ คุณสามารถประกาศแอตทริบิวต์ของบล็อก Gutenberg ให้เป็นลิงก์ได้

นี่คือตัวอย่างของบล็อก Gutenberg ที่กำหนดเองพร้อมลิงก์ที่คลิกได้:

<!-- wp:foo/link {"label":"Click here!","url":"https://example.com/some-page/"} /-->

หากต้องการทำให้แอตทริบิวต์ label และ url สามารถแปลได้ ให้เพิ่มโค้ดต่อไปนี้ลงในไฟล์ wpml-config.xml ของคุณ:

<gutenberg-block type="foo/link" translate="1">
	<key name="label" />
	<key name="url" type="link" />
</gutenberg-block>

ในการกำหนดค่านี้ การระบุ type="link" สำหรับแอตทริบิวต์ url จะช่วยให้ WPML แปล URL ได้โดยอัตโนมัติ

เนมสเปซของบล็อก

คุณสามารถมีการกำหนดค่าส่วนกลางสำหรับเนมสเปซของบล็อกได้

ชื่อบล็อกไม่จำเป็นต้องเป็นส่วนหนึ่งของการกำหนดอีกต่อไป

หากการกำหนดค่าบล็อกเหมือนกันสำหรับทุกบล็อกในเนมสเปซ คุณสามารถเขียนได้ดังนี้:

บล็อกในเนมสเปซ

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin" translate="1">
        <key name="data">
            <key name="/^[^_]\S+$/" search-method="regex" />
        </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

การแปลง ID ในบล็อกโดยอัตโนมัติ

การแปลง ID มีความอเนกประสงค์และพยายามปรับให้เข้ากับรูปแบบของ ID ที่เป็นไปได้ส่วนใหญ่ (ID เดี่ยว, รายการของ ID, อาร์เรย์แบบอนุกรม, อาร์เรย์ที่เข้ารหัส JSON)

พิจารณาบล็อกต่อไปนี้:

การแปลง ID ในบล็อกโดยอัตโนมัติ – ตัวอย่างบล็อก

<!-- wp:foo/form {"ids":[27,28]} -->
<div class="wp-block-foo-form-wrap">
  <form class="foo-form" action="" method="post">
    <input type="hidden" name="foo_form_post_ids" value="27,28" />
    <input type="submit" />
  </form>
</div>
<!-- /wp:foo/form -->

คุณสามารถประกาศให้ ID แอตทริบิวต์ของบล็อกและค่าแอตทริบิวต์แท็ก HTML foo_form_post_ids เป็น ID ของโพสต์ได้ดังด้านล่างนี้:

ID แอตทริบิวต์ของบล็อกและค่าแอตทริบิวต์แท็ก HTML

<gutenberg-block type="foo/form" translate="0">
  <key name="ids">
      <key name="*" type="post-ids" sub-type="post" />
  </key>
  <xpath type="post-ids" sub-type="post">//*[@name="foo_form_post_ids"]/@value</xpath>
</gutenberg-block>

บล็อกจะถูกแปลงโดยมีลำดับความสำคัญสูงสุดบนฟิลเตอร์ render_block_data ดังด้านล่างนี้:

บล็อกที่ถูกแปลงโดยฟิลเตอร์ render_block_data

<!-- wp:foo/form {"ids":[42,43]} -->
<div class="wp-block-foo-form-wrap">
    <form class="foo-form" action="" method="post">
        <input type="hidden" name="foo_form_post_ids" value="42,43" />
        <input type="submit" />
    </form>
</div>
<!-- /wp:foo/form -→

คุณสามารถใช้แอตทริบิวต์การกำหนดค่าต่อไปนี้:

type – สามารถเป็น post-ids หรือ taxonomy-ids ได้
sub-type (ไม่บังคับ): สามารถเป็นเอนทิตีเฉพาะของ type ได้หากทราบอยู่แล้ว ตัวอย่างเช่น product สำหรับประเภทโพสต์แบบกำหนดเอง Product หากไม่ได้กำหนดไว้ ระบบจะคาดเดาเอนทิตีเฉพาะนั้น

แหล่งข้อมูลเพิ่มเติม

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับไฟล์ wpml-config.xml โปรดไปที่คู่มือไฟล์การกำหนดค่าภาษา

สำหรับการปรับแต่งอีลิเมนต์อื่น ๆ โดยใช้ไฟล์ wpml-config.xml โปรดไปที่คู่มือเพิ่มเติมของเรา: