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
Header	Sticky header, dark mode toggle
Warna & Tipografi	Preset warna, font
Tata Letak	Lebar konten, posisi sidebar
Homepage Hero	Featured post 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
Footer	Copyright, widget footer
SEO	Meta description, schema
Cookie Consent	Banner persetujuan cookie

Mengakses Pengaturan Tema

Login ke Dashboard WordPress
Buka menu Appearance → Customize
Pilih panel Theme Options

Pratinjau Real-time

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

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
Show Site Tagline	Tampilkan tagline di header	Aktif
Enable Dark Mode	Tampilkan tombol dark mode	Aktif

Cara Mengatur

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

Warna & Tipografi

Preset Warna

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

Slate Pro (default)
Ocean Blue
Forest Green
Sunset Orange
Berry Purple
Rose Pink
Midnight
Minimal

Cara Memilih Preset

Buka Customize → Theme Options → Colors
Pilih preset dari dropdown Color Preset
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	System, Inter, Merriweather
Heading Font	System, Inter, Merriweather
Font Size	Bisa diatur per elemen
Line Height	Jarak antar baris

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

Buka Customize → Theme Options → Layout
Gunakan slider untuk mengatur lebar container
Pilih posisi sidebar atau nonaktifkan
Klik Publish

Layout Tanpa Sidebar

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

Homepage Hero

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

Mode Hero

Mode	Deskripsi
Featured Post	Menampilkan satu postingan unggulan dengan ukuran besar
Custom Hero	Konten HTML custom yang Anda buat sendiri
No Hero	Tidak menampilkan hero section

Menggunakan Featured Post

Buka Customize → Theme Options → Homepage Hero
Pilih Hero Mode: Featured Post
Pilih postingan dari dropdown Featured Post
Klik Publish

Default

Jika tidak memilih postingan, sistem akan menampilkan postingan terbaru.

Menggunakan Custom Hero

Pilih Hero Mode: Custom Hero
Masukkan kode HTML di textarea Custom Hero Content
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 drag-drop di Customizer
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

Buka Customize → Theme Options → Editor's Pick
Aktifkan Enable Section
Klik Select Posts untuk memilih postingan
Atur urutan tampilan
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

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

Buka Customize → Theme Options → Single Post
Scroll ke bagian Reading Experience
Aktifkan Table of Contents
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

Buka Customize → Theme Options → Single Post
Scroll ke bagian Reading Experience
Aktifkan Reading Progress Bar
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 untuk 18+ bahasa pemrograman.

Cara Mengaktifkan

Buka Customize → Theme Options → Single Post
Scroll ke bagian Reading Experience
Centang Code Syntax Highlighting
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).

Tombol berbagi artikel ke berbagai platform sosial media.

Platform yang Didukung

Facebook
Twitter/X
LinkedIn
WhatsApp
Telegram
Copy Link

Cara Mengaktifkan

Buka Customize → Theme Options → Single Post
Scroll ke bagian Reading Experience
Aktifkan Share Buttons
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

Facebook, X (Twitter), Instagram, YouTube, LinkedIn, TikTok, Pinterest, GitHub, Dribbble, Behance, Discord, Telegram, WhatsApp, Email, RSS Feed.

Cara Mengatur

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

URL Lengkap

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

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

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)

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

Buka Customize → Theme Options → SEO
Aktifkan fitur yang diinginkan
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.

Banner persetujuan cookie untuk kepatuhan GDPR.

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

Cara Mengaktifkan

Buka Customize → Theme Options → Privacy & Cookie Consent
Aktifkan Enable Cookie Consent Banner
Sesuaikan pesan jika perlu
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

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

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

SastraPro memiliki beberapa area widget:

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

Buka Appearance → Widgets
Pilih area widget
Klik + untuk menambah widget
Pilih widget yang diinginkan
Atur pengaturan widget
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

Buka Customize → Theme Options → Header
Toggle opsi Enable Dark Mode
Klik Publish

Kustomisasi Warna Dark Mode

Warna dark mode dapat dikustomisasi:

