Bagian I TUTORIAL CMS WORDPRESS UB

Transkripsi

1 Bagian I TUTORIAL CMS WORDPRESS UB PENDAHULUAN Manual Ebook ini dibuat sebagai panduan bagi administrator yang akan mengelola website publikasi sebagai media public relation untuk kepentingan akademik Universitas Brawijaya. LOGIN KE WORDPRESS Untuk masuk ke bagian admin site ketikkan URL alamat website-nya dan tambahkan /wrp-adm misalnya kemudian klik login atau tekan enter, kemudian akan muncul halaman login admin. Gambar 1. Login form Wordpress UB Silahkan isi : Username Password : user admin anda : password admin anda Hal 1

2 MENU DASHBOARD Selanjutnya anda akan masuk ke halaman CMS dashboard wordpress. Gambar 2. Menu Dashboard Right Now, menerangkan konten yang telah diupload pada website (postingan, halaman (page), kategori, dan juga tag postingan ) dan menerangkan theme (tema website) yang digunakan saat ini. Recent Comments, menampilkan komentar terbaru, tetapi fungsi ini tidak digunakan mengingat user tidak diijinkan untuk berkomentar pada postingan. Incoming Links, menampilkan situs-situs yang memuat link website anda pada situs lain Plugin, berisi informasi tentang plugin dari website wordpress QuickPress, digunakan untuk posting konten secara cepat, dengan pengaturan konten lebih sederhana. Recent Draft, menerangkan draft konten terbaru Wordpress Blog, menampilkan update berita terbaru dari website wordpress Hal 2

3 MENU POSTS Posts, menu untuk mengedit konten yang telah dibuat. Gambar 3. Daftar posting (konten) yang telah dibuat Add New, menu untuk membuat konten baru. Gambar 4. Form Add New Post o Kotak isian paling atas berisi judul postingan. o Upload/Insert, menu untuk menambah atau memasukkan video, gambar, maupun suara pada pada konten. o Tab menu Visual HTML, jika visual, maka anda melakukan penambahankonten dengan tampilan seperti menulis pada microsoft word, sedangkan jika HTML maka anda melakukan penambahan konten Hal 3

4 melalui tampilan HTML, dimana anda menggunakan tag HTML dalam penulisan isi konten tersebut. o Excerpt, tempat menuliskan ringkasan konten yang akan diperlihatkan pada halaman depan. o Send Trackbacks, menu untuk mengirim trackback. o Custom Fields, biasanya digukanan untuk melakukan pengaturan isian pada konten, misalnya thumbnail dari konten. o Discussion, pilihan untuk mengatur interaksi pada konten, misalnya memperbolehkan diberikan komentar atau trackbacks maupun pingbacks. o Publish, bagian untuk mengatur publikasi konten yang baru dibuat, apakah disimpan sebagai draft atau langsung dipublikasi untuk ditampilkan pada situs. o Tag, menambahkan tag konten yang digunakan sebagai search optimation oleh user. o Categories, mengatur kategori konten. Categories, menu untuk menambah dan mengatur kategori dari konten. Gambar 5. Daftar kategori o Category name, nama kategori o Category slug, nama lain kategori agar URL-friendly. URL friendly disini maksudnya adalah lebih sesuai sebagai sebuah URL. Hal 4

5 o Category parent, penempatan kategori, apakah sebagai kategori utama atau subkategori. o Category Description, deskripsi singkat kategori Post Tags, menu untuk menambah dan mengatur tag dari konten website. Gambar 6. Daftar post tag o Tag name, nama tag. o Tag slug, nama lain tag agar lebih URL-friendly. URL-friendly disini maksudnya adalah lebih sesuai sebagai sebuah URL. o Tag Description, deskripsi singkat tag. Hal 5

6 MENU MEDIA Library, menu untuk manajemen gambar, video, maupun file suara yang telah diupload pada situs. Gambar 7. Manajemen Library menu Media Add New, menambah media baru pada situs untuk dikelola. Gambar 8. Menu Add New Media Hal 6

7 MENU LINKS Links, menu untuk manajemen link yang ditampilkan pada situs. Gambar 9. Manajemen Links Add New, menu untuk menambah daftar link. Gambar 10. Form Add New Links Link Categories, menambah dan mengatur kategori dari daftar link. Hal 7

8 Gambar 11. Daftar kategori Links Hal 8

9 MENU PAGES Pages, menu untuk mengatur halaman statis pada situs. Halaman ini berbeda dengan posting. Posting biasanya akan muncul secarra berurutan setiap anda melakukan penambahan, sedangkan Pages biasanya merupakan halaman tunggal yang dimunculkan dengan menggunakan menu-menu website. Gambar 12. Manajemen Pages untuk halaman statis Add New, menu untuk menambah page baru. Gambar 13. Form Add New Pages Hal 9

