Modul Pembuatan Website Menggunakan Wordpress by Muhammad Syarif

Design : www.mhdsyarif.p.ht

Modul Pembuatan Website Menggunakan

07 - 08 Mei 2013

Versi 3.5.1

Oleh: Divisi Web Puskom UR http://puskom.unri.ac.id

Daftar Isi

Daftar Isi...................................................................................................................................i A. Install XAMPP........................................................................................................................ 1 B. Install Wordpress Di Localhost .......................................................................................5 C. Penggunaan Wordpress .................................................................................................13  Mengenal Bagian-bagian Wordpress..................................................................................13  Login Admin ........................................................................................................................14  Pengelolaan Tulisan (Posts) ................................................................................................15 a. Membuat Tulisan .................................................................................................15 b. Merubah Tulisan .................................................................................................. 17 c. Menghapus Tulisan ..............................................................................................18 d. Menyisipkan Gambar Di Dalam Tulisan ............................................................18 e. Membuat Video Youtube Di Dalam Tulisan .....................................................23  Pengelolaan Halaman (Pages).............................................................................................26 a. Membuat Halaman ...............................................................................................26 b. Merubah Halaman................................................................................................27 c. Menghapus Halaman ...........................................................................................28  Pengelolaan Tampilan (Appearance)..................................................................................29 a. Mengganti Tampilan Website .............................................................................28 b. Mengganti Tampilan Website .............................................................................28 c. Mengatur Widget Di Sidebar ..............................................................................31 d. Mengatur Menu (Menus).....................................................................................32 e. Mengganti Gambar Header .................................................................................34 Daftar Pustaka ...........................................................................................................................37

A. Install XAMPP Ada beberapa langkah dalam install XAMPP sebagai berikut : 1.

Download XAMPP dialamat : http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.7.1/xamp p-win32-1.7.1.exe/download

Klik dua kali file XAMPP (Menggunakan xampp-win32-1.7.1-installer.exe, ), apabila mempunyai versi XAMPP yang lebih baru, cara instalasi kemungkinan masih sama.

Klik [Next] pada jendela Setup Wizard yang muncul.

Berikutnya diminta memilih folder tempat XAMPP dipasang. Untuk mudahnya pilih saja drive c:\, seperti default-nya dan klik [Next].

Install XAMPP | http://puskom.unri.ac.id

Page 1

Pada jendela yang muncul berikutnya, tandai semua yang ada pada service section dan klik [Install].

Tunggu beberapa menit sementara XAMPP di-instal.

Install XAMPP | http://puskom.unri.ac.id

Page 2

Klik [Finish] setelah XAMPP selesai diinstal.

Akan muncul pesan, apakah akan menjalankan XAMPP Control Panel sekarang atau lain kali. Klik [Yes] bila akan menjalankannya, klik [No] bila jika tidak.

Untuk melihat hasilnya buka web browser, ketikkan http://localhost pada jendela address, akan muncul tampilan seperti di bawah ini, Klik [English] untuk memilih bahasa Inggris.

Install XAMPP | http://puskom.unri.ac.id

Page 3

10. Setelah itu akan muncul halaman seperti dibawah ini.

Install XAMPP | http://puskom.unri.ac.id

Page 4

B. Install Wordpress di Localhost 1. Download Wordpress di alamat : http://wordpress.org/latest.zip 2. Extract here Wordpress yang telah di download. Akan muncul sebuah folder yang secara default diberi nama "Wordpress".

Install Wordpress di Localhost | http://puskom.unri.ac.id

Page 5

3. Pindahkan folder Wordpress CMS yang bernama "Wordpress" tersebut ke dalam

"C:\xampp\htdocs".

Yang

paling

utama

diperhatikan

adalah

penyimpanan yang harus dilakukan di folder "htdocs". Sebab ketika membuka URL web tersebut pada browser, sistem localserver XAMPP yang digunakan akan membaca folder htdocs tersebut dan akan mencari web yang dimaksud sehingga dimunculkan pada browser.

