วิธีสร้างเทมเพลตการโพสต์การเปิดงานแบบไดนามิกด้วยตัวสร้างธีมของ Divi & ACF

เมื่อคุณใช้ Divi Theme Builder ร่วมกับเนื้อหาไดนามิก คุณจะพบว่าตัวเองแทนที่ปลั๊กอินด้วยเทมเพลตที่สร้างขึ้นเองอย่างรวดเร็ว ในบทช่วยสอนวันนี้ เราจะแสดงวิธีสร้างเทมเพลตโพสต์เปิดงานแบบไดนามิกอย่างสมบูรณ์โดยใช้ Divi Theme Builder และกลุ่มฟิลด์ ACF เทมเพลตโพสต์เปิดงานแบบไดนามิกนี้ปรับแต่งได้อย่างเต็มที่ และคุณจะสามารถดาวน์โหลดไฟล์ JSON ได้ฟรีเช่นกัน!

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลตประกาศรับสมัครงานฟรี

หากต้องการใช้เทมเพลตโพสต์เปิดงานฟรี ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

1. เพิ่มหมวดหมู่โพสต์

ไปที่โพสต์หมวดหมู่

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

เพิ่มหมวดหมู่ตำแหน่งงานที่เปิดรับ

เพิ่มหมวดหมู่หลักและหมวดหมู่แยกสำหรับแต่ละแผนก

• ตำแหน่งงานว่าง
  • การสื่อสาร
  • ออกแบบ
  • การพัฒนา
  • การตลาด
  • …

2. ติดตั้ง ACF & ตั้งค่าฟิลด์โปรเจ็กต์

ติดตั้งและเปิดใช้งาน ACF

ดำเนินการต่อโดยติดตั้งและเปิดใช้งานปลั๊กอิน Advanced Custom Fields ฟรี

ตั้งค่ากลุ่มฟิลด์

ตั้งค่ากลุ่มฟิลด์ใหม่โดยไปที่ WordPress Dashboard > Custom Fields > Add New

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

• Post Type เท่ากับ Post และ
• โพสต์หมวดหมู่เท่ากับการเปิดงาน

เพิ่มช่อง

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

• ความรับผิดชอบ
  • ป้ายกำกับ: ความรับผิดชอบ
  • ประเภทฟิลด์: Text Area
• ประสบการณ์ที่จำเป็น
  • ป้ายกำกับ: ประสบการณ์ที่จำเป็น
  • ประเภทฟิลด์: Wysiwyg Editor
• ทักษะที่จำเป็น
  • ป้ายกำกับ: ทักษะที่จำเป็น
  • ประเภทฟิลด์: Wysiwyg Editor
• คุณสมบัติโบนัส
  • ป้ายกำกับ: คุณสมบัติโบนัส
  • ประเภทฟิลด์: Wysiwyg Editor
• ที่ตั้ง
  • ป้ายกำกับ: Location
  • ประเภทฟิลด์: Text
• ประเภทงาน
  • Field Label: ประเภทงาน
  • ประเภทฟิลด์: ช่องทำเครื่องหมาย
  • ตัวเลือก: เต็มเวลา + นอกเวลา + ฟรีแลนซ์ (บรรทัดใหม่สำหรับแต่ละตัวเลือก)
• ใช้การเปลี่ยนเส้นทาง
  • ป้ายกำกับช่อง: ใช้การเปลี่ยนเส้นทาง
  • ประเภทฟิลด์: Url

3. เพิ่มโพสต์บล็อกใหม่

เพิ่มตำแหน่งงานว่าง คำอธิบายสั้น ๆ & หมวดหมู่

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

กรอกข้อมูลในฟิลด์ที่กำหนดเองทั้งหมด

ดำเนินการต่อโดยกรอกข้อมูลในฟิลด์ที่กำหนดเองทั้งหมด

4. สร้างเทมเพลตใหม่

ไปที่ตัวสร้างธีม Divi และเพิ่มเทมเพลตใหม่

เมื่อโพสต์บล็อกตัวอย่างของคุณพร้อมแล้ว ก็ถึงเวลาสร้างเทมเพลตตำแหน่งงานที่เปิดรับ! ในการทำเช่นนั้น ไปที่ Divi Theme Builder และคลิกที่ 'Add New Template'

ใช้ On

ใช้เทมเพลตบนโพสต์ในประเภทตำแหน่งงานว่าง

5. เริ่มสร้างตัวเทมเพลต

ตอนนี้ เริ่มสร้างการออกแบบโดยคลิกที่ 'เพิ่มเนื้อหาที่กำหนดเอง' และเลือก 'สร้างเนื้อหาแบบกำหนดเอง' การดำเนินการนี้จะนำคุณไปยังเครื่องมือแก้ไขเทมเพลต

ส่วนที่ 1

พื้นหลังไล่โทนสี

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

• สี 1: #ff6600
• สี 2: #fbff30
• ทิศทางการไล่ระดับสี: 126deg

ตัวแบ่งด้านล่าง

