Bagian I TUTORIAL CMS WORDPRESS UB

MANUAL BOOK PANDUAN MENGGUNAKAN CMS WORDPRESS UB

2011

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 “ http://wordpress.ub.ac.id/wrp-adm“ kemudian klik login atau tekan enter, kemudian akan muncul halaman login admin.

Gambar 1. Login form Wordpress UB

Silahkan isi : Username

: user admin anda

Password

: password admin anda

Hal | 1


2011

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


2011

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


2011

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


o

2011

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


2011

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


2011

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


2011

Gambar 11. Daftar kategori Links

Hal | 8


2011

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


2011

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


2011

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


2011

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


2011

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


2011

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


2011

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


2011

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


-

2011

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, email 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


2011

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


2011

Gambar 19.d.2 Optimasi Plugin PJW Mime Config

Contoh – contoh daftar file mime type :

Hal | 19


2011

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


-

2011

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


2011

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


2011

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


2011

Editor, bagian ini untuk mengedit file-file plugin yang terpasang pada website.

Gambar 20. Editor untuk file – file pada Plugins

Hal | 24


2011

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


2011

Your Profile, menu untuk mengatur profil admin.

Gambar 23. Pengaturan profil Administrator

Hal | 26


2011

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


2011

Export, mengeksport isi dari wordpress anda.

Gambar 26. Export konten

Hal | 28


2011

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 Email address, alamat email 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


2011

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


2011

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


2011

Gambar 32. Pengaturan privasi situs

Permalink, menu untuk mengatur permanen link.

Gambar 33. Pengaturan permanen link

Hal | 32


2011

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


2011

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


2011

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


2011

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


2011

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 ">

Gambar 37. Contoh perubahan link header logo Dengan "> Hal | 37


2011

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


2011

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


2011

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

Bagian I TUTORIAL CMS WORDPRESS UB

Recommend Documents