4. Jika sudah memindahkan atau meng-copy paste folder Wordpress tersebut, folder â&#x20AC;&#x153;Wordpressâ&#x20AC;? boleh dirubah sesuai keinginan. Untuk tutorial sekarang ini nama folder tidak perlu dirubah. 5. Buka web browser (Mozilla Firefox, Internet Explorer, Google Chrome, Opera), kemudian ketik alamat "http://localhost/phpmyadmin" pada jendela address sehingga muncul halaman phpMyAdmin. kemudian buat database yang akan digunakan oleh Wordpress yang akan diinstal. Cukup tulis nama database yang akan digunakan pada kotak di bawah tulisan "Create new database". Misalkan diberi nama "belajar_Wordpress". Kemudian klik tombol "Create" yang ada di sebelah kanannya.

Install Wordpress di Localhost | http://puskom.unri.ac.id

Page 6

6. Masih pada web browser, ketikkan juga alamat "http://localhost/wordpress" pada address bar. Perhatikan bahwa alamat tersebut bergantung pada penamaan folder yang diberikan pada langkah 4. Akan muncul tampilan Wordpress error seperti gambar di bawah ini karena belum terdapat file bernama wp-confic.php. File tersebut merupakan file yang berisi penganturan (konfigurasi) untuk web Wordpress. Untuk membuat file konfigurasi tersebut, klik tombol yang bertuliskan "Create a Configuration File".

7. Selanjutnya akan muncul halaman "Setup Configuration File" seperti berikut ini. Klik tombol yang bertuliskan "Let's Go!".

8. Akan muncul halaman untuk konfigurasi : 

Dabase Name : isi dengan nama yang telah dibuat pada langkah 5.



User Name : isi dengan username yang punya akses untuk masuk ke dalam sistem phpMyAdmin pada server yang digunakan. Secara default biasanya usernamenya adalah "root".



Password : jika phpmyadmin mempunyai password masukkan password, untuk sementara password phpmyadmin secara default kosong.



Database Host : karena kita menyimpan/menghosting web pada localhost, maka isi dengan "localhost".



Table Prefix : digunakan untuk mengunikkan tabel pada database "belajar_wordpress". Untuk sementara gunakan yang default, yaitu "wp_".

Seteleh itu klik tombol “Submit”.

Install Wordpress di Localhost | http://puskom.unri.ac.id

Page 8

9. Jika pengaturan sudah benar, maka akan muncul halaman seperti di bawah ini. Klik tombol “Run the install”.

10. Selanjutnya akan diminta halaman untuk mengisi informasi tentang web yang akan dibuat. Ketikkan sesuai data yang diinginkan, setelah itu klik “Install Wordpress”

tombol

11. Setelah instalasi sukses dijalankan, silahkan klik tombol â&#x20AC;&#x153;loginâ&#x20AC;?

Install Wordpress di Localhost | http://puskom.unri.ac.id

Page 10

12. Ketikkan username dan password untuk masuk kehalaman admin.

13. Selanjutnya akan muncul tampilan seperti dibawah ini.

14. Untuk melihat hasil web yang telah dibuat ketikkan alamat : http://localhost/wordpress

15. Instalasi Wordpress telah berhasil.

Install Wordpress di Localhost | http://puskom.unri.ac.id

Page 12

C. Penggunaan Wordpress ď&#x192;&#x2DC; Mengenal bagian-bagian Wordpress Sebelum mulai menggunakan Wordpress yang telah terinstall, ada baiknya mengenali terlebih dahulu bagian-bagian dari Wordpress serta istilah-istilah yang akan digunakan. Sebagai contoh disini memakai themes default dari Wordpress. Tampilan tiap themes tentu bermacam-macam, jadi untuk sementara digunakan themes default.

A B C1 C2 C4

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 13

Berikut keterangan dari gambar diatas : A. Header

: Tempat meletakkan judul, keterangan singkat maupun gambar tentang blog.

B. Menu

: Menampilkan menu.

C. Content

