Modul Pelatihan Pembuatan Blog dengan Wordpress Disusun oleh: Dr. Sri Chusri Haryanti, S.T., M.T. Indah Dwi Lestantri, S.T., M.Si. Mubarik Ahmad, S.Kom., M.Kom. PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNOLOGI INFORMASI UNIVERSITAS YARSI MARET 2017 Jl. Letjen. Suprapto, Cempaka Putih Jakarta Pusat 10510 - Telp/Fax : (021) 4269301 Website : www.yarsi.ac.id
Daftar Isi Kata Pengantar... 3 Persiapan Awal... 4 Memposting Berita... 8 Mengubah Tema WordPress... 9 Melengkapi Profil... 10 Membuat Header... 11 Mengganti Background... 15 Memasang Video Youtube di Sidebar... 16 Membuat Dua Kolom Tulisan di Artikel... 18 Menambahkan Halaman... 21 Membuat Halaman Menu Baru... 21 Membuat Halaman Posting Berwarna-warni... 24 Membuat Halaman Gallery Foto... 25 Menambah Media... 27 Mengorganisasi Posting Tulisan... 27 Menampilkan widget pada sidebar... 28 Menampilkan widget Twitter Box pada sidebar... 30 2
Kata Pengantar Bismillaahirrahmaanirrahiim. Assalamu alaikum Warahmatullahi Wabarakaatuh Puji syukur kami panjatkan ke hadirat Allah SWT, yang telah melimpahkan karunianya sehingga kami dapat menyelesaikan modul pembuatan blog ini. Kami menyadari atas segala kekurangan serta keterbatasan kemampuan dalam penyusunannya. Untuk itu, dengan segala kerendahan hati, kami mengharapkan saran dan kritik yang membangun guna pengembangan modul selanjutnya. Penyusunan modul pembuatan blog ini memilih untuk menggunakan WordPress karena WordPress pengelolaannya sangat sederhana. WordPress dapat diperuntukkan untuk membuat blog, toko online, web profile atau yang lainnya. Dalam modul pelatihan ini akan dijelaskan mulai dari proses instalasi, menginstal template/theme, teknik membuat artikel, menggunakan widget sampai mempublikasikannya. Harapan kami, dengan pelatihan ini peserta dapat memahami pembuatan blog dan dapat mengembangkan sendiri sesuai kebutuhan dengan mengikuti langkah demi langkah yang diberikan di dalam modul ini. Wassalamu alaikum Warahmatullahi Wabarakaatuh Jakarta, Maret 2017 3
Persiapan Awal Untuk menginstalasi WordPress, yang penting untuk diperhatikan adalah memiliki akun email pribadi. Email digunakan untuk login dan mengirim berbagai informasi dari WordPress. Langkah untuk mendaftar WordPress antara lain : 1. Kunjungi halaman WordPress utama di http://www.wordpress.com yang berbahasa Inggris atau http://id.wordpress.com untuk versi bahasa Indonesia. 2. Kemudian klik Buat Situs Web untuk memulai membuat blog atau situs web WordPress. Sehingga muncul tampilan berikut : 4
3. Pilih salah satu dari template di atas. Pada latihan ini kita pilih template yang paling kanan. Arahkan mouse pada template paling kanan dan tekan klik. Maka akan muncul tampilan pada langkah selanjutnya. 4. Pada langkah 2, pilih tema yang diinginkan. Tema ini masih bisa diedit atau diganti. 5. Setelah memilih tema, selanjutnya masuk ke langkah 3, yaitu membuat domain dari web yang dibuat. Untuk keperluan saat ini pilih yang gratis, misal nama domain usaha403.wordpress.com. 6. WordPress akan mencek apakah nama tersebut bisa dipakai/tersedia. Bila ya, maka klik Pilih. 5
7. Kemudian langkah 4, pilih paket gratis, premium atau bisnis. Misal klik Pilih Paket Gratis. 8. Selanjutnya langkah 5, membuat akun. Isi alamat e-mail, nama pengguna, dan password yang digunakan untuk admin web. Klik Buat Akun Saya / Create My Account. 9. Tunggu proses sekitar 1 menit, kemudian akan masuk ke web yang baru dibuat. Ini adalah web untuk admin. Web yang sudah berhasil dibuat dapat diakses oleh admin di https://usaha403.wordpress.com. 6
10. Setelah masuk akan tampil dashboard untuk admin 11. Untuk mengaktifkan akun, bukalah akun e-mail yang didaftarkan tadi. Pada e-mail yang dikirim dari WordPress, klik Konfirmasi Alamat Email / Confirm Now. 7
12. Setelah itu akan terbuka halaman yang menyatakan bahwa akun website sudah terverifikasi dan sudah dapat untuk diisi berita dan lain-lain (posting). Memposting Berita Untuk memulai membuat posting, klik Mulai. 8
Contoh Selanjutnya tuliskan judul, kemudian isi berita, tambahkan gambar. Klik tombol save untuk menyimpan. Setelah selesai klik Terbitkan / Publish. Tampilan setelah dipublish, dapat dilihat pada gambar berikut: Mengubah Tema WordPress Bila tema yang telah dibuat ingin diubah, dapat dilakukan dengan cara mencari pada bagian pencarian, pilih tema untuk mendapatkan tema sesuai dengan kebutuhan atau keinginan pada bagian theme. Misalkita pilih teme Dyad2. 9
Berikut adalah tampilan WordPress saat tema diubah Melengkapi Profil Supaya tampak lebih professional, sebaiknya profil website dilengkapi. Prosesnya mudah, hampir sama seperti mengganti password admin. Lokasinya dipojok kanan atas dari menu admin. Caranya sebagai berikut : 10
1. Klik Update Profile. 2. Isi formulir yang masih kosong, lalu klik Save Profile Details. Contoh Membuat Header Untuk membuat header di WordPress, dapat dilakukan dengan cara sebagai berikut : 1. Login ke Admin WordPress. 2. Pada sisi kiri halaman klik menu [Tampilan]/[Appearance] > kemudian klik [Kepala Halaman]/[Header] 11
3. Kemudian akan muncul halaman seperti gambar dibawah. Klik [Add New Image] untuk memilih gambar yang sudah ada di komputer. Setelah memilih gambar lalu klik [Unggah Berkas]/[Upload Files] > Select Files >lalu klik [Pilih/Select dan Pungkas/Crop]. 12
13
4. Sebelum meng-upload, terlebih dahulu siapkan gambar/foto pada komputer yang sesuai dengan ukuran header Tema bawaan WordPress. Misalnya gambar header yang digunakan berukuran 950 x 200 pixels. Namun bila gambar yang di-upload berbeda dengan ukuran yang disarankan, maka akan diminta untuk meng-crop atau memotong gambar tersebut agar sesuai dengan ukuran header website. Dapat dilihat pada gambar dibawah. Pilih [Crop Image] Setelah itu dipilh Crop Image maka akan tampil tampilan berikut. Anda dapat sekaligus melakukan edit pada Site Title. Dengan Cara Klik tombil pena pada Site Title. Setelah itu lakukan edit. 14
Terakhir klik [Save and Publish] yang berada di bagian kiri atas, lalu Refresh halaman utama website dan lihat hasilnya. Mengganti Background Background atau gambar latar belakang dapat diubah dengan menggunakan foto, logo lembaga/perusahaan ataupun gambar hasil download dari Mbah Google.. Dapat pula dicoba link http://subtlepatterns.com/. Link ini menyediaka background siap pakai. Ada beberapa pattern yang memiliki format.png yang dapat digunakan untuk background website. Setelah gambar background siap, selanjutnya masuk ke Menu Dashboard WordPress, yaitu Menu Appearance/Tampilan > Customize > Color& Background Sub Menu background/latar belakang terdiri dari dua bagian: pengaturan untuk pengambilan gambar, apakah dari komputer/laptop atau dari media library (arsip website) pengaturan opsi tampilan background. Untuk opsi tampilan terdiri dari : Posisi (Kiri, Tengah, Kanan), Ulangi (Tidak Berulang, Ubin, Pasang Merata Secara Horizontal, Pasang Merata Secara Vertical),Lampiran (Tarik, dan Tetap), dan Warna Latar Belakang (Jika background/latar belakang hanya diberi sebuah warna saja) Contohnya dapat dilihat pada gambar berikut : 15
Memasang Video Youtube di Sidebar WordPress memiliki fasilitas widget. Dengan widget ini antara lain dapat menyisipkan video dari Youtube yang sudah dipilih sebelumnya ke website yang dibuat. Cara untuk membuatnya sebagai berikut : 1. Login ke Admin WordPress. 2. Di sidebar sebelah kiri pilih bagian Tampilan lalu klik tanda [ ] agar submenu dropdown-nya muncul 16
3. Kemudian klik sub menu Widget 4. Pada halaman Widget pilih widget Teks klik Tambahkan Widget / New Widget 5. Kemudian tahan di samping kanan pada menu Kaki halaman / Header kemudian klik tanda[ ] pada pojok kanan atas widgets text tersebut agar area dropdown-nya muncul 17
6. Cari video yang diinginkan di www.youtube.com lalu klik share atau bagikan, kemudian klik Sematkan dan copy bagian link video tersebut. 7. Ketikkan kode dibawah ini pada area tersebut. Link video yang dimasukkan dapat diganti sesuai dengan video yang diinginkan <iframe width="560" height="315" src="https://www.youtube.com/embed/snc0obazfac?list=plmuizthxpvlqiew51bhsgtr Pwfbdglmdq" frameborder="0" allowfullscreen></iframe> Membuat Dua Kolom Tulisan di Artikel Dalam membuat tulisan, bila ingin dalam tampilan dua kolom, maka dapat diikuti cara berikut: 18
1. Login ke Admin WordPress. 2. Klik menu [Pos-Pos]/[Posts], Tambah baru / Add New dan pilih mode [HTML atau Text]. 3. Copy-kan kode dibawah ini pada mode [HTML atau Text]: 4. Kemudian kembali ke mode [Visual]. 5. Bila tabel sudah tampak pada halaman penulisan, lakukan penulisan pada masing-masing kolom sesuai dengan keinginan. Contoh : 19
6. Silahkan terbitkan dengan meng-klik [Publish]. Setelah di publish tampilan berikut akan muncul : 20
Menambahkan Halaman Pada saat membuat artikel, sebenarnya saat itu sedang membuat halaman/page. Namun, halaman tersebut akan terdorong oleh artikel yang baru dibuat sehingga harus mencarinya terlebih dahulu untuk menampilkannya. Jika informasi yang ditampilkan sering dibuka, sebaiknya ditambahkan halaman dalam bentuk menu. Misalnya, menu tentang pemilik web/website, menu kontak, atau yang lainnya. Membuat Halaman Menu Baru Untuk menambah menu pada WordPress, langkah pertama yang dilakukan yaitu : klik Tampilan, pilih menu, lalu isikan nama menu (contoh : My Menu), kemudian pilih menu yang akan diedit (harus disesuaikan dengan Nama Menu ) klik pada bagian Kategori, pilih Lihat Semua / View All, checklist Tanpa Kategori / Uncategorized lalu klik Tambahkan ke Menu / Add New Menu. 21
Setelah itu, pada struktur menu terlihat menu dengan nama Tanpa Kategori / Uncategorized klik menu tersebut dan ubah sesuai dengan nama menu yang diinginkan (contoh: Galery). Kemudian, pada pengaturan menu ceklis bagian Menu Utama / Primary Menu lalu klik Simpan Menu / Save Setelah itu, pada Kelola Lokasi / Manage Location harus disesuaikan berdasarkan Nama Menu / New Menu yang telah dibuat sebelumnya kemudian klik Simpan Perubahan / Save Changes. 22
Selanjutnya, kembali ke My Situs, pilih bagian Menu, klik Galery (menu yang telah dibuat sebelumnya) lalu pada bagian halaman pilih Buat halaman baru untuk item menu ini / Create a New Page for this menu item 23
Setelah semua langkah telah dilakukan, maka menu baru pada halaman web akan bertambah seperti gambar berikut. Membuat Posting dengan Aneka Font Pada umumnya halaman postingan warnanya seragam alias sama dalam satu Themes WordPress. Rata-rata warna yang digunakan adalah cenderung warna putih. Beberapa Themes WordPress ada juga yang menggunakan beberapa warna gelap sebagai dasar halaman postingannya. Namun yang jelas dalam satu themes, halaman posting warnanya tetap sama. 1. Klik Post > All Post > lalu klik pos yang ingin diedit ( contoh : busana muslimah ). Lakukan editing. Setelah selesai diedit lalu klik update 24
Berikut ini tampilan setelah di perbaharui. Membuat Halaman Gallery Foto Untuk membuat galeri terlebih dahulu kita menginstall plugin Simple Viewer ke website kita. Caranya: 1. Pilih Halaman / Page, lalu klik Semua halaman / All pages kemudian pilih halaman yang akan di buat galeri, contoh : galeri akan dibuat pada halaman Galery. 2. Pilih sunting pada bagian halaman Galery, kemudian pilih buat galeri / Create Gallery dan klik unggah berkas untuk mengunggah foto yang diinginkan, kemudian klik Buat galeri baru / Create New Gallery. 25
3. Pada bagian pengaturan galeri, sesuaikan dengan kebutuhan, kemudian klik Sisipkan galeri / Insert Gallery. 4. Lalu klik Terbitkan / Update. 5. Tampilan ketika di terbitan. 26
Menambah Media Media Library atau Pustaka digunakan untuk mengatur dan menampilkan gambar atau file multimedia. Hal ini bertujuan untuk memperindah tampilan dan menambahkan fitur audio/video pada website. Klik Media > Library maka akan muncul tampilan sebagai berikut Klik pada bagian All Setected Item > Video / Audio yang diinginkan Tag dan Kategori Mengorganisasi Posting Tulisan Tag dan kategori memiliki perananan penting bagi Search Engine. Karena dengan adanya tag dan kategori search engine akan lebih mudah menemukan post pada Website yang sesuai dengan kriteria atau kata kunci pencarian oleh user. Selain itu tag dan kategori dapat memudahkan user dalam mencari posting yang memiliki keterkaitan (tag yang sama atau kategori yang sama). Post Website akan lebih terorganisir dengan adanya kategori dan tag di tiap post. 27
Fungsi Tag Menandai sebuah post sehingga lebih terorganisir Tujuan Tag 1. Memudahkan user dalam mencari post yang memiliki keterkaitan dengan post saat ini. 2. Memudahkan user dalam mencari post dengan tema tertentu/ keyword tertentu. 3. Memudahkan Search Engine dalam mengindex Website Kita. Fungsi dan Tujuan Kategori Fungsi kategori adalah untuk mengumpulkan post yang memiliki kategori yang sama, sehingga lebih terorganisasi dan user memilih post yang memiliki kategori yang sama. Menampilkan widget pada sidebar Istilah Widget di dunia dalam Website berarti perangkat mekanis kecil seperti knop atau saklar, perangkat mekanis kecil atau kontrol, atau gadget. WordPress menyediakan banyak sekali Widget yang dapat dipasang pada sidebar Website. Beberapa langkah untuk mengaktifkan widget pada halaman Website : 1. Pembuatan Widget Kalender Untuk pembuatan widget kalender yang pertama dilakukan adalah: klik bagian kalender, lalu klik tambahkan widget, kemudian isi judul (contoh : agenda kegiatan) dan klik tombol simpan untuk menyimpan perubahan tersebut. 28
2. Tampilan widget kalender pada halaman wordpress. 29
Menampilkan widget Twitter Box pada sidebar 1. Masuk ke halaman Tampilan / Apperance dan klik Widget pada Twitter Lini Masa Twitter setelah itu klik [Apply] 2. Klik pada menu Lini Masa Twitter kemudian isikan kotak isian sesuai dengan judul dan id twitter yang ingin ditampilkan kemudian klik [Update Option] 30
3. Untuk menampilkan twitter box pada sidebar, masuk ke halaman Widget kemudian drag Lini Masa Twitter ke area sidebar yang diinginkan. 31