MANUAL PENGGUNAAN TEMA WORDPRESS UNIVERSITAS GADJAH MADA VERSI 2.0

Transkripsi

1 MANUAL PENGGUNAAN TEMA WORDPRESS UNIVERSITAS GADJAH MADA VERSI 2.0 Oleh: PT Tonjoo Gagas Teknologi 2016

2 1 Daftar Isi Daftar Isi... 1 Memulai Dari Awal... 2 Instalasi Tema... 8 Plugin Pendukung Theme Options (Pengaturan Tampilan) Page Builder Page Template Post Type Shortcode... 26

3 2 MEMULAI DARI AWAL Berikut adalah panduan step by step cara instalasi dan pengaturan dasar sebelum wordpress UGM v2 ini siap untuk digunakan. Sebelum memulai langkah di bawah, pastikan hak akses untuk website ini sudah benar agar proses instalasi plugin baru dapat dilakukan tanpa kendala. 1. Pengaturan Bahasa Pada langkah awal ini, mari kita sesuaikan bahasa di admin WordPress menjadi bahasa Indonesia agar posisi dan nama menu-menu yang saya terangkan disini sesuai dengan nama menu yang anda gunakan. Atur bahasa dengan membuka Setting > General lalu ubah Site Language menjadi Bahasa Indonesia, simpan. Proses menyimpan akan sedikit memakan waktu karena WordPress akan mengunduh modul Bahasa Indonesia yang dibutuhkan. 2. Menginstall Tema Unduh tema versi terakhir yang sudah disediakan di lalu install tema tersebut di WordPress yang Anda kehendaki menggunakan theme installer bawaan wordpress di Tampilan > Tema lalu pilih Tambah Baru dan Unggah Tema berupa file zip yang telah anda unduh tadi dari repo-ugm 3. Menginstall Polylang Polylang digunakan untuk mengaktifkan fitur multi bahasa di WordPress. Jika di WordPress Anda belum terinstall plugin Polylang, maka silahkan install plugin tersebut dengan cara membuka Plugin > Tambah Baru lalu di kolom pencarian plugin silahkan ketik Polylang, lalu klik Instal Sekarang pada plugin tersebut. Jangan lupa untuk mengaktifkan plugin tersebut setelah instalasi selesai. 4. Pengaturan Polylang Ada beberapa pengaturan dasar yang harus dilakukan, yaitu sebagai berikut: 4.1. Tambah Bahasa Tambahkan bahasa yang akan kita gunakan, misal adalah Bahasa Indonesia dan English dengan cara membuka Pengaturan > Bahasa lalu tambahkan bahasa yang dikehendaki satu persatu.

4 Pilih Bahasa Indonesia sebagai bahasa default Setelah menambah bahasa, pastikan bahasa default yang digunakan adalah Bahasa Indonesia. Untuk mengetahui bahasa default dapat dilihat logo bintang hitam pada daftar bahasa. Untuk mengubah silahkan klik bintang yang dikehendaki Disable media translation dan browser detection Pengaturan media translation perlu dilakukan agar setiap bahasa tidak memerlukan gambar / media yang berbeda. Sedangkan pengaturan browser detection perlu dilakukan agar browser tidak mendeteksi bahasa yang digunakan, sehingga tetap mengikuti pengaturan default polylang dalam hal ini Bahasa Indonesia. Silahkan non aktifkan settingan ini dengan membuka Pengaturan > Bahasa lalu pilih tab Pengaturan, lalu non aktifkan module Media dan module Deteksi bahasa peramban

5 Tambahkan Event dan Gallery di transation Jika anda menghendaki translasi untuk post type Event dan Gallery, silahkan aktifkan translasi untuk kedua post type tersebut dengan membuka Pengaturan > Bahasa lalu pilih tab Pengaturan, lalu pilih Custom post types and Taonomies, centang Event dan Galleries lalu Simpan Perubahan.

