สร้าง Shortcodes สำหรับธีม WordPress ของเรา

ตั้งแต่เราเริ่มต้นโครงการนี้เราต้องการให้มีป้ายกำกับเป็นของตัวเองมาโดยตลอดและนั่นคือเหตุผลว่าทำไมเทมเพลตที่สองที่เราใช้ DesdeLinuxสร้างขึ้นโดยเรา 100%

จากนั้นเวอร์ชันอื่น ๆ จะตามมาและแม้ว่าเราจะสามารถซื้อหรือจ้างบริการเว็บบางอย่างเพื่อสร้างการออกแบบของเราได้ StudioDWeb.comหรือซื้อเทมเพลตที่สร้างไว้แล้วใน ThemeForest.netเราอยากมีสิ่งที่เป็นของเรามาโดยตลอดปรับให้เข้ากับความต้องการและก้าวผ่านไปให้ได้ webdevelopment.com สามารถช่วยได้😀

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

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

และนี่คือลักษณะของบทความ:

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

นั่นคือเหตุผลที่เกิดขึ้นกับฉันเพื่อแบ่งปันวิธีการสร้างหนึ่งในนั้น (ข้อมูล) ในกรณีที่คุณต้องการรวมไว้ในหัวข้อของคุณ WordPress. ฉันหมายถึงสิ่งนี้:

ฉันไม่ใช่ผู้เชี่ยวชาญในการเขียนโปรแกรมด้วย CMS นี้ดังนั้นฉันจะไม่พยายามอธิบายว่าทำไมและวิธีการทำงานในลักษณะนี้ฉันจะแสดงให้คุณเห็นเฉพาะช่วงเวลาเท่านั้น

สำหรับสิ่งนี้เราใช้«มีดทหารสวิส»ของ WordPressฉันหมายถึงไฟล์ function.php ที่ปกติเราจะพบในเกือบทุกหัวข้อ

ตัวอย่าง Function.php พร้อม ShortCodes DesdeLinux

สิ่งที่เราจะทำในไฟล์นี้คือเพิ่มโครงสร้างของ ShortCode ของเราและแน่นอนป้ายกำกับที่แสดง ไปดูกันเลย

ภายใน Function.php

ภายในไฟล์ function.php ของเราสิ่งที่เราจะใส่จะเป็นโครงสร้าง HTML ของ ShortCode แต่ไม่ใช่แค่ใส่แท็ก HTML อย่างนั้น เราจะมีสิ่งนี้:

// ช่องข้อมูลฟังก์ชันข้อมูล ($ atts, $ content = null, $ code = "") {$ return = ' '; $ return. = $ content; $ return. = ' '; คืน $ return; } // ShortCode add_shortcode ('ข้อมูล', 'infobox');

จากที่นี่เราจะชี้แจงสองสิ่ง ขั้นแรกเมื่อเราใช้สองแถบเราจึงแสดงความคิดเห็นออกจากบรรทัดดังนั้น // ข้อมูล มันเป็นเพียงความคิดเห็น

ชื่อของฟังก์ชันในกรณีนี้ กล่องข้อมูล สามารถเปลี่ยนเป็นอะไรก็ได้ที่เราต้องการ แต่ต้องตรงกับชื่อที่เราใช้ในบรรทัดสุดท้าย

ตัวอย่าง:

$ return. = $ content;

ตัวแปร เนื้อหา $ ซึ่งเป็นที่ที่เนื้อหาที่เราใส่ใน ShortCode ไปตามค่าเริ่มต้นมันจะคืนค่าว่างถ้าเราไม่ใส่อะไรเลย

ตอนนี้ชื่อของ ShortCode คือสิ่งที่เราตั้งด้วย:

add_shortcode( 'info', 'infobox' );

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

[ info ]Este será el ShortCode de ejemplo[ /info ]

แม้ว่าแน่นอนว่าไม่มีช่องว่างซึ่งฉันใส่เพราะเห็นได้ชัดว่า ShortCode จะเปิดใช้งาน

สไตล์ ShortCode

หากคุณดูบรรทัดด้านบนโดยไม่มีโค้ด PHP และตัวแปร ShortCode ใน HTML บริสุทธิ์จะเป็นดังนี้:

<div class="alert-info"></div>

ดังนั้นเราต้องใช้สไตล์ CSS เท่านั้น

.alert.alert-info {background: # d9edf7 url (info.png) ไม่ซ้ำ 7px 50%; เส้นขอบรัศมี: 4px; เส้นขอบ: 1px ทึบ # bce8f1; สี: # 3a87ad; ขนาดตัวอักษร: 14px; ระยะขอบ: 15px 15px; padding: 15px 15px 15px 50px text-align: left}

และนั่นแหล่ะ .. ขอย้ำอีกครั้งว่าฉันไม่ใช่โปรแกรมเมอร์หรืออะไรแบบนั้นและคำอธิบายที่ฉันให้ก็คือฉันเข้าใจได้อย่างไรว่า ShortCode ทำงานได้😛