Editor Situs


Editor Situs memungkinkan Anda mendesain seluruh situs, termasuk header, footer, dan segala sesuatu di antaranya, dengan blok. Editor ini memberi Anda kontrol yang lebih besar atas tampilan situs Anda. 

Editor Situs hanya tersedia jika Anda memasang dan mengaktifkan Tema blok di situs Anda.

Cara mengakses Editor Situs

Untuk menggunakan Editor Situs, Anda perlu menggunakan tema blok di situs Anda. Tema blok adalah tema yang menggunakan blok untuk semua bagian situs, termasuk menu navigasi, header, konten, dan footer situs. 

Semua blok yang tersedia di Editor Blok WordPress dapat digunakan di Editor Situs. Sekumpulan blok yang disebut Blok Tema dibuat khusus untuk Editor Situs.

Untuk menemukan tema blok, dari dasbor WordPress, buka Tampilan > Tema dan klik Tambah Baru. Di halaman Tambah Tema, pilih Tema Blok untuk menemukan daftar Tema blok yang terus bertambah di direktori tema WordPress.

Appearance > Themes showing block theme options
Cara menemukan tema blok

Setelah memasang dan mengaktifkan Tema blok di situs Anda, buka Tampilan > Editor untuk membuka Editor Situs.

Appearance section of the admin interface showing the Themes and Editor entry points after activating a block theme.
Menu Tampilan setelah mengaktifkan tema blok

Hal-hal yang dapat dilakukan di Editor Situs

Setelah masuk ke Editor Situs, Anda akan melihat lima item menu.

Main menu screen in the Site Editor.
  • Navigasi: Memungkinkan Anda menelusuri menu dan melakukan perubahan dasar.
  • Gaya: Menyediakan akses langsung untuk mengedit variasi gaya situs’ Anda.
  • Halaman: Kini Anda dapat mengedit konten halaman di dalam Editor Situs itu sendiri.
  • Templat: Meninjau berbagai tata letak bawaan untuk berbagai bagian situs, serta halaman khusus (hasil pencarian, 404, dan sebagainya).
  • Pola: Pola tersinkronisasi dan bagian templat Anda dapat dikelola di sini.

Anda juga akan melihat ikon kaca pembesar. Klik ikon tersebut untuk mengakses Palet Perintah.

Di bawah ini adalah ikhtisar berbagai bagian di Editor Situs.

Ruang kerja Editor Situs

Editor Situs memuat beranda situs Anda (berdasarkan pengaturan di Pengaturan Membaca) untuk mulai mengedit.

Menu atas di Editor Situs mencakup opsi berikut:

Site editor toolbar with numbers indicating various options to explore.
  1. Ikon situs (atau ikon W, jika tidak ada ikon situs yang ditetapkan untuk situs): Kembali ke dasbor atau beralih ke bagian lain dari Editor Situs: Navigasi, Gaya, Halaman, Templat, atau Pola. Jika Anda memilih untuk kembali ke dasbor, Anda akan diminta menyimpan perubahan atau meninggalkan Editor Situs tanpa menyimpan perubahan.
  1. Tombol penyisipan Blok +: Menambahkan blok, pola blok, Media, atau pola tersinkronisasi baru (jika situs memiliki pola tersinkronisasi) ke Editor Situs.
Block Inserter Panel
Panel penyisipan blok
  1. Alat: Beralih antara mengedit blok dan memilih blok. Pilih alat Pilih (atau tekan tombol Escape pada keyboard) untuk memilih blok satu per satu. Setelah blok dipilih, tekan tombol Enter pada keyboard untuk kembali mengedit.