6 5 5. Regenerate Thumbnails Jika WordPress yang anda gunakan sekarang bukan instalasi baru, artinya sudah digunakan sekian waktu dan sudah mempunyai relatif banyak artikel dan gambar, maka anda perlu untuk menjalankan langkah ini. Regenerate thumbnails berarti mengatur ulang ukuran gambar yang sudah ada sebelumnya agar sesuai dengan tema baru UGM v2 yang akan digunakan saat ini. Untuk melakukan nya silahkan install plugin Regenerate Thumbnails dengan cara membuka Plugin > Tambah Baru lalu di kolom pencarian plugin silahkan ketik Regenerate thumbnails, lalu klik Instal Sekarang pada plugin tersebut. Jangan lupa untuk mengaktifkan plugin tersebut setelah instalasi selesai. Setelah instalasi selesai, silahkan buka Perkakas > Regen. Thumbnails, lalu pada halam tersebut pilih Regenerate All Thumbnails, tunggu sampe proses selesai. 6. Setting pengaturan tampilan Setting ini digunakan untuk mengatur tampilan header, footer, icon dan warna yang digunakan di halaman depan UGM. Untuk mengakses halaman pengaturan ini silahkan buka Pengaturan Tampilan. Pada halaman ini silahkan dilengkapi kolom-kolom yang tersedia lalu klik Save Options. 7. Setting Menu & Menu Polylang Terdapat 3 (tiga) lokasi menu yang terdapat dalam wordpress UGM ini, yaitu Top Menu, Primary Menu, dan Footer Menu, berikut adalah screenshot lokasi menu: Untuk menambahkan menu ini, silahkan buka Tampilan > Menu. Pada halaman ini kita dapat memilih menu mana yang akan kita edit, lalu setelah itu kita dapat menambahkan menu dengan cara memilih halaman atau link yang tersedia di sebelah kiri lalu klik Tambahkan ke Menu untuk menambahkan. Apabila pilihan menu belum tersedia, silahkan tambahkan menu dengan cara memilih buat menu baru, isi Nama Menu sesuai keinginan lalu pilih Buat Menu, setelah itu silahkan pilih Lokasi tema, lokasi tema ini mungkin akan berjumlah lebih dari 3, terhantung jumlah bahasa yang anda tambahkan ke polylang

7 6 karena setiap lokasi menu akan diduplikasi sesuai dengan jumlah bahasa, berguna untuk membedakan menu yang terdapat pada setiap bahasa. Setelah memilih lokasi, maka menu tersebut siap untuk ditambahkan link halaman. Untuk menambahkan menu pengalih bahasa, mula-mula anda harus mengaktifkan link halaman tersebut dengan cara memilih Opsi Layar di kanan atas, lalu centang Pengalih Bahasa, maka pilihan pengalih bahasa pun akan tersedia di bilah kiri layar dan siap untuk ditambahkan. Berikut adalah screenshot pengaturan menu item pengalih bahasa: Pada awalnya di halaman depan mungkin anda akan menemui bahwa item pengalih bahasa tersebut hanya berisi satu bahasa padahal bahasa yang di atur di polylang ada lebih dari satu, itu disebabkan karena memang belum ada posting atau artikel yang diatur untuk bahasa lain selain bahasa indonesia tersebut, oleh karena itu minimal ada satu artikel berbahasa inggris misal untuk memunculkan sub menu EN di pengalih bahasa. 8. Setting Footer Widget Pada bagian bawah website demo kita dapat melihat beberapa daftar link yang tertampil, elemen tersebut adalah menu yang ditampilkan di widget bagian bawah atau footer widget. Untuk menambahkan widget tersebut pada website anda, mula-mula silahkan buat menu di halaman Tampilan > Menu seperti langkah-langkah pada bagian menu diatas, hanya saja kali ini tidak perlu

8 7 memilih lokasi menu. Setelah itu silahkan buka Tampilan > Widget, lalu di bilah sebelah kiri silahkan pilih kotak Menu Tersuai, di dropdown tersebut pilih Footer Widget, lalu Tambahkan Widget, maka menu tersuai ini pun akan ditembahkan di Footer Widget yang terdapat di bilah sebelah kanan. Setelah itu Anda dapat mengatur menu tersebut seperti contoh pada gambar berikut: 9. Setting Homepage Homepage adalah halaman pertama yang tampil ketika kita mengakses sebuah website. Untuk mengatur homepage website ini, silahkan buat sebuah Page menggunakan page builder yang telah disediakan. Lalu setelah itu buka Pengaturan > Membaca. Pada bagian Laman depan menampilkan silahkan pilih Halaman statis lalu pada dropdown Halaman depan pilih page yang telah anda buat sebelumnya. Anda juga dapat mengatur dimana halaman blog anda akan tampil dengan cara membuat sebuah Page bernama blog lalu pada Halaman statis bagian Laman Pos-pos pilih halaman blog tersebut. Berikut screenshot nya:

