Pengaturan Tema SastraPro

Panduan lengkap untuk mengatur tema SastraPro setelah dipasang di website WordPress Anda.

Explore Langsung di Customizer

Semua pengaturan tema tersedia di Customizer (Appearance → Customize → Theme Options). Setiap opsi sudah dilengkapi penjelasan singkat, sehingga Anda bisa langsung explore dan mencoba tanpa harus membaca panduan ini. Halaman ini hanya sebagai referensi tambahan jika Anda membutuhkan penjelasan lebih detail.

Daftar Pengaturan

Pengaturan	Deskripsi
Import Demo	Pasang konten demo dengan satu klik
Header	Sticky header, alignment menu, dark mode toggle
Warna & Tipografi	Preset warna, font
Tata Letak	Lebar konten, posisi sidebar
Homepage Hero	Featured post (hingga 3, otomatis slider) atau konten custom
Editor's Pick	Postingan pilihan editor
Arsip & Index	Grid layout, pagination
Single Post	Gambar unggulan, related posts
Daftar Isi (TOC)	Table of contents otomatis
Reading Progress Bar	Bar progress membaca
Syntax Highlighting	Highlighting kode program
Share Buttons	Tombol berbagi sosial media
Icon Sosial Media	Link ke akun sosial media
Iklan	Penempatan iklan AdSense
Custom Scripts	Google Analytics, GTM, kode tracking
Footer	Copyright, widget footer
SEO	Meta description, schema
Cookie Consent	Banner persetujuan cookie
Import / Export Pengaturan	Backup dan pindahkan setelan tema

---

Import Demo

Cara tercepat membuat website Anda tampil persis seperti demo tema — konten contoh, widget, menu, dan seluruh setelan Customizer terpasang otomatis. (Tersedia mulai versi 1.2.8)

Langkah Import

1. Setelah tema aktif, akan muncul notice dengan tombol Install One Click Demo Import — klik untuk memasang plugin gratis tersebut (atau install manual dari Plugins → Add New)
2. Buka Appearance → Import Demo Data
3. Klik tombol import pada kartu SastraPro Demo
4. Tunggu proses selesai (beberapa menit, karena gambar demo ikut diunduh)

Setelah selesai, tema otomatis menerapkan setelan Customizer, menugaskan lokasi menu, mengatur post hero dan Editor's Pick, serta jumlah post homepage — tanpa langkah manual tambahan.

Plugin Bisa Dihapus

Setelah import selesai, plugin One Click Demo Import boleh dinonaktifkan atau dihapus — tidak memengaruhi hasil import.

---

Mengakses Pengaturan Tema

1. Login ke Dashboard WordPress
2. Buka menu Appearance → Customize
3. Pilih panel Theme Options

Pratinjau Real-time

Setiap perubahan yang Anda buat akan langsung terlihat di panel pratinjau sebelah kanan.

---

Header

Pengaturan untuk tampilan header website.

Opsi	Fungsi	Default
Sticky Header	Header tetap terlihat saat scroll	Aktif
Hide on Scroll Down	Header sembunyi saat scroll ke bawah, muncul saat scroll ke atas	Nonaktif
Menu Alignment	Posisi horizontal menu navigasi: Left, Center, Right	Left
Show Site Tagline	Tampilkan tagline di header	Aktif
Enable Dark Mode	Tampilkan tombol dark mode	Aktif

Cara Mengatur

1. Buka Customize → Theme Options → Header
2. Aktifkan atau nonaktifkan opsi sesuai kebutuhan
3. Klik Publish untuk menyimpan

---

Warna & Tipografi

Preset Warna

SastraPro menyediakan 14 preset warna yang sudah dioptimasi untuk tampilan light dan dark mode:

• Slate Pro (default)
• Default Light
• Default Dark
• Ocean Blue
• Forest Green
• Warm Terracotta
• Midnight
• Blush Rose
• Sage Green
• Plum Purple
• Coffee Brown
• Indigo Night
• Sand Beige
• Crimson

Cara Memilih Preset

1. Buka Customize → Theme Options → Colors
2. Pilih preset dari dropdown Color Preset
3. Klik Publish

Warna Custom

Jika preset tidak sesuai, Anda bisa mengatur warna manual:

Opsi	Fungsi
Background Color	Warna latar belakang
Text Color	Warna teks utama
Accent Color	Warna aksen (link, tombol)
Border Color	Warna garis pembatas
Surface Color	Warna permukaan card/box
Muted Text Color	Warna teks sekunder

Tipografi

