Pernahkah Anda melihat area tabber di situs populer yang memungkinkan Anda melihat pos populer, terkini, dan unggulan hanya dengan satu klik? Ini disebut widget tabber jQuery, dan ini memungkinkan Anda menghemat ruang di layar pengguna dengan menggabungkan widget yang berbeda menjadi satu. Pada artikel ini, kami akan menunjukkan cara menambahkan widget jQuery Tabber di WordPress.
Mengapa Anda Harus Menambahkan Widget Tabtop jQuery?
Saat menjalankan situs web WordPress, Anda dapat dengan mudah menambahkan item ke sidebars Anda menggunakan widget drag and drop. Seiring pertumbuhan situs Anda, mungkin Anda merasa tidak memiliki cukup ruang di bilah sisi untuk menampilkan semua konten yang bermanfaat. Tepatnya saat tabber berguna. Ini memungkinkan Anda untuk menampilkan item yang berbeda di area yang sama. Pengguna dapat mengklik setiap tab dan melihat konten yang paling diminati. Banyak situs nama besar menggunakannya untuk menunjukkan artikel populer hari ini, minggu ini, dan bulan ini. Dalam tutorial ini kami akan menunjukkan cara membuat widget tabber. Namun, kami tidak menunjukkan kepada Anda apa yang harus ditambahkan di tab Anda. Anda dapat menambahkan pada dasarnya apapun yang Anda suka.
Catatan: tutorial ini untuk pengguna tingkat menengah dan akan membutuhkan pengetahuan HTML dan CSS. Bagi pengguna tingkat pemula, silakan merujuk ke artikel ini.
Membuat Widget Tab Widget JQuery di WordPress
Mari kita mulai. Hal pertama yang perlu Anda lakukan adalah membuat folder pada desktop Anda dan menamainya situs-tabber-widget . Setelah itu, Anda perlu membuat tiga file di dalam folder ini menggunakan editor teks biasa seperti Notepad.
File pertama yang akan kita buat adalah wpb-tabber-widget.php . Ini akan berisi kode HTML dan PHP untuk membuat tab dan widget WordPress kustom. File kedua yang akan kita buat adalah wpb-tabber-style.css , dan itu akan berisi styling CSS untuk wadah tab. File ketiga dan terakhir yang akan kita buat adalah wpb-tabber.js , yang akan berisi skrip jQuery untuk mengganti tab dan menambahkan animasi.
Mari kita mulai dengan wpb-tabber-widget.php mengajukan. Tujuan dari file ini adalah untuk membuat sebuah plugin yang mendaftarkan sebuah widget. Jika ini adalah pertama kalinya Anda membuat widget WordPress, sebaiknya Anda melihat cara membuat panduan widget WordPress khusus atau cukup salin dan tempel kode ini di wpb-tabber-widget.php mengajukan:
situs
Plugin URI: https://www.site.com
Keterangan: Widget tabey jquery sederhana.
Versi: 1.0
Penulis: site
Penulis URI: https://www.site.com
Lisensi: GPL2
* /
// membuat widget
kelas WPBTabberWidget meluas WP_Widget {
fungsi WPBTabberWidget () {
$ widget_ops = array (
'classname' => 'WPBTabberWidget',
'description' => 'Widget Tabloid JQuery Sederhana'
);
$ this-> WP_Widget (
'WPBTabberWidget',
'situs Tabber Widget',
$ widget_ops
);
}
widget fungsi ($ args, $ instance) {// widget sidebar output
fungsi wpb_tabber () {
// Sekarang kita enqueue stylesheet dan jQuery script kita
wp_register_style ('wpb-tabber-style', plugins_url ('wpb-tabber-style.css', __FILE__));
wp_register_script ('wpb-tabber-widget-js', plugins_url ('wpb-tabber.js', __FILE__), array ('jquery'));
wp_enqueue_style ('wpb-tabber-style');
wp_enqueue_script ('wpb-tabber-widget-js');
// Membuat tab Anda akan menambahkan kode Anda sendiri ke dalam setiap tab
?>
- Tab 1
- Tab 2
- Tab 3
Pada kode di atas, pertama kita buat sebuah plugin dan kemudian di dalam plugin itu kita buat sebuah widget. Di bagian keluaran widget kami menambahkan skrip dan lembar gaya dan kemudian kami menghasilkan keluaran HTML untuk tab kami. Terakhir kita mendaftarkan widget. Ingat, Anda perlu menambahkan konten yang ingin ditampilkan di setiap tab.
Sekarang setelah kita membuat widget dengan kode PHP dan HTML yang dibutuhkan untuk tab kita, langkah selanjutnya adalah menambahkan jQuery untuk menampilkannya sebagai tab di tab container. Untuk melakukan itu Anda perlu menyalin dan menyisipkan kode ini wp-tabber.js mengajukan.
(fungsi ($) {
$ ("tab_content"). hide ();
$ ("ul.tabs li: first") addClass ("active") show ();
$ ("tab_content: first") show ();
$ ("ul.tabs li") klik (fungsi () {
$ ("ul.tabs li") removeClass ("aktif");
$ (this) .addClass ("aktif");
$ ("tab_content"). hide ();
var activeTab = $ (this) .find ("a") attr ("href");
// $ (activeTab) .fadeIn ();
jika ($ .browser.msie) {$ (activeTab) .how ();}
lain {$ (activeTab) .fadeIn ();}
kembali salah;
});
}) (jQuery);
Sekarang widget kita sudah siap dengan jQuery, langkah terakhir adalah menambahkan styling ke tab. Kami telah membuat lembar kerja contoh yang dapat Anda salin dan tempel wpb-tabber-style.css mengajukan:
ul.tabs {
posisi: relatif;
z-index: 1000;
float: kiri;
border-left: 1px solid # C3D4EA;
}
ul.tabs li {
posisi: relatif;
overflow: tersembunyi;
tinggi: 26px;
float: kiri;
margin: 0;
padding: 0;
line-height: 26px;
background-color: # 99B2B7;
border: 1px solid # C3D4EA;
border-left: none;
}
ul.tabs li a {
tampilan: blok;
padding: 0 10px;
garis besar: tidak ada;
hiasan teks: tidak ada;
}
html ul.tabs li.active,
html ul.tabs li.active a: hover {
background-color: # D5DED9;
border-bottom: 1px solid # D5DED9;
}
.widget-area .widget .tabs a {
warna: #FFFFFF;
}
.tab_container {
posisi: relatif;
atas: -1px;
z-index: 999;
lebar: 100%;
float: kiri;
ukuran font: 11px;
background-color: # D5DED9;
border: 1px solid # C3D4EA;
}
.tab_content {
padding: 7px 11px 11px 11px;
garis-tinggi: 1,5;
}
.tab_content ul {
margin: 0;
padding: 0;
daftar-gaya: tidak ada;
}
.tab_content li {
margin: 3px 0;
}
.tab-clear {
jelas: keduanya;
}
situs
situs
Kami berharap tutorial ini membantu Anda membuat tabber jQuery untuk situs WordPress Anda. Untuk pertanyaan dan umpan balik Anda dapat memberi komentar di bawah atau bergabung dengan kami di Twitter atau Google+.