Pengaturan WP Typeface

Jika anda sudah menginstal WP Typeface dengan mengikuti panduan Woocommerce sebelumnya, anda bisa langsung menuju bab berikutnya.

Jika belum, berikut langkah menginstal WP Typeface…

Login ke dashboard WordPress, buka menu Appearance >> Themes

install wp typeface

Klik Add New >> Upload Theme >> Choose File

Upload wptypeface.zip kemudian klik Install Now.

Buka WP Typeface >> Activation

activate wp typeface

Masukkan serial number dari email pembelian dan Activate.

Jika berhasil maka akan tampil tanggal kadaluarsa dari serial number tersebut.

wp typeface expired date

Expired date adalah waktu dimana anda sudah tidak mendapat akses support dan update.

Saat membeli yang baru, deaktif serial number yang lama kemudian masukkan dan aktifasi serial number yang baru.

Hal ini juga berlaku apabila berganti domain/web, deaktif dulu serial number di web/domain yang lama kemudian aktifasi di domain baru.

Buka WP Typeface >> General Settings

wp typeface general settings

HTML Lang

HTML Lang adalah cara kita menyatakan bahasa apa yang digunakan pada konten situs web kepada mesin pencari.

Secara default, yang digunakan adalah bahasa yang kita pilih saat menginstal wordpress.

Apabila bahasa konten kita berbeda dengan bahasa wordpress yang kita gunakan, kita perlu mengaturnya dengan memasukkan kode bahasa.

Kunjungi https://www.w3schools.com/tags/ref_language_codes.asp untuk melihat daftar lengkap kode bahasa.

Contoh : Konten situs web kita berbahasa perancis.. kode bahasanya fr, maka masukkan fr di kolom HTML lang kemudian save.

Privacy Policy Page URL

Apabila kita memasukkan link halaman privacy policy, situs web kita akan menampilkan pop up yang memberitahukan kepada pengunjung bahwa dengan melanjutkan kunjungan web, mereka telah menyetujui semua yang ada di halaman privacy policy

CATATAN : Di halaman Privacy Policy, pastikan menulis bahwa semua pembeli secara otomatis tergabung dalam daftar newsletter dan dapat keluar dari daftar itu di lain waktu.

Free Image CDN

Apabila opsi ini diaktifkan, semua file gambar akan dibuka dari server wordpress.

Keuntunganya? Semua file gambar akan diload lebih cepat, gratis, dan menghemat penggunaan sumberdaya webhosting.

Kerugiannya? Kita tidak mengetahui sampai kapan wordpress menyediakan fasilitas ini.

Sampai hal itu terjadi, kami menyarankan untuk tetap mengaktifkan opsi ini hingga tiba harinya server wordpress berhenti menampilkan file gambar kita.

Show scroll to top button

Aktifkan opsi ini untuk menampilkan tombol Scroll to Top di sisi kanan situs web kita.

Buka tab Style.

wp typeface style settings

Di sinilah kita bisa mengubah tampilan teks pada situs web.

Agar lebih mudah dipahami konsepnya, buka Halaman utama situs web kita di tab browser baru untuk melihat perubahan apa saja yang terjadi saat kita “bermain” dengan opsi yang tersedia.

Custom Font

Custom Font di sini berfungsi untuk memanggil file font dari manapun, termasuk dari web kita sendiri.

Kita bisa menggunakan opsi ini apabila pilihan font yang sudah tersedia kurang sesuai selera.

Ingin menggunakan font manapun yang dimiliki Google Font? Kita akan membahas caranya pada bab 11 nanti.

Buka WP Typeface >> Header & Footer >> Tab Header.

wp typeface header settings

Kita bisa mengunggah logo dan mengatur tampilan header di sini.

Belum punya gambar logo? Kita bisa menggunakan text dengan font yang tersedia maupun Custom Font.

Butuh header dengan warna gradasi? Kunjungi https://cssgradient.io/, generate css code, copy dan paste ke kolom Background Gradient.

Top navigation mengatur tampilan menu wordpress manapun yang menggunakan Top Menu sebagai display location.

wordpress navigation menu settings

Kunjungi WP beginner’s guide jika anda belum pernah membuat menu navigasi di WordPress.

Gambar di bawah akan membantu memahami bagian mana saja yang dipengaruhi oleh masing masing pengaturan Header…

wp typeface header schema

Social Media

Masukkan tautan profil media sosial anda untuk menampilkan tombol di footer.

wp typeface social media settings

Footer

wp typeface footer settings

Footer Type : Membagi footer situs web kita menjadi beberapa kolom (sesuai yang kita pilih) dengan lebar yang sama.

Setiap kolom berisi beberapa bagian seperti gambar di bawah, tergantung apa yang ingin kita tampilkan di kolom itu.

wp typeface footer columns

Menu ID to Show : Display location dari menu navigasi yang ingin kita tampilkan.

CATATAN :

  • Kecuali shortcode, tiap kolom yang berformat text mendukung tag HTML.
  • Kolom yang tidak diubah isinya (dibiarkan default) akan menjadi kolom kosong.

