Menggunakan Shortcode [larisfont_preview] (LarisFont)
Referensi lengkap shortcode LarisFont: parameter id, title, title_hide, preview, glyphs, color, background, border, input, dan contoh penggunaan.
Shortcode [larisfont_preview] memberi kontrol penuh atas penempatan preview font (misalnya di editor blok, widget teks, template PHP, atau page builder). Pilih I will use shortcode [larisfont_preview] to display font preview di Font Preview Position kalau Anda tidak memakai hook preset WooCommerce/post.
Daftar contoh shortcode juga tampil di heading Font Preview Shortcode pada halaman Settings.
Prasyarat
- Enable Font Preview global aktif
- Produk/post/halaman target sudah punya Enable font preview for this product dicentang dan file font terupload
Parameter
| Parameter | Nilai | Default | Fungsi |
|---|---|---|---|
id |
ID numerik | ID halaman saat ini | Post/produk yang font-nya ditampilkan |
title |
Teks | Font Preview Title Text global | Judul section |
title_hide |
yes / no |
Mengikuti Hide Font Preview Title | Sembunyikan judul |
size |
Angka pt | Pengaturan Classic | Ukuran untuk gaya Classic |
text |
String | Custom Default Text | Teks awal preview |
preview |
yes / no |
yes |
Tampilkan editor interaktif |
glyphs |
yes / no |
Mengikuti Show Font Glyphs Table Preview | Tampilkan tabel glyph |
color |
Hex, mis. #333333 |
Font Preview Text Color | Warna teks |
background |
Hex | Font Preview Background | Warna latar |
border |
Hex | Font Preview Border/Line | Warna garis/border |
input |
Hex | Font Preview Input/Select | Warna input dan dropdown |
Parameter yang tidak diisi akan mengikuti nilai global dari Settings.
Contoh penggunaan
Preview halaman saat ini
[larisfont_preview]Menampilkan preview untuk post/produk yang sedang dibuka (berguna jika shortcode ditempel di deskripsi produk itu sendiri).
Preview produk tertentu
[larisfont_preview id="123"]Ganti 123 dengan ID produk WooCommerce, post, atau halaman.
Preview saja (tanpa glyph)
[larisfont_preview id="123" title="Font Preview" title_hide="no" preview="yes" glyphs="no"]Glyph saja (tanpa editor interaktif)
[larisfont_preview id="123" title="Font Glyphs" title_hide="no" preview="no" glyphs="yes"]Warna kustom
[larisfont_preview id="123" color="#333333" background="#FFFFFF" border="#DDDDDD" input="#FFFFFF"]Override warna global untuk instance shortcode ini saja.
Shortcode dari metabox produk
Setiap produk menampilkan kode siap pakai di field Font Preview Shortcode:
[larisfont_preview id="456"]Tombol Show/hide custom settings di metabox membantu menyusun parameter tambahan tanpa menghafal sintaks.
Kapan memakai shortcode vs posisi otomatis?
| Situasi | Rekomendasi |
|---|---|
| Halaman produk standar WooCommerce | Posisi preset (Before Product Tabs, dll.) |
| Page builder (Elementor, Bricks) | Shortcode di widget HTML/Shortcode |
| Preview font A di halaman produk B | Shortcode dengan id produk A |
| Landing page multi-font showcase | Beberapa shortcode dengan id berbeda |
| Hanya glyph di sidebar | preview="no" glyphs="yes" |
Troubleshooting
| Masalah | Solusi |
|---|---|
| Shortcode tampil sebagai teks mentah | Pastikan shortcode diproses (bukan di blok Code); di Classic Editor, shortcode block aktif. |
| Shortcode kosong | Cek id benar; pastikan preview per-produk aktif dan file font ada |
glyphs="yes" tidak menampilkan tabel |
Upload OTF/TTF; WOFF2 tidak didukung glyph |
| Warna parameter diabaikan | Pastikan format hex valid (#RRGGBB); cek tidak ada spasi di attribute. |
| Dua preview muncul | Matikan hook otomatis. Pilih posisi shortcode di Settings, atau hapus shortcode duplikat |