56
Daftar Isi 1. Pengenalan Woocommerce 2. WordPress Dashboard (Admin) 3. Pengaturan WordPress Settings 4. Membuat Posting / Artikel (Menu Post) 5. Membuat Halaman Statis (Menu Page) 6. Troubleshoot setelah migrasi domain beserta penyelesaiannya 7. Mengubah Tampilan Wordpress dengan content composer

Inventory section - satujutadomain.e-cbncloud.co.idsatujutadomain.e-cbncloud.co.id/tutorial/Panduan-WordP…  · Web viewDaftar Isi. Pengenalan Woocommerce. WordPress Dashboard (Admin)

Embed Size (px)

Citation preview

Daftar Isi

1. Pengenalan Woocommerce2. WordPress Dashboard (Admin) 3. Pengaturan WordPress Settings 4. Membuat Posting / Artikel (Menu Post) 5. Membuat Halaman Statis (Menu Page) 6. Troubleshoot setelah migrasi domain beserta penyelesaiannya7. Mengubah Tampilan Wordpress dengan content composer

Pengenalan Woocommerce

WooCommerce adalah plugin ecommerce open source yang didesain untuk WordPress. Ini adalah platform yang tergolong cepat, untuk digunakan baik bagi bisnis yang masih kecil maupun yang sudah besar. WooCommerce memiliki fungsi yang bervariasi seperti metode pembayaran & pengiriman yang berbeda, variabel produk, dll. Dalam tutorial Ecommerce ini, Anda akan mempelajari semua hal yang dibutuhkan untuk membuat WooCommerce di website WordPress Anda dan mulai menjual produk Anda

Untuk referensi yang lebih lengkap disarankan untuk menonton video yang terdapat di

https://docs.woocommerce.com/document/woocommerce-guided-tour-videos/

Menu WooCommerce

Keterangan : - Orders , berisikan informasi pesanan barang dari

pembeli dan menampilkan informasi seperti jumlah barang,harga dan tanggal pembelian

- Coupons, berisikan informasi tentang voucher / kupon potongan harga dalam membeli barang

- Reports, berisikan informasi laporan seperti penjualan

- Setting, pengaturan plugin woocommerce seperti produk,shipping,checkout dll

- Status , berisikan system monitor tentang kelengkapan plugin woocommerce

- Extensions, berisi library untuk mnembahkan modul – modul untuk woocomemrce seperti payment gateway

Menu Product

Keterangan :- All Product, menampilkan informasi produk saat ini

beserta spesifikasi barang tersebut

- Add New, Menu untuk menambah produk / barang yang akan dijual beserta mengisi informasi produk

- Categories, setiap barang sebaiknya dikelompokkan sesuai kategori barang tersebut untuk memudahkan pencarian

- Tags, ini semacam kata kunci untuk setiap barang sehingga customer bisa mudah mencari barang

- Attributes, secara garis besar menu attributes digunakan diantar alain untuk satuan ukuran produk tertentu

Menambahkan Produk pada WooCommerce

1. Pilih WooCommerce > Products > Add New..2. Masukkan Title dan Description.3. Pada bagian bawah terdapat Product Data panel berisikan

Informasi tentang data yang akan dijual

.

General section

SKU – kurang lebih merupakan ID barang, tidak boleh sama dan harus unik sehingga kode produk lain tidak boleh ada yang sama .

Priceo Regular Price – harga normal barang.o Sale Price – harga diskon barang .

Inventory section

Mempermudah kita untuk mengatur stok barang dan juga seperti menutup / membuka orderan apabila stok sudah habis atau sudah ada

Shipping section

Weight – Berat Produk. Dimensions – Keterangan ukuran barang seperti

panjang,lebar dll. Shipping Class – Apabila menggunakan shipping maka

menu ini digunakan untuk mengklasifikasi jenis shipping

Linked Products section

Using up-sells and cross-sells, you can cross promote your products. They can be added by searching for a particular product and selecting the product from the dropdown list:

Attributes section

Pada menu ini anda dapat menambahkan detail pada produk seperti menambahkan global attributes yang sudah anda buat

Advanced section

Purchase note – ini merupakan opsional apakah akan dikirimkan nota pembelian kepada customer.

Menu order – Custom ordering position for this item. Enable Reviews – dapat menyembunyikan atau

menampilkan review barang

Product short description

Merupakan kotak kecil yang digunakan untuk menambahkan keterangan pada produk

Setelah dikiranya produk sudah siap maka klik publish dan barang akan tampil

WordPress Dashboard (Admin)

