ทำความเข้าใจกับรหัสย่อของ WordPress

หากคุณใช้ WordPress มาเป็นเวลานาน คุณอาจเคยใช้รหัสย่อมาบ้างแล้ว

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

[example shortcode]

กล่าวอีกนัยหนึ่ง: รหัสย่อทำให้เกิดสิ่งพิเศษขึ้นไม่ว่าจะวางไว้ที่ใดในข้อความของคุณ
แต่คุณไม่จำกัดเพียงรหัสย่อที่กำหนดไว้ล่วงหน้า คุณสามารถกำหนดรหัสย่อที่กำหนดเองเพื่อทำสิ่งที่คุณต้องการ! สิ่งเหล่านี้อาจเรียบง่าย ซับซ้อน หรืออะไรก็ได้ที่อยู่ระหว่างนั้น

ในซีรีส์นี้ เราจะเริ่มด้วยรหัสย่อง่ายๆ และพยายามหาตัวอย่างที่ซับซ้อนมากขึ้น (และมีประโยชน์มากยิ่งขึ้น!)

หมายเหตุ: เราจะทำงานกับ PHP เป็นหลักที่นี่ โดยเฉพาะในไฟล์ functions.php ของธีมของคุณ หากคุณไม่ได้ใช้ธีมลูก (หรือธีมแบบกำหนดเอง/เริ่มต้นที่สามารถแก้ไขได้โดยไม่ต้องกลัวว่าการอัปเดตจะเขียนทับการเปลี่ยนแปลงของคุณ) คุณจะต้องสร้างธีมลูกก่อนที่จะเริ่มต้น

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

ตัวอย่างรหัสย่อง่ายๆที่มีประโยชน์

สมมติว่าเราต้องการรหัสย่อที่แทรกส่วนข้อมูลผู้เขียนพิเศษลงในโพสต์ เช่นนี้

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

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

ขั้นตอนที่ 1: เพิ่มรหัสย่อในไฟล์ functions.php ของธีมของคุณ

คุณจะใช้ฟังก์ชัน add_shortcode เพื่อตั้งชื่อรหัสย่อของคุณ และบอก WordPress ว่าควรทำอย่างไรเมื่อมีการใช้รหัสย่อ เพิ่มบรรทัดนี้ในไฟล์ functions.php ของธีมของคุณ:

 [php]add_shortcode( 'author_bio', 'create_author_bio' );[/php]

ไม่สำคัญว่าจะอยู่ตรง ไหน ใน functions.php แต่เพื่อหลีกเลี่ยงความขัดแย้ง เราขอแนะนำให้ใส่ไว้ท้ายสุด (หากไฟล์ลงท้ายด้วยแท็กปิด ?> ควรอยู่ข้างหน้าเท่านั้น ไม่ใช่หลัง)

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

1. อาร์กิวเมนต์แรก: ในกรณีนี้ author_bio – บอก WordPress ถึงชื่อจริงของรหัสย่อของคุณ นี่จะเป็นข้อความที่ผู้ใช้สามารถพิมพ์ในวงเล็บเพื่อใช้รหัสย่อ ด้วยรหัสนี้ตามที่เขียนไว้ [author_bio] จะเป็นรหัสย่อของเราเพื่อเรียกใช้กล่องชีวประวัติผู้เขียนของเรา
   ข้อความนี้อาจเป็นอะไรก็ได้ แต่ควรพยายามไม่ซ้ำใครเสมอ ด้วยวิธีนี้ คุณจะไม่เสี่ยงที่ชื่อรหัสย่อของคุณจะขัดแย้งกับของคนอื่นจากปลั๊กอินหรือธีมอื่นที่ติดตั้งไว้
2. อาร์กิวเมนต์ที่สอง: ในกรณีนี้ create_author_bio – ชี้ WordPress ไปที่ฟังก์ชัน PHP จริงที่ควรดำเนินการเมื่อใดก็ตามที่ใช้รหัสย่อนี้ เราจะสร้างฟังก์ชันนั้นในขั้นตอนต่อไป สำหรับตอนนี้ เราแค่บอกให้ WordPress รู้ว่าชื่อของมันคืออะไร (ชื่อนี้ควรไม่ซ้ำกันด้วย เพื่อหลีกเลี่ยงความขัดแย้ง)