: Tempat munculnya artikel-artikel blog. Pada halaman utama secara default akan muncul artikel-artikel terbaru lengkap dengan Judul artikel yang memiliki link ke artikel tersebut.



: Judul artikel



: Komentar artikel



: Kategori artikel



: Tanggal dibuat artikel

D. Sidebar

: Menampilkan kumpulan link, dan aneka fasilitas. Di area ini bias diletakkan informasi apa saja. Mulai form pencarian, daftar halaman statis (Pages), Arsip (Archives), Category (Kategori), Kumpulan Link (Blogroll), Meta, dan lain-lain.

E. Footer

: Informasi bagian kaki blog, biasanya berisi link RSS artikel dan komentar, serta informasi kecil mengenai blog.

 Login Admin Untuk mengelola Wordpress, maka anda harus dikenali sebagai admin oleh Wordpress. Oleh karena itu anda harus login ke Admin Panel. Ada tiga cara untuk mengakses Admin Panel : a. Melalui URL : http://localhost/wp-login.php b. Melalui URL : http://localhost/wp-admin c. Mengklik link Login yang ada di sidebar.

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 14

Berikutnya, masukkan username dan password pada form yang tersedia. Selanjutnya cukup mengklik tombol Login dan anda akan masuk ke Dashboard Admin Panel.

Diatas merupakan gambar dari dashboard admin panel wordpress. ď&#x192;&#x2DC; Pengelolaan Tulisan (Posts) a. Membuat Tulisan 1. Klik [Post] pada sisi kiri halaman 2. Pilih [Add New] 3. Tulis judul dari artikel

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 15

4. Tulis isi artikel pada kotak kosong di mana Anda bisa memasukkan tulisan, link ke gambar, dan informasi apapun yang ingin Anda tampilkan di situs Anda. Anda dapat menggunakan baik Visual atau tampilan Teks untuk menulis posting Anda. 5. Pilih Categories (Kategori berfungsi untuk mengelompokan beberapa tulisan berdasarkan isi atau tema dari tulisan. Hal ini agar pengunjung blog mudah untuk melakukan pencarian dan menemukan konten suatu tulisan pada blog).  Klik [+ Add New Category], Kumudian tulis nama kategori yang akan di buat untuk tulisan anda. 6. Pilih Tags (Tag adalah semacam penggolongan tulisan. Di WordPress sendiri terdapat 2 jenis penggolongan tulisan, yaitu kategori dan tag. Penggolongan tag lebih spesifik. Contoh bila anda membuat tulisan tentang “About Wordpress”, maka tag yang buat adalah “WordPress”).  Tulis nama tag yang ingin dibuat dan klik [Add] 7. Setelah selesai, klik tombol [Publish]

1 2

Tulis Judul Artikel 3

7 Isi Artikel 4

5 6

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 16

Untuk melihat hasilnya klik [view post]

b. Merubah Tulisan 1. Klik [Post] pada sisi kiri halaman 2. Setelah tampil halaman â&#x20AC;&#x2DC;Postsâ&#x20AC;&#x2122;, silahkan pilih tulisan yang ingin anda lakukan pengeditan dengan cara mengklik link [Edit].

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 17

3. Setelah muncul halaman ‘Edit Post’, lakukan pengeditan tulisan yang telah anda buat sebelumnya dan setelah selesai klik tombol [Update]

c. Menghapus Tulisan 1. Klik [Post] pada sisi kiri halaman 2. Setelah tampil halaman ‘Posts’, silahkan centang √ tulisan yang ingin dihapus dan klik menu [Move to Trash] dan klik tombol [Apply].

3. Tulisan akan terhapus, jika ingin mengembalikannya lagi klik [Trash]. d. Menyisipkan Gambar Di Dalam Tulisan 1. Klik [Post] pada sisi kiri halaman 2. Pilih [All Posts]

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 18

3. Pilih tulisan yang ingin disisipkan gambar, klik [Edit]

4. Pilih tombol [Add Media]

5. Pada tab â&#x20AC;&#x2DC;Insert Mediaâ&#x20AC;&#x2122; klik tombol [Select Files] untuk mengambil gambar di dalam komputer anda.

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 19