10 o Kotak isian pertama digunakan untuk menulis judul page. Nama judul ini juga yang akan dijadikan sebagai nama menu pada website untuk menuju page tersebut jika menu tersebut diklik. o Page Attributes Parent, mengatur apakah page tersebut tampil sebagai mainpage atau sebagai subpage Order, untuk memberikan urutan menu. Biasanya menu-menu pages yang telah dibuat diurutkan otomatis secara alfabetis. Namun anda bisa mengatur urutan tersebut dengan memberikan nomor urut pada menu-menu tersebut. (bagian yang lain sama dengan bagian pada penambahan posting) Hal 10

11 MENU COMMENTS Menu untuk mengatur komentar-komentar pada pada situs (fungsi menu ini tidak digunakan karena user tidak diijinkan untuk member komentar). MENU APPEARANCE Menu untuk mengatur tampilan front site. Biasanya sebagian menu-menu yang terdapat pada bagian ini tergantung pada theme yang digunakan. Ada beberapa theme (template) yang akan menyediakan menu untuk mengatur beberapa bagian pada theme tersebut. Theme, bagian untuk memilih theme yang anda gunakan. Dibagian ini dimunculkan theme yang telah tersedia pada situs. Gambar 14. Manajemen tema situs Untuk mengganti template dengan theme yang anda inginkan, cukup klik pada thumbnail atau link nama theme tersebut, maka akan muncul window preview theme tersebut. Klik tulisan Activate nama_theme yang ada di sudut kanan atas window jika anda ingin menggunakan theme yang baru. Hal 11

12 Widgets, bagian untuk mengatur widget. Widget merupakan fitur atau komponen-komponen yang bisa ditambahkan pada wordpress CMS sehingga membuat website menjadi lebih menarik dan powerful, misalnya kalender, recent posts, dan lain-lain (fungsi menu ini sengaja dinonaktifkan untuk mendukung tema default UB). Gambar 15. Manajemen Widgets Header, digunakan untuk mengatur gambar header Gambar 16. Manajemen Header situs Hal 12

13 Editor, bagian untuk melakukan pengeditan pada file-file tema website, misalnya file index, css, dan lain-lain. Gambar 17. Editor untuk file file pada tema Hal 13

14 MENU PLUGINS Plugin merupakan komponen tambahan pada wordpress yang berguna untuk menambah fitur wordpress sehingga lebih powerful. Sebagian plugin juga menyertakan widget sehingga bisa terlihat pada front site wordpress. Untuk menambah plugin pada wordpress, terlebih dahulu menginstalnya pada wordpress tersebut. Gambar 18. Manajemen Plugins Add New, selain dengan cara menambahkan secara langsung pada folder website, anda juga bisa menambahkan plugin melalui dashboard melalui menu ini. Klik tombol Browse untuk mencari plugin yang disimpan sebagai file.zip yang ingin anda instal, kemudian klik tombol Install Now. Hal 14

15 Gambar 19. Form Add New Plugins - Plugin All in One SEO Pack Contoh penggunaan pada plugin All in One SEO Pack yang digunakan Untuk Menaikkan Trafik Web Anda dan mengoptimalkan judul postingan agar mudah digunakan oleh mesin pencari dan menghindarkan dari duplikat konten. Ini juga akan membuat meta tag deskripsi dan meta tag keyword untuk masing-masing halaman secara otomatis. Atau juga bisa diset secara manual. Cara Setting Plugin All in One SEO Pack : 1. Setelah anda login admin masuk ke menu Plugins. 2. Aktifkan plugin All In One SEO Pack. Gambar 19.a. Penggunaan Plugins All In One SEO Pack Hal 15

16 3. Kemudian masuk ke menu Setting, klik All in One SEO. 4. Optimasasi plugin ini. Gambar 19.b. Optimasi Plugin All In One SEO Pack Home Title, kolaborasikan keyword yang anda bidik pada title ini, jangan menggunakan kata-kata penghubung seperti dan, ke atau di, pisahkan setiap keyword anda dengan misalkan title homepage. Home Description, tulis deskripsi website anda disini. Home Keyword, tuliskan keyword-keyword yang selain di title. Untuk opsi yang lain biarkan defaultnya. Hal 16

