DE{CODE}: Tema Modern dan Masa Depan WordPress: Bekerja dengan Pengeditan Situs Penuh dan Selanjutnya

WordPress 5.9 memperkenalkan Pengeditan Situs Lengkap ke inti, menandakan perubahan besar dalam cara kami membangun situs web dengan WordPress. Dalam sesi DE{CODE} ini, bergabunglah dengan WP Engine Developer Advocate Nick Diego saat dia membongkar perubahan ini, serta beberapa cara Anda dapat memanfaatkannya untuk membuat situs web yang lebih baik—dengan cara WordPress modern.

Slide Sesi

Transkrip Teks Lengkap

NICK DIEGO : Halo, dan selamat datang di “Bekerja dengan Pengeditan Situs Lengkap dan Masa Depan Tema Modern di WordPress.” Nama saya Nick Diego, dan saya advokat pengembang di WP Engine. Sedikit tentang saya– jadi saya mulai bekerja dengan WordPress pada tahun 2012. Saya terutama adalah pengembang plugin, dan sejak itu saya beralih untuk melakukan banyak hal dengan tema blok. Saya sebenarnya bergabung dengan WP Engine pada November 2021, jadi ini semacam pertunjukan baru bagi saya. Saya bersemangat tentang blok dan pola dan semua pengeditan situs penuh, itulah sebabnya saya sangat bersemangat untuk memberikan presentasi ini hari ini.

Jadi apa itu pengeditan situs lengkap? Kami sudah sering mendengarnya dalam beberapa tahun terakhir. Jadi, ini sebenarnya adalah "kumpulan fitur yang menghadirkan pengalaman akrab dan ekstensibilitas blok ke semua bagian situs Anda, bukan hanya postingan dan halaman". Jadi itu sebenarnya payung fitur, yang mencakup hal-hal seperti Editor Situs, Gaya Global, blok tema, Templat, dan, tentu saja, Tema Blok.

Jadi dalam percakapan kita hari ini, kita akan membahas beberapa hal berbeda. Kita akan mulai dengan dasar-dasarnya. Saya ingin memastikan bahwa kita semua berada di halaman yang sama, terutama dari perspektif terminologi. Kemudian kita akan berbicara tentang anatomi tema blok, lalu gaya global, dalam pengaturan yang menyertakan file theme.json. Dan terakhir, saya akan membagikan pemikiran saya tentang tema modern dan seperti apa tampilannya.

Jadi dalam presentasi hari ini, kita akan menggunakan banyak contoh berbeda, dan itu akan berasal dari tema 2022, yang disertakan di WordPress 5.9 pada Januari 2022. Ini adalah tema blok yang dikembangkan oleh Core Tim WordPress, dan ini adalah tempat yang bagus untuk memulai, dan tersedia di repositori plugin, jadi tidak ada tema yang lebih baik untuk digunakan sebagai contoh.

Jadi saat kita memulai hari ini, sekali lagi, kita akan mulai dengan dasar-dasarnya. Dan tidak ada yang lebih mendasar dari sebuah blok. Jadi jika Anda telah menggunakan WordPress selama beberapa tahun terakhir, Anda mungkin sangat familiar dengan blok. Mereka adalah unit dasar konten di WordPress. Ini bisa berupa paragraf teks ke galeri gambar. Itu bisa mengambil hampir semua bentuk. Dan ide di balik pengeditan situs penuh adalah, segera atau sekarang, semua yang ada di situs web Anda akan menjadi blok. Kami akan membahas lebih lanjut tentang cara kerjanya.

Sekarang di sini kita memiliki contoh sekumpulan blok berbeda yang saat ini ada di WordPress. Dua kolom kiri yang harus Anda kenal. Kami memiliki paragraf dan judul dan blok penutup– seterusnya dan seterusnya. Di 5.9– sekali lagi, yang dirilis tahun ini– kami sekarang memiliki apa yang disebut blok tema. Ini adalah blok yang merupakan konten yang, secara tradisional, Anda tidak dapat mengedit langsung dari dalam WordPress.

Itu termasuk hal-hal seperti logo situs Anda, loop kueri, kutipan posting, penulis posting. Ini semua adalah jenis konten yang Anda perlukan untuk menyelami file dan kode template berbasis PHP secara langsung atau menggunakan plugin pihak ketiga yang membantu Anda dalam mengedit area ini. Dan ini semua datang atau telah datang ke WordPress dan memungkinkan pengguna untuk mengeditnya secara langsung, dan semuanya berbentuk blok.