Opsi	Pilihan
Body Font	10 pilihan: System Default, Inter, Open Sans, Roboto, Lato, Merriweather, Lora, Playfair Display, Poppins, Source Sans Pro
Heading Font	10 pilihan yang sama dengan Body Font
Font Size	Bisa diatur per elemen
Line Height	Jarak antar baris

Font Self-hosted

Semua font (kecuali System Default) di-host langsung dari tema — tanpa request eksternal ke Google Fonts, ramah privasi dan GDPR.

---

Tata Letak

Pengaturan struktur halaman.

Opsi	Pilihan	Default
Container Width	960px - 1400px	1200px
Sidebar Position	None, Left, Right	Right
Back to Top Button	Show/Hide	Show

Cara Mengatur

1. Buka Customize → Theme Options → Layout
2. Gunakan slider untuk mengatur lebar container
3. Pilih posisi sidebar atau nonaktifkan
4. Klik Publish

Layout Tanpa Sidebar

Pilih Sidebar Position: None untuk tampilan full-width yang modern.

Page Template Full Width

Untuk halaman tertentu yang butuh lebar penuh (landing page, halaman penjualan), gunakan template bawaan:

1. Edit halaman yang diinginkan
2. Di panel Page (sebelah kanan editor), bagian Template, pilih SastraPro Full Width
3. Update halaman

---

Homepage Hero

Section hero di bagian atas homepage dengan gambar dan overlay gradient.

Mode Hero

Mode	Deskripsi
Featured Post	Menampilkan hingga 3 postingan unggulan — otomatis menjadi slider jika lebih dari satu
Custom Hero	Konten custom: heading, subheading, tombol, dan gambar background
No Hero	Tidak menampilkan hero section

Menggunakan Featured Post

1. Buka Customize → Theme Options → Homepage Hero
2. Pilih Hero Mode: Featured Post
3. Pada Featured Posts, pilih hingga 3 postingan dari dropdown
4. Atur urutan dengan tombol ▲▼ pada daftar post terpilih — urutan ini menjadi urutan slide
5. Klik Publish

Opsi	Fungsi
Badge Text	Ubah label badge artikel unggulan (default: "Featured")
Thumbnail Style	Gaya tampilan gambar: wide, stacked, compact, atau tanpa gambar
Text Alignment	Rata kiri, tengah, atau kanan
Slider Autoplay	Slide berganti otomatis (plus pengaturan interval)
Slider Dots	Tampilkan indikator titik navigasi slider

Default

Jika tidak memilih postingan, sistem akan menampilkan postingan terbaru. Slider hanya aktif saat lebih dari satu post dipilih.

Menggunakan Custom Hero

1. Pilih Hero Mode: Custom Hero
2. Isi field yang tersedia: Heading, Subheading, Button Text, dan Button URL
3. Pilih Hero Image sebagai background (opsional)
4. Sesuaikan tampilan: Overlay (kepekatan lapisan gelap), Blur background, Text Color (light/dark), dan Alignment
5. Klik Publish

---

Editor's Pick

Section postingan pilihan editor yang ditampilkan di homepage dengan layout 2 kolom.

Opsi	Fungsi
Enable Section	Aktifkan/nonaktifkan section
Section Title	Judul section (default: "Editor's Pick")
Post Selection	Pilih postingan yang ingin ditampilkan (maksimal 5)
Display Order	Urutan tampilan postingan

Layout

• Kolom Kiri: Post pertama dengan thumbnail besar (vertical card)
• Kolom Kanan: Post 2-5 dengan thumbnail kecil (horizontal cards)
• Mobile: Single column, semua horizontal

Opsi Urutan

Opsi	Deskripsi
Custom	Urutan sesuai daftar pilihan Anda — atur dengan tombol ▲▼
Date (Newest)	Terbaru ke terlama
Date (Oldest)	Terlama ke terbaru
Title (A-Z)	Alfabet A-Z
Title (Z-A)	Alfabet Z-A
Comment Count	Komentar terbanyak
Random	Acak

Cara Mengatur

1. Buka Customize → Theme Options → Editor's Pick
2. Aktifkan Enable Section
3. Pilih postingan dari dropdown Select Posts (maksimal 5)
4. Atur urutan dengan tombol ▲▼ di samping tiap post terpilih (tersedia mulai versi 1.2.8; pastikan Display Order = Custom)
5. Klik Publish

---

Arsip & Index

Pengaturan untuk halaman arsip, kategori, dan tag.

Grid Layout

