วิธีเพิ่มเทมเพลตและการออกแบบที่กำหนดเองในรูปแบบโพสต์บล็อกของ Divi (ตอนที่ 1 จาก 3)

ยินดีต้อนรับสู่วันที่ 1 จาก 3 ในซีรีส์ของเราเกี่ยวกับวิธีเพิ่มสไตล์ที่กำหนดเองลงในรูปแบบโพสต์ในบล็อกของ Divi ตามค่าเริ่มต้น Divi มาพร้อมกับรูปแบบโพสต์บล็อกหกรูปแบบ: มาตรฐาน วิดีโอ เสียง ใบเสนอราคา แกลเลอรี และลิงก์ ในชุดนี้เราจะสอนวิธีปรับแต่งด้วย php และ css

ในอีก 3 วันข้างหน้า ฉันจะแนะนำคุณเกี่ยวกับการปรับแต่งรูปแบบโพสต์บล็อกของ Divi ทั้งหมด: มาตรฐาน ใบเสนอราคา ลิงก์ วิดีโอ เสียง และแกลเลอรี การแก้ไขทั้งหมดนั้น (สำหรับการออกแบบที่ฉันมีอยู่ในใจ) จำเป็นต้องแก้ไขไฟล์เทมเพลต single.php ในการดำเนินการอย่างถูกต้อง เราต้องสร้างธีมลูก Divi ที่จะมีไฟล์เทมเพลต Single.php ที่แก้ไขของเรา และก่อนที่เราจะทำอย่างนั้น เราควรสร้างการติดตั้ง WordPress ในเครื่องโดยใช้ Desktopserver นี่จะเป็นพื้นที่พัฒนาที่ปลอดภัยสำหรับเราที่จะเล่นโดยไม่ต้องเสี่ยงอะไรบนเว็บไซต์สด

ตามชื่อของโพสต์นี้ เราต้องใช้เวลาสามวันจึงจะครอบคลุมทุกอย่างตั้งแต่ต้นจนจบ วันนี้ฉันจะแสดงวิธีสร้างการติดตั้ง WordPress ในเครื่องโดยใช้ Desktopserver และสร้างธีมย่อยที่เราจะใช้เพื่อจัดเก็บรูปแบบโพสต์ในบล็อกที่เปลี่ยนแปลงของเรา

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

มาเริ่มกันเลย!

แอบดูว่าจะมีอะไรมาบ้าง

ต่อไปนี้คือภาพรวมคร่าวๆ ของการออกแบบที่เราจะทำได้ในซีรีส์นี้ หลังจากที่เราวางรากฐานสำหรับพวกเขาในโพสต์ของวันนี้แล้ว ฉันจะแสดงวิธีแก้ไขไฟล์ single.php (เทมเพลตสำหรับรูปแบบโพสต์บล็อกทั้งหมดของเรา) และวิธีการปรับแต่งเทมเพลตสำหรับแต่ละรูปแบบด้วย CSS มันจะเป็นการเดินทางที่ค่อนข้างดี!

การเตรียมสินทรัพย์เพื่อการพัฒนาของคุณ

นี่คือสิ่งที่คุณจะต้องปฏิบัติตามพร้อมกับบทช่วยสอนของวันนี้และบทช่วยสอนที่ฉันสร้างไว้สำหรับ 2 วันข้างหน้า:

• โปรแกรมแก้ไขโค้ด เช่น Atom, Sublime, Brackets หรือ Notepad + + (อะไรก็ได้ที่คุณต้องการ)
• การติดตั้ง Local WordPress โดยใช้ DesktopServer (ยกเว้นกรณีที่คุณมีอยู่แล้ว)
• ธีม Divi Child ซึ่งเราจะสร้าง!

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

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

การตั้งค่า DesktopServer บนคอมพิวเตอร์ของคุณ

ต่อไปนี้คือขั้นตอนสองสามขั้นตอนในการเริ่มต้นใช้งาน DesktopServer

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

ในหน้าชำระเงิน ให้กรอกข้อมูลส่วนตัวของคุณ ยอมรับเงื่อนไข และคลิกซื้อ

