Pengenalan Editor Situs dan Template


Pengeditan Situs Lengkap memungkinkan Anda membangun setiap aspek situs WordPress Anda, dari header hingga footer dengan menggunakan berbagai fitur blok langsung dari Editor Situs.

Editor Situs memungkinkan Anda untuk mengubah template, komponen template, dan menyesuaikan keseluruhan gaya situs Anda. Sebelum Editor Situs, desain elemen utama situs (seperti header, sidebar, dan footer) ditentukan oleh tema Anda. Dengan Editor Situs, Anda dapat menentukan sendiri struktur dan gaya situs Anda. Selain digunakan untuk membuat konten halaman dan pos, dengan Editor Situs, Anda dapat menggunakannya untuk membuat keseluruhan tampilan dan nuansa situs Anda menggunakan template.

Editor Template memungkinkan Anda mengedit, membuat, dan menetapkan template ke setiap pos dan halaman, dan memungkinkan Anda mendesain template khusus untuk pos dan halaman Anda menggunakan editor blok WordPress biasa.

Tujuan

Setelah menyelesaikan pembelajaran ini, peserta akan dapat:

  • Membedakan antara fungsi Editor Situs dan Editor Template.
  • Mengelola template, komponen template, dan pengaturan gaya global melalui Editor Situs.
  • Mengedit, membuat, dan menetapkan template ke setiap pos dan halaman melalui Editor Template.

Keterampilan yang Dibutuhkan

Peserta akan mendapatkan hasil maksimal dari pembelajaran ini jika mereka familier dengan:

Pertanyaan Terkait Kesanggupan

  • Bisakah Anda menjelaskan fungsi template?
  • Apakah Anda familier dengan cara menetapkan template pada pos atau halaman?

Materi yang Dibutuhkan

Catatan untuk Presenter

Garis Besar Materi

  • Menyajikan garis besar tentang tata letak dan fungsi Editor Situs: template, komponen template, dan pengaturan gaya.
  • Menunjukkan bagaimana Anda dapat menggunakan Pengaturan Gaya untuk mengubah gaya di situs Anda secara keseluruhan.
  • Menjelaskan bagaimana template adalah kumpulan blok yang digabungkan untuk membuat desain laman web atau tata letak keseluruhan halaman.
  • Membedakan antara bagian dinamis (konten) dan bagian yang dapat digunakan kembali (komponen statis) dari sebuah template.
  • Memperagakan cara memodifikasi komponen template yang sudah ada dan membuat yang baru.
  • Memperagakan cara menggunakan Editor Template untuk mengedit, membuat, dan menetapkan template pada setiap pos dan halaman.

Latihan

  • Gunakan Pengaturan Gaya untuk mengubah font, warna latar belakang, dan warna teks situs Anda.
  • Edit template yang ada dan ubah komponen template header dan footer.
  • Buat template khusus dan gunakan pada sebuah halaman.

Penilaian

Editor Situs menyediakan akses ke fitur berikut. Pilih semua yang sesuai.

  1. Template
  2. Komponen template
  3. Pengeditan halaman atau konten pos
  4. Pengaturan gaya global

Jawaban: 1. Template, 2. Komponen Template, 4. Pengaturan gaya Global

Editor Template memungkinkan Anda untuk…

  1. membangun seluruh situs Anda dengan blok.
  2. mengedit, membuat, dan menetapkan template ke setiap pos dan halaman.

Jawaban: 2. mengedit, membuat, dan menetapkan template ke setiap pos dan halaman.

Saat mengelola template, konten ditampilkan melalui blok Konten Pos.

  1. Benar
  2. Salah

Jawaban: 1. Benar

Saat Anda membuat template…

  1. Anda mendapatkan penggunaan terbaik ketika Anda tidak memisahkan bagian yang dapat digunakan kembali dari bagian yang dinamis.
  2. Anda mendapatkan penggunaan terbaik ketika Anda memisahkan bagian yang dapat digunakan kembali dari bagian yang dinamis.

Jawaban: 2. Anda mendapatkan penggunaan terbaik ketika Anda memisahkan bagian yang dapat digunakan kembali dari bagian yang dinamis.