9 8 INSTALASI TEMA Untuk memasang Tema UGM pada Wordpress, yang dilakukan adalah sebagai berikut: 1. Pilih menu Tampilan > Tema, lalu klik tombol Tambahkan Baru 2. Pada laman Tambahkan Tema, klik tombol Unggah Tema, lalu unggah file ugm-theme.zip pada form yang telah disediakan, kemudian klik Install Sekarang. 3. Wordpress akan melakukan proses instalasi. Setelah proses selesai, klik tautan Aktifkan.

10 9 Setelah tema sukses terpasang, langkah selanjutnya adalah memasang plugin yang dibutuhkan dan disarankan oleh tema. Untuk mamasang plugin-plugin tersebut, klik tautan Mulai memasang plugin pada notification bar yang tampil.

11 10 PLUGIN PENDUKUNG Terdapat 7 plugin yang sudah disertakan ke dalam paket tema. Beberapa dari plugin tersebut harus dipasang agar semua fitur dalam tema dapat bekerja dengan optimal. Sedangkan beberapa lainnya bersifat opsional untuk dipasang tergantung kebutuhan. Plugin-plugin tersebut antara lain: Easy Responsive Tab Plugin ini digunakan untuk membuat tampilan multi-tab. Dapat dipasang jika dibutuhkan. Dapat dipelajari lebih lanjut: Polylang Plugin ini digunakan memberikan dukungan multi Bahasa pada situs. Dapat dipelajari lebih lanjut pada: TablePress Plugin ini memudahkan penulis untuk membuat table pada isi pos. Dapat dipelajari lebih lanjut pada: WP Google Maps Plugin ini digunakan untuk menambahkan peta dari Google untuk poin tertentu pada laman. Dapat dipelajari lebih lanjut pada: Contact Form 7 Plugin ini digunakan untuk membuat form kontak. Plugin ini diperlukan oleh tema untuk membuat laman kontak. Dapat dipelajari lebih lanjut pada: Easy Custom Auto Excerpt Plugin ini diperlukan oleh tema untuk membuat excerpt secara otomatis dan dapat dikustomisasi, sehingga situs akan terlihat lebih rapi. Dapat dipelajari lebih lanjut pada: WP Maintenance Mode Plugin ini berguna ketika situs sedang dalam masa pemeliharaan. Dapat dipelajari lebih lanjut pada:

12 11 Plugin yang harus dipasang mempunyai tipe Diperlukan. Pasang dan aktifkan plugin yang diperlukan dan dibutuhkan saja dengan melakukan klik pada tautan Pasang pada tiap-tiap plugin, atau dapat juga dengan melakukan Tindakan Masal.

13 12 THEME OPTIONS (PENGATURAN TAMPILAN) Theme Options merupakan menu yang digunakan untuk mengatur tampilan situs secara keseluruhan. Ada beberapa opsi yang dapat diatur melalui menu ini. Favicon Favicon merupakan gambar/icon yang muncul pada tab browser. Untuk mengganti gambar ini, cukup dengan mengunggah file gambar pada kolom masukan yang sudah disediakan. Header Pengaturan ini digunakan untuk mengatur tata letak header atau bagian kepala situs. Pengaturan ini antara lain terdiri dari bentuk/model header yang dapat dipilih dari 2 pilihan, gambar logo yang ditampilkan pada header, teks disamping logo, dan opsi untuk menampilkan atau tidaknya kolom pencarian pada header. Corak Opsi ini digunakan untuk mengubah corak warna situs. Tema UGM sendiri terdiri dari 5 warna, yaitu warna utama, background primer hingga tersier, dan warna kuning. Untuk mengganti salah satu warna, cukup dengan mengklik Pilih Warna dan memilih warna yang diinginkan.

