Dapatkah Anda menulis html di wordpress?

Tutorial ini akan memandu Anda cara menambahkan kode HTML secara langsung ke postingan atau halaman WordPress. Bergantung pada editor HTML yang Anda gunakan, metodenya akan berbeda

Editor Blok WordPress

Di Editor Blok WordPress, untuk menambahkan kode HTML secara langsung, tambahkan blok Custom HTML, lalu tambahkan kode HTML Anda

WordPress memiliki editor posting dan halaman yang kuat yang berfungsi mirip dengan Microsoft Word atau Google Docs. Anda dapat mengetik teks ke dalam editor dan menggunakan tombol untuk memformat tampilan teks di layar, menyisipkan gambar, mengelola spasi atau tata letak, dan sebagainya.

Namun, ada kalanya Anda perlu menggunakan WordPress untuk menambahkan HTML ke halaman atau postingan Anda. Dalam panduan ini, kami akan menunjukkan caranya

  1. Masuk ke dasbor administrasi WordPress dan buat postingan atau halaman baru dari sidebar kiri.
  2. Masukkan teks atau gambar apa pun, lalu tempatkan kursor di tempat Anda ingin menyematkan kode HTML

Dapatkah Anda menulis html di wordpress?

  1. Di bagian atas laman, klik tab Teks . Tampilan halaman beralih untuk menampilkan kode HTML dasar yang digunakan untuk membuat postingan atau halaman Anda.

Dapatkah Anda menulis html di wordpress?

  1. Masukkan kode HTML yang ingin Anda sertakan pada halaman, lalu klik tombol Perbarui untuk menyimpan.
  2. Lanjutkan untuk beralih antara tab editor Visual dan Teks sesuai kebutuhan

Catatan . Hanya kode HTML yang dapat disematkan di halaman WordPress. Javascript, PHP, dan kode lainnya tidak dapat dijalankan dari postingan atau halaman secara default.

Meskipun WordPress memudahkan non-pembuat kode untuk mengelola situs web, mungkin akan tiba saatnya Anda ingin mengedit kode di WordPress untuk mendapatkan sedikit lebih banyak kontrol atas tampilan atau fungsi situs Anda.

Untuk membantu Anda melakukannya, postingan ini akan menunjukkan kepada Anda cara mengedit kode dengan aman di WordPress dengan beberapa cara berbeda

Jika Anda sudah tahu apa yang ingin Anda lakukan, Anda dapat mengklik salah satu tautan di atas untuk langsung menuju ke bagian tertentu. Jika tidak, mari kita mengedit

Lebih suka menonton versi video?

Bagaimana Anda Dapat Mengedit Kode WordPress

Untuk mendapatkan kontrol lebih besar tentang tampilan dan fungsi situs WordPress Anda, Anda dapat mengedit kode WordPress untuk menyesuaikan area yang berbeda

  • Editor blok baru dan editor klasik memungkinkan Anda untuk mengedit kode HTML untuk setiap posting atau halaman
  • Jika Anda ingin mengedit kode sumber tema WordPress Anda, gunakan tema anak
  • Consider using a plugin to manage code snippets that you add to the or functions.php file of your theme.
  • Jika Anda hanya ingin menambahkan CSS khusus, Anda dapat menggunakan area CSS tambahan di Penyesuai WordPress atau plugin seperti "CSS Sederhana"

Mendukung


Cara Mengedit HTML WordPress untuk Setiap Posting/Halaman

Mari kita mulai dengan cara paling sederhana untuk mengedit HTML WordPress – mengakses kode sumber untuk masing-masing posting WordPress, halaman, atau jenis posting lainnya

Perlu memberikan shoutout di sini. Kinsta luar biasa, saya menggunakannya untuk situs web pribadi saya. Dukungannya cepat dan luar biasa, dan server mereka adalah yang tercepat untuk WordPress

Dapatkah Anda menulis html di wordpress?
Philip Stemann
Lihat rencana

Anda dapat melakukan ini di editor blok WordPress baru (Gutenberg), serta editor TinyMCE klasik yang lebih lama