Referensi Tambahan

Contoh Pembelajaran

Hari ini kita akan mempelajari lebih dalam tentang Editor Situs dan Editor Template. Jika Anda telah menginstal tema blok, seperti Twenty Twenty-Two, dan Anda siap untuk memulai perjalanan Anda dalam pengeditan situs lengkap, Anda akan melihat bahwa Customizer telah menghilang. Namun saat Anda menuju ke Tampilan, Anda akan melihat sebuah opsi baru, yaitu Editor. Dan ketika Anda mengklik Editor, Anda akan diarahkan ke Editor Situs.

The sidebar of the WordPress Dashboard on the left and the Twenty Twenty-Two theme highlighted on the right.

Dan di sini Anda dapat memodifikasi template, komponen template, dan juga menyesuaikan gaya seluruh bagian situs Anda. Editor Situs menyediakan Tampilkan Daftar Template seperti yang akan Anda lihat di sebelah kiri, yang memungkinkan pengguna untuk menjelajahi bagian Situs, yaitu template beranda, template, dan semua komponen template lainnya. Ini adalah bagian penting dari rangkaian bagian Editor Situs, pada dasarnya Anda akan dapat mengedit desain keseluruhan situs Anda. Untuk mengganti apa yang Anda lihat, klik ikon WordPress atau ikon situs Anda di kiri atas. Anda kemudian akan dapat memilih antara kembali ke Dasbor, Situs (yang mana merupakan template laman beranda Anda seperti yang telah disebutkan), daftar template, dan daftar komponen template.

The Site Editor List View.

Saat Anda mengeklik ikon Gaya, Anda memiliki kemampuan untuk mengubah tipografi dan warna keseluruhan situs Anda. Dan jika Anda melihat lebih jauh ke bawah, Anda juga memiliki opsi untuk menyesuaikan tampilan blok tertentu untuk keseluruhan situs Anda. Sebagai catatan, pengaturan Gaya akan tersedia untuk digunakan terlepas dari template atau komponen template apa yang sedang Anda edit. Jika Anda mengklik Tipografi, Anda akan dapat mengelola pengaturan tipografi untuk teks dan tautan. Anda dapat mengubah warna latar belakang situs Anda atau warna teks dan tautan dalam satu klik. Anda akan melihat di kanan atas tertulis ‘atur warna latar belakang atau gradien untuk keseluruhan situs web.’

List of Styles' options.

Jika Anda mengklik tiga titik vertikal di kanan atas, Anda memiliki opsi untuk mengubah beberapa preferensi di pengaturan editor:

  • Mode Spotlight: Menyoroti blok yang Anda pilih dan memudarkan konten lainnya.
  • Tampilkan label teks tombol: Menampilkan teks alih-alih ikon pada tombol.
  • Selalu buka tampilan daftar: Membuka sidebar blok tampilan daftar secara default.

Bagaimana cara mengelola template melalui Editor Situs? Klik ikon WordPress di kiri atas dan buka template. Template adalah kumpulan blok yang digabungkan untuk membuat desain laman web. Mari kita buka template Halaman. Bisa dibilang template itu adalah tata letak halaman penuh. Hal tersebut termasuk hal-hal seperti area header, konten, dan footer. Klik Tampilan Daftar. Di bagian atas Anda akan melihat header dan di bagian bawah halaman, footer Anda, dan di tengah ada blok Konten Pos Anda. Ketika Anda membuat template, Anda mendapatkan penggunaan terbaik saat Anda memisahkan bagian yang dapat digunakan kembali dari bagian yang dinamis. Bagian yang dinamis adalah bagian konten yang akan berubah pada setiap halaman yang menggunakan template tersebut. Bagian yang dapat digunakan kembali adalah bagian statis dari template yang akan tetap sama. Template bukanlah untuk memposting konten. Template untuk pos atau halaman menampilkan konten Anda dengan blok Konten Pos. Template adalah, seperti namanya, template desain yang dapat digunakan oleh satu atau beberapa halaman dan pos.