6. Setelah gambar berhasil ter-upload akan tampil menu pengaturan sebagai berikut :

7. Lakukan pengaturan jika menginginkannya atau langsung klik saja tombol [Insert Into Post] untuk menyisipkan gambar di dalam tulisan. 8. Untuk mengatur tata letak gambar klik gambar kemudian klik [Edit Image].

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 20

9. Setelah itu atur tata letak gambar sesuai keinginan Anda dan klik [Update].

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 21

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 22

10. Setelah selesai, klik tombol [Update] bila ingin melihat hasilnya klik tombol [View Post].

e. Menyisipkan Video Youtube Di Dalam Tulisan 1. Klik [Post] pada sisi kiri halaman 2. Pilih [All Posts]

3. Pilih tulisan yang ingin disisipkan video youtube, klik [Edit]

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 23

4. Kemudian pilih video youtube yang di ingin disisipkan, klik kanan pada video yang dipilih kemudian pilih [Copy embed html].

5. Setelah itu pilih tampilan Text pada tulisan, dan masukkan kode program yang telah di copy di video youtube diatas.

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 24

6. Klik [Update] dan Klik [View Post]

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 25

ď&#x192;&#x2DC; Pengelolaan halaman (Pages) Pembuatan

halaman

baru

pada

blog

umumnya

digunakan

untuk

manampilkan informasi-informasi singkat seperti profil penulis, buku tamu dan informasi lain yang ingin ditampilkan dalam waktu yang lama dan bersifat permanen. a. Membuat Halaman : 1. Klik [Pages] pada sisi kiri halaman dasboard 2. Pilih [Add New] 3. Tulis judul dari halaman 4. Tulis isi halaman 5. Setelah selesai klik tombol [Publish]

Tulis Judul Halaman 3

1 2 5 Tulis Isi Halaman 4

Untuk melihat hasilnya klik [view page]

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 26

b. Merubah halaman 1. Klik [Pages] pada sisi kiri halaman dasboard 2. Setelah itu akan tampil halaman â&#x20AC;&#x2DC;Pages, silahkan pilih halaman yang dirubah dengan cara mengklik link [Edit].

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 27

3. Setelah muncul halaman ‘Edit Page’ lakukan perubahan terhadap halaman yang telah anda buat sebelumnya dan setelah selesai klik tombol [Update]

c. Menghapus Halaman 1. Klik [Pages] pada sisi kiri halaman dasboard 2. Setelah itu tampil halaman ‘Pages’ silahkan centang √ halaman yang ingin dihapus dan klik menu [Move to Trash] dan klik tombol [Apply].

3. Tulisan akan terhapus, jika ingin mengembalikannya lagi klik [Trash]. Penggunaan Wordpress | http://puskom.unri.ac.id

Page 28

 Pengelolaan Tampilan (Appearance) Secara default saat menginstall wordpress, wordpress menggunakan themes ‘Twenty Twelve‘. Wordpress memiliki banyak themes baik secara gratis maupun berbayar. Bila themes tersebut tidak sesuai dengan selera anda dan anda ingin menggantinya. Berikut cara mengganti themes : a. Mengganti Tampilan Website (Themes) 1. Klik [Appareance] pada sisi kiri halaman dashboard 2. Setelah itu tampil halaman ‘Manage Themes’.

3. Dalam halaman ‘Manage Themes’. Pilih

themes

sesuai

dengan

keinginan anda. Sebelum memilih themes

yang

akan

diaktifkan

sebaiknya anda pilih [Live Preview] untuk melihat hasil dari themes tersebut, setelah anda yakin klik [tombol save and activate].

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 29

4. Jika ingin menginstall themes yang sudah anda download sebelumnya,

pilih

tab

[Install

Themes],

klik

[Upload]

ď&#x192; [Browse]ď&#x192; [Install Now].