Edit/select buttons in the WordPress block editor workspace
Tombol Edit/Pilih
  1. UrungkanMengurungkan tindakan terakhir yang dilakukan.
  2. UlangiMengulangi tindakan yang Anda batalkan menggunakan tombol Urungkan.
  3. Tampilan Daftar: Melihat daftar semua blok yang ada di halaman dan menavigasi antarblok di halaman dengan mudah. Ini berguna untuk melihat struktur halaman serta mengedit, memindahkan, dan menghapus blok.
  4. Palet Perintah: Klik di sini untuk mengakses semua konten, templat, dan pola situs’ Anda dengan cepat, serta menjalankan tindakan lain (pengaturan, halaman baru, dan sebagainya).
  1. SimpanMenyimpan perubahan yang Anda buat di Editor Situs.
    • Saat mengeklik tombol Simpan , Anda akan mendapatkan daftar semua pola tersinkronisasi, menu navigasi, templat, dan bagian templat yang telah Anda ubah.
    • Anda dapat memilih untuk menyimpan semuanya atau hanya beberapa di antaranya.
    • Perhatikan bahwa beberapa perubahan (seperti perubahan pada templat Header dan Footer) akan diterapkan ke semua halaman situs yang menggunakan templat tersebut, bukan hanya halaman yang sedang Anda kerjakan.
  1. Pengaturan: Menampilkan atau menyembunyikan menu bilah sisi Pengaturan Templat dan Blok.
  1. GayaMenelusuri variasi gaya yang tersedia untuk tema Anda, mengatur tipografi, palet warna, dan tata letak seluruh situs, atau menyesuaikan tampilan blok tertentu untuk seluruh situs.
  2. Opsi Lainnya: Klik ikon tiga titik vertikal untuk membuka pengaturan dan alat tambahan.
Site editor with an arrow pointing to the three dot menu where extra settings can be found.

Tampilkan bilah alat atas: Menampilkan atau menyembunyikan bilah alat atas di editor. Saat opsi ini diaktifkan, bilah alat blok disematkan di bagian atas Editor Blok WordPress (tepat di bawah bilah alat atas), bukan muncul langsung di atas blok.

Top toolbar enabled
Bilah alat atas diaktifkan

Mode sorotan: Semua blok dibuat berwarna abu-abu kecuali blok yang sedang Anda kerjakan sehingga Anda dapat fokus pada satu blok dalam satu waktu.

Spotlight mode
Mode sorotan

Bebas Gangguan: Saat opsi ini diaktifkan, semua bagian UI yang tidak penting akan disembunyikan untuk memberikan pengalaman mengedit yang lebih imersif.

Editor: Secara default, Anda akan berada di Editor visual. Beralih ke Editor kode untuk melihat seluruh halaman di editor kode HTML.

Plugin: Di sini, Anda dapat beralih antara Pengaturan dan Gaya di Bilah Sisi Editor Situs.

Alat: Di sini, Anda dapat mengunduh tema dengan templat dan gaya yang diperbarui (Ekspor), mempelajari pintasan keyboard, mengunjungi panduan selamat datang Editor Situs, menyalin semua blok, atau melihat artikel dukungan tambahan.

Preferensi: Gunakan menu Preferensi untuk menyesuaikan pengalaman mengedit dan mengubah cara Anda berinteraksi dengan blok.

Cara menggunakan Editor Situs

Untuk mengedit gaya situs

Anda dapat menggunakan Editor Situs untuk menyesuaikan gaya seluruh situs web dan blok. Pengaturan gaya tersedia terlepas dari templat atau bagian templat yang sedang Anda edit. 

  • Buka Tampilan > Editor.
  • Klik item menu Gaya atau ikon di sebelah bilah sisi pengaturan blok.

Di bagian Gaya, Anda dapat menelusuri variasi gaya yang tersedia untuk tema Anda, mengubah palet warna dan tipografi, serta tata letak di seluruh situs dan juga mengubah tampilan blok yang berlaku di seluruh situs.

Untuk meninjau revisi gaya atau mengatur ulang perubahan yang telah Anda buat sepenuhnya, klik ikon menu tiga titik di sudut kanan dan pilih salah satu opsi.

Pelajari lebih lanjut tentang Gaya dalam artikel dukungan ini: Ikhtisar gaya.

Untuk menyesuaikan tata letak situs

Anda dapat menggunakan Editor Situs untuk membangun struktur dan tata letak seluruh situs menggunakan blok. Contoh: area seperti header, footer, dan tampilan struktural pos serta halaman situs Anda.

Semua blok yang tersedia di Editor Blok WordPress dapat digunakan di Editor Situs. Sekumpulan blok yang disebut Blok Tema dibuat khusus untuk Editor Situs.

Contoh: Blok Loop Kueri memungkinkan Anda menyesuaikan tampilan dan nuansa tata letak pos, Blok Navigasi memungkinkan Anda menyesuaikan menu navigasi situs’ Anda, Blok Judul Situs membantu menyesuaikan Judul Situs dan lainnya.

Lihat daftar lengkap Blok Tema.

Contoh – Cara Menyesuaikan Twenty Twenty-Three menggunakan Editor Situs