Opsi	Tampilan
1 Column	Card horizontal (gambar di kiri, teks di kanan)
2 Columns	Grid 2 kolom
3 Columns	Grid 3 kolom

Pagination

Tipe	Fungsi
Numbered	Navigasi dengan nomor halaman
Load More	Tombol untuk memuat postingan lanjutan (AJAX)
Infinite Scroll	Otomatis memuat saat scroll

Post Meta

Pilih informasi yang ditampilkan di setiap card postingan:

• Author (penulis)
• Date (tanggal publikasi)
• Reading Time (estimasi waktu baca)
• Comment Count (jumlah komentar)

---

Single Post

Pengaturan untuk halaman postingan individual.

Gambar Unggulan

Opsi	Fungsi	Default
Show Featured Image	Tampilkan gambar unggulan	Aktif
Featured Image Ratio	Rasio gambar: 21:9 (Ultrawide), 16:9 (Widescreen), 4:3 (Standard), Original (Auto)	21:9

Related Posts

Menampilkan artikel terkait berdasarkan kategori dan tag.

Opsi	Fungsi	Default
Related Posts Count	Jumlah postingan terkait (0-6)	3

Nonaktifkan Related Posts

Set Related Posts Count ke 0 untuk menyembunyikan section.

Post Meta

Pilih informasi yang ditampilkan:

• Author Info (nama dan bio penulis)
• Publication Date
• Modified Date
• Reading Time
• Category Tags

Fitur Reading Experience

Fitur	Fungsi
Reading Progress Bar	Bar progress saat membaca
Table of Contents	Daftar isi otomatis dari heading
Code Syntax Highlighting	Highlighting kode program
Share Buttons	Tombol berbagi ke sosial media
Post Navigation	Link ke postingan sebelum/sesudah

---

Daftar Isi (TOC)

Table of Contents otomatis dibuat dari heading (H2, H3, H4, H5, H6) di dalam postingan.

Cara Mengaktifkan

1. Buka Customize → Theme Options → Single Post
2. Scroll ke bagian Reading Experience
3. Aktifkan Table of Contents
4. Klik Publish

Pengaturan TOC

Opsi	Default	Deskripsi
Position	Sidebar	Posisi TOC: sidebar atau before content
Min Headings	3	Minimum heading untuk menampilkan TOC
Collapsible	Off	Bisa di-collapse/expand
Sticky	On	TOC mengikuti scroll di sidebar

Fitur

• Highlight Aktif: TOC akan meng-highlight heading yang sedang dibaca
• Smooth Scroll: Klik item TOC akan scroll smooth ke heading
• Nested List: Heading H3 akan menjadi sub-item dari H2, dst.

---

Reading Progress Bar

Bar visual di bagian atas halaman yang menunjukkan progress membaca artikel.

Cara Mengaktifkan

1. Buka Customize → Theme Options → Single Post
2. Scroll ke bagian Reading Experience
3. Aktifkan Reading Progress Bar
4. Klik Publish

Cara Kerja

• Bar muncul di bagian paling atas halaman
• Warna bar mengikuti accent color tema
• Progress dihitung berdasarkan scroll position relatif terhadap panjang artikel
• Otomatis menyesuaikan jika window di-resize

---

Syntax Highlighting

Fitur highlighting syntax kode menggunakan Prism.js dengan autoloader — semua bahasa pemrograman didukung, dan hanya bahasa yang dipakai yang dimuat.

Cara Mengaktifkan

1. Buka Customize → Theme Options → Single Post
2. Scroll ke bagian Reading Experience
3. Centang Code Syntax Highlighting
4. Klik Publish

Cara Penggunaan

Untuk mengaktifkan syntax highlighting, tambahkan komentar bahasa di baris pertama code block:

JavaScript:

// lang: javascript
function hello() {
  console.log("Hello World!");
}

PHP:

// lang: php
<?php
function hello() {
    echo "Hello World!";
}

Python:

# lang: python
def hello():
    print("Hello World!")

CSS:

/* lang: css */
.button {
  background: #0f172a;
  color: #ffffff;
}

HTML:

<!-- lang: html -->
<div class="container">
  <h1>Hello World</h1>
</div>

Bash/Shell:

# lang: bash
npm install
npm run build

Format Komentar yang Didukung

Format	Contoh
// lang: [bahasa]	// lang: javascript
// language: [bahasa]	// language: php
# lang: [bahasa]	# lang: python
/* lang: [bahasa] */	/* lang: css */
<!-- lang: [bahasa] -->	<!-- lang: html -->