เพิ่มตัวแบ่งด้านล่างในส่วนถัดไป

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ความสูงของตัวแบ่ง: 8vw
• การจัดเรียงตัวแบ่ง: ใต้เนื้อหาส่วน

ระยะห่าง

และแถมแผ่นรองด้านล่างด้วย

• ช่องว่างภายในด้านล่าง: 400px

เพิ่มแถว #1

โครงสร้างคอลัมน์

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

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

เนื้อหาแบบไดนามิก

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! โมดูลแรกที่เราต้องการในคอลัมน์ 1 คือ Blurb Module เลือกตำแหน่งเนื้อหาแบบไดนามิกสำหรับกล่องชื่อและปล่อยให้กล่องเนื้อหาว่าง

• ชื่อเรื่อง: Location

เลือกไอคอน

ดำเนินการต่อโดยเลือกไอคอน

การตั้งค่าไอคอน

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าไอคอนดังนี้:

• สีไอคอน: #ffffff
• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 25px

การตั้งค่าข้อความชื่อเรื่อง

แก้ไขการตั้งค่าข้อความ H3 ด้วย

• ระดับหัวเรื่อง: H3
• แบบอักษรของชื่อเรื่อง: Lato
• สีข้อความของชื่อเรื่อง: #ffffff
• ขนาดข้อความชื่อเรื่อง: 1.4rem

แอนิเมชั่น

สุดท้าย ลบไอคอนแอนิเมชั่นในการตั้งค่าแอนิเมชั่น

• แอนิเมชั่นรูปภาพ/ไอคอน: ไม่มีแอนิเมชั่น

โคลนโมดูล Blurb & วางซ้ำในคอลัมน์ 2

เมื่อคุณสร้าง Blurb Module ในคอลัมน์ 1 เสร็จแล้ว คุณสามารถโคลนได้เพียงครั้งเดียวแล้ววางสำเนาไว้ในคอลัมน์ที่สอง

เปลี่ยนเนื้อหาไดนามิกและไอคอน

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนชื่อเนื้อหาแบบไดนามิกพร้อมกับไอคอน

• ชื่อเรื่อง : ประเภทงาน

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 3

เพิ่มสำเนา

ในคอลัมน์สุดท้าย เพิ่มโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

ไดนามิกลิงค์

เลือกลิงก์ใช้ลิงก์เปลี่ยนเส้นทางแบบไดนามิกถัดไป

• URL ลิงก์ของปุ่ม: ใช้การเปลี่ยนเส้นทาง
• เป้าหมายลิงก์ของปุ่ม: ในแท็บใหม่

การจัดตำแหน่ง

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการจัดตำแหน่งตามขนาดหน้าจอต่างๆ

• การจัดตำแหน่งปุ่ม: ขวา (เดสก์ท็อป), ซ้าย (แท็บเล็ตและโทรศัพท์)

การตั้งค่าปุ่ม

สไตล์ปุ่มเช่นกัน

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1rem
• สีข้อความของปุ่ม: #ff6600
• สีพื้นหลังของปุ่ม: #ffffff
• ความกว้างของขอบปุ่ม: 0px

• รัศมีเส้นขอบของปุ่ม: 100px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 15px
• ช่องว่างภายใน: 15px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

เพิ่มแถว #2

โครงสร้างคอลัมน์

ต่อแถวหน้า! เลือกโครงสร้างคอลัมน์ต่อไปนี้:

เพิ่มโมดูลข้อความลงในคอลัมน์

เนื้อหาแบบไดนามิก

เพิ่มโมดูลข้อความใหม่ในคอลัมน์และเลือกเนื้อหาแบบไดนามิกของชื่อโพสต์

• เนื้อหาแบบไดนามิก: ชื่อโพสต์/ที่เก็บถาวร

• ก่อน: <H1>
• หลัง: </H1>

การตั้งค่าข้อความ H1

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความ H1 ตามนั้น:

• แบบอักษรของหัวเรื่อง: มอนต์เซอร์รัต
• น้ำหนักตัวอักษรของหัวเรื่อง: หนัก
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความของหัวเรื่อง: 8rem (เดสก์ท็อป), 4rem (แท็บเล็ต), 2.5rem (โทรศัพท์)

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

โมดูลต่อไปที่เราต้องการคือโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

• แสดงตัวแบ่ง: ใช่

เส้น

เปลี่ยนสีเส้นของโมดูลถัดไป

• สีเส้น: #ffffff

ขนาด

แก้ไขการตั้งค่าการปรับขนาดด้วย

• น้ำหนักตัวแบ่ง: 8px
• ความกว้าง: 30%
• การจัดตำแหน่งโมดูล: ซ้าย

เพิ่มส่วน #2

ระยะห่าง

ไปยังส่วนถัดไป! ลบช่องว่างด้านบนเริ่มต้นทั้งหมด

• ช่องว่างภายในด้านบน: 0px

เพิ่มแถว #1

โครงสร้างคอลัมน์

เพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ระยะห่าง

เปิดการตั้งค่าแถวและลบช่องว่างด้านบนเริ่มต้น

• ช่องว่างภายในด้านบน: 0px