Twenty Twenty-Three mendukung Editor Situs dan dapat disesuaikan menggunakan editor tersebut. Sebagai contoh, mari kita hapus jarak di bagian atas beranda Twenty Twenty-Three. Untuk melakukannya, hapus padding di bagian bawah bagian templat header dan padding di bagian atas area konten.

Before
Sebelum
After
Sesudah

Pertama, hapus padding bawah Bagian Templat Header.

  1. Dari Layar Administrasi, pilih Tampilan > Editor
  2. Pilih Pola > Bagian Templat > Header > Header, lalu klik ikon Pensil untuk mengeditnya.
  3. Pilih blok Grup > Baris. Gunakan navigasi blok bawah.
  4. Dari Pengaturan Blok, klik Gaya.
Styles of Header Template Parts
Gaya Bagian Templat Header
  1. Gulir ke bawah ke Padding > Bawah. Nilai saat ini adalah 2.
  2. Atur menjadi 0.
  3. Simpan bagian templat.

Selanjutnya, hapus padding atas area konten.

  1. Kembali ke Editor Situs.
  2. Pilih Templat > Beranda, lalu klik ikon Pensil untuk mengeditnya.
  3. Pilih blok Grup paling atas. Gunakan navigasi blok bawah.
  4. Dari Pengaturan Blok, klik Gaya.
Home Template Styles
Gaya Templat Beranda
  1. Gulir ke bawah ke Padding > Atas. Nilai saat ini adalah 3.
  2. Atur menjadi 0.
  3. Simpan templat.

Untuk menelusuri templat dan bagian templat

Dari Editor Situs, Anda dapat dengan mudah menelusuri templat dan bagian templat yang tersedia untuk situs Anda.

  • Buka Tampilan > Editor untuk membuka Editor Situs. Anda akan dibawa ke tampilan tempat Anda dapat memilih untuk menelusuri templat atau bagian templat.
  • Klik Templat untuk melihat pratinjau daftar templat yang tersedia untuk situs Anda.
  • Klik Pola untuk melihat pratinjau daftar bagian templat.

Untuk mengelola templat situs’

WordPress menggunakan templat untuk membuat tata letak dan struktur jenis halaman tertentu di situs Anda. Editor Situs menampilkan pilihan templat yang dapat Anda tambahkan ke situs dan memungkinkan Anda membuat templat khusus menggunakan Editor Templat.

Dari Tampilan > Editor, Anda akan melihat tampilan yang mencakup bilah sisi dengan daftar Templat dan Pola, termasuk daftar bagian templat.

Pelajari lebih lanjut tentang Templat dalam artikel dukungan ini: Editor Templat.

Untuk mengelola bagian templat

Bagian templat adalah blok untuk mengelola area global situs yang berulang seperti Header, Footer, Bilah Sisi, dan sebagainya. Bagian ini terutama dimaksudkan untuk menentukan struktur situs dan dapat digunakan kembali. Anda juga dapat membuat Bagian Templat khusus yang dapat digunakan kembali melalui templat.

Dari Tampilan > Editor, klik opsi Pola. Dari Semua bagian templat, Anda dapat mengaksesnya.

Pelajari lebih lanjut tentang Bagian Templat dalam artikel dukungan ini: Bagian Templat.

Untuk mengelola halaman

Sejak versi 6.3, Anda dapat mengelola, mengedit, dan membuat halaman melalui Editor Situs, di bagian “Halaman”.

Pelajari lebih lanjut tentang pengelolaan halaman melalui Editor Situs dalam artikel dukungan ini: Halaman Editor Situs

Cara kembali ke Dasbor

Untuk kembali ke dasbor, klik ikon WordPress (atau ikon Situs jika Anda telah menetapkannya) untuk membuka navigasi kiri Editor Situs. Pilih < untuk kembali ke dasbor WordPress. Anda akan diminta menyimpan perubahan yang telah dibuat di Editor Situs sebelum keluar.

How to exit the Site Editor by clicking on the WordPress or Site Icon on the top left part of the screen.

Cara mengekspor templat dan gaya

Anda dapat mengekspor tema beserta perubahan yang Anda buat di Editor Situs, termasuk templat, bagian templat, dan pengaturan gaya, serupa dengan opsi Alat > Ekspor.

  • Buka Editor Situs dengan membuka Tampilan > Editor.
  • Pilih ikon tiga titik vertikal di sebelah opsi pengaturan Gaya Anda.
  • Di bawah Alat, pilih Ekspor. Ini akan memulai proses ekspor dan Anda akan menerima berkas zip tema yang diunduh, dengan templat dan bagian templat yang disertakan.