Cara Mengedit HTML WordPress di Editor Blok (Gutenberg)

Ada beberapa cara Anda dapat bekerja dengan HTML di Gutenberg

Pertama, jika Anda hanya ingin menambahkan kode HTML Anda sendiri ke sebuah konten, saya akan merekomendasikan untuk tidak mencoba mengedit seluruh kode sumber posting Anda, karena itu membuat semuanya menjadi rumit.

Sebagai gantinya, Anda cukup menggunakan blok HTML Kustom khusus dan menempelkan HTML yang ingin Anda gunakan di sana

Dapatkah Anda menulis html di wordpress?
Blok HTML Kustom Gutenberg

Namun, mungkin juga ada saatnya Anda perlu mengedit HTML dari blok yang berbeda secara langsung. Misalnya, jika Anda ingin menambahkan tag nofollow ke tautan di editor blok, Anda harus mengedit HTML blok itu

Ada dua cara yang bisa Anda lakukan ini…

Pertama, Anda dapat mengklik opsi untuk masing-masing blok dan memilih opsi Edit sebagai HTML

Dapatkah Anda menulis html di wordpress?
Cara mengedit satu blok sebagai HTML

Ini akan memungkinkan Anda mengedit HTML hanya untuk blok individual itu

Dapatkah Anda menulis html di wordpress?
Contoh mengedit HTML blok

Atau, jika Anda ingin mengedit HTML untuk seluruh posting Anda, Anda dapat mengakses Editor Kode dari dropdown Alat & Opsi utama. Atau, Anda juga dapat menggunakan pintasan keyboard ini untuk beralih antara kode dan pengeditan visual – Ctrl + Shift + Alt + M

Dapatkah Anda menulis html di wordpress?
Cara mengakses editor kode lengkap di Gutenberg

Perlu diingat bahwa, dalam editor kode lengkap, Anda harus mengatasi semua markup untuk blok – mis. g. <!-- wp:paragraph -->_

Mengedit kode di WordPress tidak harus sulit. Lihatlah panduan mudah ini tentang cara men-tweak HTML, CSS, dan PHP. 🤓Klik untuk menge-Tweet

Cara Mengedit HTML WordPress di Editor Klasik (TinyMCE)

Jika Anda masih menggunakan editor WordPress Klasik (TinyMCE), Anda dapat mengedit HTML untuk seluruh postingan Anda dengan membuka tab Teks

Dapatkah Anda menulis html di wordpress?
Cara mengedit HTML di editor WordPress Klasik

Cara Mengedit Kode Sumber di Tema WordPress Anda

Sekarang, mari masuk ke topik yang lebih besar, yaitu cara mengedit kode di tema WordPress Anda. Taruhannya sedikit lebih tinggi, jadi kita perlu membahas beberapa pertanyaan awal sebelum kita masuk ke cara melakukannya

Mengapa taruhannya lebih tinggi?

Dalam rilis baru-baru ini, WordPress telah mempersulit Anda untuk melakukan ini secara tidak sengaja, tetapi mengedit kode sumber situs Anda akan selalu membuka pintu untuk masalah, jadi Anda ingin memastikan bahwa Anda melakukannya dengan aman.

Gunakan Tema Anak untuk Semua Pengeditan Kode Langsung

Jika Anda berencana untuk langsung mengedit salah satu kode di file tema Anda, Anda perlu menggunakan tema anak daripada mengedit tema "induk"

Tanpa tema anak, setiap perubahan kode yang Anda buat akan ditimpa saat berikutnya Anda memperbarui tema. Namun, saat Anda menggunakan tema anak, Anda akan dapat segera memperbarui tema induk tanpa kehilangan perubahan yang telah Anda buat di tema anak Anda

Terapkan aplikasi Anda ke Kinsta - Mulai dengan Kredit $20 sekarang

Jalankan Node Anda. Aplikasi js, Python, Go, PHP, Ruby, Java, dan Scala, (atau hampir apa pun jika Anda menggunakan Dockerfile kustom Anda sendiri), dalam tiga langkah mudah

Terapkan sekarang dan dapatkan diskon $20