เพิ่มโมดูลเนื้อหาโพสต์ลงในคอลัมน์

สีพื้นหลัง

เพิ่มโมดูลเนื้อหาโพสต์ในแถวและเปลี่ยนสีพื้นหลังเป็นสีขาว

• สีพื้นหลัง: #ffffff

การตั้งค่าข้อความ

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความดังนี้:

• แบบอักษรของข้อความ: Raleway
• ขนาดตัวอักษร: 1.1rem
• ความสูงของบรรทัดข้อความ: 2.1em

ระยะห่าง

ลองใช้ค่าการเว้นวรรคในขนาดหน้าจอต่างๆ กันต่อไป

• ขอบบน: -300px
• ช่องว่างภายในด้านบน: 100px (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านล่าง: 100px (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านซ้าย: 100px (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านขวา: 100px (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)

ชายแดน

เพิ่มรัศมีเส้นขอบด้วย

• ทุกมุม: 20px

กล่องเงา

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

• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0.09)

เพิ่มแถว #2

โครงสร้างคอลัมน์

เพิ่มแถวอื่นโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

เพิ่มโมดูลข้อความ #1 ให้กับคอลัมน์

เพิ่มเนื้อหา H2

เพิ่มโมดูลข้อความลงในคอลัมน์ของแถวที่มีเนื้อหา H2

การตั้งค่าข้อความ H2

เปลี่ยนการตั้งค่าข้อความ H2 ของโมดูลดังนี้:

• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• หัวข้อ 2 น้ำหนักแบบอักษร: หนัก
• หัวเรื่อง 2 สีข้อความ: #ffa500
• หัวเรื่อง 2 ขนาดข้อความ: 1.5rem

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

โมดูลต่อไปที่เราต้องการคือโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานโมดูล 'แสดงตัวแบ่ง'

• แสดงตัวแบ่ง: ใช่

เส้น

เปลี่ยนสีเส้นของโมดูลถัดไป

• สีเส้น: #ffa500

ขนาด

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

• น้ำหนักตัวแบ่ง: 6px
• ความกว้างสูงสุด: 80px

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์

เนื้อหาแบบไดนามิก

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

• เนื้อหาแบบไดนามิก: ประสบการณ์ที่จำเป็น

ตรวจสอบให้แน่ใจว่าคุณเปิดใช้งาน HTML ดิบ

• เปิดใช้งาน Raw HTML: ใช่

การตั้งค่าข้อความ

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

• แบบอักษรของข้อความ: Raleway
• ขนาดตัวอักษร: 1.1rem

การตั้งค่าข้อความรายการที่ไม่เรียงลำดับ

แก้ไขความสูงของบรรทัดรายการที่ไม่เรียงลำดับด้วย

• ความสูงของบรรทัดรายการที่ไม่เรียงลำดับ: 2.3em

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 50px
• ช่องว่างภายในด้านล่าง: 50px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

ชายแดน

เพิ่มรัศมีเส้นขอบด้วย

• ทุกมุม: 20px

กล่องเงา

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

• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0.09)

เพิ่มแถว #3

โครงสร้างคอลัมน์

ต่อแถวสุดท้าย! ใช้โครงสร้างคอลัมน์ต่อไปนี้:

โมดูลโคลนในคอลัมน์ 2 สองครั้ง & วางซ้ำในคอลัมน์ 1 และ 2 ของแถวใหม่

ลอกแบบโมดูลที่คุณได้เพิ่มไปยังแถวก่อนหน้าสองครั้ง และวางที่ซ้ำกันในแถวใหม่

เปลี่ยนโมดูลข้อความ #1 Copy

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนสำเนา H2 ของโมดูลข้อความที่ซ้ำกันแต่ละโมดูล

เปลี่ยนโมดูลข้อความ #2 เนื้อหาแบบไดนามิก

พร้อมกับเนื้อหาแบบไดนามิก

• เนื้อหาแบบไดนามิก: ทักษะที่จำเป็น

• เนื้อหาแบบไดนามิก: คุณสมบัติโบนัส

อีกครั้ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งาน HTML ดิบสำหรับโมดูลข้อความทั้งสองที่มีเนื้อหาแบบไดนามิก

• เปิดใช้งาน HTML ดิบ: ใช่

6. บันทึกการเปลี่ยนแปลงตัวสร้างธีมและดูผลลัพธ์

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

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ความคิดสุดท้าย

ในโพสต์นี้ เราได้แสดงวิธีสร้างเทมเพลตตำแหน่งงานเปิดแบบไดนามิกและปรับแต่งได้อย่างเต็มที่โดยใช้ Divi Theme Builder และปลั๊กอิน ACF เราใช้เฉพาะเนื้อหาแบบไดนามิกในเทมเพลตโพสต์ของเรา ซึ่งทำให้การเพิ่มตำแหน่งงานที่เปิดรับในอนาคตในเว็บไซต์ของคุณเป็นเรื่องง่าย คุณสามารถดาวน์โหลดไฟล์ JSON ได้ฟรีเช่นกัน! หากคุณมีคำถามใด ๆ โปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง

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