Cara Menambahkan Shortcode Tombol CSS3 yang Keren di WordPress

Jika Anda bukan penggemar berat bekerja dengan editor HTML di WordPress atau ingin memberikan beberapa peningkatan keren untuk tema premium Anda, shortcode adalah solusi yang bagus untuk memperluas kemampuan editor posting Anda sambil menjaga hal-hal sederhana.


Saya berpikir bahwa akan keren untuk menambahkan semacam tombol ke situs saya ketika memberikan tautan ke file gratis atau situs lain (tentu saja menggunakan kode pendek) jadi setelah menambahkan kode pendek ke tema saya, saya pikir saya akan membagikan kode di sini di blog sehingga orang lain tertarik untuk menambahkan tombol pintas ke situs mereka bisa dengan mudah menyalin dan menempelkan kode saya ke tema mereka dan tidak perlu menghabiskan terlalu banyak waktu membuat kode pendek dan menata tombol.

Apa itu Shortcode?

Shortcode diperkenalkan kembali di WordPress 2.5 dan memungkinkan Anda membuat kode makro untuk digunakan dalam konten posting. Kode pendek sederhana akan terlihat seperti ini:

[Kode pendek]

Yang ketika ditambahkan ke editor posting akan mengembalikan nilai kode pendek seperti yang didefinisikan dalam file tema Anda. Saya akan menunjukkan kepada Anda cara membuat kode pendek yang memungkinkan Anda untuk dengan mudah menambahkan tombol ke editor posting Anda tanpa menyentuh kode apa pun.

Menambahkan Kode Pendek “tombol” Tersuai

Hal pertama yang perlu Anda lakukan adalah menambahkan kode php untuk kode pendek Anda ke tema Anda. Kode berikut dapat digunakan untuk menambahkan tombol sederhana ke situs Anda. Kode ini dapat ditempatkan di file functions.php. Jika Anda menggunakan tema pihak ke-3, ini paling baik dilakukan melalui Tema Anak WordPress.

function myprefix_button_shortcode ($ atts, $ content = null) {

// Ekstrak atribut kode pendek
ekstrak (shortcode_atts (array (
'url' => '',
'title' => '',
'target' => '',
'text' => '',
'warna' => 'hijau',
), $ atts));

// Gunakan nilai teks untuk item tanpa konten
$ content = $ text? $ text: $ content;

// Tombol Kembali dengan tautan
if ($ url) {

$ link_attr = array (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('blank' == $ target)? '_blank': '',
'class' => 'myprefix-button color-'. esc_attr ($ color),
);

$ link_attrs_str = '';

foreach ($ link_attr as $ key => $ val) {

if ($ val) {

$ link_attrs_str. = ''. $ key. '= "'. $ val. '"';

}

}


kembali '' do_shortcode ($ content). '';

}

// Tidak ada tautan yang ditentukan sehingga tombol kembali sebagai rentang
lain {

kembali '' do_shortcode ($ content). '';

}

}
add_shortcode ('tombol', 'myprefix_button_shortcode');

Menggunakan Shortcode Di Editor Posting Anda

Sekarang Anda memiliki kode pendek, Anda dapat menambahkan “tombol” baru (yang terlihat seperti tautan biasa sekarang karena kami belum membuatnya) ke editor pos Anda.

// Contoh penggunaan 1
[tombol href = "LINK ANDA" target = "self"] Teks Tombol [/ tombol]

// Contoh penggunaan 2
[tombol href = "LINK ANDA" target = "self" text = "Teks Tombol"]

Styling Tombol

Apa gunanya membuat kode pendek jika itu hanya akan terlihat seperti tautan biasa? Tidak ada. Itu sebabnya saya akan menunjukkan kepada Anda cara menambahkan CSS3 keren untuk menata tombol unduhan dan membuatnya terlihat seksi.

Seperti yang Anda perhatikan dalam kode pendek saya menambahkan kelas “tombol-myprefix” sehingga Anda dapat dengan mudah gaya itu melalui file style.css Anda. Masukkan kode berikut ke stylesheet Anda untuk membuat tombol biru yang bagus seperti yang ada di gambar.

/ * Gaya Tombol Utama * /
.myprefix-button {background: # 65A343; text-shadow: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); -moz-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); kursor: pointer; display: inline-block; overflow: disembunyikan; padding: 1px; vertical-align: tengah; }

.rentang tombol myprefix {border-top: 1px solid rgba (255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; warna: #fff; display: blok; font-weight: bold; ukuran font: 1em; padding: 6px 12px; text-shadow: 1px 1px 1px rgba (0, 0, 0, 0.25); }

/ * Arahkan * /
.tombol-myprefix: hover {background: # 558938; teks-dekorasi: tidak ada; }

/ * Aktif * /
.tombol-myprefix: active {background: # 446F2D; }

Tombol Kode Pintas Hijau

Dukungan Multi Warna

Jika Anda perhatikan kode pendek memiliki parameter warna yang dapat Anda gunakan untuk menambahkan gaya CSS untuk warna tombol yang berbeda. Misalnya jika Anda dapat menambahkan opsi warna biru dengan menambahkan CSS tambahan ini:

/ * Tombol Biru * /
.myprefix-button.color-blue {background: # 2981e4}

/ * Tombol Biru Melayang-layang * /
.myprefix-button.color-blue: hover {background: # 2575cf}

/ * Tombol Biru Aktif * /
.myprefix-button.color-blue: active {background: # 0760AD}

Sekarang cukup gunakan parameter warna dalam kode pendek:

[tombol href = "LINK ANDA" target = "self" color = "blue"] Teks Tombol [/ tombol]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map