Alias Bahasa

Alias	Bahasa
js	javascript
ts	typescript
py	python
rb	ruby
sh, shell	bash
yml	yaml
html, xml, htm	markup

Bahasa yang Didukung

• Web: HTML, CSS, JavaScript, TypeScript, JSON, XML, YAML
• Backend: PHP, Python, Ruby, Java, Go, Rust, C, C++, C#
• Database: SQL, GraphQL
• Shell: Bash, PowerShell
• Lainnya: Markdown, Docker, Kotlin, Swift, Dart

Fitur Syntax Highlighting

• Line Numbers: Nomor baris otomatis
• Copy Button: Tombol copy di pojok kanan (muncul saat hover)
• Dark Mode: Warna menyesuaikan tema light/dark
• On-demand Loading: Hanya memuat bahasa yang dibutuhkan

Tanpa Language Hint

Jika tidak ada komentar // lang:, code block akan ditampilkan tanpa highlighting (plain text dengan styling tema).

---

Share Buttons

Tombol berbagi artikel ke berbagai platform sosial media.

Platform yang Didukung

• Facebook
• Twitter/X
• LinkedIn
• Pinterest
• WhatsApp
• Telegram
• Email
• Copy Link

Cara Mengaktifkan

1. Buka Customize → Theme Options → Single Post
2. Scroll ke bagian Reading Experience
3. Aktifkan Share Buttons
4. Klik Publish

Cara Kerja

• Tombol muncul di akhir artikel (sebelum related posts)
• Klik tombol akan membuka popup share
• "Copy Link" akan menyalin URL artikel ke clipboard

---

Icon Sosial Media

Menampilkan link ke akun sosial media Anda di header dan footer.

Platform yang Didukung

16 platform: Facebook, X (Twitter), Instagram, YouTube, LinkedIn, TikTok, Pinterest, Threads, Discord, GitHub, Telegram, WhatsApp, Mastodon, Bluesky, Email, RSS Feed.

Cara Mengatur

1. Buka Customize → Theme Options → Social Icons
2. Masukkan URL lengkap untuk setiap platform
3. Kosongkan field jika tidak ingin menampilkan
4. Klik Publish

URL Lengkap

Pastikan memasukkan URL lengkap termasuk https://. Contoh: https://facebook.com/username

---

Iklan

Pengaturan untuk penempatan iklan (Google AdSense atau jaringan iklan lainnya).

Opsi	Fungsi
Enable Advertisements	Aktifkan fitur iklan
In-Content Ad Code	Kode iklan yang muncul di tengah konten
Show Ad After Paragraph	Posisi iklan (setelah paragraf ke-N)
After Content Ad Code	Kode iklan setelah konten berakhir

Cara Memasang Iklan

1. Buka Customize → Theme Options → Advertisements
2. Aktifkan Enable Advertisements
3. Paste kode iklan AdSense di field yang sesuai
4. Atur posisi iklan in-content (default: setelah paragraf ke-3)
5. Klik Publish

Performa Iklan

Posisi setelah paragraf ke-2 atau ke-3 biasanya memberikan CTR terbaik tanpa mengganggu pengalaman membaca.

---

Custom Scripts

Tempat memasang kode tracking seperti Google Analytics, Google Tag Manager, atau script verifikasi.

Opsi	Fungsi
Header Scripts	Kode yang disisipkan sebelum </head>
Footer Scripts	Kode yang disisipkan sebelum </body>

Cara Memasang

1. Buka Customize → Theme Options → Custom Scripts
2. Paste kode (termasuk tag <script>) di field yang sesuai
3. Klik Publish

Hanya untuk Administrator

Demi keamanan, hanya user dengan kapabilitas penuh (administrator) yang dapat menyimpan script di field ini.

---

Footer

Pengaturan area footer website.

Opsi	Fungsi
Before Footer Widgets	Konten HTML di atas widget footer
Copyright Text	Teks copyright (mendukung placeholder)
Show Social Icons	Tampilkan icon sosmed di footer
Footer Widget Columns	Jumlah kolom widget (1-4)

Placeholder Copyright

Gunakan placeholder untuk data dinamis:

• {year} - Tahun saat ini
• {site} - Nama website

Contoh: Copyright © {year} {site}. All rights reserved.

Widget Footer

1. Buka Appearance → Widgets
2. Tambahkan widget ke area Footer 1, Footer 2, dst.
3. Jumlah kolom yang aktif sesuai pengaturan di Customizer

---

SEO

