Loncat ke Konten Utama

Bagaimana menambahkan antarmuka shortcode di WordPress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Jika Anda mengembangkan situs WordPress untuk klien, kemungkinan besar Anda memiliki kode pendek untuk klien. Masalahnya adalah banyak pemula yang tidak tahu cara menambahkan shortcode dan jika ada parameter yang ditambahkan, itu menjadi lebih rumit. Shortcake memberi pengguna solusi mudah untuk menambahkan shortcode ke WordPress.

Dalam tutorial ini, saya akan menunjukkan cara menambahkan antarmuka kode pendek di WordPress untuk menyederhanakan penambahan artikel dan halaman.

Apa itu Shortcake?

WordPress menawarkan fitur yang memungkinkan Anda menambahkan kode yang dapat dieksekusi di posting dan halaman melalui shortcode. Beberapa tema dan plugin WordPress memungkinkan pengguna menambahkan fungsionalitas ke blog mereka menggunakan shortcode. Namun, kode pendek ini bisa menjadi sangat sulit digunakan, yang membuat penyesuaian menjadi sulit.

Misalnya, dengan tema WordPress dasar, jika ada kode pendek untuk memasukkan tombol, maka kemungkinan besar pengguna perlu mengisi sekitar lima parameter untuk kode pendek sebagai berikut:

[url button = "http://example.com" title = "Pelajari lebih lanjut" color = "purple" target = "newwindow"]

Di sinilah Shortcake masuk, yang memungkinkan Anda mengelola kode pendek dengan lebih baik.

shortcake-bakery-plugin

Langkah pertama

Tutorial ini untuk pengguna yang baru mengenal pengembangan WordPress. Pengguna yang suka menyesuaikan tema mereka juga akan menemukan tutorial ini menarik.

Yang perlu Anda lakukan pertama kali adalah menginstal dan mengaktifkan ekstensi Shortcase (Shortcode UI).

Anda sekarang harus memiliki kode pendek yang menerima beberapa parameter. Untuk tutorial ini, kita akan membuat shortcode sederhana yang memungkinkan pengguna menambahkan tombol di postingan dan halaman WordPress mereka. Ini adalah contoh sederhana untuk kode pendek kami, dan Anda dapat menambahkan kode ini di plugin kamu atau dalam file functions.php dari tema anak Anda.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

add_shortcode ('cta-button', 'cta_button_shortcode'); function cta_button_shortcode ($ atts) {ekstrak (shortcode_atts (array ('title' => 'Judul', 'url' => ''), $ atts)); kembali ' '. $ title. ' '; }

Anda mungkin juga memerlukan beberapa kode CSS untuk tombol tersebut.