Jika Anda ingin mempelajari lebih lanjut tentang manfaat tema anak, serta cara membuatnya, lihat panduan lengkap kami untuk tema anak WordPress

Pertimbangkan Menggunakan Plugin Daripada Mengedit Kode di Child Theme

Jika Anda berencana untuk mengubah cara kerja tema Anda, Anda mungkin perlu bekerja dengan langsung mengedit kode sumber tema anak Anda

However, if you want to edit code in WordPress for a different reason – like adding a tracking script to the section of your site or adding a snippet to your theme’s functions.php file – you might be better off using a plugin instead.

Misalnya, Injeksi Head, Footer, dan Post memudahkan untuk menyuntikkan cuplikan kode jika diperlukan. Dan karena cuplikan kode ini semuanya dipisahkan ke dalam antarmuka plugin, juga lebih mudah untuk mengelolanya di masa mendatang

Demikian pula, jika Anda menambahkan cuplikan kode yang bisa masuk ke fungsi tema anak Anda. php, plugin Cuplikan Kode gratis menjadi opsi yang bagus

Singkatnya, jika Anda ingin mengedit kode di WordPress untuk menambahkan cuplikan ke tema Anda…

  • <head> bagian
  • Fungsi. file php

… maka Anda harus mempertimbangkan untuk menggunakan plugin alih-alih mengarahkan pengeditan file tema Anda, karena ini akan mempermudah pengelolaan cuplikan tersebut dan memastikan bahwa cuplikan tersebut tidak ditimpa saat Anda memperbarui tema

Jika Anda perlu melakukan pengeditan lain, mari gali cara mengedit kode sumber untuk tema Anda

Gunakan Editor Kode WordPress In-Dashboard

Jika Anda berencana untuk mengedit kode tema Anda secara langsung, kami sangat menyarankan agar Anda membuat cadangan situs Anda sebelum melakukannya (baik seluruh situs Anda, atau file yang sedang Anda edit)

Setelah Anda selesai melakukannya, Anda dapat mengakses editor kode tema di dasbor dengan membuka Penampilan → Editor Tema. Di sini, WordPress pertama-tama akan memberi Anda peringatan yang serupa dengan yang Anda pelajari di atas

Dapatkah Anda menulis html di wordpress?
Peringatan sebelum mengakses editor kode di dasbor

Kemudian, Anda akan dapat menggunakan sidebar di sebelah kanan untuk bernavigasi di antara berbagai file tema dan editor kode itu sendiri untuk melakukan pengeditan yang sebenarnya

Berjuang dengan downtime dan masalah WordPress? . Lihat rencana kami

Dapatkah Anda menulis html di wordpress?
Editor kode WordPress di dasbor

Gunakan SFTP untuk Mengedit Kode di WordPress