5. Tunggu sampai proses install selesai, setelah itu akan mucul halaman themes yang telah diinstall, pilih [Live Preview] jika ingin melihat hasil dari themes tersebut dan pilih [Activate] jika ingin menggunakannya atau [return to Themes page] untuk tidak menggunakannya sekarang.

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 30

b. Mengatur Widgets Di Sidebar Sidebar adalah tempat untuk menampilkan kumpulan link, dan aneka fasilitas. Di area ini bisa diletakkan informasi apa saja, seperti form pencarian, daftar halaman statis (Pages), Arsip (Archives), Category (Kategori), Kumpulan Link (Blogroll), Meta, dan lain-lain.

Beberapa widget memudahkan bagi pengunjung untuk menemukan konten yang spesifik pada situs Anda, untuk menggunakan widget sebagai berikut : 1. Klik [Appareance] pada sisi kiri halaman dashboard 2. Setelah itu pilih [Widgets] 3. Dalam halaman â&#x20AC;&#x2DC;Widgetsâ&#x20AC;&#x2122; tarik widget yang ingin diletakkan ke modul sidebar sebelah kanan.

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 31

c. Mengatur Menu (Menus) Navigasi menu memungkinkan untuk merubah urutan halaman, membuat submenu dan mengatur beberapa halaman dengan membuat kategori. Berikut langkah-langkah untuk membuat menu : 1. Klik [Appareance] pada sisi kiri halaman dashboard 2. Setelah itu pilih [Menus], akan muncul halaman â&#x20AC;&#x2DC;Menusâ&#x20AC;&#x2122;

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 32

3. Membuat menu, ketik nama yang ingin dibuat dan klik tombol [Create Menu].

4. Menambahkan link kustom (Custon Link), ketik URL, nama label dan kemudian klik tombol [Add to Menu].

5. Menambahkan halaman (Pages) ke menu, silahkan centang â&#x2C6;&#x161; halaman yang ingin dimasukkan dan kemudian klik tombol [Add to Menu].

6. Menambahkan ketegori (Categories) ke menu, silahkan centang â&#x2C6;&#x161; kategori yang ingin dimasukkan dan kemudian klik tombol [Add to Menu].

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 33

7. Merubah urutan menu dan membuat sub-menu. Drag dan drop item keatas dan kebawah sesuai dengan urutan menu. Drag dan drop item kekiri dan kekanan untuk membuat sub-menu. Kemudian klik tombol [Save Menu].

Hasilnya sepeti berikut :

d. Mengganti Gambar Header Header adalah komponen yang penting di dalam blog. Dengan adanya gambar header, dapat mencerminkan isi dari blog yang dibuat, serta menarik pangunjung untuk tahu lebih dalam isi dari blog kita Penggunaan Wordpress | http://puskom.unri.ac.id

Page 34

dengan melihat adanya gambar header tersebut. Bila ingin mengganti header default anda dengan gambar pilihan anda, berikut langkahlangkahnya : 1. Klik [Appareance] pada sisi kiri halaman dashboard 2. Setelah itu pilih [Header] 3. Akan muncul halaman ‘Custom Header’ pilih tombol [Browse] untuk memilih gambar pada komputer anda, setelah itu klik [Upload].

4. Setelah itu akan muncul halaman ‘Crop Header Image’ pilih tombol [Crop and Publish].

5. Setelah dipilih ‘Crop and Publish’ klik tombol [Save Changes], untuk melihat hasilnya pilih [Visite Site] disebelah kiri atas dashboard.

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 35

Penggunaan Wordpress | http://puskom.unri.ac.id

Page 36

Daftar Pustaka

Wordpress (2013). Writing Post. Diakses 19 Februari 2013, http://codex.wordpress.org/Posts. ----------------------. Pages. Diakses 20 Februari 2013, http://codex.wordpress.org/Pages. ----------------------. Using Themes. Diakses 20 Februari 2013, http://codex.wordpress.org/Themes. ----------------------. Get The Most From WordPress.com. Diakses 21 Februari 2013, http://learn.wordpress.com.

Daftar Pustaka | http://puskom.unri.ac.id

Page 37