ถ้าจะให้ช่วย ลองนึกถึงโค้ดแบบนี้:

 [php]add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );[/php]

หากคุณสนใจรายละเอียดปลีกย่อยเพิ่มเติม โปรดดูรายการ add_shortcode Codex

ขั้นตอนที่ 2: สร้างฟังก์ชันเพื่อจัดการรหัสย่อ

ตอนนี้เราต้องสร้างฟังก์ชั่นที่เราเพิ่งตั้งชื่อ!

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

 [php]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ //Code goes here! }[/php]

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

หมายเหตุด้านข้าง: ไม่สำคัญว่าฟังก์ชัน create_author_bio จะอยู่หลังฟังก์ชัน add_shortcode หรือก่อนหน้า คำสั่งซื้อไม่สำคัญในกรณีนี้

ขั้นตอนที่ 3: ทำให้ฟังก์ชั่นทำอะไรบางอย่าง

ตอนนี้สิ่งที่เหลืออยู่คือการทำให้ฟังก์ชั่นของเราทำในสิ่งที่เราต้องการ!

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

สำหรับจุดประสงค์ของเรา นี่จะเป็นเพียงแค่ HTML ง่ายๆ นี่คือมาร์กอัปสำหรับเพิ่มภาพผู้เขียนและชีวประวัติของเราในองค์ประกอบ <aside> ด้วยคลาสที่กำหนดเอง (แต่อย่าเพิ่งใส่สิ่งนี้ไปไหน เราแค่ดูเป็นตัวอย่างสำหรับช่วงเวลานี้):

 [html]<aside class="author-bio-box"></span> <img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"> <p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p> <p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p> </aside>[/html]

ในที่สุด เราจะใช้คลาสผู้เขียน-bio-box ในบรรทัดแรกเพื่อจัดรูปแบบประวัติด้วย CSS (เราจะใช้ class แทน ID ในกรณีที่คุณต้องการเพิ่มรหัสย่อของผู้เขียนมากกว่าหนึ่งคนสำหรับเนื้อหาที่เขียนโดยผู้เขียนหลายคน) แต่จำไว้ว่านี่อาจเป็นอะไรก็ได้ที่เราต้องการใส่ลงในเพจ!

ตอนนี้สิ่งที่เราต้องทำคือให้ฟังก์ชันรหัสย่อของเราส่งคืน HTML ข้างต้น!

เนื่องจากไฟล์ functions.php ควรมีเฉพาะ…อืม ฟังก์ชั่น PHP (และเพื่อความเป็นระเบียบเรียบร้อยด้วย) เราจึงลบตัวแบ่งบรรทัดและช่องว่างระหว่างองค์ประกอบ HTML ที่เราเพิ่งดูและใส่ไว้ในสตริง (ภายในเครื่องหมายอัญประกาศเดี่ยว) . แต่ตามหน้าที่แล้ว มันยังคงเป็น HTML snippet ตัวเดิมที่เราเพิ่งเห็นด้านบน และนี่คือหน้าตาของโค้ด PHP สุดท้ายของเรา:

 [html]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ return '<aside class="author-bio-box"><img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"><p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p><p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p></aside>'; }[/html]

เราทำ PHP เสร็จแล้ว! เมื่อเราบันทึกไฟล์ functions.php ด้วยโค้ดสุดท้ายข้างต้นแล้ว ผู้เขียนทุกคนสามารถป้อน [author_bio] ในหน้าหรือโพสต์ใดก็ได้ และ HTML ด้านบนจะปรากฏแทนที่รหัสย่อ!

นอกจากนี้ สิ่งที่ยอดเยี่ยมจริงๆ คือ หากเราจำเป็นต้องอัปเดตประวัติของเรา เราก็ไม่จำเป็นต้องแก้ไขทุกที่ที่ปรากฏ! สิ่งที่เราต้องทำคือแก้ไขโค้ดในไฟล์ functions.php ของเรา และโค้ดจะได้รับการอัปเดตทุกที่พร้อมกัน เรียบร้อยฮะ?

อย่างไรก็ตาม เพื่อใช้ประโยชน์สูงสุดจากสิ่งนี้ เราอาจต้องการเพิ่มสไตล์พิเศษให้กับกล่องชีวภาพ

ขั้นตอนที่ 4: เพิ่ม CSS บางส่วน