ในหน้าการยืนยันการซื้อ ให้เลือกการดาวน์โหลดที่เหมาะสมสำหรับระบบปฏิบัติการของคุณ ฉันแนะนำให้ติดตั้งเวอร์ชันล่าสุดของ Mac หรือ Windows

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

ตอนนี้ คุณสามารถค้นหาแอปพลิเคชัน DesktopServer ในโฟลเดอร์ชื่อ “xampplite” ในรูทของ Local Disk (C:) Drive ของคุณ

เมื่อคุณติดตั้ง Desktopserver แล้ว ให้อ่านคำแนะนำเพื่อช่วยคุณเริ่มต้นในการตั้งค่าการติดตั้ง wordpress ในเครื่องของคุณ

การสร้างธีม Divi Child ของคุณสำหรับซีรี่ส์นี้

ในการสร้างธีมลูก Divi คุณต้องเข้าถึงไฟล์ธีม WordPress ของคุณ หากคุณปฏิบัติตามค่าเริ่มต้นเมื่อติดตั้ง DesktopServer ไฟล์ธีมของคุณควรอยู่ในโฟลเดอร์เอกสารของคุณภายในโฟลเดอร์ชื่อ "เว็บไซต์"

ค้นหาโฟลเดอร์ธีม และเพิ่มโฟลเดอร์ใหม่ชื่อ "ลูก"

ตอนนี้คุณกำลังจะเพิ่มไฟล์ style.css ของคุณไปยังโฟลเดอร์ธีมลูกของคุณ นี่เป็นไฟล์แรกจาก 3 ไฟล์ที่จะสร้างธีมลูกของคุณ

เปิดตัวแก้ไขข้อความของคุณและสร้างไฟล์ใหม่ที่มีส่วนหัว CSS ต่อไปนี้ที่ด้านบนสุดของเอกสาร

/*
 Theme Name:     Divi Child
 Theme URI: 
 Description:	   Divi Child Theme
 Author:
 Author URI:   
 Template:       Divi
 Version:        1.0.0
 License:  
 License URI:  
 Tags:  
 Text Domain: 
*/

คุณสามารถเพิ่มข้อมูลที่เหลือสำหรับส่วนหัว CSS ของธีมลูกเพื่อให้พอดีกับไซต์ของคุณได้ตามต้องการ

บันทึกไฟล์ใหม่ของคุณด้วยชื่อและนามสกุล “style.css” และเพิ่มลงในโฟลเดอร์ธีมลูก:

ไฟล์ถัดไปที่คุณต้องเพิ่มในโฟลเดอร์ธีมลูกของคุณคือไฟล์ functions.php

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

<?php 
function my_theme_enqueue_styles() {
    $parent_;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

บันทึกไฟล์ด้วยชื่อและนามสกุลที่ถูกต้อง "functions.php" และเพิ่มลงในโฟลเดอร์ย่อยของคุณ:

ไฟล์สุดท้ายที่คุณต้องการสำหรับธีมลูกของคุณคือไฟล์ single.php ของ Divi นอกจากการเพิ่ม CSS ใหม่ให้กับไฟล์ style.css ของธีมลูกแล้ว เราจะใช้สำเนาของไฟล์ single.php ของ Divi เพื่อแก้ไขเลย์เอาต์สำหรับโพสต์ประเภทต่างๆ

หากต้องการค้นหาไฟล์ single.php ให้ไปที่โฟลเดอร์ธีม Divi (พาเรนต์)

คัดลอกไฟล์ single.php และวางลงในโฟลเดอร์ธีมลูกของคุณ:

ตอนนี้เราพร้อมที่จะปรับแต่งไฟล์ single.php ของธีมลูกของคุณแล้ว

เปิดใช้งานธีมลูกใหม่ของคุณ

ก่อนที่เราจะเริ่มปรับแต่งไฟล์เทมเพลต single.php ให้เปิดใช้งานธีมลูกใหม่ของคุณ

จากแดชบอร์ด wordpress ให้ไปที่ Appearance → Themes แล้วเลือกปุ่มเปิดใช้งานในธีมลูกใหม่ของคุณที่ชื่อว่า Divi Child

แค่นั้นแหละ!

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

พรุ่งนี้จะมีอะไร?

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

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

ไชโย!