Memulai dengan Shortcode WordPress & Cuplikan Sampel

Kode pendek WordPress diperkenalkan di 2.5 dan membantu Anda membuat kode makro untuk digunakan dalam konten Anda. Jika Anda memikirkannya, ini adalah cara yang bagus untuk membuat sesuatu seperti tempat iklan dinamis atau tombol ajakan bertindak di postingan Anda.

Jika kita menggunakan contoh ajakan bertindak, Anda dapat menambahkan sesuatu seperti ini ke posting blog Anda untuk menampilkan tombol dan kemudian mengedit output di file functions.php template Anda, yang akan kita dapatkan dalam satu menit.

 [button]

Untuk menyesuaikan tombol, kita cukup menambahkan sesuatu seperti:

 [button type="twitter"]

Atau untuk membuatnya lebih baik, kita bisa menggunakan kode pendek terlampir:

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

Dengan sedikit imajinasi, Anda segera menyadari potensi kode pendek dan apa yang dapat dilakukan dengannya. Dalam artikel ini, saya akan menunjukkan kepada Anda cara membuat dan menggunakan ketiga jenis shortcode yang berbeda ini, dan kemudian saya akan menunjukkan beberapa shortcode siap pakai untuk digunakan di situs WordPress Anda sendiri.

Membuat kode pendek yang menutup sendiri

Kode pendek paling sederhana adalah yang menutup sendiri. Kami akan membuat tautan sederhana ke akun Twitter kami dan kemudian menambahkannya ke posting blog.

Semua kode masuk ke functions.php , yang terletak di /wp-content/themes/your-theme/ . Jika Anda tidak memilikinya, buat saja dan masukkan kodenya.

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

Penggunaan:

 [button]

Cukup menggunakan fungsi add_shortcode() , kita dapat menautkan fungsi PHP apa pun ke kode pendek kita. Dalam contoh sederhana ini, yang kita lakukan hanyalah mengembalikan tautan ke akun Twitter kita, tetapi mari kita melangkah lebih jauh dan menambahkan beberapa parameter.

Membuat kode pendek yang menutup sendiri dengan parameter

Kode pendek memiliki dukungan untuk parameter, yang memungkinkan kami menyesuaikan output. Dalam contoh ini, kami memiliki dua tombol yang berbeda, jadi kami harus menentukan tombol apa yang ingin kami tampilkan.

 <?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'); ?>

Sekarang Anda dapat memilih tombol apa yang akan ditampilkan dengan menentukan type dalam kode pendek Anda.

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

Ini bagus. Tetapi bagaimana jika kita ingin mengubah teks? Kita bisa terus menambahkan jenis kode pendek seperti [button type="twitter-2"] dan seterusnya, tapi itu tidak terlalu dinamis, bukan? Mari kita lihat bagaimana melakukan ini dengan cara yang benar.

Membuat kode pendek terlampir

Kode pendek terlampir memungkinkan Anda untuk menyematkan konten dalam kode pendek Anda, seperti BBCode jika Anda pernah menggunakannya.

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

Untuk menggunakan kode pendek ini, Anda menyematkan teks yang ingin Anda gunakan seperti ini:

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

Untuk membuat tombol ini lebih baik, kita bisa menambahkan parameter seperti yang kita lakukan pada contoh sebelumnya. Mari kita tambahkan dua parameter kali ini, satu untuk nama pengguna Twitter dan satu untuk gaya tombol. Kemudian kita dapat memiliki berbagai jenis tombol dan memilih akun Twitter yang ingin kita tautkan tombolnya.

 <?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'); ?>

Penggunaan:

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

Sekarang kami memiliki tombol yang dapat disesuaikan yang dapat kami tautkan ke akun Twitter mana pun. Seperti yang saya yakin Anda pahami, Anda dapat membuat kode pendek yang jauh lebih canggih daripada ini, tetapi ini adalah awal yang baik.

Kode pendek di widget dan file template

Sekarang ketika Anda telah melihat kekuatan shortcode, Anda mungkin bertanya-tanya mengapa Anda tidak dapat menggunakannya di widget dan file template Anda. Wah ternyata bisa.

Untuk mengaktifkan shortcode di widget Anda, cukup masukkan kode berikut di functions.php:

 add_filter('widget_text', 'do_shortcode')

Dan untuk menggunakan kode pendek di file template Anda, Anda dapat mengaksesnya dengan menggunakan:

 do_shortcode("[button]");

Shortode siap pakai

Berikut adalah beberapa kode pendek keren yang dapat Anda terapkan segera.

Kode di postingan

Jika Anda menjalankan blog yang berfokus pada pemrograman, Anda mungkin ingin menampilkan kode di postingan Anda.

 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');

Penggunaan:

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

Sematkan Adsense di mana saja di postingan Anda

Dengan kode pendek ini, Anda dapat menambahkan iklan Google di mana saja di postingan Anda hanya dengan menggunakan [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');

Sematkan video YouTube

Kode pendek ini akan memungkinkan Anda menyematkan video YouTube ke dalam posting blog Anda.

 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");

Penggunaan:

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

Kode Pendek Donasi Paypal

Ini adalah kode pendek yang membantu Anda membuat tautan donasi ke akun Paypal Anda.

 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');

Penggunaan:

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

Catatan pribadi untuk penulis

Yang terakhir ini pintar. Dengan kode pendek ini, Anda dapat membuat catatan di postingan Anda yang hanya dapat dilihat oleh penulisnya.

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

Kesimpulan

Setelah membaca artikel ini, saya harap Anda menyukai shortcode WordPress seperti saya, dan saya harap Anda akan mulai menerapkannya di blog Anda sendiri.