17 - Plugin PJW Mime Config Contoh penggunaan pada plugin PJW Mime Config, pada umumnya semua program aplikasi yang kita jalankan di website kita menggunakan konfigurasi dari mime type. Jadi untuk bisa mempercepat loading website dan membuat website jadi lebih ringan, yang kita lakukan adalah mengkompress semua file yang di kirim ke pengunjung website kita dengan menggunakan gzip melalui mime type tujuannya untuk menspesifikasi file yang ditransfer. MIME adalah singkatan dari Multipurpose Internet Mail Extension yg digunakan sebagai mekanisme untuk mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dll agar browser tidak salah menterjemahkan konten yg diterima. Tidak hanya pada web, pun juga menggunakan MIME. Contoh : Content-Type: text/plain Browser akan membaca file tsb sebagai text biasa Content-Type: image/jpeg Browser akan membaca file tsb sebagai gambar jpeg Tidak peduli apapun extensi yg diberikan oleh server, browser cuma mengenali konten berdasarkan MIME Type yg dikirim oleh server. Cara Setting Plugin PJW Mime Config : 1. Setelah anda login admin masuk ke menu Plugins. 2. Aktifkan plugin PJW Mime Config. Hal 17

18 Gambar 19.c. Penggunaan Plugins PJW Mime Config 3. Kemudian masuk ke menu Setting, klik Mime Types. 4. Optimasasi plugin ini. Gambar 19.d.1 Optimasi Plugin PJW Mime Config Hal 18

19 Gambar 19.d.2 Optimasi Plugin PJW Mime Config Contoh contoh daftar file mime type : Hal 19

20 Gambar 19.d.3 Optimasi Plugin PJW Mime Config Hal 20

21 - Plugin Webmaster Tools Verification Contoh penggunaan pada plugin Webmaster Tools Verification, Ketiga mesin pencari utama menawarkan beberapa jenis layanan website. Yang paling populer Google Webmaster Tools, Yahoo Site Explorer dan Bing Webmaster Center. Ketiganya mengharuskan Anda untuk memverifikasi situs Anda. Plugin ini menyisipkan meta dan tag meta di bagian situs. Cara Setting Plugin Webmaster Tools Verification : 1. Setelah anda login admin masuk ke menu Plugins. 2. Aktifkan plugin Webmaster Tools Verification. Gambar 19.e. Penggunaan Plugins Webmaster Tools Verification 3. Kemudian masuk ke menu Setting, klik Webmaster Tools. 4. Optimasi plugin ini. Gambar 19.f. Optimasi Plugins Webmaster Tools Verification Hal 21

22 5. Masukkan kode verifikasi untuk setiap layanan yang ingin Anda gunakan. 6. Kode verifikasi bisa anda dapatkan setelah mendaftar pada webmaster. Buka baik Google Webmaster Tools, Yahoo Site Explorer, atau Bing Webmaster Center, buka pilihan untuk menambah atau memverifikasi situs baru kemudian pilih opsi meta. Anda akan diberikan osepotong kode dan instruksi untuk menambahkannya ke situs Anda. Plugin ini akan secara otomatis memformat tag meta sisipan itu. - Plugin Dublin Core for WordPress Contoh penggunaan pada plugin Dublin Core for WordPress, merupakan salah satu skema metadata yang digunakan untuk web resource description and discovery. Plugin ini digunakan untuk optimasi web anda agar mudah dibaca oleh mesin pencari sebagai file dokumen (jurnal). Elemen Dublin Core : 1. dc:title. Nama yang diberikan pada resource dan biasanya sebuah resource akan dikenal dengan nama ini. 2. dc:creator. Berisi nama pencipta/pengarang dari resource 3. dc:subject. Topik dari isi sebuah resource yang biasanya akan diekspresikan sebagai keyword atau key phrase kode klasifkasi yang mendeskripsikan topik sebuah resource. 4. dc:description. Penjelasan tentang isi sebuah resource yang biasanya berisi abstract atau table of content. 5. dc:publisher. Berisi pihak penyiar/pem-publish dari resource 6. dc:contributor. Pihak yang memberikan kontribusi terciptanya sebuah resource. 7. dc:date. Data tanggal yang berhubungan dengan seputar resource. 8. dc:type. Tipe content sebuah resource. Type menjelaskan general Category, Function, genre atau tingkat pengelompokan dari isi. 9. dc:format. Manifestasi fisik atau digital suatu resource. Format bisa berupa media-type atau dimensi sebuah resource. Hal 22