Buka Customize → Theme Options → Colors
Pilih preset yang sudah memiliki dark mode colors
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

Buka Customize → Theme Options → Single Post
Aktifkan Show Author Bio
Klik Publish

Informasi yang Ditampilkan

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

Pengaturan Tema SastraPro ​

Daftar Pengaturan ​

Mengakses Pengaturan Tema ​

Header ​

Cara Mengatur ​

Warna & Tipografi ​

Preset Warna ​

Cara Memilih Preset ​

Warna Custom ​

Tipografi ​

Tata Letak ​

Cara Mengatur ​

Homepage Hero ​

Mode Hero ​

Menggunakan Featured Post ​

Menggunakan Custom Hero ​

Editor's Pick ​

Layout ​

Opsi Urutan ​

Cara Mengatur ​

Arsip & Index ​

Grid Layout ​

Pagination ​

Post Meta ​

Single Post ​

Gambar Unggulan ​

Related Posts ​

Post Meta ​

Fitur Reading Experience ​

Daftar Isi (TOC) ​

Cara Mengaktifkan ​

Pengaturan TOC ​

Fitur ​

Reading Progress Bar ​

Cara Mengaktifkan ​

Cara Kerja ​

Syntax Highlighting ​

Cara Mengaktifkan ​

Cara Penggunaan ​

Format Komentar yang Didukung ​

Alias Bahasa ​

Bahasa yang Didukung ​

Fitur Syntax Highlighting ​

Share Buttons ​

Platform yang Didukung ​

Cara Mengaktifkan ​

Cara Kerja ​

Icon Sosial Media ​

Platform yang Didukung ​

Cara Mengatur ​

Iklan ​

Cara Memasang Iklan ​

Footer ​

Placeholder Copyright ​

Widget Footer ​

SEO ​

Cara Mengatur ​

Cookie Consent ​

Cara Mengaktifkan ​

Cara Kerja ​

Menu Navigasi ​

Lokasi Menu ​

Cara Membuat Menu ​

Area Widget ​

Cara Menambah Widget ​

Dark Mode ​

Mengaktifkan/Nonaktifkan Toggle ​

Kustomisasi Warna Dark Mode ​

Breadcrumbs ​

Cara Kerja ​

Author Bio ​

Cara Mengaktifkan ​

Informasi yang Ditampilkan ​

Pengaturan Tema SastraPro

Daftar Pengaturan

Mengakses Pengaturan Tema

Header

Cara Mengatur

Warna & Tipografi

Preset Warna

Cara Memilih Preset

Warna Custom

Tipografi

Tata Letak

Cara Mengatur

Homepage Hero

Mode Hero

Menggunakan Featured Post

Menggunakan Custom Hero

Editor's Pick

Layout

Opsi Urutan

Cara Mengatur

Arsip & Index

Grid Layout

Pagination

Post Meta

Single Post

Gambar Unggulan

Related Posts

Post Meta

Fitur Reading Experience

Daftar Isi (TOC)

Cara Mengaktifkan

Pengaturan TOC

Fitur

Reading Progress Bar

Cara Mengaktifkan

Cara Kerja

Syntax Highlighting

Cara Mengaktifkan

Cara Penggunaan

Format Komentar yang Didukung

Alias Bahasa

Bahasa yang Didukung

Fitur Syntax Highlighting

Share Buttons

Platform yang Didukung

Cara Mengaktifkan

Cara Kerja

Icon Sosial Media

Platform yang Didukung

Cara Mengatur

Iklan

Cara Memasang Iklan

Footer

Placeholder Copyright

Widget Footer

SEO

Cara Mengatur

Cookie Consent

Cara Mengaktifkan

Cara Kerja

Menu Navigasi

Lokasi Menu

Cara Membuat Menu

Area Widget

Cara Menambah Widget

Dark Mode

Mengaktifkan/Nonaktifkan Toggle

Kustomisasi Warna Dark Mode

Breadcrumbs

Cara Kerja

Author Bio

Cara Mengaktifkan

Informasi yang Ditampilkan