14 13 Footer Sama dengan Header, opsi ini juga digunakan untuk mengatur apa yang akan ditampilkan pada bagian footer atau kaki situs. Opsi yang dapat diganti antara lain logo, teks di bawah logo, dan teks hak cipta pada bagian paling bawah situs. Pengaturan SEO Digunakan untuk mengoptimalkan Search Engine Optimization, dimana opsi ini akan mengatur bagaimana situs akan ditampilkan pada mesin pencarian dan social media. Jika opsi Judul dan Deskripsi Kustom aktif, maka situs akan menampilkan judul dan deskripsi pada mesin pencarian yang dapat diatur secara kustom tiap halaman. Namun jika tidak aktif, maka situs akan menampilkan judul dan deskripsi yang telah di-generate oleh system. Sedangkan opsi Open Graph dan VCard digunakan untuk menampilkan data yang akan diambil oleh Facebook dan Twitter, sehingga ketika artikel pada situs dibagikan pada media social tersebut, yang akan ditampilkan adalah judul dan deskripsi yang telah dikustom. Tata Letak Opsi ini digunakan untuk mengatur tata letak situs secara keseluruhan. Pilihan yang disediakan antara lain sidebar pada sebelah kanan, sidebar pada sebelah kiri, sidebar pda sebelah kiri dan

15 14 kanan, dan tanpa sidebar. Secara default, tampilan situs akan memiliki sidebar pada sebelah kanan. Opsi ini juga dapat diatur pada masing-masing halaman. Kustomisasi Opsi ini digunakan untuk memberi style dan script tambahan yang dibutuhkan dan belum tersedia pada tema.

16 15 PAGE BUILDER Salah satu fitur yang terdapat pada tema UGM ini adalah Tonjoo Page Builder. Fitur ini memungkinkan penulis untuk membuat laman dengan elemen-elemen yang telah disediakan, seperti slider, post list, dan lain-lain. Untuk menggunakan fitur ini, cukup dengan memilih tab Page Builder ketika membuat laman baru. Jika tab ini aktif, maka akan muncul beberapa tombol seperti Template, Custom CSS dan Add Row. Template digunakan untuk memilih preset (jika tersedia), mengimpor preset atau mengekspor preset. Custom CSS digunakan untuk menambah CSS jika diperlukan. Page Builder memiliki konsep row (baris) dan column (kolom), dimana tampilan halaman akan dibagi ke dalam beberapa baris atau section, dan tiap section akan memiliki beberapa kolom. Untuk membuat section baru, klik Add Row. Maka section baru akan muncul. Section baru yang dibuat secara default akan memiliki 1 kolom. Jika ingin menambah kolom baru, klik Layout pada sebelah kiri atas section. Maka sebuah popup akan muncul dengan 6 pilihan layout yang tersedia. Distribusi kolom pada tiap section akan menggunakan skala 12 grid. Itu artinya, jika section memiliki 2 kolom dan tiap kolom memiliki lebar 6 grid, maka kedua kolom tersebut memiliki lebar yang sama. Untuk mengatur lebar kolom tersebut, dapat dengan mengklik Column Size pada sebelah kiri-atas

17 16 section. Sebuah popup baru akan muncul dengan pilihan yang berbeda-beda tergantung dengan Layout yang telah dipilih sebelumnya. Jika layout dan lebar kolom telah diatur, maka masing-masing kolom pada section tersebut dapat ditambahkan komponen. Klik Add Component untuk menambahkan komponen pada section. Terdapat banyak pilihan komponen yang telah disediakan oleh Page Builder ini. IMAGE Komponen ini digunakan untuk menampilkan gambar pada section yang dipilih. TEXT Komponen ini digunakan untuk menampilkan teks pada section yang dipilih.

18 17 SANGAR SLIDER Komponen ini digunakan untuk menampilkan slider dari plugin Sangar Slider jika plugin tersebut tersedia dan aktif. ICON GLYPHICON, FONT AWESOME, DAN IMAGE ICON 3 komponen ini digunakan untuk menampilkan gambar/icon yang disertai teks dan link. Yang membedakan dari ketiga komponen ini adalah jika Glyphicon memiliki pilhan icon dari set Glyphicon, Font Awesome memiliki pilihan set icon dari Font Awesome, serta Image Icon yang gambar/icon dapat kita set sendiri. HTML Komponen ini digunakan untuk memasukkan elemen HTML ke dalam section. POST LIST Komponen Post List merupakan komponen yang akan menampilkan beberapa artikel yang terpilih dengan tampilan yang dapat disesuaikan.