23 10. dc:identifier. Referensi yang tidak ambigu terhadap resource dalam kontek yang diberikan. 11. dc:source. Menunjuk sebuah resource dari mana resource yang ada diturunkan (derived). 12. dc:language. Bahasa yang digunakan dalam penulisan kontent sebuah resource. 13. dc:relation. Menyatakan link resource yang berhubungan. 14. dc:coverage. Cakupan atau ruang lingkup dari konten sebuah resource. 15. dc:rights. Informasi tentang hak yang ada pada resource. Cara Setting Plugin Dublin Core for WordPress : 1. Setelah anda login admin masuk ke menu Plugins. 2. Aktifkan plugin Dublin Core for WordPress. Gambar 19.g. Penggunaan Plugins Dublin Core for Wordpress 3. Untuk plugin ini anda hanya perlu mengaktifkannya saja, tidak perlu mengoptimasinya Hal 23

24 Editor, bagian ini untuk mengedit file-file plugin yang terpasang pada website. Gambar 20. Editor untuk file file pada Plugins Hal 24

25 MENU USERS Users, bagian yang menunjukkan daftar user Gambar 21. Manajemen Users Add New, menu untuk menambah user baru. Gambar 22. Form Add New Users Hal 25

26 Your Profile, menu untuk mengatur profil admin. Gambar 23. Pengaturan profil Administrator Hal 26

27 MENU TOOLS Tools, menu untuk menambah fitur-fitur lain yang disediakan oleh wordpress. Gambar 24. Manajemen Tools Import, bagian untuk mengimport isi dari website lain milik anda pada wordpress. Misalnya posting, komentar, tags, dan lain-lain dari blogspot. Gambar 25. Import konten Hal 27

28 Export, mengeksport isi dari wordpress anda. Gambar 26. Export konten Hal 28

29 MENU SETTINGS General, menu untuk pengaturan umum situs. Gambar 27. Pengaturan umum situs o Site Title, nama situs yang juga akan terlihat pada title bar browser. o Tagline, kalimat slogan dari situs. o Wordpress address (URL), URL dari website wordpress. o Site address (URL), URL lain dari website. Meskipun URL ini digunakan namun isi yang ditampilkannya adalah isi yang berasal dari Wordpresss address. o address, alamat admin. o Membership, bagian untuk memilih apakah memperbolehkan pendaftaran user atau tidak. o New user default rule, rule standart dari user yang baru terdaftar. o Time Zone, zona waktu dari situs. o Date format, format tanggal yang digunakan pada situs. o Time format, format waktu yang digunakan pada situs. o Week starts On, mengatur hari awal dalam seminggu. Hal 29

30 Writing, menu untuk pengaturan penulisan konten pada wordpress. Gambar 28. Pengaturan penulisan konten Reading, menu untuk mengatur konten yang akan dibaca user pada front site wordpress. Gambar 29. Pengaturan pembacaan posting Hal 30

31 Discussion, menu untuk mengatur interaksi (komentar) pada wordpress (fungsi ini tidak digunakan karena komentar dari user tidak diijinkan). Gambar 30. Pengaturan diskusi dan komentar Media, menu untuk mengatur file media yang diupload pada situs. Gambar 31. Manajemen Media file yang diupload Privacy, menu untuk mengatur pilihan apakah memasukkan situs kedalam listing search engines atau tidak. Hal 31

32 Gambar 32. Pengaturan privasi situs Permalink, menu untuk mengatur permanen link. Gambar 33. Pengaturan permanen link Hal 32

33 Bagian II MANIPULASI DASAR FILE - FILE PHP TANPA MELALUI CMS WORDPRESS UB PENDAHULUAN Tampilan pada wordpress UB sebenarnya sudah standar, tetapi kebutuhan masing masing civitas akademik berbeda. Misalkan pada penamaan website yang disesuaikan dengan nama civitas akademik, begitu pula header logo dan header image nya yang tentunya masing-masing civitas akademik juga berbeda. Selain itu, tidak semua pengubahan dapat dilakukan dengan CMS Wordpress UB karena fungsi dasar CMS adalah menyediakan fasilitas untuk mengelola content dan mengitegrasikan dengan system sesuai dengan spesifik content tersebut. PENJELASAN KODE PHP DALAM TEMA WORDPRESS UB Gambar 34. Direktori file tema Hal 33