Selanjutnya, kami ingin berbicara tentang pola. Pola adalah jenis landasan dari pengalaman pengeditan situs lengkap. Pola bisa menjadi keseluruhan percakapan tersendiri, tetapi kami akan memberi Anda sedikit pratinjau tentang pola jika Anda tidak terbiasa. Jadi sekali lagi, pola hanyalah kumpulan blok yang telah ditentukan sebelumnya yang membentuk tata letak tertentu. Sebuah pola bisa berupa satu blok dengan beberapa gaya. Itu bisa beberapa blok.

Pola memungkinkan pengguna, dengan satu klik, memasukkan seluruh desain langsung ke situs mereka, daripada harus membuat desain secara manual, satu blok pada satu waktu, yang benar-benar dapat mempercepat pengembangan situs. Ini juga sangat berguna jika Anda ingat– Anda melihat demo situs web yang indah ini, dan semua kontennya ada di sana. Dan Anda menginstal temanya, dan sepertinya, bagaimana cara mendapatkan demo itu? Pola menyelesaikannya untuk Anda karena pembuat tema dapat menyediakan sejumlah tata letak halaman atau desain individual yang, dengan satu klik, pengguna dapat memasukkan dan mendapatkan demo yang mereka lihat dan tertarik ketika mereka memilih tema.

Jadi mari kita lihat sekilas polanya di sini. Kami hanya memiliki judul sederhana, beberapa teks, dan beberapa tombol. Dan ini bisa, sekali lagi, disisipkan dengan satu klik ke dalam halaman, dan kita lihat di sini bahwa itu terdiri dari tiga blok yang berbeda, blok judul, blok paragraf, dan blok tombol.

Sekarang dengan 5.9, lagi, yang keluar tahun ini, kami melihat pengenalan Pattern Explorer. Jadi tema 2022, yang saya sebutkan sebelumnya, yang kami gunakan di semua contoh kami, disebut tema Hatchery– banyak burung. Dan Anda dapat melihat di sini di Pattern Explorer, kami memiliki banyak desain berbeda yang dibuat oleh pembuat tema.

Jadi sebagai pengguna, saya dapat memasukkan semua ini langsung ke situs, dan saya mendapatkan estetika yang sama dengan tema yang dirancang oleh penulis tema, jadi seri speakernya, beberapa burung berdampingan– apa pun yang Anda suka. Dan pola, dan pola yang disajikan dengan sebuah tema, sangat penting untuk pengalaman pengeditan situs penuh itu.

Selanjutnya, kita memiliki Editor. Kita tidak bisa tidak berbicara tentang Editor. Jika Anda pernah menggunakan WordPress, Anda mungkin sangat familiar dengan ini. Tapi saya ingin menyebutkan ini karena Editor telah menggunakan banyak nama berbeda di masa lalu– Editor Blok, Gutenberg, Editor Gutenberg. Untuk keperluan diskusi ini, kami hanya akan memanggil Editor. Itulah nama resminya, dan itulah yang akan Anda lihat di sini. Sekali lagi, ini diperkenalkan kembali di WordPress 5.0 pada akhir 2018.

Jadi di dalam Editor, Anda cukup mengklik Insertor, dan Anda dapat memasukkan blok dan pola Anda. Sekarang, saya ingin menunjukkan layarnya karena selanjutnya kita perlu berbicara tentang Editor Situs. Pada akhirnya, awalan situs Editor Situs mungkin akan hilang, dan kita hanya akan memiliki Editor. Tapi Editor Situs adalah pengalaman kohesif yang memungkinkan Anda mengedit dan menavigasi secara langsung di antara berbagai template, bagian template, opsi gaya, dan lainnya.

Jadi pada dasarnya, Editor Situs mengambil editor standar kami yang telah kami gunakan selama beberapa tahun terakhir dan membawanya ke tingkat berikutnya dengan memungkinkan pengguna untuk mengedit area tambahan di situs web Anda yang semuanya sekarang diberdayakan oleh pemblokiran. Jadi WordPress 5.9 memperkenalkan pengeditan situs lengkap dan, dengan itu, Editor Situs. Dan di 6.0, yang akan keluar pada bulan Mei, kita akan melihat banyak penyempurnaan untuk ini, yang sangat menarik.

Jadi jika Anda menggunakan tema blok seperti 2022, Anda dapat mengakses Editor Situs. Ada dua cara berbeda, bilah sisi atas dan kemudian di bawah bagian tampilan. Sekarang, Editor Situs, sekali lagi, karena merupakan bagian dari– sangat canggih, hanya tersedia untuk admin. Jadi jangan khawatir, para editor, mereka tidak akan dapat mengakses Editor Situs. Anda harus menjadi admin untuk mengakses Editor Situs.

