tutorial website wordpress

15
Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 1 Manual Book Penggunaan Website www.JasaWebsite.biz Daftar Isi BAB I ........................................................................................................................................... 3 DASHBOARD ........................................................................................................................................... 3 1. Masuk Administrator Area Website Wordpress ......................................................................... 3 2. Setting Nama Website dan Deskripsi Website ........................................................................... 3 3. Bagaimana membuat page / halaman seperi Home, About Us , Contact Us ............................. 5 4. Membuat dan mengatur menu .................................................................................................. 6 BAB II .......................................................................................................................................... 9 MENGGUNAKAN POST UNTUK ARTIKEL , BERITA ATAU PRODUK ................................................... 9 1. Membuat artikel , berita atau produk baru pada website ......................................................... 9 2. Menjadikan post sebagai media menuliskan artikel atau mengupload produk toko online dan keterangannya .................................................................................................................................. 10 BAB III ....................................................................................................................................... 11 WIDGET DAN FITUR TAMBAHAN HARGA & STOK ....................................................................... 11 1. Mengatur peletakan widget pada website ............................................................................... 11 2. Harga dan Stok .......................................................................................................................... 12 3. Thumbnail ................................................................................................................................. 13

Upload: heru-yugo-prasetyo

Post on 18-Dec-2014

44 views

Category:

Documents


2 download

DESCRIPTION

Tutorial menggunakan website CMS wordpress yang diinstall pada hosting.

TRANSCRIPT

Page 1: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 1

Manual Book Penggunaan Website www.JasaWebsite.biz

Daftar Isi

BAB I ........................................................................................................................................... 3

DASHBOARD ........................................................................................................................................... 3

1. Masuk Administrator Area Website Wordpress ......................................................................... 3

2. Setting Nama Website dan Deskripsi Website ........................................................................... 3

3. Bagaimana membuat page / halaman seperi Home, About Us , Contact Us ............................. 5

4. Membuat dan mengatur menu .................................................................................................. 6

BAB II .......................................................................................................................................... 9

MENGGUNAKAN POST UNTUK ARTIKEL , BERITA ATAU PRODUK ................................................... 9

1. Membuat artikel , berita atau produk baru pada website ......................................................... 9

2. Menjadikan post sebagai media menuliskan artikel atau mengupload produk toko online dan

keterangannya .................................................................................................................................. 10

BAB III ....................................................................................................................................... 11

WIDGET DAN FITUR TAMBAHAN HARGA & STOK ....................................................................... 11

1. Mengatur peletakan widget pada website ............................................................................... 11

2. Harga dan Stok .......................................................................................................................... 12

3. Thumbnail ................................................................................................................................. 13

Page 2: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 2

Manual Book Penggunaan Website www.JasaWebsite.biz

Konsep Menggunakan Website Berbasis

CMS Wordpress

Oleh : Heru Yugo Prasetyo, S.T

LAYOUT WEBSITE

Berikut ini adalah layout sebuah website. Dari gambar anda bisa memperlajari terlebih dahulu

istilah-istilah yang mungkin baru anda ketahui. Mulai dari menu hingga widget.

Page 3: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 3

Manual Book Penggunaan Website www.JasaWebsite.biz

BAB I

DASHBOARD

1. Masuk Administrator Area Website Wordpress

Login pada url domain website anda . Misal domain website anda adalah

www.tokobusana123.com maka url loginnya adalah www.tokobusana123.com/wp-admin maka

anda akan menemukan halaman login seperti ini :

Masukkan username dan password untuk mengakses dashboard akun website anda.

2. Setting Nama Website dan Deskripsi Website

Setting nama website dan deskripsi website merupakan hal yang optional jika tidak ingin

melakukan tidak mengapa. Namun sebenarnya melakukan setting nama dan deskripsi website

akan mempengaruhi Search Engine Optimization bagi website.

Page 4: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 4

Manual Book Penggunaan Website www.JasaWebsite.biz

Berikut ini adalah ilustrasi melakukan setting nama website dan deskripsinya:

a) Buka salah satu menu dashboard Lokasi : Dashboard>>Setting>>General

b) Klik General

Gambar 1 Setting General

c) Kemudian isi parameter General Setting seperti berikut ini :