Ketika Anda mulai membangun situs web baru, Anda dapat mengedit template yang sudah ada atau menambahkan yang baru. Anda juga dapat membuat template khusus. Ingatlah untuk menetapkan setiap halaman atau pos ke sebuah template menggunakan Editor Template.

Selanjutnya, mari kita bahas lebih banyak tentang mengelola komponen template. Sebagai informasi tambahan, komponen template paling baik digunakan untuk membuat area seperti header, footer, dan sidebar Anda.

Ketika kita membuka komponen template, kita akan melihat komponen template yang telah kita buat sendiri dan komponen template yang sudah disediakan oleh tema yang kita pakai. Jadi, empat komponen template di bagian bawah daftar adalah komponen template yang disediakan oleh tema Twenty Twenty-Two. Dan jika Anda melihat sebuah titik di atas ikon komponen template, Anda akan mengetahui bahwa template ini telah dimodifikasi. Template halaman di atas adalah komponen template yang saya buat sendiri.

List of template parts.

Terakhir, Anda mungkin memutuskan untuk menambahkan komponen template baru. Dan ketika Anda menambahkan komponen template baru, Anda memiliki opsi antara komponen template umum, header, dan footer. Komponen template umum tidak terikat pada area tertentu. Dan ingatlah untuk memberi komponen template Anda nama yang deskriptif.

The options when creating a template part.

Mari kita lihat cara menambahkan blok Komponen Template. Saya akan membuka template 404 saya yang ditampilkan saat tidak ada konten yang ditemukan. Dan seperti yang akan Anda lihat, saat ini tidak ada header. Jadi mari kita buka Tampilan Daftar. Dan di atas blok grup, saya akan menyisipkan blok Komponen Template saya, dan setelah Anda memilih blok Komponen Template, Anda dapat memilih blok Komponen Template yang sudah ada atau membuat yang baru. Mari kita pilih yang ada, yang sudah saya buat.

Options when adding a new template template part.

Sekarang, mari kita bahas tentang Editor Template. Editor Template memungkinkan Anda mengedit, membuat, dan menetapkan template ke setiap pos dan halaman. Mari kita lihat bagaimana cara kerjanya sembari mempraktikkannya. Klik ikon WordPress di kiri atas dan kembalilah ke dasbor. Klik Halaman dan buka salah satu halaman yang ada. Di sidebar pengaturan di sebelah kanan, Anda akan melihat bahwa template yang telah ditetapkan pada halaman ini adalah template default, yaitu template halaman Anda. Anda juga dapat menetapkan salah satu template lain yang tersedia. Saat Anda siap, Anda dapat mengedit template pilihan Anda.

This page is assigned to the the default page template.

Assign a different template to a page.

Ketika Anda mengeklik Edit, Anda akan dibawa ke Mode Pengeditan Template. Dan Anda akan tahu bahwa Anda sedang berada dalam Mode Pengeditan Template saat nama template terlihat di bar atas. Dan kedua, ada bingkai warna gelap yang muncul di sekeliling template seiring Anda mengeditnya. Tetapi Anda juga memiliki pilihan ketiga; untuk membuat template khusus yang baru. Akan muncul perintah ‘jelaskan kegunaan template, contohnya lebar penuh’, dan template khusus dapat diterapkan pada pos atau halaman apa pun. Anda mungkin memutuskan untuk membuat template khusus untuk landing page, atau mungkin untuk halaman portofolio.

Creating a custom template.

Setelah Anda mengeklik Buat, Anda akan melihat bahwa headernya terlihat berbeda dan tidak ada footer. Jadi, Anda memiliki kanvas kosong untuk digunakan guna membuat template khusus Anda sendiri. Sekadar mengingatkan, Mode Pengeditan Template membuka kemampuan untuk beralih antara mengedit konten dari setiap pos atau halaman dan template yang digunakan oleh pos atau halaman tersebut.

Kami percaya sekarang Anda telah memiliki pemahaman yang lebih baik tentang cara menggunakan Editor Situs dan Editor Template.


Penutup Pembelajaran

💡 Lanjutkan dengan Latihan dan Penilaian yang diuraikan di atas.