1. Ini merupakan tampilan standar website dengan mesin Wordpress.

“Klik” Login untuk masuk ke halaman Dashboard. Atau ketik: “wp-admin” di belakang nama domain Anda.

Contoh:

www.namadomain.com/wp-admin

2. Masukkan Username dan Password Anda, kemudian “Klik” Login.

3. Sekarang Anda berada pada halaman Dashboard.

4. Penjelasan menu dan sub menu

Dashboard, adalah pusat control panel website Anda. Untuk setting default, biasanya berisi sub menu:

Dashboard Posts Media Links Pages Comments Contact Portofolio Appearance Plugins Users Tools Settings Revolution Slide (Bawaan Tema) Envision (Bawaan Tema)

b. Post, adalah menu untuk membuat dan mengedit tulisan / blog.

All Post, berisi post yang telah diterbitkan pada website.

Add New, digunakan untuk membuat tulisan atau artikel baru (ini akan sering Anda lakukan nantinya)

Categories, digunakan untuk mengedit kategori.

Tags, digunakan untuk mengedit kata kunci.

c. Media, adalah tempat menyimpan file dengan format JPG, PNG, GIF, PDF, DOC, dsb.

Library, berisi daftar file-file yang sudah di upload.

Add New, untuk menambahkan file dengan mengupload file dari komputer atau internet ke website.

d. Links, untuk menambahkan link atau yang disebut blogroll.

All Links, untuk melihat link yang sudah ada.

Add New, digunakan untuk menambahkan link.

Link Categories, digunakan untuk mengelompokkan link ke dalam kategori-kategori tertenut.

e. Pages, hampir sama dengan post, namun ini sifatnya statis dan tidak terikat oleh categories, tanggal, dan tags.

All Pages, untuk mengedit pages yang sudah ada.

Add New, untuk menambah page baru.

f. Comments, digunakan untuk mengelola komentar yang ada dalam website / blog.

g. Contact (Plugin), digunakan untuk membuat form

h. Appearance, digunakan untuk menata layout dan desain website.

Themes, untuk mengganti tampilan desain web

Widget, untuk menambahkan elemen pada sidebar / sisi samping kanan dan kiri website

Menus, untuk mengatur menu navigasi pada website

Editor, untuk menambah atau mengurangi kode / script code

h. Plugin, Digunakan untuk menambah / menghapus plugin untuk wordpress

i. Users, adalah menu untuk setting identitas penulis atau pemilik blog.

All Users, untuk melihat dan mengedit admin web / penulis blog.

Add New, untuk menambahkan admin web / penulis blog

Your Profile, untuk mengedit profil user yang sedang login.

j. Tools, adalah fasilitas tambahan untuk website Anda. Disini ada 2 macam tools yang sangat bermanfaat, diantaranya:

Import, digunakan untuk memasukkan isi konten blog lain ke blog sedang digunakan.

Export, digunakan untuk mengunduh konten blog Anda dalam format .xml, sehingga dapat di import ke blog lain.

k. Setting, adalah menu pengaturan web Anda.

General, pengaturan umum seperti judul blog dan tagline.

Writing, pengaturan yang berhubungan dengan tulisan.

Reading, pengaturan blog yang nantinya tampak bagi pengunjung dan visibilitas dimata search engine.

Discussion, pengaturan komentar blog. Media, pengaturan media dalam blog

Permalinks, untuk mengatur struktur link website Anda.

l. Revolutoion Slider , untuk membuat dan mengatur slider

m. Envision , mengatur konfigurasi tema

1

2

3

4

5

6

7

8

Keterangan :

1. DashboardMenu utama yang berisikan konfigurasi dasar seperti mengganti logo dll

2. Global SettingMenu yang mengatur beberapa konfigurasi untuk wordpress yang akan diterapkan di seluruh komponen wordpress seperti pengaturan ukuran gambar

3. Blog SettingMenu yang mengatur konfigurasi untuk tipe blog

4. Portofolio SettingMenu yang mengatur konfigurasi untuk halaman tipe portofolio

5. Visual SettingMenu yang mengatur konfigurasi visual wordpress seperti mengatur warna dll

6. TypographyMenu yang mengatur konfigurasi untuk tulisan , seperti jenis font dll

7. Modules & PluginsMenu yang mengatur konfigurasi modul atau plugin bawaan tema dan bisa juga menambahkan / mengaktifkan modul yang tema sudah sediakan

8. TranslateMenu yang mengatur konfigurasi format pembacaan tulisan