Dan begitu kita masuk ke sini, tampilannya sangat mirip dengan editor standar, tetapi Anda akan melihat sesuatu yang sedikit berbeda. Di atas sini, kami memiliki Home. Dan ini memberi tahu kita bahwa kita sebenarnya sedang mengedit template home.HTML, dan kita memiliki beberapa area halaman yang berbeda yang dapat kita edit secara terpisah. Seperti yang Anda lihat di sini, kami memiliki header dan footer.

Jadi ini adalah sesuatu yang tidak pernah bisa Anda lakukan sebelumnya. Anda tidak pernah bisa mengedit home.PHP, tetapi sekarang template HTML langsung dari antarmuka, bukan tanpa ekstensi pihak ketiga lainnya.

Dan jika kita mengklik halaman dan tampilan daftar, kita dapat melihat bahwa kita memiliki kueri berulang. Sekali lagi, tema bangunan yang sudah dikenal itu mungkin sangat, sangat, sangat akrab dengan membangun loop di dalam template untuk tema, tapi di sini kita bisa melakukan itu semua dengan blok menggunakan loop kueri. Dan kita juga bisa melihat beberapa blok tema lainnya seperti judul posting, gambar unggulan, kutipan posting, dan tanggal posting. Ini semua dapat dipindahkan dan dimodifikasi oleh pengguna dari antarmuka tanpa perlu pengkodean apa pun.

Sekarang, jika Anda mengklik ikon atau ikon situs WordPress kecil, kita bisa mendapatkan sidebar ini. Dan kemudian kita dapat melihat bahwa kita memiliki akses ke semua template dan bagian template kita. Sekarang, saya ingin mencatat bahwa aliran– semua layar ini sepenuhnya dalam pengembangan. Pengeditan situs penuh masih dalam versi beta, dan ada banyak penyempurnaan dan peningkatan yang akan datang. Jadi apa yang kita lihat hari ini mungkin tidak terlihat sama dalam enam bulan, tapi ini awal yang fantastis.

Jadi jika kita masuk ke template, kita bisa melihat semua template yang disertakan dengan 2022. Anda akan melihat beberapa yang familiar seperti Page dan Index dan Home dan 404. Dan kemudian jika kita pergi ke bagian template kita, kita bisa melihat beberapa custom bagian templat yang disertakan oleh penulis tema. Jadi kami memiliki beberapa header yang berbeda dan kami memiliki footer.

Sekali lagi, semua ini dapat diedit oleh pengguna. Jadi, jika kita melihat titik kecil ini di sini, kita dapat melihat bahwa bagian templat tajuk ini telah saya edit. Sekarang, saat Anda mengedit komponen Templat atau Templat, perubahan tersebut disimpan ke database. Mereka tidak benar-benar memodifikasi template di tema Anda, yang bagus karena Anda selalu dapat kembali ke template tema atau bagian template.

Tetapi sekali lagi, jika kita mengklik di sini, kita dapat mulai mengedit bagian templat tajuk itu, dan Anda akan melihat bahwa semua ini terdiri dari blok. Jadi pengalaman yang sama yang akan Anda gunakan di Editor saat mengedit postingan atau halaman. Anda dapat melakukannya sekarang di dalam Editor Situs untuk semua templat dan komponen templat Anda.

Jadi itulah pembahasan singkat tentang Editor Situs dan cara kerjanya, tetapi sekarang saya ingin berbicara tentang anatomi tema blok, yang merupakan komponen dasar utama pengeditan situs lengkap. Jadi bagaimana cara kerja anatomi tema blok? Yah, itu sebenarnya dipecah menjadi beberapa kategori berbeda. Jadi kami memiliki tema blok. Mereka sepenuhnya merangkul pengeditan situs penuh. Template tema seluruhnya terdiri dari blok. Templat dan bagian templat adalah HTML, bukan PHP.

Dan kemudian saya ingin mencatat bahwa tema blok bisa sangat sederhana. Yang perlu dilakukan hanyalah terdiri dari file style.CSS dan file index.html, serta file index.PHP. File PHP ini adalah sisa dari pengembangan tema WordPress tradisional dan kemungkinan besar akan hilang di masa mendatang.

Dan terakhir, sebagian besar tema blok menyertakan file theme.JSON. Kami akan membicarakan ini secara terpisah. Ini adalah topik yang sangat penting mengenai pengaturan dan gaya global. Jadi mari kita lihat struktur file tema. Jadi ini tahun 2022, versi singkat dari struktur file di dalam tahun 2022. Dan kita bisa melihat file-file yang diperlukan itu di sini.

