Membuat Web BERBASIS WORDPRESS Dibuat untuk kegiatan Pembinaan Teknologi Informasi bagi Perangkat Desa Se- Kecamatan Bener Tahun 2015 bersama ANDRIAWAN Kaur Pemerintahan Desa Ngasinan 1
2
ANDRIAWAN Kaur Pemerintahan Desa Ngasinan Andriawan bekerja sebagai Kaur Pemerintahan di Desa Ngasinan sejak tahun 2009. Mengelola data desa adalah kegiatan utama. Membuat dokumen-dokumen desa bahkan dikerjakan setiap hari, bahkan di malam hari. Selain itu juga bekerja sebagai Tenaga Kependidikan di salah satu sekolah swasta di Desa Sidomukti, yaitu MTs Ma arif NU Bener. Kemudian di mulai tahun 2011 mencoba mempelajari ilmu di bidang desain grafis. Desain grafis yang dibuat diantaranya: Logo, Kartu Nama, Template Power Point, dan Layout Buku. Latar belakang pendidikan adalah SMK Teknik Elektro yang sama sekali tidak berhubungan dengan bidang pekerjaan yang dilakukan. 3
Target Kegiatan Objectives: 99 Pemerintah Desa mampu mengelola dan memanfaatkan web secara mandiri guna mendukung keterbukaan informasi di Desa. 99 Pemerintah Desa untuk dapat dengan rutin memperbaharui konten berita perihal desa di situs. 9 9 Pemerintah Desa dapat menambahkan halaman berisi data desa seperti: Profil Desa, Visi Misi, Struktur Organisasi, Data Jumlah Penduduk dan lain sebagainya. 4
Agenda: INTRO: Bagian- bagian halaman sebuah situs/website. Mendaftar layanan web gratis. Menambahkan pos. Menambahkan halaman. Mengatur tampilan. Catatan: 5
INTRO 1 2 3 Bagian Hamalan Situs: 1. Judul dan Slogan 2. Menu Navigasi 3. Kepala Hamalan/ Header 4. Pos 5. Bilah Sisi/Sidebar 6. Kaki Halaman/Footer 4 5 6 6
Mendaftar Layanan 1 2 Untuk mulai menggunakan layanan wordpress gratis, kita harus membukan halaman web wordpress dengan alamat: https://wordpress.com (1) Ketikkan pada baris alamat pada web browser dan anda akan mendapatkan tampilan seperti pada gambar di atas. Untuk mendaftar sebuah situs web dengan mengklik tombol Buat Situs Web (2) wordpress memiliki 4 langkah yang dapat dilihat pada halaman selanjutnya. 7
Langkah pertama: Pada langkah pertama kita akan mendapati sebuah halaman yang memberikan kita pilihan tema yang akan kita gunakan. Apabila kita menemukan sebuah tema yang sesuai, maka kita dapat langsung memilih, tetapi jika kita ingin menentukan tema dilain waktu kita dapat mengklik tombol Lewati. Catatan: 8
Langkah Kedua: Pada langkah kedua ini kita menentukan nama domain atau alamat wordpress yang akan kita gunakan. Disediakan beberapa opsi gratis dan berbayar. Jika anda ingin menggunakan opsi gratis silahkan klik tombol pilih pada pilihan dimana terdapat kata Gratis. 9
Langkah Ketiga: Pada langkah ketiga ini kita menentukan paket wordpress yang akan digunakan, paket ini berhubung jumlah ruang penyimpanan data. Untuk versi gratis memiliki ruang penyimpanan data sebesar 3 GB. Untuk melanjutkan ke langkah selanjutnya klik pada Pilih Paket Gratis untuk memilih paket versi gratis. 10
Langkah Keempat: Pada langkah keempat ada harus memasukkan: 1. Alamat email 2. Nama Pengguna 3. Kata Sandi Data ini akan digunakan ketika akan login kembali ke wordpress maupun ke halaman admin website. Untuk mengkahiri langkah ini klik pada tombol Simpan Pengaturan. 11
Setelah kita menyimpan pengaturan dari langkah 1 sampai dengan langkah 4 kita akan mendapati tampilan seperti pada gambar di atas. Kita di haruskan untuk memverifikasi alamat emait. Verifikasi dimaksudkan untuk mengetahui bahwa kita adalah benar-benar pemilik email yang digunakan untuk mendaftar. Apabila tidak melakukan verifikasi email maka pengguna tidak dapat mengirimkan sebuah pos maupun menambahkan halaman pada website. Bagaimana Cara Verifikasi? Silahkan buka email dan pastikan ada email dari worpress seperti pada gambar disamping. Lakukan klik pada tombol Konfirmasi Alamat Email Pastikan anda mendapatkan halaman wordpress terbuka setelah anda klik tombol Konfirmasi Alamat Email dengan informasi yang mengatakan bahwa email berhasil diverifikasi dan ini menandakan bahwa proses pendaftaran sudah selesai. 12
1 2 Setelah pendaftar selesai kita dapat melakukan logout atau keluar dari wordpress: 1. Klik pada avatar akun; 2. Klik tombol Keluar. Catatan: 13
Mulai Menggunakan Wordpress Login Admin Untuk login/masuk sebagai admin dan mulai menggunakan semua fungsi yang tersedia yang perlu dilakukan adalah: 1. Ketikkan alamat web anda di tambahkan /admin, misal: https://[namablog]. wordpress.com/admin dan akan muncul seperti pada gambar di bawah. 2. Masukkan email sebagai nama pengguna dan password sesuai dengan password saat mendaftar, dan akhiri dengan klik tombol Log Masuk. 14
Tampilan Utama Halaman Admin Gambar di atas merupakan halam web setelah anda ber hasil login, disini ditampilkan semua fungsi yang dapat digunakan untuk membuat pos atau pun mempercantik tampilan website. Beberapa menu atau fungsi yang paling banyak digunakan adalah: 1. Pos-pos Sub Menu: Semua Pos, Tambah Baru, Kategori, Tag, Salin Sebuah Pos. 2. Media Sub Menu: Pustaka, Tambah Baru. 3. Halaman Sub Menu: Semua Halaman, Tambag Baru, Salin Sebuah Halaman. 4. Tampilan Sub Menu: Tema, Kustomisasi, Widget, Menu, Kepala Halaman, Latar Belakang, Mobile. 15
Menambahkan Pos Pos adalah bersifat dinamis, jadi penampilan pada web akan berdasarkan urutan waktu pembuatannya. Bagaimana menambahkan Pos? Yang perlu dilakukan adalah klik pada menu Pospos, dan akan muncul tampilan seperti gambar di bawah ini. Sub menu dari Pospos akan muncul di bawahnya, Semua Pos, Tambah Baru, Kategori, Tag dan Salin Sebuah Pos. Klik pada Tambah Baru dan akan web site akan menambilkan halaman yang menyediakan untuk membuat sebuah Pos Baru. Sebuah tempat untuk judul dan tempat untuk menuliskan informasi. Lihat gambar berikut: Area menuliskan informasi 16
Mengatur Pos 1 2 Pada saat membuat pos kita juga dapat menambahkan media berupa gambar, polling, Formulir Kontak, dan juga informasi lokasi (Seperti di tunjukkan dengan angka 1). Dapat juga dapat beberapa pengaturan berikut: Text tebal, Text miring, Text di coret, Daftar Tanpa Nomor, Daftar dengan Nomor, Text Rata Kiri, Text Rata Tengah, Text Rata Kanan dan lainnya (Seperti di tunjukkan dengan angka 2). Catatan: 17
Menambahkan Media Gambar 1 2 3 Langkah yang perlu dilakukan untuk menyisipkan sebuah gambar pada pos adalah sebagai berikut: Langkah pertama adalah klik pada tombol Tambah Media. Akan muncul jendelala seperti yang di tunjukkan dengan angka 2. Klik pada Pilih Berkas dan akan membuka jendela untuk memilih file gambar yang akan diupload. Pilih file kemudian diikuti dengan klik tombol Open. 18
Langkah keempat adalah memilih gambar yang berhasil di upload dan klik tombol Sisipkan ke pos 4 Apabila langkah yang dilakukan sudah benar maka seharusnya gambar akan masuk ke dalam pos baru yang kita buat, terlihat seperti gambar di bawah ini. 19
Menerbitkan/Mempublikasikan Pos Apabila pos baru yang kita buat sudah selesai sekarang saatnya untuk mempublikasikan pos. Silahkan cari tombol Terbitkan seperti yang terlihat pada gambar di bawah atau jika belum yakin untuk di publikasikan dapat mengklik tombol Pratampil untuk meninjau kembali halaman sebelum dipublikasikan. Untuk melihat pos terbaru yang kita berhasil di terbitkan atau tidak, dapat dilihat dengan cara mengunjungi halaman website. 20
Kategori Pos Kategori digunakan untuk memudahkan kita saat mencari sebuah pos, misal kita membuat penyaringan sebuah pos di kategori pemerintahan, maka yang akan ditampilkan hanya pos-pos yang dikategorikan bidang pemerintahan. Catatan: 21
Untuk membuat kategori baru, klik pada menu Kategori (sub menu Pos-pos) masukkan: 1. Nama Kategori 2. Pilih Induk (Pilih tidak ada jika kategori merupakan kategori utama) 3. Tambahkan Deskripsi Disamping merupakan contoh pembuatan kategori yang akan diaplikasikan pada pospos Catatan: 22
Edit Pos Apabila pos yang kita buat memiliki kesalahan ketik ataupun ingin merubah gambar yang tersisip kita dapat melakukan edit pos. Edit pos ada dua macam, yakni: 1. Edit menyeluruh Edit menyeluruh akan memiliki tampilan persis seperti ketika kita membuat pos baru (lihat halaman 17). Edit menyeluruh lebih berfungsi untuk mengedit kesalahan ketik ataupun menambah atau mengganti gambar. 2. Edit Cepat Edit Cepat dapat digunakan untuk merubah pos khusus pada judul, tanggal pembuatan pos, maupun kategori. Langkah-langkah Edit Pos Langkah pertama untuk mengedit pos adalah dengan membuka daftar pos yang sudah dibuat. Klik pada menu Pos-pos dan akan ditampilkan pos yang sudah dibuat. 23
Langkah Selanjutnya adalah arahkan mouse ke salah satu pos yang kita buat, maka akan muncul menu Edit, Sunting Cepat, Tong Sampah dan Tampil. Pilih menu sesuai perubahan apa yang diperlukan. Berikut adalah untuk perubahan cepat dimana hanya diperbolehkan untuk merubah Judul, slug atau alamat/link yang akan ditampilkan, tanggal, kategori dan tag atau pelabelan. Jangan lupa klik tombol perbaharui apabila telah selesai melakukan perubahan. 24
Gambar di atas merupakan tambilan ketika kita klik tombol Edit, perbedaan dengan edit cepat adalah, isi pos dapat dirubah atau ditambah. Jangan lupa klik tombol perbaharui apabila telah selesai melakukan perubahan. TUGAS: Buatlah 3 pos dengan 3 kategori! Catatan: 25
Menambahkan Halaman Halaman merupakan bagian dari website yang tidak terpengaruh oleh dibuatnya halaman baru atau bersifat statis. Cara pembuatannya sama dengan pembuatan pos. Perbedaan adalah bahwa halaman akan langsung menjadi bagian dari Menu Utama. Perbedaan lainya adalah halaman tidak memiliki kategori. Membuat Halaman Baru Langkah untuk membuat sebuah halaman baru adalah klik menu Halaman maka seperti terlihat pada gambar akan ditambilkan daftar halaman yang sudah di buat. Untuk membuat halaman baru klik Tombol Tambah Baru 26
Setelah klik Tambah Baru adalah menginput judul dan menulis isi yang akan dipablikasikan. Ada dapat menambahkan gambar, merubah format text dan lain sebagainya, sama persis ketika kita membuat pos. (lihat pada halaman 17 dan 18). Jangan lupa klik tombol Terbitkan ketika halaman baru yang dibuat selesai. Catatan: 27
Berikut adalah halaman yang sudah berhasil dipublikasikan. Visi Misi menjadi salah satu menu pada Menu Utama website. TUGAS: Buatlah 3 halaman untuk Profil Desa, Visi Misi, dan Struktur Organisasi Desa! 28
Pengaturan Tampilan Untuk mempercantik tampilan website kita perlu melakukan sedikit pengaturan-perngaturan melalui menu Tampilan pada halaman wp-admin. Menu Tampilan memiliki beberapa sub menu yaitu: Tema Untuk memilih tema Kustomisasi Untuk pengaturan elemen tema yang aktif Widget Menambahkan elemen pada bilah sisi atau sidebar Menu Merubah menu, urutan menu, atau membuat sub menu Kepala Halaman / Header Menambahkan/mengganti kepala halaman berupa gambar Latar Belakan Merubah latar belakang/background halaman dapat berupa warna maupun gambar Mobile Untuk mengaktifkan fitur tampilan web untuk perangkat bergerak Catatan: 29
Memilih Tema / Themes Langkah untuk memilih tema adalah klik pada menu Tema dan akan ditampilkan daftar tema, kemudian arahkan mouse ke tema yang disukai dan klik tombol Aktifkan. 30
Kustomisasi Tema Aktif Setelah anda klik menu Kustomisasi pada sub menu tampilan maka akan ditampilkan seperti gambar di atas. Pada bagian ini tersedia beberapa menu yaitu: Custom Design* Identitas Situs Warna & Latar Belakang Font Gambar Tajuk Menu Widget Halaman Depan Statis Catatan: 31
Kustomisasi: Identitas Situs Menu ini dimaksudkan untuk merubah judul situs dan slogan yang akan digunakan. Klik pada menu Identitas Situs kemudian muncul tampilan seperti gambar di bawah. Isi pada isian Judul Situs untuk merubah judul dan isi pada Slogan untuk menambahkan slogan. Setiap perubahan akan langsung terlihat. Jangan lupa untuk klik tombol Simpan & Terbitkan setiap selesai melakukan perubahan. Kustomisasi: Warna dan Latar Belakang 2 Menu ini digunakan untuk merubah warna latar belakang situs. 1 3 Langkah-langkah: Klik pada menu Warna dan Latar Belakang maka akan muncul tampilan semperti pada gambar 1 disamping. Klik tombol Ubah pada warna aktif dan akan ditampilkan menu seperti pada gambar 2. Pilih warna yang disediakan atau bisa juga memilih gambar akhiri dengan Simpan & Terbitkan jika selesai. Gambar 3 menunjukkan hasil dengan pemilihan warna latar belakang coklat. 32
Kustomisasi: Font / Jenis Huruf Menu ini digunakan untuk merubah Jenis huruf / font yang digunakan. Setelah kita klik pada menu Font pada kustomisasi maka kita dapat merubah jenis font pada tajuk/judul konten dan jenis font dasar atau jenis huruf pada isi sebuah informasi pada situs. Catatan: 33
Kustomisasi: Menu Menu Navigasi dipergunakan untuk meloncat dari halaman atau pos yang satu ke halaman atau pos yang lainnya, atau menuju ke alamat di luar situs yang kita miliki. 1 Langkah-langkah untuk mengatur Menu adalah sebagai berikut: Setelah anda klik pada Menu maka akan ditampilkan menu seperti disamping. 2 Langkah selanjutnya adalah klik pada Primary Menu atau Menu Utama pada gambar ditunjukkan dengan Menu 1 pada gambar 1, dan akan ditampilkan seperti gambar 2 disamping. Untuk menambahkan menu kita lakukan klik pada Tambahkan Item. 34
3 Setelah kita klik Tambahkan Item maka akan muncul tampilan seperti gambar 3 disamping. Untuk menambahkan menu kita dapat memilih dengan Custom links jika kita akan membuat link ke situs lain. Namun, jika kita akan membuat link yang berada di dalam situs kita dapat mencari pada Pospos, Halaman, atau Kategori. Pada gambar disamping item yang ditambahkan pada menu ditandai dengan tanda centang, setelah kita melakukan klik pada tanda plus. SUB MENU Bagaimana untuk membuat sub menu? Untuk membuat sub menu kita harus sudah menyelesaikan langkah pada gambar 3. 4 Seperti pada gambar 4 disamping, sebagai contoh kita akan membuat Visi Misi dan Portofolio sebagai sub menu dari Profil, maka yang perlu kita lakukan adalah klik dan tahan mouse pada menu Visi Misi kemudian geser ke bawah menu Profil dan posisikan seperti pada gambar 4. Jika langkah-langkah pengaturan menu yang dibuat benar maka Menu Utama pada situs akan ditampilkan seperti gambar 5 di bawah. 5 35
Kustomisasi: Gambar Tajuk / Header / Kepala Halaman 1 Menu ini digunakan untuk menambah/mengganti header atau kepala halaman dengan gambar. Langkahlangkahnya sebagai berikut: Klik pada menu Gambar Tajuk dan akan menampilkan seperti gambar 1 kemudian klik pada Tambahkan gambar baru dan akan muncul jendela untuk memilih gambar seperti ditunjukkan angka 2. Anda dapat mengupload gambar yang sudah ada ataupun mengupload gambar baru dengan memilih pada tab Unggah Berkas. 2 3 Langkah berikutnya (3) adalah memangkas/crop gambar jika terlalu lebar atau tinggi diakhiri dengan klik tombol Pangkas Gambar 4 Gambar 4 menunjukkan bahwa kepala halaman/ header berhasil dipasang. Kita dapat menambahkan beberapa gambar untuk ditampilkan secara acak. 36
Kustomisasi: Widget Widget adalah elemen yang berada pada sisi kanan atau kiri atau bawah halaman situs, ini tergantung dari jenis tema yang digunakan. Terdapat banyak widget yang dapat dimunculkan pada situs, mesin pencari, jadwal kegiatan, kalender, dan masih banyak lagi. Pada gambar di bawah ditambahkan widget pada bilah sisi/sidebar: Pencari, Pospos terakhir, Arsip dan Kategori. Berikut beberapa widget yang dapat ditambahkan: 37
Pengaturan - Umum Apabila tampilan worpress berbahasa inggris dan kita tidak memehaminya kita dapat mengubah bahasa utama menjadi Bahasa Indonesia. Langkah untuk mengubah adalah sebagai berikut: 1. Klik Setting>General 2. Tarik kebawah dan temukan Language dan klik pada text modify the interface language 3. Setelah halaman Personal Settings terbuka cari Interface language kemudian pilih id-bahasa Indonesia kemudian klik Save Changes. Pengaturan umum juga menyediakan beberapa pengaturan berikut: Judul Situs, Slogan, Zona Waktu, Format Tanggal, Format Waktu, dan Icon situs. 38
TERIMA KASIH. Tutorial ini dibuat untuk dipergunakan pada kegiatan Pembinaan Penggunaan Teknologi Informasi Bagi Aparat Pemerintah Desa di Kecamatan Bener Tahun 2015. Semoga isi dari tutorial ini dapat bermanfaat bagi siapapun yang membaca. Mohon untuk tidak menduplikasi. 39
Dusun Krajan RT 003 RW 05 Desa Ngasinan Kec. Bener Kab. Purworejo 54183 e: dinandria@gmail.com ph: 0812 2842 9903 www.andrut.info Jangan diduplikasi 40