เริ่มต้นใช้งาน WordPress Shortcodes & Sample Snippets

เผยแพร่แล้ว: 2021-02-18

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

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

 [button]

ในการปรับแต่งปุ่ม เราเพียงแค่เพิ่มบางอย่างเช่น:

 [button type="twitter"]

หรือเพื่อให้ดียิ่งขึ้นไปอีก เราสามารถใช้รหัสย่อที่แนบมา:

 [button type="twitter"]Follow me on Twitter![/button]

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

การสร้างรหัสย่อแบบปิดเอง

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

รหัสทั้งหมดอยู่ใน functions.php ซึ่งอยู่ใน /wp-content/themes/your-theme/ หากคุณยังไม่มี เพียงแค่สร้างและใส่โค้ดลงไป

 <?php function button_shortcode() { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follow me on Twitter!</a>"'; } add_shortcode('button', 'button_shortcode'); ?>

การใช้งาน:

 [button]

เพียงใช้ add_shortcode() เราก็สามารถเชื่อมโยงฟังก์ชัน PHP ใดๆ กับรหัสย่อของเราได้ ในตัวอย่างง่ายๆ นี้ ทั้งหมดที่เราทำคือส่งคืนลิงก์ไปยังบัญชี Twitter ของเรา แต่มาทำขั้นตอนต่อไปและเพิ่มพารามิเตอร์บางอย่าง

การสร้างรหัสย่อแบบปิดตัวเองด้วยพารามิเตอร์

รหัสย่อรองรับพารามิเตอร์ ซึ่งช่วยให้เราปรับแต่งผลลัพธ์ได้ ในตัวอย่างนี้ เรามีปุ่มที่แตกต่างกันสองปุ่ม ดังนั้นเราต้องกำหนดว่าเราต้องการแสดงปุ่มใด

 <?php function button_shortcode($type) { extract(shortcode_atts(array( 'type' => 'type' ), $type)); // check what type user entered switch ($type) { case 'twitter': return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follw me on Twitter!</a>'; break; case 'rss': return '<a href="http://example.com/rss" class="rss-button">Subscribe to the feed!</a>' break; } } add_shortcode('button', 'button_shortcode'); ?>

ตอนนี้ คุณสามารถเลือกปุ่มที่จะแสดงโดยกำหนด type ในรหัสย่อของคุณ

 [button type="twitter"] [button type="rss"]

นี้เป็นสิ่งที่ดี แต่ถ้าเราต้องการเปลี่ยนข้อความล่ะ? เราสามารถเพิ่มประเภทรหัสย่อเช่น [button type="twitter-2"] ต่อไปได้ แต่นั่นไม่ใช่ไดนามิกมากใช่ไหม เรามาดูวิธีการทำสิ่งนี้ให้ถูกวิธีกัน

การสร้างรหัสย่อที่แนบมา

รหัสย่อที่ล้อมรอบช่วยให้คุณสามารถฝังเนื้อหาภายในรหัสย่อของคุณได้ เช่นเดียวกับ BBCode หากคุณเคยใช้

 <?php function button_shortcode( $attr, $content = null ) { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>

ในการใช้รหัสย่อนี้ คุณต้องฝังข้อความที่คุณต้องการใช้ดังนี้:

 [button]Follow me on Twitter![/button]

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

 <?php function button_shortcode( $atts, $content = null ) { extract( shortcode_atts( array( 'account' => 'account', 'style' => 'style' ), $atts ) ); return '<a href="http://twitter.com/' . esc_attr($account) . '" class="twitter-button ' . esc_attr($style) . '">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>

การใช้งาน:

 [button account="filipstefansson" style="simple"]Follow me on Twitter![/button] // Result: &lt;a href="http://twitter.com/filipstefansson" class="twitter-button simple">Follow me on Twitter!&lt;/a>

ตอนนี้เรามีปุ่มที่ปรับแต่งได้ซึ่งสามารถเชื่อมโยงกับบัญชี Twitter ได้ ตามที่ฉันแน่ใจว่าคุณเข้าใจ คุณสามารถสร้างรหัสย่อขั้นสูงกว่านี้ได้มาก แต่นี่เป็นการเริ่มต้นที่ดี

รหัสย่อในวิดเจ็ตและไฟล์เทมเพลต

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

หากต้องการเปิดใช้งานรหัสย่อในวิดเจ็ตของคุณ เพียงใส่รหัสต่อไปนี้ใน functions.php:

 add_filter('widget_text', 'do_shortcode')

และหากต้องการใช้รหัสย่อในไฟล์เทมเพลตของคุณ คุณสามารถเข้าถึงได้โดยใช้:

 do_shortcode("[button]");

ทางลัดที่พร้อมใช้งาน

นี่คือรหัสย่อบางส่วนที่คุณสามารถใช้งานได้ทันที

รหัสในโพสต์

หากคุณเปิดบล็อกที่เน้นการเขียนโปรแกรม คุณอาจต้องการแสดงโค้ดในบทความของคุณ

 function code_shortcode( $attr, $content = null ) { $content = clean_pre($content); // Clean pre-tags return '<pre"><code>' . str_replace('<', '<', $content) . // Escape < chars '</code></pre>'; } add_shortcode('code', 'code_shortcode');

การใช้งาน:

 [code]&lt;?php echo 'Hello World!'; ?>

ฝัง Adsense ไว้ที่ใดก็ได้ในโพสต์ของคุณ

ด้วยรหัสย่อนี้ คุณสามารถเพิ่มโฆษณา Google ได้ทุกที่ในโพสต์ของคุณง่ายๆ โดยใช้ [adsense]

 function showads() { return '<script type="text/javascript"><!-- google_ad_client = "pub-3637220125174754"; google_ad_slot = "4668915978"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> '; } add_shortcode('adsense', 'showads');

ฝังวิดีโอ YouTube

รหัสย่อนี้จะช่วยให้คุณฝังวิดีโอ YouTube ลงในโพสต์บล็อกของคุณ

 function youtube($atts) { extract(shortcode_atts(array( "value" => 'http://', "width" => '475', "height" => '350', "name"=> 'movie', "allowFullScreen" => 'true', "allowScriptAccess"=>'always', "controls"=> '1', ), $atts)); return '<object style="height: '.$height.'px; width: '.$width.'px"><param name="'.$name.'" value="'.$value.'"><param name="allowFullScreen" value="'.$allowFullScreen.'"><param name="allowScriptAccess" value="'.$allowScriptAccess.'"><embed src="'.$value.'" type="application/x-shockwave-flash" allowfullscreen="'.$allowFullScreen.'" allowScriptAccess="'.$allowScriptAccess.'" width="'.$width.'" height="'.$height.'"></object>'; } add_shortcode("youtube", "youtube");

การใช้งาน:

 // Optional attributes: width, height, name, allowFullScreen, allowScriptAccess, controls [youtube value="http://www.youtube.com/watch?v=1aBSPn2P9bg"]

รหัสย่อการบริจาค Paypal

นี่คือรหัสย่อที่ช่วยให้คุณสร้างลิงค์บริจาคไปยังบัญชี Paypal ของคุณ

 function donate_shortcode( $atts, $content = null) { global $post;extract(shortcode_atts(array( 'account' => 'your-paypal-email-address', 'for' => $post->post_title, 'onHover' => '', ), $atts)); if(empty($content)) { $content='Make A Donation'; } return '<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation for '.$for.'" title="'.$onHover.'">'.$content.'</a>'; } add_shortcode('donate', 'donate_shortcode');

การใช้งาน:

 [donate] [donate]Donate Now[/donate] [donate account="[email protected]" onHover="Thanks" for="Title"] [donate account="[email protected]" onHover="Thanks" for="Title"]Donate Now[/donate]

บันทึกส่วนตัวถึงผู้เขียน

อันสุดท้ายนี้ฉลาด ด้วยรหัสย่อนี้ คุณสามารถสร้างบันทึกย่อในโพสต์ของคุณซึ่งมีเพียงผู้เขียนเท่านั้นที่สามารถเห็นได้

 function sc_note( $atts, $content = null ) { if ( current_user_can( 'publish_posts' ) ) return '<div class="note">'.$content.'</div>'; return ''; } add_shortcode( 'note', 'sc_note' );

บทสรุป

หลังจากอ่านบทความนี้แล้ว ฉันหวังว่าคุณจะชอบรหัสย่อของ WordPress มากเท่ากับที่ฉันทำ และฉันหวังว่าคุณจะเริ่มนำไปใช้ในบล็อกของคุณเอง