Kemudian kita juga melihat ada beberapa folder yaitu Templates dan Template Parts. Di dalam setiap folder ini, Anda memiliki semua file HTML untuk setiap template dan bagian template. Apa yang tidak terlihat di sini, yang sebenarnya sangat menarik, jadi saya ingin menyelinap ke dalam, Gutenberg, plugin Gutenberg, tempat semua pengeditan situs lengkap pengembangan masa depan ini dilakukan, sebenarnya baru-baru ini memperkenalkan folder baru bernama Pola. Jadi Anda benar-benar dapat menempatkan file pola Anda tepat di dalam folder Pola, dan WordPress akan mendaftarkannya untuk Anda. Sekilas saja. Saya sangat menyarankan Anda untuk mencoba Gutenberg dan semua fitur barunya.

Tapi kembali ke slide di sini. Kami memiliki template dan bagian template kami. Dan Anda dapat melihat masing-masing file HTML untuk masing-masing. Sekarang, untuk lebih memahami cara kerjanya, kita akan melihat file 404.HTML. Ini adalah file atau halaman di situs Anda yang tidak akan pernah bisa Anda edit secara langsung kecuali Anda mendalami kode atau Anda menggunakan sumber daya pihak ketiga yang memungkinkan Anda untuk mengedit template ini.

Jadi kembali ke Editor Situs, kita dapat melihat bahwa halaman 404 kita ada di sini. Jika kita mengkliknya, pengguna sekarang dapat mengedit berbagai komponen template itu. Namun, mari kita lihat apa sebenarnya kode HTML yang membentuk template ini, kode yang sebenarnya ada di dalam tema.

Jadi di sini, kita dapat melihat bahwa kita memiliki file 404.HTML, dan memiliki banyak markup. Mulai dari atas dan bawah, kita melihat bahwa kita memiliki spesifikasi untuk blok bagian templat. Apa yang dilakukan ini adalah mereferensikan bagian templat terdaftar kami dan menariknya ke dalam templat. Jadi jika kita kembali ke sini, kita dapat melihat bahwa kita memiliki bagian footer.HTML dan bagian header.HTML. Dan itulah yang dirujuk di sini.

Jadi ini adalah blok unik yang memungkinkan Anda menarik template yang tersusun dari blok lain. Sekarang, tentu saja, Anda bisa menyertakan semua blok yang akan membentuk header dan semua blok yang membentuk footer, tetapi dengan mereferensikan bagian template, Anda dapat melakukan semuanya di satu tempat dan kemudian menerapkan bagian template yang sama. di semua template Anda, mirip dengan apa yang akan Anda lakukan di WordPress tradisional dengan PHP.

Sekarang, saat kita melihat lebih jauh, kita memiliki beberapa markup, hanya beberapa markup utama, dan kemudian kita memiliki sebuah div. Saya tidak akan terlalu mendalami hal ini. Ada beberapa hal menarik yang terjadi di sini, yaitu tata letak di sini, benar, yang melakukan beberapa pengaturan tata letak, tetapi ini hanyalah markup umum untuk halaman tersebut, pola 404.

Sekarang, saya menyebutkan pola. 404 dalam tema ini sebenarnya dibundel menjadi sebuah pola. Jadi semua blok yang membentuk konten 404 berada dalam satu pola. Dan kemudian kami memiliki blok pola yang benar-benar mereferensikan pola itu dan kemudian menarik blok itu. Sekarang, tentu saja, sekali lagi, Anda bisa memasukkan semua blok yang membentuk halaman 404 di sini, tetapi dengan memasukkannya ke dalam pola dan kemudian mereferensikannya, itu membuatnya sedikit lebih mudah untuk dikelola.

Jadi saat kami kembali ke Editor Situs, kami memiliki konten kami, dan kami dapat melihat bagian yang berbeda. Jadi bagian atas adalah bagian template header yang ditarik. Dan kemudian, tentu saja, bagian utamanya adalah pola 404 yang ditarik. Dan sekarang, karena ini semua adalah blok, yang perlu kita lakukan hanyalah mengeditnya seperti biasa . Kita bisa membuatnya berani. Kita bisa mengubah warna. Kami dapat menghapus blok, menambahkan blok– dan seterusnya.

Cukup mudah, dan kami tidak perlu mengedit kode sama sekali. Kami perlu memahami cara kerja kode, tetapi kami tidak perlu menyentuh kode apa pun. Lalu ketika kita senang, kita tinggal klik Save. Sekali lagi, perubahan ini disimpan ke database, jadi Anda tidak benar-benar mengubah file tema. Jadi jika kami mengembalikan perubahan, kami akan kembali ke tema apa pun yang disediakan.