Pengaturan untuk optimasi mesin pencari.

Fitur	Deskripsi
Auto Meta Description	Generate dari excerpt atau konten (160 karakter)
Meta Keywords	Otomatis dari tags dan categories
Open Graph	og:title, og:image, og:description untuk sharing
Twitter Cards	summary_large_image format
JSON-LD Schema	Article schema dengan author info
Canonical URL	Dengan handling pagination
Meta Robots	noindex untuk 404, search, date archives

Cara Mengatur

1. Buka Customize → Theme Options → SEO
2. Aktifkan fitur yang diinginkan
3. Klik Publish

Plugin SEO

Jika menggunakan plugin SEO seperti Yoast, Rank Math, All in One SEO, SEOPress, atau The SEO Framework, tema akan otomatis menonaktifkan fitur SEO duplikat untuk menghindari konflik.

---

Cookie Consent

Banner persetujuan cookie untuk kepatuhan GDPR.

Opsi	Fungsi
Enable Cookie Consent	Aktifkan banner consent
Cookie Message	Pesan yang ditampilkan

Cara Mengaktifkan

1. Buka Customize → Theme Options → Privacy & Cookie Consent
2. Aktifkan Enable Cookie Consent Banner
3. Sesuaikan pesan jika perlu
4. Klik Publish

Cara Kerja

• Banner muncul di bagian bawah halaman untuk pengunjung baru
• Pengunjung bisa klik Accept atau Decline
• Pilihan disimpan selama 365 hari
• Banner tidak akan muncul lagi setelah memilih

---

Import / Export Pengaturan

Backup seluruh setelan tema atau pindahkan ke website lain. (Tersedia mulai versi 1.2.7)

Export

1. Buka Customize → Theme Options → Import / Export
2. Centang section yang ingin di-export (atau semua)
3. Klik Export — file JSON akan terunduh

Import

1. Di website tujuan (dengan tema SastraPro aktif), buka section yang sama
2. Pilih file JSON hasil export
3. Centang section yang ingin diterapkan
4. Klik Import

Setelan Sensitif

Section yang berisi script atau kode iklan ditandai khusus di daftar export. Periksa kembali sebelum membagikan file export — jangan sampai ID Analytics/AdSense Anda ikut berpindah ke website orang lain.

---

Menu Navigasi

Lokasi Menu

Lokasi	Posisi
Primary Menu	Menu utama di header
Footer Menu	Menu di area footer

Cara Membuat Menu

1. Buka Appearance → Menus
2. Klik Create a new menu
3. Beri nama menu
4. Tambahkan item (Pages, Posts, Categories, Custom Links)
5. Centang lokasi menu di bagian Menu Settings
6. Klik Save Menu

---

Area Widget

SastraPro memiliki beberapa area widget:

Area	Lokasi
Sidebar	Sidebar di samping konten
Footer 1-4	Area widget di footer (jumlah kolom bisa diatur)

Cara Menambah Widget

1. Buka Appearance → Widgets
2. Pilih area widget
3. Klik + untuk menambah widget
4. Pilih widget yang diinginkan
5. Atur pengaturan widget
6. Widget otomatis tersimpan

---

Dark Mode

SastraPro mendukung dark mode dengan fitur:

• Toggle Manual - Tombol di header untuk beralih mode
• System Preference - Otomatis mengikuti pengaturan sistem operasi
• Persistent - Pilihan user disimpan di browser (localStorage)

Mengaktifkan/Nonaktifkan Toggle

1. Buka Customize → Theme Options → Header
2. Toggle opsi Enable Dark Mode
3. Klik Publish

Kustomisasi Warna Dark Mode

Warna dark mode dapat dikustomisasi:

1. Buka Customize → Theme Options → Colors
2. Pilih preset yang sudah memiliki dark mode colors
3. Atau atur manual di bagian Dark Mode Colors

---

Breadcrumbs

Navigasi breadcrumb dengan Schema.org markup untuk SEO.

Cara Kerja

• Breadcrumbs otomatis muncul di halaman post, page, category, tag, dan archive
• Format: Home → Category → Post Title
• Menggunakan Schema.org BreadcrumbList markup

---

Author Bio

Box informasi penulis yang muncul di akhir artikel.

Cara Mengaktifkan

1. Buka Customize → Theme Options → Single Post
2. Aktifkan Show Author Bio
3. Klik Publish

Informasi yang Ditampilkan

• Avatar (dari Gravatar)
• Nama penulis
• Bio (dari profil WordPress user)
• Link ke halaman author archive