Gambar 2 Setting Keterangan

d) Isi site title dengan judul yang anda sukai untuk website anda. Bisa saja anda isi Site Title

dengan www.namawebsiteanda.com atau keterangan lainnya. Untuk tagline bisa berupa

deskripsi mengenai website anda.

Misal pada contoh gambar diatas kita isi Site Titlenya dengan www.TokoOnlinekita.com

dan kita isi deskripsinya (Tagline) dengan “Toko online terlengkap seindonesia”.

Page 5: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 5

Manual Book Penggunaan Website www.JasaWebsite.biz

3. Bagaimana membuat page / halaman seperi Home, About Us , Contact Us

Lokasi : Dashboard>>Page>>Add New

Page atau halaman website merupakan beberapa artikel yang mengidentitaskan sebuah

website. Page dalam sebuah website bisa berupa halaman “about us / Tentang Kami” , “contact

us / hubungi kami” , “faq (frequently asked question)”.

Berikut ini adalah cara menuliskan dan menambahkan sebuah page atau halaman website:

Gambar 3 Klik Add New

a) Klik add new pada mainmenu “page” seperti ditunjukkan pada gambar diatas

b) Isi title dan konten page / halamannya seperti gambar dibawah ini.

Gambar 4 Menulis Konten Page

Page 6: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 6

Manual Book Penggunaan Website www.JasaWebsite.biz

c) Isi Title (1) , konten (2) setelah itu klik tombol publish (3) untuk penyimpanan atau

penayangan konten halaman tersebut jika pengisian atau pengeditan dirasa sudah cukup.

4. Membuat dan Mengatur Menu

Lokasi : Dashboard >> Appereance >> Menu

Gambar 5 Menu

Untuk mengatur menu berikut ini adalah cara singkatnya :

a) Klik Menus seperti gambar diatas

b) Maka anda akan menemukan gambar seperti berikut

Gambar 6 Penambahan Menu

Page 7: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 7

Manual Book Penggunaan Website www.JasaWebsite.biz

c) Hal pertama (1) anda dapat menambahkan Judul Nama Menu sebagai langkah dasar . Misal

karena ada satu menu pada header website , maka kita isi dengan “menu header” atau

“menu atas” , atau nama lain sesuai selera. Setelah menentukan Judul Nama Menu , silakan

klik save.

d) Kita dapat membuat banyak judul nama menu sesuai yang kita inginkan. Tapi tidak

semuanya dapat dipasang pada theme website kita. Hal ini tergantung pada script desain

yang sudah dibuat oleh developer bisa hanya satu lokasi yang bisa dipasang atau banyak

lokasi. Contohnya anda bisa lihat pada langkah berikutnya.

e) Seperti ditunjukkan oleh nomor 2 (lihat gambar diatas : Theme Location) bahwa Theme

hanya mensupport untuk 1 lokasi saja “Your Theme Support 1 menu, select which menu

would you like to use”.

f) Silakan pilih dari sekian Judul Nama Menu yang telah anda buat untuk dipasangkan pada

Theme kemudian klik save.

g) Link menu apa saja yang ingin anda tampilkan? Silakan klik disebelah kiri (dibawah Theme

Location) . Bisa Page , Category , atau Custom Menu.

h) Pilih kemudian klik “add to menu”

Gambar 7 Add Menu

i) Setelah anda klik tombol “add to menu” maka anda akan menemukannya di dalam area

tempat anda membuat “Judul Nama Menu”

j) Untuk pengaturan urutannya anda bisa menggeser ke atas , ke bawah , ke kiri atau ke kanan

sesuai kebutuhan.

Page 8: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 8

Manual Book Penggunaan Website www.JasaWebsite.biz

Gambar 8 Menu Utama dan Submenu

k) Untuk yang menjorok kedalam adalah sub menu utama, sedangkan yang tidak menjorok

adalah menu utama

Gambar 9 Ilustrasi Menu

Page 9: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 9

Manual Book Penggunaan Website www.JasaWebsite.biz

BAB II

MENGGUNAKAN POST UNTUK ARTIKEL , BERITA ATAU PRODUK

1. Membuat artikel , berita atau produk baru pada website

Lokasi : Dashboard >> POST