Salah satu hal hebat tentang Editor Situs juga– dan sekali lagi, ini masih dikembangkan– adalah Anda dapat menambahkan komponen template baru. Jadi sekali lagi, tema ini menambahkan banyak header dan footer yang berbeda, tetapi bagaimana jika kita ingin menambahkan lebih banyak? Mungkin kami menginginkan sidebar. Mungkin kami menginginkan bagian konten yang berbeda. Kami dapat melakukannya dengan benar di dalam Editor Situs.

Dan sekali lagi, aliran ini akan ditingkatkan – lebih banyak fitur, lebih banyak fungsi. Tapi saat ini berfungsi, dan Anda dapat menambahkan semuanya di sini. Satu hal yang perlu diperhatikan adalah Anda belum dapat menambahkan template di dalam Editor Situs. Anda dapat menggunakan antarmuka yang berbeda di dalam editor WordPress tetapi belum cukup di Editor Situs. Tapi itu akan datang.

Jadi bagian terakhir dari ini adalah kita berbicara tentang membuat semua perubahan ini. Nah bagaimana jika Anda bisa mengekspor semua perubahan Anda sebagai satu tema yang benar-benar datang dan sebenarnya sangat menarik untuk melihat bagaimana hal itu akan memengaruhi pengembangan tema. Jadi dengan rilis terbaru Gutenberg, kini Anda dapat mengekspor semua perubahan Anda, ditambah tema aslinya.

Mereka digabungkan, dan Anda dapat mengekspornya sebagai tema baru dengan semua perubahan Anda diterapkan ke file di dalam tema. Jadi Anda bisa membayangkan mengambil tahun 2022. Anda mengunggahnya. Anda membuat semua perubahan Anda. Anda dapat memodifikasi beberapa templat dan kemudian mengekspor tema lengkap. Ini memiliki beberapa implikasi yang sangat menarik untuk pengembangan tema di masa depan.

Sekarang kita perlu berbicara tentang pengaturan dan gaya global. Ini adalah file theme.JSON itu. Ini baru di WordPress dan mengasyikkan sekaligus rumit. Jadi jika kita melihat kembali tema 2022, kita dapat melihat file itu berada di bagian atas sana. Dan saat kita melompat ke file theme.JSON, itu benar-benar lima bagian, salah satunya hanya nomor versi.

Dan saya akan membahas secara singkat tentang template khusus dan komponen template. Jadi di sinilah, jika Anda memiliki template khusus, template yang benar-benar khusus, yang tidak akan dikenali oleh WordPress secara alami, di situlah Anda dapat mendaftarkannya di sini. Ini juga tempat Anda mendaftarkan semua bagian template seperti header dan footer. Template tradisional apa pun, seperti Index, Page, Post– template yang umumnya dikenali WordPress– Anda tidak perlu meletakkannya di sini, hanya yang khusus, dan, tentu saja, bagian template Anda sendiri.

Tetapi inti dari theme.JSON adalah bagian pengaturan dan gaya Anda. Jadi jika kita melihat pengaturan terlebih dahulu, ada banyak hal yang terjadi di sini. Dan sekali lagi, ini sangat diringkas. Tetapi bagian atas adalah pengaturan global. Ini adalah pengaturan yang memengaruhi Editor dan Editor Situs di seluruh situs Anda. Ini termasuk hal-hal seperti batas dan warna dan tipografi. Di sinilah Anda akan mengatur palet warna untuk tema Anda, pengaturan tipografi untuk tema Anda, font– dan seterusnya.

Dan kemudian kami juga memiliki pengaturan tingkat blok, di mana Anda dapat, katakanlah, mengatur palet warna untuk seluruh situs Anda, tetapi kemudian menetapkan palet warna yang lebih kecil, dan palet warna yang sama sekali berbeda, misalnya, untuk blok paragraf atau blok tombol. Jadi ini memberikan fleksibilitas yang sangat besar, tetapi pengaturan adalah fitur apa yang tersedia untuk pengguna di dalam Editor atau di dalam blok.

Jadi jika kita melihat, sekali lagi, pada warnanya, kita telah menentukan palet kita di sini. Kami memiliki warna latar depan, latar belakang, dan kemudian primer, hitam, putih, dan jenis hijau hutan. Dan kemudian jika kita masuk ke Editor, kita dapat melihat bahwa ketika pemilih warna kita muncul, kita telah menentukan warna-warna itu untuk dipilih pengguna.