How to find the "Export" option under the three-dot "More Options" menu on the top right part of the screen.

Alat yang berguna saat menggunakan Editor Situs

Alat-alat berikut berguna saat menggunakan Editor Situs.

Palet Perintah

Palet Perintah menawarkan cara cepat untuk menavigasi konten situs Anda dan menjalankan berbagai tindakan, seperti membuat pos/halaman baru, mengaktifkan atau menonaktifkan preferensi, serta mengakses pengaturan gaya dan CSS khusus Anda.

Anda dapat membuka Palet Perintah di Tampilan Situs pada bilah sisi dengan mengeklik ikon pencarian dan. Dalam Tampilan Edit, Palet Perintah berada di Bilah Judul bagian atas. Anda juga dapat menggunakan pintasan keyboard Cmd+k di Mac atau Ctrl+k di Windows

Pelajari lebih lanjut tentang Palet Perintah dalam artikel dukungan ini: Palet Perintah Editor Situs.

Tampilan Daftar

Tampilan Daftar membantu Anda menavigasi tata letak blok yang kompleks dan struktur blok bertingkat. Anda dapat memilih blok yang benar-benar Anda perlukan dan memperoleh gambaran singkat tentang tata letak blok pada halaman yang sedang Anda kerjakan. Anda dapat dengan mudah memilih beberapa blok dan mengedit, memindahkan, atau mengelompokkannya.

Pelajari lebih lanjut tentang Tampilan Daftar dalam artikel dukungan ini:  Tampilan Daftar.

Pola Blok

Pola Blok adalah kumpulan blok siap pakai yang dapat Anda sisipkan ke dalam pos dan halaman. Anda kemudian dapat menyesuaikannya lebih lanjut. WordPress dilengkapi dengan sekumpulan Pola Blok standar. Anda juga dapat menemukan Pola Blok yang disertakan bersama tema blok.

Pelajari lebih lanjut tentang Pola Blok dalam artikel dukungan ini: Pola Blok.

Salin dan tempel gaya

Dengan WordPress 6.2, opsi baru ditambahkan untuk memungkinkan Anda menyalin dan menempel gaya blok, sehingga memudahkan penggunaan kembali desain yang telah Anda buat. Anda dapat menemukan opsi ini dari menu tiga titik di blok mana pun dan opsi ini dimaksudkan untuk digunakan saat menyalin dan menempel di antara blok dengan jenis yang sama:

Terapkan perubahan gaya secara global

Jika Anda lebih nyaman dengan opsi yang lebih canggih saat membuat desain atau menyesuaikan blok individual, sejak WordPress 6.2, Anda dapat mengambil perubahan yang dibuat pada satu blok dan menerapkannya ke semua blok dengan jenis yang sama. Misalnya, Anda dapat menerapkan satu desain untuk sebuah blok individual ke semua blok di situs Anda dengan opsi baru di bagian Lanjutan pada pengaturan blok.

How to apply the current's block style to all styles of that same type across your site by clicking on Block Settings > Advanced > Apply Globally

Ubah ukuran pratinjau Editor Situs

Saat berada di Editor Situs, Anda mungkin ingin mengubah pratinjau templat atau bagian templat yang sedang Anda lihat. Anda dapat melakukannya dengan memilih pegangan pada bilah sisi abu-abu gelap dan memindahkannya sesuai keinginan.

Log Perubahan

  • Diperbarui 2024-09-14
    • Memperbarui bagian pengelolaan templat dan bagian templat dengan Tampilan Grid
  • Diperbarui 2023-08-13
    • Menambahkan contoh penggunaan Editor Situs.
  • Diperbarui 2023-08-08
    • Mengganti “Blok yang Dapat Digunakan Kembali” dengan “Pola”
    • Memperbarui redaksi & tangkapan layar agar sesuai dengan antarmuka baru.
    • Menambahkan referensi ke Palet Perintah & Halaman Editor Situs.
  • Diperbarui 2023-03-27
    • Memperbarui konten dan tangkapan layar untuk 6.2
  • Diperbarui 2022-10-17
    • Memperbarui konten dan tangkapan layar/video untuk 6.1
  • Diperbarui 2022-05-17
    • Mengerjakan ulang konten & memperbarui video/tangkapan layar untuk 6.0
  • Dibuat 2022-01-05