19 18 Kolom Title digunakan untuk memberi judul pada section ini. Dapat dikosongkan. Kolom Post Type digunakan untuk memilih jenis post type yang akan ditampilkan. Pilihan post type yang dapat dipilih antara lain Pos, Event, dan Gallery. Tampilan section ini akan menyesuaikan dengan post type yang dipilih. Kolom Display Excerpt merupakan opsi untuk menampilkan excerpt (kutipan) atau tidak. Kolom Template Style digunakan untuk memilih tampilan post list. Pilihan yang dapat digunakan antara lain Default (bentuk kolom), Horizontal (bentuk memanjang), dan Tanpa Gambar. Kolom Post Number digunakan untuk mengatur berapa artikel yang akan dimunculkan. Kolom Layout digunakan untuk mengatur berapa jumlah kolom (jika Template Style default / tanpa gambar) SECTION TITLE Komponen ini digunakan untuk menampilkan judul section. SPACER Komponen ini digunakan untuk memberikan jarak antara section sebelumnya dan section setelahnya. SIDEBAR Komponen ini digunakan untuk menampilkan sidebar situs yang dapat berisi widget-widget.

20 19 HYPERLINKS Komponen ini digunakan untuk membuat baris menu. POST SLIDER Post Slider memiliki fungsi yang hampir sama dengan Post List. Namun berbeda dengan Post List, Post Slider dapat digunakan untuk menampilkan pos ke dalam bentuk slider. Opsi pengaturan untuk komponen ini pun sama dengan Post List, namun memiliki pilihan Template Style yang berbeda.

21 20 PAGE TEMPLATE Tema UGM memiliki beberapa page template untuk digunakan untuk membuat laman yang memiliki tampilan khusus. Antara lain laman kontak, susunan direksi, serta direktori situs. KONTAK Sebelum membuat laman kontak, plugin Contact Form 7 harus sudah terpasang dan aktif, karena plugin ini akan digunakan untuk membuat form yang akan ditampilkan pada laman kontak. Untuk membuat form, pilih menu Kontak > Contact Forms. Pada laman Contact Forms, Anda dapat membuat form baru atau menyunting form yang telah ada. Sebagai contoh, kita akan menyunting form yang sebelumnya telah disediakan oleh plugin. Klik tautan Sunting pada form Contact form 1. Pada laman Edit Contact Form, Anda dapat membuat form dengan memilih field yang disediakan ke dalam editor. Struktur form yang disarankan dapat dilihat pada gambar berikut. Masih pada laman Edit Contact Form, selanjutnya pindah ke tab Surat. Laman ini digunakan untuk mengatur isi notifikasi dan kemana tersebut ditujukan. notifikasi ini akan dikirimkan setelah terdapat pengunjung situs yang mengisi form kontak.

22 21 Setelah semua sudah diatur, klik Simpan pada sebelah kanan layar. Dilanjutkan dengan membuat laman kontak. Untuk membuat laman ini, pilih menu Laman > Tambah Baru. Pada laman editor, pilih templat Halaman Kontak. Sehingga akan muncul beberapa form tambahan. Isi Form dengan form yang telah dibuat dengan plugin Contact Form 7. Lalu isi juga Alamat, Kontak, serta Peta. Untuk menambah kontak, klik tombol Tambah Kontak, pilih tipe serta isikan nomor. Sedangkan untuk peta, Anda dapat mengisikan nama tempat (contoh: UGM) ke kotak Search for address.. atau juga dapat dilakukan dengan mengklik pada salah satu poin pada peta.

23 22 Klik Terbitkan jika telah selesai. SUSUNAN DIREKSI Untuk membuat laman susunan direksi, yang dilakukan adalah dengan membuat laman baru dengan templat Halaman Profil. Templat ini akan menampilkan form tambahakan untuk memasukkan susunan direksi ke laman. Klik Tambah Profil untuk menambahkan direksi ke dalam laman. Maka akan muncul form antara lain Foto, Nama dan Jabatan. Ulangi langkah diatas untuk menambah direksi lainnya. Klik Terbitkan jika telah selesai.