รหัสย่อนั้นไม่ดีหากไม่มีการจัดรูปแบบ ดังนั้นมาเพิ่มกันเถอะ! คุณอาจต้องปรับค่าบางอย่างเล็กน้อย ขึ้นอยู่กับฟอนต์ของไซต์คุณ (อันในภาพด้านบนคือ Fanwood Text) และกฎ CSS ใดที่มีอยู่แล้ว หรือคุณอาจแค่อยากลองอะไรที่แตกต่างออกไป!

คุณสามารถคัดลอก CSS นี้ลงในไฟล์ style.css ของธีม (ลูก) ของคุณ หรือหากคุณใช้ WordPress 4.7 ขึ้นไป (ซึ่งคุณควรจะเป็น!) คุณเพียงแค่วาง CSS นี้ลงในช่อง “Additional CSS” ใน Customize หน้าจอ:

 [css].author-bio-box { background: #d4ead9; padding: 2em; overflow: auto; font-family: Fanwood Text; font-size: 1.2em; line-height: 1.4em; } .author-bio-box img { float: left; max-width: 128px; height: auto; margin: 0 1em 0 0; } .author-bio-box > p:first-of-type:first-letter { font-size: 3.1em; line-height: 1; float: left; margin-bottom: -.2em; } .author-bio-box > p:last-of-type { margin: 0; }[/css]

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

แนะนำ: ทำให้ฟังก์ชั่น "เสียบได้"

การดำเนินการนี้ไม่เฉพาะเจาะจงสำหรับรหัสย่อ และไม่จำเป็นอย่างยิ่งสำหรับรหัสในการทำงาน แต่เป็นแนวทางปฏิบัติที่ดีที่สุด และนี่เป็นเวลาที่ดีที่จะกล่าวถึง

ขั้นแรก พื้นฐานเล็กน้อยเกี่ยวกับวิธีการทำงานของ PHP :

จำได้ไหมว่าเราตั้งชื่อฟังก์ชั่น create_author_bio ด้วยตัวเองได้อย่างไร? ไม่มีอะไรพิเศษเกี่ยวกับชื่อ create_author_bio; เราสามารถตั้งชื่อฟังก์ชันของเราตามที่เราต้องการได้ง่ายๆ (แม้ว่าจะเป็นการดีที่สุดหากชื่อฟังก์ชันให้คำใบ้เล็กน้อยเกี่ยวกับสิ่งที่ทำ ซึ่งเป็นเหตุผลที่เราเลือก create_author_bio )

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

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

นั่นเป็นสิ่งที่ไม่ดี และแน่นอนว่าเราต้องการทำให้แน่ใจว่าจะไม่เกิดขึ้น

เราสามารถทำได้โดยทำให้ฟังก์ชันของเราเป็นแบบ "เสียบได้" กล่าวอีกนัยหนึ่งคือการบอก WordPress ว่าอย่าสร้างฟังก์ชันของเราหากมีชื่อเดียวกันอยู่แล้ว มันเรียบง่ายอย่างหรูหรา เราเพียงแค่รวมรหัสที่มีอยู่ของเราไว้ในคำสั่งเงื่อนไขง่าย ๆ นี้:

 [php]if( !function_exists( 'create_author_bio' ) ){ //Our existing PHP goes here! }[/php]

นิพจน์เงื่อนไข if นั้นแค่ตรวจสอบเพื่อให้แน่ใจว่าไม่มีฟังก์ชันชื่อ create_author_bio อยู่แล้ว โค้ด PHP ของเราทั้งหมดที่เราเคยใช้สามารถย้ายเข้าไปข้างในคำสั่งนั้นได้ โดยอยู่ระหว่างเครื่องหมายวงเล็บปีกกา { }

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

บทสรุป

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

รหัสย่อนี้สามารถปรับให้แสดงผลอะไรก็ได้บนหน้าได้อย่างง่ายดาย gif บล็อก HTML และ/หรือ JavaScript ที่กำหนดเอง รูปภาพหรือวิดีโอ...อะไรก็ได้ที่คุณต้องการ!

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

ข่าวดี: เราได้กล่าวถึงพื้นฐานของรหัสย่อเท่านั้น และพวกมันยังมีความสามารถอื่นๆ อีกมาก!