Pertemuan 2 Tutorial Wordpress Ub

MANUAL BOOK PANDUAN MENGGUNAKAN CMS WORDPRESS UB 2011
Hal | 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 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 | 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 | 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 | 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 | 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 | 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 | 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 | 8

Gambar 11. Daftar kategori Links


Hal | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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, 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 :
2. Aktifkan plugin PJW Mime Config.


Hal | 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 | 19


Contoh contoh daftar file mime type :


Hal | 20


Hal | 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 :
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 | 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 | 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 :
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 | 24

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

Gambar 20. Editor untuk file file pada Plugins


Hal | 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 | 26

Your Profile, menu untuk mengatur profil admin.

Gambar 23. Pengaturan profil Administrator


Hal | 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 | 28

Export, mengeksport isi dari wordpress anda.

Gambar 26. Export konten


Hal | 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 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 | 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 | 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 | 32

Gambar 32. Pengaturan privasi situs

Permalink, menu untuk mengatur permanen link.

Gambar 33. Pengaturan permanen link


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

Pertemuan 2 Tutorial Wordpress Ub

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Pertemuan 2 Tutorial Wordpress Ub

Uploaded by

Copyright:

Available Formats

MANUAL BOOK PANDUAN MENGGUNAKAN CMS WORDPRESS UB 2011

You might also like