<\/span><\/h2>\nOk, shortcode ini sebetulnya bukan saya yang buat. Hanya saja ada beberapa bagian memang yang sudah saya ubah\/modifikasi, yang pada waktu itu disesuaikan dengan kebutuhan saya sendiri.<\/p>\n
Kenapa saya sampai menggunakan custom shortcode? Kenapa tidak menggunakan metode plugin atau iframe dan HTML di atas?<\/p>\n
Itu karena, dengan membuat dan menggunakan custom shortcode, saya bisa membuat kode yang lebih clean, lebih ringkas dan lebih fleksibel. Attribute yang tidak perlu bisa saya buang dan lagi ini hanya beberapa baris kode saja.<\/p>\n
Bandingkan jika saya menggunakan plugin di atas yang ukuran file nya sekitar 200 KB, itu saya yakin banyak kode yang belum tentu saya butuhkan dan belum tentu sesuai dengan kebutuhan saya.<\/p>\n
Langsung saja, berikut kode nya:<\/p>\n
\/\/Embed CodePen dengan Shortcode\r\nfunction pugam_embed_codepen_pen($atts) {\r\n $atts = shortcode_atts(array(\r\n 'id' => 'https:\/\/codepen.io\/',\r\n 'name' => '',\r\n 'height' => '500',\r\n 'theme' => '0',\r\n 'window' => '1',\r\n 'default' => 'result',\r\n 'preview' => true\r\n ), $atts);\r\n \r\n \/* Get ID and username *\/\r\n $id = rtrim($atts['id'], '\/');\r\n $data = explode('\/', $id);\r\n $penid = end($data); \r\n $user = array_slice($data, -3, 1); \r\n $user = $user['0'];\r\n\r\n \/* Build pen *\/\r\n $return = '<p><p data-height=\"' . $atts['height'] . '\" data-embed-version=\"' . $atts['window'] . '\" data-theme-id=\"' . $atts['theme'] . '\" data-slug-hash=\"' . $penid . '\" data-default-tab=\"' . $atts['default'] . '\" data-user=\"' . $user . '\"';\r\n if ($atts['preview'] !== false) $return .= ' data-preview=\"true\"';\r\n $return .= ' class=\\'codepen\\'>See the Pen on <a href=\\'http:\/\/codepen.io\\'>CodePen<\/a>.<\/p>';\r\n $return .= '<script async src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>';\r\n\r\n return $return;\r\n}\r\nadd_shortcode('codepen', 'pugam_embed_codepen_pen');<\/pre>\nMasukkan kode di atas ke file functions.php<\/strong>.<\/p>\nStruktur shortcode nya nanti seperti ini:<\/p>\n
[codepen id=\"\" theme=\"0 atau light atau dark\" window=\"1 atau 2\" default=\"html atau css atau js atau result\"]<\/pre>\nDaftar attribute yang bisa disesuaikan beserta default value nya:<\/p>\n
\n- id:<\/strong> Default value nya mengarah ke URL utama CodePen (https:\/\/codepen.io\/). Di
id<\/code> ini, Anda dapat menggunakan hash, yang artinya tidak perlu memasukkan keseluruhan URL pen. Misal, untuk URL (https:\/\/codepen.io\/sachingpta\/pen\/mOLvqz), Anda bisa menggunakan mOLvqz<\/code> di dalam id<\/code>.<\/li>\n- theme:<\/strong> Default nya adalah
0<\/code>. CodePen menyediakan dua jenis theme, yaitu light dan dark. Value 0<\/code> di sini adalah dark. Atau bisa juga Anda mengisi value nya dengan light<\/code> atau dark<\/code>.<\/li>\n- window:<\/strong> Default nya adalah
1<\/code> dan maksimal 2<\/code>. Window di sini adalah jumlah jendela yang bisa dibuka secara bersamaan di dalam pen. Jika Anda memilih 2, maka Anda dapat membuka jendela HTML di sebelah kiri misalnya dan jendela result di sebelah kanan. Tapi ingat, ini hanya berlaku jika pen dibuka lewat perangkat desktop sedangkan untuk perangkat mobile jumlah jendela tetap satu (single).<\/li>\n- default:<\/strong> Default nya adalah
result<\/code>. Ini adalah tab mana yang akan dimunculkan pertama kali ketikan pen dibuka.<\/li>\n- height:<\/strong> Default nya adalah 500 px. Attribute ini sengaja tidak saya masukkan pada contoh shortcode di atas karena memang saya sudah menentukan tinggi pen ideal untuk saya, yaitu 500 px. Tapi bisa Anda ubah yaitu dengan menyertakan attribute
height=\"xxx\"<\/code> di dalam shortcode, ganti xxx<\/code>\u00a0dengan angka.<\/li>\n<\/ul>\nOk, sekarang akan saya tunjukkan hasil dari penggunaan shortcode tersebut.<\/p>\n
<\/span>Contoh 1: Single Window + Dark Theme + Default Tab “Result”<\/span><\/h3>\nShortcode: [codepen id=\"mOLvqz\" theme=\"0\" window=\"1\" default=\"result\"]<\/p>\n
See the Pen on CodePen<\/a>.<\/p>
![\"Cara](\"https:\/\/img.pugam.com\/2018\/03\/Cara-Embed-CodePen-di-WordPress.jpg\")
<\/p>\n