Sebagai alternatif dari editor kode di dasbor, Anda juga dapat mengedit file tema melalui SFTP. Ada dua manfaat dari pendekatan ini

  • Anda dapat menggunakan editor kode pilihan Anda
  • Jika Anda tidak sengaja memecahkan sesuatu, Anda dapat segera memperbaiki masalahnya. Sebaliknya, jika Anda mengedit kode melalui dasbor WordPress Anda, selalu ada kemungkinan Anda dapat memecahkan sesuatu yang mengunci Anda dari dasbor WordPress Anda, yang berarti Anda harus terhubung melalui SFTP untuk memperbaiki masalah ini (sekali lagi – ini adalah

Berikut cara terhubung ke situs Anda melalui FTP

Setelah Anda selesai melakukannya, navigasikan ke folder tema Anda – …/wp-content/themes/child-theme-name. Temukan file yang ingin Anda edit dan klik kanan padanya. Sebagian besar program FTP akan memberi Anda opsi untuk mengedit file, dan secara otomatis akan mengunggah ulang file setelah Anda melakukan perubahan

Namun, kami sangat menyarankan Anda mengunduh versi asli file ke desktop Anda sebelum melakukan perubahan apa pun. Dengan begitu, Anda dapat mengunggah ulang versi aslinya jika Anda tidak sengaja merusak sesuatu

Dapatkah Anda menulis html di wordpress?
Cara mengedit HTML WordPress melalui SFTP

Cara Menambahkan CSS Kustom ke WordPress

Jika Anda hanya ingin menambahkan CSS khusus ke WordPress, daripada mengedit kode HTML atau PHP WordPress, Anda tidak perlu menggunakan editor kode di dasbor atau metode SFTP

Sebagai gantinya, Anda dapat menggunakan Penyesuai WordPress. Selain menjadi opsi yang lebih sederhana, manfaat lain dari menggunakan pendekatan ini adalah Anda dapat melihat pratinjau perubahan Anda secara real-time

Untuk memulai, buka Penampilan → Sesuaikan di dasbor WordPress Anda

Dapatkah Anda menulis html di wordpress?
Cara mengakses Penyesuai WordPress

Kemudian, cari opsi CSS Tambahan di WordPress Customizer

Dapatkah Anda menulis html di wordpress?
Di mana menemukan opsi CSS tambahan di WordPress Customizer

Itu akan membuka editor kode tempat Anda dapat menambahkan CSS yang Anda inginkan. Saat Anda menambahkan CSS, pratinjau langsung situs Anda akan diperbarui secara otomatis sesuai dengan perubahan tersebut

Dapatkah Anda menulis html di wordpress?
Cara mengedit CSS di WordPress Customizer

Pilihan bagus lainnya untuk menambahkan CSS adalah plugin Simple CSS dari Tom Usborne. Ini memberi Anda opsi serupa di Penyesuai WordPress, dan itu juga memungkinkan Anda menambahkan CSS khusus ke setiap posting atau halaman melalui kotak meta

Terakhir, jika Anda ingin menambahkan satu ton CSS khusus – seperti ratusan atau ribuan baris – opsi lainnya adalah membuat lembar gaya CSS khusus Anda sendiri dan menggunakan wp_enqueue_scripts untuk menambahkannya ke tema Anda

Ringkasan

Jika Anda ingin mengedit kode di setiap posting atau halaman WordPress, editor blok baru dan editor klasik memberi Anda opsi untuk mengedit HTML secara langsung

Di sisi lain, jika Anda ingin mengedit kode sumber tema WordPress Anda, ada beberapa hal yang perlu dipertimbangkan

  • Selalu gunakan tema anak alih-alih mengedit kode langsung ke tema induk
  • Consider using a plugin to manage snippets that you add to the or functions.php file, as these plugins can offer a simpler, more manageable approach.

Jika Anda masih perlu mengedit kode langsung setelah pertimbangan tersebut, Anda dapat mengedit kode sumber tema anak Anda dari dasbor WordPress Anda dengan masuk ke Penampilan → Editor Tema. Atau, Anda dapat terhubung ke situs Anda melalui SFTP dan mengedit kode dengan cara itu

Terakhir, jika Anda hanya ingin menambahkan beberapa CSS khusus, Anda tidak perlu mengedit kode tema secara langsung. Sebagai gantinya, Anda bisa menggunakan area CSS tambahan di WordPress Customizer atau plugin seperti Simple CSS

Ada pertanyaan tentang cara mengedit kode di WordPress?


Dapatkan semua aplikasi, database, dan situs WordPress Anda secara online dan dalam satu atap. Platform cloud kami yang penuh fitur dan berkinerja tinggi mencakup

  • Pengaturan dan pengelolaan yang mudah di dasbor MyKinsta
  • Dukungan pakar 24/7
  • Perangkat keras dan jaringan Google Cloud Platform terbaik, didukung oleh Kubernetes untuk skalabilitas maksimum
  • Integrasi Cloudflare tingkat perusahaan untuk kecepatan dan keamanan
  • Jangkauan audiens global dengan hingga 35 pusat data dan 275+ PoP di seluruh dunia

Uji sendiri dengan diskon $20 untuk bulan pertama Hosting Aplikasi atau Hosting Basis Data. Jelajahi paket kami atau hubungi bagian penjualan untuk menemukan yang paling cocok untuk Anda