Tutorial Website Wordpress
-
Upload
heru-yugo-prasetyo -
Category
Documents
-
view
34 -
download
2
description
Transcript of 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
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.
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.
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”.
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
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
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.
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
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
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.
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
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:
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
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
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