TI_Bener_2015

Membuat Web 

BERBASIS 

WORDPRESS 

Dibuat untuk kegiatan Pembinaan Teknologi Informasi bagi Perangkat Desa Se- 

Kecamatan Bener Tahun 2015 

bersama 

ANDRIAWAN 

Kaur Pemerintahan Desa Ngasinan 

Merancang Web Berbasis Wordpress © Andriawan 2015 


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

TI_Bener_2015

Create successful ePaper yourself

Delete template?

Save as template?