Sekarang, mari beralih ke gaya. Jadi gaya pada dasarnya seperti CSS Anda. Jadi secara tradisional, Anda akan menambahkan semua CSS Anda dalam file styles.CSS atau beberapa penyiapan lainnya. Tetapi bagian gaya dari theme.JSON memungkinkan Anda untuk mengatur gaya di tingkat blok dan juga tingkat global di seluruh tema Anda. Anggap ini seperti default, benar, karena Editor– intinya adalah pengguna dapat masuk ke sana dan mulai memodifikasi dan membuat perubahan serta mendesain situs mereka sesuka mereka menggunakan blok.

Tapi harus ada default, dan set ini di bagian gaya theme.JSON adalah default itu. Jadi sekali lagi, kami memiliki gaya global, seperti warna global kami, tipografi global, dan kemudian kami juga dapat mengatur gaya di tingkat blok. Jadi hal tentang gaya global adalah di mana kita mengatur warna latar belakang tema kita. Di sinilah kita akan mengatur ukuran font untuk judul kita, opsi tipografi yang berbeda untuk tautan, dan teks, dan judul, dan semua hal semacam itu. Dan di level blok, kita bisa melakukan hal yang sama tetapi khusus untuk blok.

Sekarang, salah satu hal menarik tentang bagian pengaturan yang baru saja kita bicarakan adalah setiap kali Anda membuat pengaturan, WordPress akan menentukan variabel. Jadi saat kami melihat palet warna itu, kami menentukan latar belakang, latar depan, dan primer. WordPress sebenarnya akan menghasilkan variabel yang memetakan ke kode hex itu, kode hex apa pun yang disetel untuk primer, latar depan, latar belakang.

Dalam gaya, kita dapat menggunakan variabel tersebut untuk menentukan gaya untuk gaya global dan tingkat blok. Keuntungannya adalah jika pengguna pernah mengubah warna latar belakang apa pun, maka itu akan mengalir melalui spesifikasi gaya di theme.JSON. Sekarang, jika kita melihat bagian blok, di sini kita memiliki blok tombol, dan kita mendapatkannya dari desainer tema.

Saya ingin tombol saya memiliki warna default hijau dengan beberapa teks putih. Anda dapat melihat bahwa di bagian warna blok tombol, kita menentukan warna latar belakang adalah warna utama, yaitu hijau hutan, dan teks kita adalah latar belakang, yaitu putih. Jadi kita bisa menggunakan variabel tersebut di seluruh theme.JSON untuk menentukan gaya untuk blok kita dan untuk situs itu sendiri.

Sekarang, ini terkait dengan gaya global, yang saya singgung sebelumnya. Jadi kembali ke Editor Situs, jika kita mengklik lingkaran dua warna kecil ini di bagian atas, kita akan membuka panel gaya global kita. Sekarang, ada banyak hal yang terjadi di sini, jadi saya hanya akan melakukan demonstrasi singkat tentang cara kerjanya. Tetapi ketahuilah bahwa saya mendorong Anda untuk mengunduh tema 2022 atau tema blok lainnya dan benar-benar menjelajahi gaya global.

Dan jika kita masuk ke sini dan melihat warna, klik itu, sekarang kita dapat melihat palet warna ada di sana, yang disediakan oleh tema, serta beberapa elemen berbeda, seperti latar belakang, teks, dan tautan kita . Sekarang, pada panel yang kita lihat di sini, kita sedang mengedit elemen global situs. Jadi misalnya, kami berbicara tentang latar belakang situs. Saat ini, putih. Jadi jika saya mengklik Latar Belakang, saya dapat masuk ke sini dan saya dapat melihat bahwa itu dipilih sebagai putih. Ini adalah warna yang kita atur di theme.JSON.

Tapi bagaimana jika saya sangat menyukai warna peach ini? Nah, dengan satu klik, saya bisa mengklik, dan begitulah. Warna latar belakang situs kami sekarang adalah persik. Jadi ini memberi pengguna kontrol yang belum pernah terjadi sebelumnya untuk sepenuhnya memodifikasi situs mereka agar sesuai dengan kebutuhan mereka. Tetapi sekali lagi, theme.JSON menyediakan default yang, sebagai pengembang tema, Anda berikan kepada pengguna, dan kemudian mereka dapat mengambilnya dari sana.

Jadi itu adalah ikhtisar yang sangat singkat tentang pengeditan situs lengkap dan Editor Situs serta tema blokir. Tetapi saya ingin meluangkan waktu dan berbicara tentang pemikiran saya tentang masa depan tema modern. Jadi ketika kita berpikir tentang tema modern, saya yakin, tema modern akan menekankan desain daripada pengembangan. Sekarang, Anda mungkin berpikir, merancang tema selalu tentang desain.