9. SystemMenampilkan spesifikasi system tema wordpress

Referensi bila ingin mencari tahu lebih dalam dapat dibuka di http://docs.wptation.com/envision/

Pengaturan Awal Pada WordPress Dengan Tema Envision

Ada baiknya sebelum menggunakan wordpress, adalah lakukan beberapa pengaturan. Untuk mengaksesnya, pada WordPress dashboard silahkan buka menu Settings.

Memang tidak banyak yang diatur, namun hal ini sesungguhnya cukup penting bagi website WordPress Anda.

Berikut ini beberapa hal yang perlu di setting:

1. General Settings.

Bagian general settings ini mencakup pengaturan umum website WordPress. Sesuaikan judul blog atau situs, tagline, email, zona waktu, dan format tanggal.

2. Writing Settings.

Pada bagian writing settings, ada dua hal yang harus diperhatikan, yakni formatting dan remote publishing. Meskipun cuma sedikit, namun bagian ini cukup penting bagi website WordPress kita. Jika tidak ingin melakukan perubahan, tinggalkan saja dan biarkan pada settingan default.

3. Reading Settings.

Di bagian ini, kita bisa memilih apakah ingin menampilkan

postingan atau page (laman) statis kita pada halaman depan (homepage). Di sini juga terdapat menu untuk menentukan berapa banyak tampilan postingan di homepage dan di syndication feeds. Kemudian kita juga bisa mengatur feed secara penuh atau sebagian. Settingan default-nya adalah halaman homepage menampilkan postingan.

4. Discussion Settings.Settingan ini digunakan untuk mengatur apakah kita akan mengijinkan adanya komentar blog atau tidak. Jika kita perhatikan, banyak website yang sukses rata-rata adalah yang komentarnya banyak. Ini menandakan adanya interaksi para pengunjung dengan konten website / blog. Jadi, amat disarankan untuk tetap mengaktifkan fitur ini. Kalau Anda menggunakan Gravatar, maka sesuaikan settingan icon avatar pada kolom bagian bawah.

5. Permalink Settings.

Permalink ini cukup penting untuk website kita. Google dan mesin pencari lainnya akan lebih mudah mengindeks konten web kita jika kita membuat permalink yang cocok untuk mesin pencari. Settingan default-nya adalah menggunakan page id. Namun saya sarankan, ubahlah settingan permalink berdasarkan postname, supaya URL link kita lebih SEO friendly.

6. Logo Homepage

Ganti logo dengan logo yang sesuai dengan keinginan anda, logo dapat diganti pad menu Envision di dashboard admin

7. Gambar Tidak Muncul

Untuk gambar yang tidak muncul biasanya path link gambar tidak benar, dapat diganti dengan memilih ulang gambar sehingga gambar bisa tampil

Misalnya yang menggunakan composer bisa memilih ulang gambar seperti gambar di bawah ini

Lalu pilih gambar di media library

Setelah itu jangan lupa mempublish page / post tersebut

8. Front Logo pada homepage tidak muncul

Dapat diperbaiki dengan menggunakan menu Envision di dashboard admin wordpress

Lalu pilih upload image logo

Pada bagian primary logo pilih media library untuk memilih gambar dari galeri

Lalu klik save change

Membuat Posting / Artikel (Menu Post)

1. Pada bagian inilah pokok dari rangkaian Anda membuat website / blog. Anda akan sering menggunakan menu ini karena terkait dengan konten yang akan disajikan kepada pengunjung.

Dalam membuat postingan pada kali ini dapat menggunkan dua cara, melalui Content Composer ataupun melalui cara biasa

- Cara Biasa

2 1

4

3

Keterangan :

8

5

1. Pada Dashboard, pilih menu Post-Add New. 2. Tuliskan judul artikel Anda. 3. Menulis pada kolom ini.

4. Ada tombol-tombol yang mirip ketika Anda mengetikkan di Microsoft Word. Untuk mengatur tulisan seperti : Bold, Italic, Hiperlink, Insert

gambar, rata kanan, dll. 5. Apabila anda ingin menggunakan slider dapat

digunakan pada bagian ini.

- Melalui Content Composer

Untuk menambahkan elemen – elemen sudah disediakan tinggal dipiilh sesuai keinginan. Setelah itu disetiap elemen terdapat tombol setting yang digunakan

untuk mengatur elemen tersebut, serta dapat dihapus apabila tidak digunakan

Salah satu contoh apabila memilih gallery maka akan tampil seperti ini

Edit Elemen gallery dengan memilih Option

