Komponen UI dan Tipografi Plus UI

Plus UI dikenal bukan hanya karena tampilan berandanya, tetapi juga karena format artikel yang kaya. Pada versi WordPress ini, gaya komponen tersebut dipertahankan agar penulis dapat membuat dokumentasi, tutorial, artikel teknologi, dan halaman unduhan tanpa memasang page builder tambahan.

Catatan pentingContoh di bawah menggunakan mode HTML/Code Editor WordPress. Syntax HTML tetap menggunakan bahasa HTML asli karena harus tetap valid, sedangkan komentar dan penjelasan ditulis dalam Bahasa Indonesia.

Paragraf

Gunakan tag <p> untuk paragraf biasa. Struktur semantik yang benar membantu keterbacaan dan SEO.

<!-- Paragraf biasa -->
<p>Ini adalah contoh paragraf artikel Plus UI.</p>

Paragraf dengan indentasi

Class pIndent memberikan jarak pada baris pertama sehingga cocok untuk artikel editorial atau tulisan panjang.

<p class="pIndent">Paragraf ini memiliki indentasi pada baris pertama.</p>

Drop Cap

Drop cap memperbesar huruf pertama pada paragraf.

<p><span class="dropCap">P</span>lus UI memiliki gaya pembuka paragraf yang menarik.</p>

Referensi artikel

<p class="pRef">Sumber:<br> dokumentasi.example.com</p>

Gambar artikel

Gunakan atribut alt, width, dan height. WordPress akan menghasilkan beberapa ukuran gambar secara otomatis, sedangkan browser dapat memilih ukuran yang paling sesuai melalui srcset.

<img class="full" src="gambar.webp" alt="Deskripsi gambar" width="1280" height="720">

Hindari layout shiftJangan menghapus ukuran lebar dan tinggi gambar tanpa alasan. Dimensi membantu browser menyediakan ruang sebelum gambar selesai dimuat.

Gambar dengan keterangan

<figure>
  <img src="gambar.webp" alt="Contoh Plus UI" width="1280" height="720">
  <figcaption>Keterangan gambar ditulis di sini.</figcaption>
</figure>

Tautan eksternal

Untuk tautan ke situs lain, gunakan target="_blank" dan rel yang aman.

<a class="extL" href="https://example.com" rel="nofollow noreferrer noopener" target="_blank">Buka situs eksternal</a>

Tombol

Tombol Utama Tombol Outline

<a class="button" href="#">Tombol Utama</a>
<a class="button ln" href="#">Tombol Outline</a>
<a class="button" href="#"><i class="icon dl"></i>Unduh</a>

Download Box

Download Box cocok untuk theme, plugin, ebook, preset, atau file digital lainnya.

plus-ui-wp.zip2.4 MiB

<div class="dlBox">
  <span class="fT" data-text="zip"></span>
  <div class="fN">
    <span>plus-ui-wp.zip</span>
    <span class="fS">2.4 MiB</span>
  </div>
  <a class="button" aria-label="Unduh" href="URL_FILE">
    <i class="icon dl"></i>
  </a>
</div>

Alert

InformasiGunakan alert informasi untuk tips atau penjelasan tambahan.

BerhasilGunakan alert sukses untuk langkah yang selesai atau rekomendasi aman.

PeringatanGunakan alert peringatan sebelum pengguna mengubah pengaturan penting.

ErrorGunakan alert error untuk kondisi yang harus diperbaiki.

<div class="alert info"><b>Informasi</b>Isi pesan.</div>
<div class="alert success"><b>Berhasil</b>Isi pesan.</div>
<div class="alert warning"><b>Peringatan</b>Isi pesan.</div>
<div class="alert error"><b>Error</b>Isi pesan.</div>

Blockquote

Desain yang baik tidak hanya terlihat menarik, tetapi juga membuat konten lebih mudah dipahami.

Contoh kutipan

Gunakan variasi ini untuk menonjolkan pernyataan penting di dalam artikel.

Plus UI WP

<blockquote class="s1">
  <p>Isi kutipan.</p>
  <span>Nama sumber</span>
</blockquote>

Langkah tutorial

Buka editor artikel WordPress.
Aktifkan Code Editor bila ingin menempelkan HTML.
Tambahkan komponen sesuai kebutuhan.
Preview artikel pada desktop dan mobile.

<ol class="steps">
  <li>Langkah pertama</li>
  <li>Langkah kedua</li>
  <li>Langkah ketiga</li>
</ol>

Tabel responsif

Komponen	Class	Kegunaan
Alert	`.alert`	Pesan informasi
Button	`.button`	CTA
Download	`.dlBox`	Informasi file

<div class="table">
  <table>
    <thead><tr><th>Nama</th><th>Nilai</th></tr></thead>
    <tbody><tr><td>Plus UI</td><td>WordPress</td></tr></tbody>
  </table>
</div>

Code Block dan inline code

Gunakan <code> untuk syntax pendek, dan <pre><code> untuk beberapa baris.

add_action('after_setup_theme', function () {
    add_theme_support('post-thumbnails');
    add_theme_support('title-tag');
});

Escape HTMLJika menampilkan contoh HTML di dalam code block, ubah karakter < menjadi < dan > menjadi > agar tidak dianggap sebagai elemen nyata.

Spoiler

Contoh spoiler

Konten ini baru terlihat setelah pengguna membuka spoiler.

<details class="sp">
  <summary data-show="Tampilkan" data-hide="Sembunyikan">Judul spoiler</summary>
  <div><p>Konten tersembunyi.</p></div>
</details>

Accordion

Apa itu Plus UI WP?

Theme WordPress dengan tampilan dan komponen yang mengadaptasi Plus UI.

Apakah mendukung mode gelap?

Ya. Pengguna dapat memilih Light, Dark, System, atau Theme dari header.

<details class="ac">
  <summary>Pertanyaan</summary>
  <div><p>Jawaban</p></div>
</details>

Daftar isi otomatis

Pada Plus UI WP, daftar isi dibuat otomatis pada halaman artikel dengan membaca heading h2 dan h3. Karena itu, gunakan struktur heading secara berurutan dan hindari memakai heading hanya untuk memperbesar teks.

Praktik terbaik

Gunakan paragraf pendek agar nyaman dibaca di mobile.
Gunakan satu H1 saja; judul artikel sudah menjadi H1.
Gunakan H2 untuk bagian utama dan H3 untuk subbagian.
Kompres gambar ke WebP/AVIF bila memungkinkan.
Jangan menambahkan JavaScript berat ke setiap artikel.
Preview komponen dalam mode terang dan gelap.

Siap digunakanSemua komponen di artikel ini menggunakan class yang sudah tersedia di stylesheet Plus UI WP, sehingga tidak membutuhkan framework UI tambahan.