Artikel Berita atau produk pada CMS Wordpress dibuat menggunakan fasilitas ‘POST’

Gambar 10 Add New Post

Untuk mengedit silakan klik dulu “ALL POST” kemudian pilih artikel yang ingin diedit. Ilustrasinya

seperti berikut :

Gambar 11 All Post

Page 10: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 10

Manual Book Penggunaan Website www.JasaWebsite.biz

Gambar 12 Zoom All Post

2. Menjadikan post sebagai media menuliskan artikel atau mengupload produk toko

online dan keterangannya

Lokasi : Dashboard >>POST

Ketika kita ingin membuat tulisan berupa artikel , berita atau produk , maka gunakanlah fitur

“POST” dan fitur ini memang secara fleksibel disediakan untuk keperluan-keperluan seperti

disebut itu.

1. Masukkan judul artikel berita atau produk

2. Masukkan konten artikel atau konten deskripsi produk

3. Pilih kategori artikel berita yang diinginkan

4. Jika kategori yang diinginkan belum ada , dapat menambahkan dengan mengklik +Add

New Category

5. Klik tombol “Publish” setelah selesai.

Page 11: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 11

Manual Book Penggunaan Website www.JasaWebsite.biz

BAB III

WIDGET DAN FITUR TAMBAHAN HARGA & STOK

1. Mengatur peletakan widget pada website

Widget atau dengan nama lain adalah fitur sisi kanan atau sisi kiri website digunakan biasanya

untuk menampilkan informasi-informasi penting , Yahoo Messengger , Produk terbaru dsb.

Berikut ini adalah ilustrasinya :

Gambar 13 Widget pada Sidebar

Page 12: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 12

Manual Book Penggunaan Website www.JasaWebsite.biz

Cara meletakkannya mudah, silakan buka lokasi : Dashboard ���� Apeareance ���� Widget

Kita akan menemukan tampilan seperti berikut :

Gambar 14 Penempatan Widget

Keterangan :

1. Pilihan widget yang dapat dipasang pada sidebar / widget area

2. Primary widget area ( Area dimana widget dipasang )

3. Secondary widget area dll.

2. Harga dan Stok

Untuk menambahkan harga dan stok pada setiap post produk (dijelaskan dalam BAB II) ,

anda bisa memanfaatkan fitur Custom Field yang tepat berada dibawah pengisian konten

post sepeti ini:

Page 13: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 13

Manual Book Penggunaan Website www.JasaWebsite.biz

Gambar 15 Harga dan Stok

• Saat ingin mengisi harga maka pilih harga kemudian isi value dengan harga yang

anda inginkan.

• Saat ingin mengisi stok maka pilih stok kemudian isi value dengan jumlah stok yang

anda inginkan.

3. Thumbnail

Untuk memasang Thumbnail atau gambar depan produk , maka anda bisa menggunakan

fitur featured image pada pojok kanan bawah setiap menambahkan atau mengedit POST.

Langkah-langkah untuk memasang thumbnail adalah seperti berikut:

1. Klik Add New Post ( Lokasi : Dashboard >> POST >> Add New Post )

2. Lihat bagian pojok kanan bawah , anda akan menemukan kolom featured image seperti

yang terlihat pada gambar dibawah ini.

Gambar 16 Thumbnail Featured Image

3. Klik featured image seperti gambar diatas dan upload gambar yang anda butuhkan.

4. Membuat Kategori Untuk Produk

Setiap kategori yang ingin memiliki tampilan thumbnail produk seperti ini

Page 14: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 14

Manual Book Penggunaan Website www.JasaWebsite.biz

Maka silakan menuju lokasi : Dashboard>>POST>>Category

kemudian klik edit atau add dan setting template option

dengan template “produk”.

Seperti diilustrasikan pada gambar dibawah ini :

Gambar 17 Defaul Category Template

Page 15: Tutorial Website Wordpress

Tutorial Penggunaan CMS Wordpress www.JasaWebsite.Biz Page 15

Manual Book Penggunaan Website www.JasaWebsite.biz

Gambar 18 Pilih Produk Template

Pada gambar diatas ada tulisan Category Template. Silakan Pilih Template Produk kemudian

klik update atau add new category