34 404.php File ini digunakan untuk menghandle error saat link page maupun post yang dicari pada situs tidak ditemukan dan digantikan dengan informasi keterangan page not found. archive.php File ini digunakan untuk menampilkan data saat arsip setiap bulan, kategori maupun tag. footer.php File ini digunakan untuk mengatur footer (tampilan bagian bawah) dari tema yang berisi informasi singkat hak cipta maupun link yang akan ditampilkan pada footer setiap halaman. functions.php File opsional yang digunakan untuk mendukung tema digunakan sebagai file fungsi. File ini pada dasarnya bertindak seperti sebuah plugin, dan secara otomatis dimuat selama inisialisasi WordPress (baik untuk halaman admin dan halaman eksternal). header.php File ini digunakan untuk mengatur header (tampilan bagian atas) tema yang akan ditampilkan pada header setiap halaman. index.php File ini merupakan file utama(indeks), yang diload pertama kali saat user mengunjungi situs. Fungsinya seperti portal untuk masuk ke halaman yang lain. page.php Hal 34

35 File ini digunakan untuk mengatur tampilan setiap halaman (page) yang dibuat. screenshot.png Berupa gambar berekstensi.png yang ditampilkan pada menu administrator untuk preview thumbnail tema. search.php File ini digunakan untuk mengatur tampilan hasil pencarian. sidebar.php File ini digunakan untuk mengatur tampilan sidebar (tampilan samping) halaman. single.php File ini digunakan untuk mengatur tampilan halaman posting, hampir sama dengan page.php bedanya page terletak pada menu utama dan berisi informasi statis, tetapi single berupa halaman post berdasarkan kategorinya berisi informasi dinamis. style.css File ini digunakan untuk mengatur desain tampilan grafis seluruh elemen di semua halaman mulai dari pengaturan font, ukuran gambar, background, dan sebagainya. File CSS ini juga menampilkan informasi tentang template, seperti nama template, pembuatnya dan informasi lain yang terdapat dalam back-end di wordpress. Hal 35

36 LANGKAH - LANGKAH Tentukan terlebih dahulu pada file php yang mana anda akan memanipulasinya, dengan cara menentukan bagiannya (header/bagian atas, content/bagian isi, sidebar/bagian samping atau footer/bagian bawah) Gambar 35. Pembagian tampilan website File - file header : header.php File - file content : berisi bahasa pemrograman php dan disesuaikan dengan halaman yang diload (index.php, single.php, page.php, archive.php, search.php, category.php) yang masing-masing contentnya berbeda. File - file sidebar : left-sidebar.php, right-sidebar.php, sidebar.php File - file footer : footer.php Hal 36

37 File file yang tidak disebutkan (404.php, functions.php, style.css, dan folder image) merupakan default tema dan anda disarankan untuk tidak mengubahnya. Contoh kasus : 1. Mengubah header logo Gambar 36. Mengubah header logo Terletak pada bagian header Buka file header.php dengan text editor anda Replace <a href="<?php bloginfo('url');?>"><img src="<?php bloginfo('template_url');?>/sknimg/img-logo.png" alt="" /></a> Gambar 37. Contoh perubahan link header logo Dengan <a href="<?php bloginfo('url');?>"><img src="<?php bloginfo('template_url');?>/sknimg/nama_header_logo.ekstensi" alt="" /></a> Hal 37

38 Sebelumnya upload terlebih dahulu header logo anda, caranya bisa melalui CMS Wordpress UB pada menu Media atau langsung upload melalui web hosting pada folder tema yang diubah. Untuk header image dan nama website tidak perlu dimanipulasi melalui file php, bisa dilakukan dengan CMS Wordpress UB. 2. Penamaan menu pada Sidebar Gambar 38. Mengubah keterangan menu sidebar - Contohnya : Profil Fakultas, Kalender, Kategori Info, Arsip, dan Berita UB - Terletak pada bagian sidebar - Cari file sidebar.php atau bila anda menggunakan tema dengan 2 sidebar pilih left-sidebar.php atau right-sidebar.php kemudian buka dengan text editor anda - Misalkan akan mengubah Profil Fakultas menjadi Menu Utama, maka cari value Profil Fakultas pada file php dan replace menjadi Menu Utama Hal 38

39 Gambar 39. Contoh perubahan keterangan menu sidebar 3. Penamaan menu pada Content Gambar 40. Mengubah keterangan menu content - Contohnya : Berita terbaru, Kegiatan, dan Pengumuman - Terletak pada bagian content yaitu pada file index.php - Cari file index.php kemudian buka dengan text editor anda - Misalkan akan mengubah Berita Terbaru menjadi Berita Utama, maka cari value Berita Terbaru pada file php dan replace menjadi Berita Utama Hal 39

40 Gambar 41. Contoh perubahan keterangan menu sidebar 4. Mengubah footer - Terletak pada bagian footer - Buka file footer.php dengan text editor anda - Ubah footer sesuai kebutuhan anda - Beberapa tema sudah menyediakan footer standar, anda bisa menambahkan link farm melalui CMS Wordpress UB pada menu Links Hal 40