24 23 DIREKTORI Laman Direktori berguna untuk menampilkan peta situs. Terdapat 2 buah templat untuk membuat laman ini. Kedua templat tersebut memiliki fungsi yang sama, hanya tampilannya saja yang berbeda. Templat tersebut antara lain: Direktori 1 Kolom dan Direktori 2 Kolom. Selain kolom judul dan konten, templat ini akan menambah form baru yang digunakan untuk mengisi direktori. Opsi yang dapat diatur pada templat ini antara lain tampilkan gambar dan sidebar yang akan ditampilkan. Jika Tampilkan Gambar aktif, maka halaman ini akan menampilkan gambar yang dapat diatur pada setiap direktori. Bilah Sisi digunakan untuk mengatur apakah halaman ini akan menampilkan sidebar atau tidak. Jika menampilkan sidebar, maka ada 2 pilihan yaitu sidebar yang berisi menu direktori atau HTML yang dapat diatur isinya sesuai keinginan. Untuk menambah direktori, klik Tambah Direktori. Maka beberapa kolom isian akan muncul. Yang perlu diisi dalam menambahkan direktori antara lain: Judul, Deskripsi direktori, teks yang muncul pada tombol, link kemana arah jika tombol diklik, serta Sub-direktori yang dapat diisi secara opsional. Untuk templat Direktori 2 Kolom sendiri memiliki masukan yang sama, hanya saja tampilan akhirnya akan berbeda.

25 24 POST TYPE GALLERY Untuk membuat gallery, pilih menu Galleris > Tambah Baru. Laman ini akan menampilkan form yang digunakan untuk mengunggah foto beserta keterangannya. Klik Tambah Foto untuk menambahkan foto. Upload foto pada kolom Foto, serta isi Judul dan Deskripsi pada kolom yang telah disediakan. Ulangi dengan menambahkan foto lainnya. Jika telah selesai, klk Terbitkan. EVENT Untuk membuat event, pilih menu Events > Tambah Baru. Laman ini akan menampilkan form tambahan selain judul dan konten, yaitu Detail Event. Form detail event meliputi Tanggal, Tanggal Selesai, Penyelenggara, Lokasi, Kontak, Situs Web dan Deskripsi Singkat.

26 25 Pilih tanggal dan tanggal selesai dengan memilih tanggal dari datepicker yang akan muncul ketika Anda mengklik kolom isian. Isi juga kolom isian lain jika diperlukan. Untuk Kontak, Anda dapat membuat baris baru jika kontak lebih dari satu. Isi detail acara pada kolom isian konten. Anda juga dapat memasang poster/foto acara sebagai gambar utama. Klik Terbitkan jika telah selesai.

27 26 SHORTCODE Dari plugin yang disarankan untuk dipasang, beberapa diantaranya digunakan untuk membuat tampilan khusus seperti tabel dan tab. TABLEPRESS Plugin ini digunakan untuk membuat tampilan table yang berbeda dengan tabel biasa yang disediakan oleh Wordpress. Bedanya, tabel yang dibuat dengan plugin ini memungkinkan setiap pembaca untuk melakukan pencarian, pengurutan, dan juga disertai paginasi untuk jumlah baris yang banyak. Untuk membuat tabel dengan TablePress, pastikan Anda telah memasang dan mengaktifkan plugin ini. Jika telah terpasang, pilih menu TablePress > Add New Table untuk membuat tabel baru. Pada laman yang ditampilkan, isi nama tabel, deskripsi serta jumlah baris dan kolom tabel yang dibuat. Klik Add Table untuk membuat tabel. Pada laman selanjutnya, Anda dapat melakukan pengisian konten pada tabel.

28 27 Anda juga dapat mengatur tabel seperti menambah baris/kolom, menghapun, hingga integrasi dengan DataTables sehingga menghasilkan tabel dengan paginasi, pencarian data, dan pengurutan data. Setelah tabel selesai dibuat, copy kode shortcode (contoh: [table id=1 /]), dan pasang ke dalam pos. EASY RESPONSIVE TABS Plugin ini digunakan untuk membuat tampilan tab. Untuk membuat tampilan ini, cukup dengan mengklik ikon yang terdapat pada editor konten pada saat membuat/menyunting pos. Setelah mengklik ikon tersebut, akan muncul popup seperti gambar berikut.

29 28 Atur jumlah tab yang akan ditampilkan berikut dengan tampilan yang diinginkan, lalu klik Inser Responsive Tabs. Plugin tersebut akan menghasilkan shortcode yang dimasukkan ke dalam konten. Selanjutnya sunting judul dan content masing-masih tab pada shortcode tersebut.