Tetapi jika Anda mengingat kembali pengembangan tema tradisional, sebenarnya ada banyak pengkodean yang perlu dilakukan. Semua file template adalah PHP, yang membutuhkan banyak pengetahuan tentang WordPress serta pengembangan PHP untuk dilakukan dan dilakukan dengan benar. Yah, itu semacam perubahan. Kami melihat bahwa sekarang dengan Editor, Anda dapat mendesain tema langsung di dalam UI Editor Situs dan editor tradisional.

Dan itu akan menjadi peran utama dalam cara kami mendesain tema. Jadi saya advokat pengembang untuk WP Engine, dan di tim kami, kami sedang membangun tema eksperimental yang disebut Frost. Dan ketika kita membuat pola baru atau kita ingin memodifikasi sebuah template, kita tidak akan masuk ke dalam file dan mengutak-atik file tersebut. Kita akan masuk ke Editor Situs atau masuk ke Editor dan memodifikasi pola itu, atau membuat pola, atau membuat template. Dan kemudian kami senang dengan itu, kami kemudian mengekspornya dan memasukkannya ke dalam tema.

Jadi kita tidak benar-benar coding. Kami sebenarnya melakukan semuanya secara visual. Dan manfaatnya adalah kita tahu bahwa seorang pengguna, orang-orang yang akan menggunakan tema, mereka juga akan mengubah pola atau template. Jadi masuk akal untuk, saat kami membuat tema, kami melakukan proses yang sama seperti yang dilakukan pengguna untuk menggunakan tema, yang menurut saya agak ajaib.

Dan ini akan mengarah pada metode pengembangan tema dengan kode rendah atau bahkan tanpa kode. Sekarang, tentu saja, kita sedang menghadiri konferensi pengembang, bukan? Jadi kita berbicara tentang tanpa kode dan kode rendah. Tapi poin terakhir saya, kita akan berbicara tentang di mana menurut saya letak perkembangannya. Tapi menurut saya ini sangat menarik karena ini akan mendatangkan generasi baru pengguna, orang-orang yang ingin membuat tema mereka sendiri, menyesuaikan tema mereka sendiri, tapi mungkin mereka tidak tahu PHP, mungkin mereka tidak tahu JavaScript .

Mereka dapat melakukannya sekarang di dalam Editor Situs, yang menurut saya adalah semacam etos WordPress, mendemokratisasikan penerbitan. Dan saya pikir pengeditan situs penuh benar-benar berusaha untuk itu. Dan dalam dua tahun terakhir atau tahun lalu, sejujurnya, kami telah melihat kemajuan seperti itu dengan pengeditan situs penuh. Ini menjadi sangat menarik. Jadi saya benar-benar yakin bahwa pengeditan situs lengkap adalah masa depan WordPress tradisional.

Sekarang, mungkin tidak untuk semua orang. Saya ingin membuatnya sangat jelas. Dan masih banyak pengembangan yang masih dibutuhkan. Jadi ketika kita berbicara tentang berbagai jenis orang yang menggunakan WordPress, kita memiliki segalanya mulai dari pengguna standar hingga agensi. Dan biro iklan mungkin ingin menyediakan antarmuka yang sangat bersih dan sangat terstruktur untuk digunakan klien mereka dan bekerja di situs web mereka. Itu mungkin bukan pengeditan situs penuh. Saya pikir tidak apa-apa.

Tapi seperti yang kita lihat dalam ekonomi, kita memiliki Squarespace, dan Wix, dan Element, atau pembuat halaman lainnya. Ada kontingen besar komunitas web pengguna yang menginginkan alat yang memungkinkan mereka dan memberdayakan mereka untuk mengedit dan mendesain situs mereka sendiri. Dan menurut saya WordPress sangat kurang di WordPress, terutama di Core. Dan menurut saya itulah tujuan pengeditan situs lengkap dan itu semacam janji pengeditan situs lengkap.

Begitu banyak yang harus dilakukan. Masih banyak yang harus dilakukan. Masih banyak hal yang perlu kami pikirkan, seperti hal-hal seperti kontrol responsif dan bagaimana kami membatasi berbagai komponen UI agar pengguna tertentu tidak mengacaukan desain atau memodifikasi hal-hal yang tidak seharusnya. Jadi banyak hal yang masih perlu diketahui.