Persiapan posting produk

Sebelum menambahkan produk, mari kita siapkan ketegorinya terlebih dahulu.

Pastikan tidak ada ‘uncategorized’ pada daftar kategori produk seperti video di bawah.

Ubah kualitas video menjadi HD agar terlihat lebih jelas.

Semua produk font membutuhkan variasi lisensi yang berbeda.

Akan sangat melelahkan apabila kita memasukkan data lisensinya satu per satu tiap akan posting produk.

Solusinya? Kita membuat draf produk.

Sebagai contoh… kita akan menawarkan 2 pilihan lisensi, personal dan extended.

Pertama, kita putuskan apa sebutan (Attributes name) untuk 2 pilihan lisensi ini.

Apakah License Type? License Option? atau apa saja yang kita rasa tepat.

Kemudian… catat semua detil keterangan lisensi dalam format HTML.

Berikut adalah contoh catatan yang perlu kita siapkan sebelum membuat draft produk.

Attributes name :  License Option

Variations : Personal License | Extended License (pisahkan tiap variations dengan tanda “|”)

Personal License
price 12 (Nominal harga tanpa simbol mata uang)

Di bawah adalah cara menampilkan list dalam format HTML

<ul>
<li>Personal Lisense detail #1</li>
<li>Personal Lisense detail #2</li>
<li>Personal Lisense detail #3</li>
</ul>

Extended license
price 99

<ul>
<li>Extended license detail #1</li>
<li>Extended license detail #2</li>
<li>Extended license detail #3</li>
</ul>

Sekarang mari membuat draft produk kita yang pertama…

CATATAN PENTING : pastikan menggunakan varian lisensi termurah sebagai Default Form Values (menit 1:23 di video).

Untuk mulai posting produk… siapkan gambar produk, file font untuk preview, paket zip file font untuk pembeli, nama font family (bila ada beberapa varian dalam 1 produk) dan deskripsi produk.

Opsional : Kita juga bisa menampilkan keterangan detil paket produk seperti ukuran file, ekstensi dan apakah disertai file vektor atau tidak.

Sebagai contoh, kita akan posting font dengan 2 font family yang berbeda dengan menduplikasi draft produk yang telah kita buat sebelumnya.

Mengatur tampilan produk

Buka Wp Typeface >> Product.

wp typeface product settings

wp typeface product settings field

Pada bagian custom note section, kita bisa menambah text di bawah tombol CTA (Add to Cart button).

Opsi ini mendukung tag HTML tag apabila kita ingin memasang link ke halaman lain.

Sebagai contoh, kita pilih font tester output sebagai text.

Kemudian kita pilih radio button sebagai License option format.

Dan di kolom custom note kita isi seperti di bawah :

Need help to choose right License option? <a href=”https://wptypeface.com/contact/”>Contact Us</a>!

Hasilnya dapat dilihat di sini.

Ada beberapa opsi lain yang bisa kita coba dan lihat pengaruhnya di halaman produk atau shop.

Homepage Settings hanya berfungsi jika kita sudah melakukan pengaturan pada general, header footer, and product settings.

Satu section demi satu section… begitulah prinsip membangun halaman utama dengan WP Typeface.

Gambar di bawah akan memperjelas konsep tersebut…

wp typeface sections

Homepage settings di WP Typeface memungkinkan kita membuat overlay header seperti tren web saat ini.

wp typeface overlay header

Artinya… gambar background dari section #1 dapat secara sempurna bersatu dengan header.

Untuk menggunakan mode overlay header… kita harus mengaktifkan, mengunggah file logo yang baru dan mengatur warna link yang sesuai dengan gambar background.

Overlay header hanya akan digunakan di halaman utama.

wp typeface overlay header settings

Sekarang mari kita membangun halaman utama…

wp typeface section setting

Seperti footer settings, Section Type artinya kita membagi section tersebut menjadi beberapa kolom.

Jika memilih Default, selama kita mengosongkan Section’s Heading dan Section’s Description… akan menjadi section kosong.

Tipe Default bermanfaat apabila kita membutuhkan section yang bersifat temporer.

Sebagai contoh… kita ingin menampilkan banner promo musiman.

Pilih tipe One column, unggah banner kita di sana.

Saat promo usai… kita tinggal mengubah tipenya menjadi Default dan klik save, maka banner tadi akan tersembunyi dan bisa kita tampilkan lagi di lain waktu.

Apakah yang disebut sebagai Inner Content, Section Heading dan Section Description?

Gambar di bawah adalah panduannya …

section content guide

Setiap tipe Section memiliki opsi yang berbeda, anda bisa lebih memahaminya setelah mencobanya sendiri satu per satu.

Aturan umum Homepage settings

Destination URL : Apabila diisi dengan link, element ini menjadi dapat diklik oleh pengunjung dan menuju ke link yang kita masukkan.

