{"id":5384,"date":"2017-06-19T08:50:12","date_gmt":"2017-06-19T08:50:12","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=5384"},"modified":"2023-10-23T11:20:25","modified_gmt":"2023-10-23T04:20:25","slug":"do_shortcode-wordpress","status":"publish","type":"post","link":"\/id\/tutorial\/do_shortcode-wordpress\/","title":{"rendered":"Cara menggunakan do_shortcode WordPress"},"content":{"rendered":"<p class=\"wp-block-paragraph\"><a href=\"\/id\/tutorial\/cara-membuat-button-di-wordpress-shortcode\/\">Shortcode<\/a> memungkinkan Anda menambahkan fungsi pada website dengan mudah. Untuk menempatkannya di bagian mana pun pada website, Anda bisa menggunakan fungsi WordPress <strong>do_shortcode<\/strong>.<\/p><p class=\"wp-block-paragraph\">Di artikel ini, kami akan menunjukkan cara menggunakan do_shortcode WordPress untuk menjalankan fungsi yang Anda inginkan. Tapi sebelumnya, kami akan mulai dulu dengan menjelaskan definisi dan fungsi shortcode apabila Anda belum tahu.<\/p><p class=\"wp-block-paragraph\">Yuk langsung mulai saja!<\/p><h2 class=\"wp-block-heading\" id=\"h-apa-yang-dimaksud-dengan-shortcode\">Apa yang Dimaksud dengan Shortcode?<\/h2><p class=\"wp-block-paragraph\">Di WordPress, Anda bisa menggunakan kode yang disebut dengan shortcode untuk menjalankan fungsi tertentu, misalnya <strong>menampilkan konten<\/strong>. Sebagai contoh, ketika membuat slider menggunakan plugin <a href=\"https:\/\/wordpress.org\/plugins\/ml-slider\/\" target=\"_blank\" rel=\"noreferrer noopener\">MetaSlider<\/a>, Anda perlu menyematkan shortcode plugin ini ke website Anda agar slider bisa ditampilkan.<\/p><p class=\"wp-block-paragraph\">Namun, Anda hanya bisa menyematkannya pada <strong>body<\/strong> atau <strong>widget<\/strong> website. Kalau tidak, konten tidak akan muncul. Nah, untuk mengatasi masalah ini, Anda bisa menggunakan fungsi WordPress <strong>do_shortcode<\/strong>.<\/p><p class=\"wp-block-paragraph\">Fungsi ini memungkinkan Anda menyematkan shortcode di area mana pun yang Anda inginkan, termasuk header. Berikut adalah contoh kode fungsi ini:<\/p><pre class=\"wp-block-preformatted\">&lt;?php echo do_shortcode( '[masukkan shortcode Anda di sini]' ); ?&gt;<\/pre><p class=\"wp-block-paragraph\">Untuk menggunakannya, Anda perlu mengakses dan mengubah <strong>file tema<\/strong>. Jangan lupa untuk <a href=\"\/id\/tutorial\/cara-backup-wordpress\/\">backup website WordPress<\/a> dulu serta gunakan <a href=\"\/id\/tutorial\/cara-membuat-child-theme-wordpress\/\">child theme WordPress<\/a> untuk menghindari risiko kehilangan data kalau terjadi kesalahan.<\/p><h2 class=\"wp-block-heading\" id=\"h-bagaimana-cara-menggunakan-wordpress-do-shortcode\">Bagaimana Cara Menggunakan WordPress do_shortcode?<\/h2><p class=\"wp-block-paragraph\">Sekarang, mari coba menambahkan shortcode menggunakan WordPress <strong>do_shortcode<\/strong>.<\/p><p class=\"wp-block-paragraph\">Sebagai contoh, anggap saja Anda ingin memasukkan <strong>slider<\/strong> pada <strong>header <\/strong>tema menggunakan MetaSlider (pastikan Anda sudah <a href=\"\/id\/tutorial\/cara-install-plugin-wordpress\/\">menginstal plugin WordPress<\/a> ini). Namun, Anda tidak memiliki widget untuk area header.<\/p><p class=\"wp-block-paragraph\">Jadi, Anda perlu menyematkan shortcode slider ke <strong>file header tema<\/strong>. Untuk melakukannya, ikuti langkah-langkah berikut:<\/p><ol class=\"wp-block-list\">\n<li>Klik <strong>MetaSlider <\/strong>di sidebar kiri <a href=\"\/id\/tutorial\/login-wordpress\/\">dashboard admin WordPress<\/a>.<\/li>\n\n\n\n<li><strong>Salin<\/strong> shortcode di bagian kanan bawah halaman.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"768\" height=\"364\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/10\/shortcode-metaslider-di-dashboard-wordpress.png\/public\" alt=\"shortcode metaslider di dashboard wordpress\" class=\"wp-image-31649\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/10\/shortcode-metaslider-di-dashboard-wordpress.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/10\/shortcode-metaslider-di-dashboard-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/10\/shortcode-metaslider-di-dashboard-wordpress.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Kalau Anda menyadarinya, shortcode MetaSlider sudah ada di dalam fungsi WordPress <strong>do_shortcode<\/strong>. Anda kemudian bisa lanjut mengedit file <strong>header<\/strong> tema dengan mengakses <strong>file manager<\/strong> provider hosting Anda atau <a href=\"\/id\/tutorial\/cara-menggunakan-filezilla\/\">klien FTP <\/a>seperti <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">FileZilla<\/a>.<\/p><p class=\"wp-block-paragraph\">Di tutorial ini, kami akan mengedit file tema menggunakan <a href=\"\/id\/tutorial\/cara-menggunakan-file-manager-hostinger\/\">File Manager Hostinger<\/a>, yang juga bisa diikuti untuk <strong>klien FTP<\/strong>:<\/p><ol class=\"wp-block-list\">\n<li>Akses <strong>hPanel<\/strong> lalu klik <strong>File Manager<\/strong>.<\/li>\n\n\n\n<li>Buka folder <strong>public_html<\/strong> dan arahkan ke <strong>wp-contents -&gt; themes.<\/strong><\/li>\n\n\n\n<li>Temukan dan akses <strong>folder tema yang sedang Anda gunakan<\/strong>.<\/li>\n\n\n\n<li>Buka <strong>header.php<\/strong>, lalu scroll ke bagian bawah halaman dan letakkan fungsi WordPress <strong>do_shortcode <\/strong>di atas tag <strong>&lt;\/header&gt;<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"768\" height=\"406\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/10\/fungsi-do_shortcode-wordpress-metaslider-di-hostinger-file-manager.png\/public\" alt=\"fungsi do_shortcode wordpress metaslider di hostinger file manager\" class=\"wp-image-31650\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/10\/fungsi-do_shortcode-wordpress-metaslider-di-hostinger-file-manager.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/10\/fungsi-do_shortcode-wordpress-metaslider-di-hostinger-file-manager.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/10\/fungsi-do_shortcode-wordpress-metaslider-di-hostinger-file-manager.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n<\/div><ol class=\"wp-block-list\" start=\"5\">\n<li><strong>Simpan<\/strong> dan cek tampilan website Anda.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"768\" height=\"372\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/10\/hasil-fungsi-do_shortcode-wordpress-saat-ditampilkan.png\/public\" alt=\"hasil fungsi do_shortcode wordpress saat ditampilkan\" class=\"wp-image-31651\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/10\/hasil-fungsi-do_shortcode-wordpress-saat-ditampilkan.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/10\/hasil-fungsi-do_shortcode-wordpress-saat-ditampilkan.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/10\/hasil-fungsi-do_shortcode-wordpress-saat-ditampilkan.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Terkadang, mengedit file core (inti) tema bisa merusak template WordPress Anda. Untuk mengatasinya, Anda harus mengubah CSS agar tampilan website Anda terlihat lebih baik.<\/p><p class=\"wp-block-paragraph\">Kalau belum tahu caranya, silakan baca tutorial kami tentang <a href=\"\/id\/tutorial\/cara-inspect-element\/\" target=\"_blank\" rel=\"noreferrer noopener\">cara inspect element<\/a> dengan Chrome untuk melihat elemen CSS pada website.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/id\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-37614\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-jadi-sudah-tahu-kegunaan-wordpress-do-shortcode\">Jadi, Sudah Tahu Kegunaan WordPress do_shortcode?<\/h2><p class=\"wp-block-paragraph\">Di tutorial ini, Anda sudah mempelajari cara menggunakan shortcode dan menampilkannya menggunakan fungsi WordPress <strong>do_shortcode<\/strong>.<\/p><p class=\"wp-block-paragraph\">Cukup masukkan fungsi do_shortcode WordPress ke dalam file tema, lalu Anda pun siap menggunakannya. Jangan lupa untuk membackup website sebelum mengedit file tema untuk menghindari risiko kehilangan data.<\/p><p class=\"wp-block-paragraph\">Masih memiliki pertanyaan mengenai topik ini? Yuk sampaikan lewat kolom komentar di bawah artikel ini!<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Artikel Lainnya Seputar Aspek Teknis WordPress                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><a href=\"\/id\/tutorial\/cara-membuat-multisite-wordpress\/\">WordPress Multisite<\/a><br>\n<a href=\"\/id\/tutorial\/cara-membuat-custom-post-types\/\">Custom Post Type di WordPress<\/a><br>\n<a href=\"\/id\/tutorial\/custom-css-wordpress\/\">Cara Menambahkan Custom CSS ke WordPress<\/a><br>\n<a href=\"\/id\/tutorial\/edit-html-wordpress\/\">Cara Mengedit HTML di WordPress<\/a><br>\n<a href=\"\/id\/tutorial\/headless-wordpress\/\">Headless WordPress<\/a><\/p>\n                    <\/div>\n        \n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Shortcode memungkinkan Anda menambahkan fungsi pada website dengan mudah. Untuk menempatkannya di bagian mana pun pada website, Anda bisa menggunakan fungsi WordPress do_shortcode. Di artikel ini, kami akan menunjukkan cara menggunakan do_shortcode WordPress untuk menjalankan fungsi yang Anda inginkan. Tapi sebelumnya, kami akan mulai dulu dengan menjelaskan definisi dan fungsi shortcode apabila Anda belum tahu. [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/do_shortcode-wordpress\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"%title%","rank_math_description":"Mau menggunakan shortcode dengan mudah di WordPress? Gunakan do_shortcode! Yuk baca cara menggunakan WordPress do_shortcode di sini!","rank_math_focus_keyword":"do_shortcode wordpress","footnotes":""},"categories":[4859],"tags":[7571,6570,4860],"class_list":["post-5384","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-shortcode","tag-tutorial-wordpress","tag-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-do_shortcode\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-usar-do-shortcode-wordpress\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/do_shortcode-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/usar-do_shortcode-wordpress\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/do_shortcode-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/usar-do_shortcode-wordpress\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/usar-do_shortcode-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/usar-do_shortcode-wordpress\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-usar-do-shortcode-wordpress\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/5384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=5384"}],"version-history":[{"count":16,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/5384\/revisions"}],"predecessor-version":[{"id":31728,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/5384\/revisions\/31728"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=5384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=5384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=5384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}