Namun salah satu area yang menurut saya sangat menarik adalah pengembangan untuk pengeditan situs lengkap. Sekarang kami memiliki alat ini yang memungkinkan pengguna untuk mendesain tema mereka sendiri atau mendesain situs mereka sendiri, kami harus mulai berpikir tentang bagaimana kami dapat membawa ini ke tingkat berikutnya. Sebagai pengembang, bagaimana kita dapat mengembangkan ini? Jika kita berpikir kembali ke WordPress tradisional, ambil layar widget– widget pada umumnya. WordPress menyediakan widget dan fungsionalitas tingkat dasar, dan pengembang keluar dan membangun semua jenis ekstensi.

Dan menurut saya ide yang sama perlu diterapkan pada pengeditan situs lengkap. Saat ini, hanya ada sedikit, jika ada, ekstensi dan plugin yang benar-benar memanfaatkan pengeditan situs lengkap dan membawanya ke level berikutnya. WordPress akan terus melakukan iterasi pada pengeditan situs lengkap, dan itu akan mencapai titik tertentu. Tapi itu tidak akan pernah melakukan semua yang diinginkan semua orang, dan saya pikir sekarang adalah waktu untuk serius tentang pengeditan situs penuh dan mulai memikirkan cara-cara yang dapat kita bangun di atas itu sebagai pengembang dan benar-benar membawa pengalaman ini ke yang berikutnya. tingkat.

Jadi saya menantang semua orang untuk keluar, menjelajahi Gutenberg, mencoba tema 2022, dan menginstalnya, mulai mempelajari pengembangan blok. Ada peluang luar biasa untuk blok ceruk. Dan coba buat tema Anda sendiri. Coba ambil 2022. Coba modifikasi. Cobalah membangun tema dasar Anda. Ini benar-benar menyenangkan, dan ada begitu banyak potensi di luar sana untuk hal ini.

Jadi saya ingin berhenti di situ dan mengucapkan terima kasih telah hadir. Dan sebelum saya pergi, saya ingin berbicara tentang beberapa sumber daya yang menurut saya sangat penting, terutama untuk presentasi ini, jika Anda baru dalam penyuntingan situs penuh dan Anda ingin mempelajari lebih lanjut. Jadi sekali lagi, Anda tentu saja bisa mengikuti saya. Saya tweet tentang ini sepanjang waktu.

Tetapi ada beberapa sumber daya. Jadi yang pertama adalah Frost. Saya menyinggung ini sebelumnya. Jadi ini adalah tema yang dibangun oleh hubungan pengembang WP Engine. Dan itu adalah produk percobaan. Saya seharusnya tidak mengatakan produk. Ini adalah eksperimen, di mana kami mencoba menggunakannya untuk mengedukasi komunitas tentang cara membuat tema blok. Kami belajar sepanjang jalan. Kami membuat banyak perubahan dan pembaruan di sepanjang jalan, berusaha untuk tetap up to date dengan WordPress, tetapi ini adalah sumber yang bagus. Juga, sekali lagi, tema 2022 itu– tempat yang fantastis untuk memulai dan belajar.

Selanjutnya saya mau pasang Learn WordPress. Ini adalah learn.wordpress.org. Tim pelatihan di wordpress.org sedang melakukan banyak pekerjaan untuk mendidik dan membawa banyak konsep ini ke publik. Jadi jika Anda tertarik dan ingin mempelajari lebih lanjut, ini adalah tempat yang fantastis. Kami memiliki lokakarya dan segala macam konten berbeda di sana, termasuk ruang pembelajaran sosial. Ini diadakan setiap minggu, di mana kami berbicara tentang topik yang berbeda, menyelami lebih dalam tentang cara membuat kode blok hingga cara membuat tema blok– seterusnya dan seterusnya.

Dan kemudian, tentu saja, jika Anda tertarik dengan pengembangan, selalu mulai dengan buku pegangan editor blok. Di situlah saya memulai, dan ada begitu banyak sumber daya yang bagus. Dan akhirnya, Gutenberg. Jika Anda tidak terbiasa dengan Gutenberg, saya mendorong Anda untuk mengenal Gutenberg, terutama jika Anda tertarik dengan pengembangan WordPress. Dan itu adalah tempat yang bagus untuk menyelami, menjelajahi bagaimana pengeditan situs lengkap dibuat, bagaimana berbagai blok dibuat, dan bagaimana Anda dapat menerapkannya ke alur kerja Anda sendiri.

Jadi terima kasih banyak telah hadir. Saya harap Anda mendapatkan banyak hal dari presentasi ini dan didorong untuk terus menjelajahi pengeditan situs lengkap. Terima kasih banyak.