Pilih insert from media library, lalu pilih done editing dan save

Jangan lupa untuk mem “Publish” postingan apabila sudah selesai di editLakukan langkah seperti di atas untuk posting artikel lainnya.

2. Memasukkan gambar di postingan artikel

a. Anda dapat menyisipkan gambar (JPG, GIF atau PNG) ke dalam artikel, dengan cara meng-klik Add Media.

b. Selanjutnya akan muncul window baru

1 2

Keterangan :

1. Menambahkan gambar dari computer dengan upload gambar.

2. Mengambil gambar dari dari library

Membuat Halaman Statis (Menu Page)

1. Page adalah halaman yang isinya tidak berubah-ubah. Untuk website / blog bisnis, pages ini biasanya diperuntukkan sebagai halaman profil (about), kontak, produk, cara pemesanan, dan lain sebagainya.

2. Cara membuat page baru adalah dengan mengklik menu Pages-Add New pada Dashboard.

Untuk mengisi halaman Page ini, sama seperti pada saat kita membuat tulisan di halaman Post.

Sebagai langkah awal, buatlah halaman Page pertama Anda dengan menuliskan:

Judul : Tentang KamiIsi : Berisi profil organisasi, alamat dan nomor telpon serta email

yang bisa dihubungi.

3. Kemudian Publish jika semua data telah Anda rasa cukup

Troubleshoot setelah migrasi domain

Setelah migrasi domain terkadang terjadi beberapa error kecil, maka dibawah ini terdapat beberapa penyelesaian untuk mengatasi error tersebut

1. Halaman Not Found

Error diatas terjadi karena permalink tidak terupdate, hanya dengan mengupdate permalink maka permasalahan diatas bisa diatasi, caranya adalah

Login ke admin dashboard wordpress

Pada menu settings, pilih menu Permalinks

Pada tampilan permalink dibawah ini terdapat beberapa opsi permalink yang akan digunakan wordpress untuk menampilkan format url halaman wordpress kita

Di contoh ini saya menggunakan yang biasanya digunakan yaitu Post Name yang akan menampilkan nama halaman pada setiap halaman wordpress url

Lalu pilih Save Changes

Maka halaman yang sebelumnya not found sudah bisa diakses

2. Gambar tidak muncul

Gambar yang tidak muncul terjadi karena path link menuju gambar di direktori salah dan gambar tidak ditemukan, solusinya tinggal memilih gambar yang sama dan men save halaman tersebut

Misalnya yang menggunakan composer bisa memilih ulang gambar seperti gambar di bawah ini

Lalu pilih gambar di media library

Setelah itu jangan lupa mempublish page / post tersebut

3.Logo kecil datas pada homepage tidak muncul

Permasalahan ini mirip dengan maslaah gambar tidak muncul diatas, bisa diatasi dengan memilih gambar yang akan ditampilkan pada menu bawaan tema envision

Dapat diperbaiki dengan menggunakan menu Envision di dashboard admin wordpress

Lalu pilih upload image logo

Pada bagian primary logo pilih media library untuk memilih gambar dari galeri

Lalu klik save change maka gambar front logo diatas akan muncul lagi

Mengubah tampilan dengan content composer

Secara bawaan dari template kami sudah termasuk dengan content composer yaitu sejenis alat untuk mengedit halaman / post selain dengan cara manual / default dari wordpress

Contoh Kasus :

1. Mengubah bagian “ Murah , Berkualitas & Respon cepat“ pada front page website

a. Login ke bagian adminb. Pilih halaman yang akan di edit ( dalam contoh ini adalah front page

halaman)c. Lalu pilih bagian yang akan di editd.

e. Kita ingin mengganti kata “ Murah “ dengan “ Super Murah “, lalu klik logo untuk edit

f. Lalu akan tampil beberapa kotak text box seperti dibawah ini

Diantara lain seperti

- Title : dalam kasus ini akan menampilan “Murah” , “Berkualitas” & “Respon Cepat” tergantung bagian mana yang akan di ganti

- Image : tempat untuk menampilkan gambar - Content / Description Text : keterangan yang terletak dibawah tulisan

“Murah” , “Berkualitas” & “Respon Cepat”

g. Mari kita ganti “Murah” dengan “Super Murah” dan kita edit keterangannya di kolom Content / Description Text

h. Setelah selesai mengedit jangan lupa untuk menyimpan perubahan dengan mengklik tombol “Done Editing “ lalu pilih “ Save “

i. Kembali ke halaman awal dan lihat perubahan pada bagian yang kita edit