.cta-button {padding: 10px; ukuran huruf: 18px; border: 1px solid #FFF; border-radius: 7px; warna: #FFF; background-color: #50A7EC; }

Ini adalah cara menampilkan tombol yang dimaksud, pengguna harus mengetikkan kode pendek berikut:

[cta-button title = »Unduh Sekarang» url = »http://example.com»]

Sekarang Anda memiliki kode pendek yang menerima parameter, kami sekarang akan membuat antarmuka untuk itu.

Cara mendaftarkan sebuah antarmuka untuk shortcode dengan ShortCacke

Shortcake API memungkinkan Anda untuk menyimpan shortcode di antarmuka pengguna. Anda perlu menjelaskan atribut mana yang diterima shortcode, jenis field dan format posting apa yang akan menampilkan UI (antarmuka pengguna).

Berikut adalah contoh potongan kode yang dapat Anda gunakan untuk mendaftarkan kode pendek di antarmuka pengguna Shortcake.

shortcode_ui_register_for_shortcode (/ ** Shortcode Anda * / 'cta-button', / ** Label shortcode Anda dan ikonnya * / array (/ ** Label diperlukan. * / 'label' => 'Add Button', / ** Icone. Src atau dashicons- $ icon. * / 'ListItemImage' => 'dashicons-lightbulb', / ** Shortcode Attributes * / 'attrs' => array (/ ** * Semua bidang yang akan menerima nilai pengguna akan memiliki array mereka sendiri yang ditentukan sebagai berikut. * Kode pendek ini menerima dua parameter url dan judul * Kami akan menentukan UI untuk judul. * / array (/ ** Label ini akan ditampilkan pada antarmuka pengguna * / 'label' => 'Title', / ** ini adalah atribut yang digunakan untuk shortcode * / 'attr' => 'title', / ** Tentukan jenis bidang, didukung: teks , checkbox, textarea, radio, select, email, url, number, and date. * / 'type' => 'text', / ** Tambahkan deskripsi 'description' => 'Description',), / ** We sekarang mari kita tentukan UI untuk bidang tautan * / array ('label' => 'URL', 'attr' => 'url', 'type' = > 'text', 'description' => 'Full URL',),),), / ** Format postingan untuk menampilkan UI * / 'post_type' => array ('post', 'page' ),));

Hanya itu yang perlu Anda lakukan untuk menampilkan kode pendek di UI. Sekarang Anda dapat mulai mengedit artikel agar dapat menggunakan kode pendek. Yang perlu Anda lakukan hanyalah mengklik tombol tambahkan media. Anda akan melihat bagian baru berjudul " Sisipkan Elemen Posting". Dengan mengkliknya, Anda akan dapat melihat berbagai shortcode yang telah Anda buat.

insertpostelement

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Dengan mengklik ikon tersebut, Anda akan melihat UI yang memungkinkan Anda menyesuaikan kode pendek.

shortcodeui

Cara menambahkan shortcode dengan beberapa field

Pada contoh pertama, kami menggunakan kode pendek yang cukup mendasar. Sekarang kita akan membuat hal-hal sedikit lebih rumit dan lebih bermanfaat. Kami akan menambahkan kode pendek yang memungkinkan pengguna untuk memilih warna tombol.

Kami pertama-tama akan menambahkan kode pendek. Ini pada dasarnya adalah kode yang sama dengan yang di atas, satu-satunya pengecualian adalah kita akan menambahkan bidang untuk warnanya.

add_shortcode ('mybutton', 'my_button_shortcode'); function my_button_shortcode ($ atts) {ekstrak (shortcode_atts (array ('color' => 'blue', 'title' => 'Title', 'url' => ''), $ atts)); kembali ' '. $ title. ' '; }

Karena kode pendek kami menampilkan tombol dengan warna berbeda, kami juga perlu memperbarui kode CSS kami.

. mybutton {padding: 10px; ukuran huruf: 18px; border: 1px solid #FFF; border-radius: 7px; warna: #FFF; } .blue-button {background-color: #50A7EC; } .orange-button {background-color: #FF7B00; } .green-button {background-color: #29B577; }

Ini adalah bagaimana tombol ini akan terlihat.

warna-warni-tombol-shortcode

Sekarang kode pendek kita sudah siap, langkah selanjutnya adalah mendaftarkannya di Shortcake. Kami akan menggunakan kode yang sama, perbedaannya di sini adalah kami akan memberikan parameter tambahan untuk menampilkan bidang warna.

shortcode_ui_register_for_shortcode (/ ** Handle shortcode Anda * / 'mybutton', / ** Label dan ikon Shortcode Anda * / array (/ ** Label untuk antarmuka pengguna shortcode Anda. Bagian ini diperlukan. * / 'label' => 'Add tombol berwarna-warni ', / ** Ikon atau lampiran gambar untuk kode pendek. Opsional. src atau dashicons- $ icon. * /' listItemImage '=>' dashicons-flag ', / ** Atribut Shortcode * /' attrs '=> array (/ ** * Setiap atribut yang menerima input pengguna akan memiliki arraynya sendiri yang ditentukan seperti ini * Kode pendek kami menerima dua parameter atau atribut, judul dan URL * Mari kita tentukan UI untuk bidang judul. * / array (/ ** Ini label akan muncul di antarmuka pengguna * / 'label' => 'Title', / ** Ini adalah attr sebenarnya yang digunakan dalam kode yang digunakan untuk shortcode * / 'attr' => 'title', / ** Define input type. Jenis yang didukung adalah teks, kotak centang, area teks, radio, pilih, email, url, nomor, dan tanggal. * / 'Type' => 'text', / ** Tambahkan deskripsi yang berguna untuk pengguna * / 'description' => ' Silakan masukkan teks tombol ',), / ** Sekarang kita akan menentukan UI untuk bidang URL * / array ('label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'Full URL',), / ** Akhirnya kita akan menentukan UI untuk Pemilihan Warna * / array ('label' => 'Color', 'attr' => 'color', / ** Kita akan menggunakan kolom pilihan daripada teks * / 'type' => 'select', 'options' => array ('blue' => 'Blue', 'orange' => 'Orange', 'green' => 'Green',),),), / ** Anda dapat memilih jenis posting mana yang akan menampilkan shortcode UI * / 'post_type' => array ('post', 'page'),));

Itu saja ! Sekarang ketika Anda mengedit atau menulis posting, Anda akan dapat melihat kode pendek baru, masih di bagian yang sama di jendela media.

postelements

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Dengan mengklik pada shortcode baru, antarmuka kustomisasi shortcode akan ditampilkan dan Anda dapat menentukan nilainya.

colorui

Itu saja untuk tutorial ini. Semoga membantu Anda membuat antarmuka yang lebih baik untuk kode pendek Anda di WordPress. Selamat Tahun Baru untukmu!

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
7 saham
saham7
menciak
Register