Youtube : Apabila diisi dengan Youtube Video ID, akan menampilkan video pada section itu.

Contoh : https://www.youtube.com/watch?v=V4PfRI2f96s , V4PfRI2f96s adalah video IDnya.

Search Box : Apabila Placeholder text diisi dengan “Search…” atau “Search Font…” atau apapun, akan menampilkan search box pada section itu.

CTA = Call to action, adalah tombol yang dapat diklik.

BG Gradient = Apabila membutuhkan background dengan warna gradasi, generate css code di https://cssgradient.io/ , copy and paste kodenya di kolom BG Gradient.

Setiap section memiliki tombol save dan delete sendiri, itu sebabnya kami menyarankan untuk mengatur tampilan section satu per satu agar tidak membingungkan.

Saat kita sudah mendapat pengaturan tampilan yang pas, kita bisa menyimpannya menjadi 1 file yang dapat direstore lain waktu.

Dengan fitur ini, kita tidak perlu lagi khawatir bereksperimen dengan tampilan web sesering mungkin.

Install plugin WooCommerce PDF Invoices & Packing Slips.

Install WooCommerce PDF Invoices

Buka Woocommerce >> PDF invoices

WooCommerce PDF menu

Klik tab Documents >> Packing Slip >> disable (hapus centang) >> Save Changes.

WooCommerce PDF slip disable

Pindah ke invoice, atur seperti gambar di bawah, kemudian Save Changes.

WooCommerce PDF invoice enable

Klik tab General >> atur seperti gambar di bawah…

WooCommerce PDF invoice settings

Unggah logo, atur tinggi maksimal logo bila perlu, isi Shop name dan address.

Kita bisa menambah catatan di file PDF dengan mengisi kolom Footer.

Apabila catatan berbentuk list, tulis dalam format HTML (seperti product variation).

Sekarang tiap pembeli akan mendapat file PDF yang berisi aturan penggunaan lisensi dan catatan tambahan yang kita atur sebelumnya.

Install plugin Contact Form 7.

Install Contact Form 7

Buka Contact >> Contact Forms…

Contact Form 7 menu

Copy shortcode di catatan terpisah kemudian klik edit…

Contact Form 7 shortcode

Klik tab email…

Contact Form 7 email tab

Isi kolom “To” dengan alamat email yang paling sering kita gunakan agar kita bisa segera mengetahui jika ada pengunjung yang menghubungi melalui form kontak.

Untuk membalas dengan menggunakan alamat webmail, kita perlu login ke panel webmail membalasnya dari sana.

Sekarang kita perlu membuat halaman form kontak dengan Add new di menu Pages.

add new page

Tambahkan judul halaman dan lihat Page Attributes di sisi kanan… pilih Contact Form 7 kemudian klik tombol publish di kanan atas.

publish contact form

Refresh halaman, akan muncul kolom Contact Form 7… itulah tempat menyimpan shortcode Contact Form 7 yang kita catat sebelumnya.

Contact Form 7 shortcode field

Isi text editor sesuai kebutuhan, kemudian klik update di kanan atas.

Install plugin W3 Total Cache.

Install W3 Total Cache

Buka Performance >> General Settings…

Enable Minfiy (manual mode), Opcode Cache (Zen Opcache) jika tersedia, dan Object Cache.

Disable (hilangkan centang) Browser Cache dan Page Cache, file font preview anda aman selama 2 opsi ini tidak diaktifkan.

Buka Minify settings.

Enable HTML minify settings, centang Inline CSS minification, Inline JS minification, dan Line break removal.

Isi kolom Ignored comment stems dengan mfunc.

Disable (hilangkan centang) JS minify settings.

Enable CSS minify settings, centang Preserved comment removal, dan Line break removal.

Sekarang situs web anda siap beraksi dengan kecepatan load maksimal.

CATATAN : Nonaktifkan plugin ini tiap mengubah pengaturan plugin atau theme, saat usai… aktifkan kembali dan klik empty all caches dari menu dashboard plugin W3 total cache.

Secara default, WP Typeface menyediakan 18 pilihan font dan opsi Custom Font bila kita ingin menggunakan font karya kita sendiri.

Masih kurang? Kita bisa memilih lebih dari 900 font yang tersedia di Google Font.

Caranya… sebagai contoh kita ingin menggunakan font Fredoka One sebagai Heading font.

Buka halaman font Fredoka One (https://fonts.google.com/specimen/Fredoka+One), klik select this style.

fredoka one

Klik embed, copy semua yang ada di antara href=”copy bagian ini“.

Pada contoh ini, isinya adalah https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap

fredoka one embed

Buka link tadi menggunakan browser, yang kita cari kemudian adalah Font URL.

fredoka one css

Catatan : terkadang… ada beberapa font url yang tampil.

Apabila seperti itu, pilih Font URL yang paling akhir atau versi latin.

Setelah kita mendapat Font URL, kita tinggal memasukkannya ke dalam opsi Custom Font kemudian klik save.

© 2020 - WPTypeface.com