Jika Anda telah menginstal tema WordPress tetapi tidak cocok untuk Anda, Anda mungkin merasa frustrasi. Ada banyak opsi yang tersedia bagi Anda untuk menyesuaikan tema WordPress Anda
Tantangannya adalah menemukan cara yang tepat untuk melakukannya
Dalam posting ini, saya akan mengarahkan Anda melalui opsi untuk menyesuaikan tema WordPress Anda, membantu memutuskan mana yang tepat untuk Anda dan menunjukkan cara melakukannya dengan aman dan efisien.
Lebih suka menonton versi video?
Opsi untuk Menyesuaikan Tema
Sebelum kita mendalami dan mulai membuat perubahan pada tema Anda, ada baiknya untuk memahami apa pilihannya, karena sesuai dengan situasi yang berbeda
Berikut ikhtisar opsi yang tersedia untuk Anda
Lihat bagaimana Kinsta menghadapi persaingan. Membandingkan
- Jika Anda ingin menambahkan fungsionalitas ke tema Anda, instal plugin
- Gunakan Customizer di layar admin WordPress Anda untuk menyesuaikan font, warna, dan mungkin juga tata letak, tergantung pada tema Anda
- Jika Anda bekerja dengan tema pembuat halaman, gunakan fiturnya untuk menyesuaikan desain situs Anda
- Jika Anda telah memasang tema kerangka kerja, gunakan salah satu tema anak yang tersedia untuk menyesuaikan situs Anda, bersama dengan opsi penyesuaian apa pun yang tersedia di layar admin
- Jika tema Anda khusus untuk situs Anda dan Anda merasa nyaman melakukannya, edit kode tema secara langsung
- Jika Anda ingin mengedit kode tema pihak ketiga, buatlah tema anak
Jika Anda ingin mengedit kode, Anda memiliki sejumlah opsi yang tersedia untuk Anda, mulai dari menggunakan editor blok, hingga Penyesuai, hingga mengedit file. Kami akan melihat semuanya di pos ini, tetapi mari kita mulai dengan opsi yang paling sederhana. menginstal plugin
Apakah Anda Benar-Benar Perlu Menyesuaikan Tema Anda?
Terkadang Anda tidak perlu menyesuaikan tema sama sekali. sebagai gantinya, Anda perlu menginstal plugin
Tema menentukan desain situs Anda. tampilannya dan caranya menampilkan konten (gunakan alat pendeteksi tema kami untuk mengidentifikasi tema dasar untuk desain yang Anda suka). Plugin menambahkan fungsionalitas ekstra
Jika perubahan yang ingin Anda lakukan berfokus pada fungsionalitas daripada desain, pertimbangkan untuk memasang plugin sendiri. Ini bisa berupa plugin yang perlu Anda tulis, yang Anda unduh dari direktori plugin, atau yang Anda beli
Jika Anda ingin mengedit fungsi. php di tema Anda, tanyakan pada diri sendiri
Apakah saya ingin mempertahankan fungsi ini jika saya mengganti tema di masa mendatang?
Jika jawabannya ya, kode itu harus dimasukkan ke dalam plugin, bukan tema Anda
Contoh bagus tentang apa yang akan Anda gunakan sebagai plugin alih-alih tema termasuk menambahkan widget, mendaftarkan jenis pos khusus dan taksonomi, membuat bidang khusus, dan menambahkan fitur tambahan seperti peningkatan toko atau SEO
Menyesuaikan Tema WordPress Anda melalui Layar Admin WordPress
Jika perubahan yang ingin Anda buat berfokus pada desain dan relatif sederhana, Anda mungkin dapat membuatnya melalui layar admin. Penyesuai memberi Anda berbagai opsi untuk mengubah tema Anda. apa yang tersedia untuk Anda akan bergantung pada tema Anda. Dan Anda mungkin melihat sesuatu yang disebut Editor di menu Penampilan. Jauhi ini, untuk alasan yang akan saya jelaskan segera
Menyesuaikan Tema Anda melalui Penyesuai
Cara termudah untuk menyesuaikan tema WordPress Anda adalah menggunakan Penyesuai WordPress
Anda mengakses ini dengan salah satu dari dua cara
- Saat melihat situs Anda (saat Anda masuk), klik tautan Sesuaikan di bilah admin di bagian atas layar
- Di layar admin, klik Penampilan > Sesuaikan
Ini membawa Anda ke Penyesuai
Pada tangkapan layar di atas, saya memasang tema gratis bernama ColorMag yang memiliki banyak opsi penyesuaian. Itu menambahkan bagian ke Penyesuai untuk fitur desain termasuk gambar header, media sosial, warna kategori, dan tab Opsi Desain yang membawa Anda ke lebih banyak tab tempat Anda dapat membuat perubahan pada tata letak dan desain situs Anda
Tema yang berbeda memiliki opsi penyesuaian yang berbeda, tetapi tema yang lebih baru tampaknya semakin banyak menambahkannya setiap saat. Jika Anda menemukan tema yang Anda sukai tetapi kurang tepat untuk Anda, Anda mungkin menemukan bahwa menyesuaikannya memberi Anda desain dan tata letak yang tepat seperti yang Anda butuhkan
Editor Tema (dan Mengapa Tidak Menggunakannya)
Di layar admin Anda, Anda mungkin melihat opsi yang disebut Editor Tema, yang Anda buka melalui Appearance > Theme Editor
Ini memberi Anda akses ke file dalam tema Anda, artinya Anda dapat langsung mengeditnya
Jangan
Bahkan jika Anda nyaman menulis CSS atau PHP, mengedit file dalam tema Anda seperti ini adalah ide yang sangat buruk, karena dua alasan
- Jika Anda telah membeli atau mengunduh tema pihak ketiga, setiap perubahan yang Anda buat akan hilang saat Anda memperbarui tema di lain waktu (dan Anda harus terus memperbarui tema untuk alasan keamanan)
- Lebih penting lagi, jika Anda membuat perubahan yang merusak situs Anda, itu tidak akan dilacak dan versi file sebelumnya tidak akan diubah. Anda tidak dapat membatalkan situs tersebut
Jika Anda ingin mengedit kode di tema Anda, Anda harus melakukannya menggunakan editor kode (lihat editor HTML gratis terbaik), dan Anda tidak boleh mengedit file di situs langsung Anda sampai Anda mengujinya di . Jika Anda perlu mengedit tema pihak ketiga, Anda harus melakukannya melalui tema anak. Lebih lanjut tentang keduanya nanti di posting ini
WordPress tahu betapa tidak amannya menggunakan editor tema. itu bahkan memberi Anda peringatan ketika Anda mencoba mengaksesnya
Jadi ikuti saran WordPress. jangan gunakan editor tema
Menggunakan Pembuat dan Kerangka Halaman untuk Menyesuaikan Tema WordPress Anda
Sebagian besar tema WordPress memiliki opsi penyesuaian, artinya Anda dapat membuat perubahan pada desain dan tata letak melalui Penyesuai
Tetapi beberapa tema mengambil ini lebih jauh dan dirancang untuk diperluas dan disesuaikan secara signifikan. Tema-tema itu disebut kerangka tema
Pilihan lainnya adalah menggunakan plugin yang memungkinkan Anda mendesain situs menggunakan antarmuka yang ramah pengguna. itu disebut pembuat halaman
Menggunakan Pembuat Halaman untuk Menyesuaikan Tema Anda
Plugin Pembuat Halaman dirancang untuk memudahkan Anda mengatur desain situs Anda, menggunakan antarmuka yang memungkinkan Anda melihat apa yang Anda dapatkan
Anda menginstal plugin pembuat halaman dengan tema yang kompatibel, dan kemudian menggunakan opsi yang diberikannya untuk mendesain situs Anda persis seperti yang Anda inginkan
Salah satu pembuat halaman yang paling terkenal adalah Elementor, tetapi Anda dapat mengetahui beberapa alternatif di kumpulan pembuat halaman kami
Pembuat halaman memungkinkan Anda mengedit posting dan halaman Anda dengan antarmuka drag-and-drop, yang berarti Anda dapat melihat bagaimana konten Anda akan terlihat dan dapat membuat setiap halaman terlihat unik
Di bawah, saya menggunakan pembuat halaman Elementor dengan , yang kompatibel dengannya
Pembuat halaman memberi Anda banyak fleksibilitas dengan tata letak dan desain halaman Anda. Jika Anda terbiasa dengan pembuat situs web seperti Wix, mereka dapat membantu memudahkan transisi ke WordPress. Dan jika Anda lebih suka antarmuka WYSIWYG untuk konten WordPress Anda, mereka dapat membantu Anda mendesain halaman Anda dengan cepat
Menggunakan Kerangka Tema untuk Menyesuaikan Tema Anda
Alternatif untuk pembuat halaman adalah kerangka kerja tema. Ini adalah rangkaian tema yang dirancang untuk bekerja sama. Ada satu tema induk yang merupakan kerangka kerja, dan pilihan tema anak yang dapat Anda gunakan untuk menyesuaikan tema utama dan membuatnya terlihat seperti yang Anda inginkan
Contoh framework tema adalah , yang memiliki opsi penyesuaian yang memungkinkan Anda menyesuaikan desain tema anak lebih jauh lagi, termasuk antarmuka seret dan lepas yang mirip dengan pembuat halaman
Bacaan yang disarankan. Divi vs Elemen. Perbandingan Plugin Pembuat Halaman WordPress
Mengedit Kode Tema WordPress Anda
Jika Anda nyaman mengedit CSS dan/atau PHP, Anda dapat mengedit kode di tema Anda untuk menyesuaikan tema Anda
Ini memberi Anda tingkat kontrol terbesar
Jika Anda mengedit tema Anda sendiri, yang khusus untuk situs Anda dan dikembangkan khusus untuk itu, Anda dapat mengedit tema secara langsung. Tetapi jika Anda bekerja dengan a dan ingin mengeditnya, Anda harus membuat tema anak untuk menghindarinya
Mengedit File Tema
Langkah pertama untuk mengedit tema WordPress Anda adalah memahami file tema mana yang mengontrol apa, dan mana yang perlu Anda edit
Lembar Gaya
Setiap tema WordPress memiliki stylesheet, yang disebut style. css. Ini berisi semua kode untuk menata situs Anda. tata letak, font, warna, dan lainnya
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 $20Jika Anda ingin mengubah warna pada tema Anda, misalnya, Anda akan mengedit stylesheet. Jika Anda ingin menambahkan font baru, Anda akan menggunakan stylesheet untuk menerapkannya ke berbagai elemen seperti teks isi dan judul.
Perhatikan saat mengedit stylesheet. kekhususan berarti bahwa kode untuk suatu elemen tidak selalu berasal dari tempat yang Anda pikirkan. Elemen akan mewarisi gaya dari elemen lain yang berada di atasnya dalam hierarki halaman kecuali jika Anda menambahkan gaya yang khusus untuk elemen yang lebih rendah
Untuk mengetahui CSS apa yang memengaruhi elemen mana pada halaman, Anda dapat menggunakan inspektur di browser Anda untuk melihat CSS (Chrome DevTools dalam contoh ini)
Anda kemudian dapat menggunakan ini untuk menulis CSS baru yang menargetkan elemen individual atau rentang elemen atau kelas pada halaman
Jika semua pembicaraan tentang elemen, kelas, dan kekhususan ini baru bagi Anda, Anda mungkin ingin menghindari mengedit langsung CSS tema Anda. Setidaknya sampai Anda mempelajari lebih lanjut tentang CSS dan cara kerjanya
File Fungsi
File lain yang dimiliki hampir semua tema adalah file fungsi (functions. php). Ini adalah file yang membuat banyak hal berfungsi di tema Anda. Di dalamnya, Anda dapat menemukan kode untuk mendaftarkan fitur tema seperti gambar unggulan, widget, dan lainnya
Jika Anda tergoda untuk menambahkan kode fungsional ke tema Anda, ini adalah tempat Anda akan menambahkannya. Tapi berhati-hatilah. dalam kebanyakan kasus, Anda harus benar-benar menulis sebuah plugin. Bertanya pada diri sendiri
Apakah saya ingin mempertahankan fungsi ini jika saya mengganti tema di masa mendatang?
Jika jawabannya ya, tulis plugin daripada menambahkan kode ke file fungsi. Plugin tidak harus besar. tidak ada yang menghentikan Anda membuat satu untuk beberapa baris kode
File fungsi semuanya ditulis dalam PHP, jadi Anda harus terbiasa dengan itu. Jangan membabi buta menyalin kode yang Anda temukan melalui pencarian Google. luangkan waktu untuk mencari tahu apa yang dilakukan kode itu dan untuk memahaminya. Dengan begitu, Anda cenderung menambahkan kode yang tidak sebaik yang seharusnya
File Templat Tema
Sebagian besar file dalam tema adalah file template tema. Ini adalah file yang menentukan konten apa yang dihasilkan WordPress pada halaman tertentu, dan dipilih sesuai dengan
Jika Anda ingin mengubah cara konten dihasilkan pada jenis posting, halaman, atau arsip tertentu, Anda harus mengedit salah satu file ini atau membuat yang baru
Misalnya, tema Anda memiliki arsip. php yang digunakan untuk menampilkan halaman arsip untuk kategori dan tag. Anda ingin mengubah cara tag ditampilkan. Jadi Anda membuat file bernama "tag. php”, yang akan didasarkan pada arsip. php dengan tweak Anda
Sekali lagi, hati-hati mengedit file. mereka dapat merusak situs Anda. Selalu uji instalasi lokal menggunakan alat seperti DevKinsta dan/atau situs pementasan WordPress terlebih dahulu
Jenis file mana pun yang perlu Anda edit, Anda harus melakukannya dengan benar. Baca bagian di bawah tentang praktik terbaik untuk mengetahui cara mengedit kode Anda dengan cara yang tidak akan merusak situs Anda dan tidak akan menyebabkan masalah keamanan bagi Anda
Menyesuaikan Tema Pihak Ketiga Dengan Tema Anak
Jika tema yang Anda jalankan di situs Anda berasal dari pihak ketiga dan Anda ingin mengedit kodenya, Anda harus melakukannya
Ini karena jika Anda mengedit tema secara langsung dan kemudian memperbaruinya (yang seharusnya), Anda akan kehilangan semua perubahan yang Anda buat
Bosan dengan host yang lambat? . Lihat rencana kami
Membuat tema anak terdiri dari empat langkah
- Buat folder baru di wp-content/themes
- Di folder itu, buat stylesheet. Di lembar gaya itu, beri tahu WordPress bahwa ini adalah tema anak dari tema Anda yang sudah ada
- Tambahkan salinan file yang ingin Anda edit ke tema anak dan edit di sana
- Aktifkan tema anak di situs Anda
WordPress akan selalu menggunakan file dari tema anak untuk menampilkan konten kecuali ada file yang lebih tinggi dalam hierarki di tema induk. Jika ada dua versi dari file yang sama, itu akan menggunakan salah satu dari tema anak. Ini berarti file baru Anda dalam tema anak akan menggantikan yang dari tema induk
Praktik Terbaik untuk Menyesuaikan Tema WordPress
Jadi, Anda berencana menyesuaikan tema Anda. Sebelum melanjutkan dan melakukan perubahan, ikuti tips berikut untuk memastikan Anda melakukannya dengan aman dan tidak akan merusak situs, membuatnya rentan terhadap serangan, atau kehilangan kode Anda
Jika Memungkinkan, Kustomisasi Tanpa Mengedit Kode
Jika Anda dapat melakukan penyesuaian melalui Penyesuai atau di tempat lain di layar admin, ini lebih aman daripada mengedit kode
Edit kode hanya jika Anda terbiasa dengan CSS (untuk stylesheet) dan PHP (untuk file tema lainnya) dan Anda tahu cara melakukannya dengan aman
Gunakan Situs Pengembangan Lokal untuk Melakukan Perubahan
Jika Anda sedang mengedit kode di tema Anda atau membuat tema anak untuk membuat perubahan, Anda harus melakukan pekerjaan pengembangan di penginstalan lokal WordPress dengan tema Anda terpasang dan konten Anda disalin dari situs langsung Anda
Dengan cara ini, Anda memiliki cermin dari situs langsung Anda untuk menguji perubahan Anda. Bekerja di situs lokal tidak akan berpengaruh pada situs langsung Anda dan bisa lebih cepat
Bahkan jika Anda menggunakan Penyesuai, akan sangat membantu jika menggunakan versi lokal situs Anda untuk pengujian karena Anda dapat memublikasikan perubahan dan mengujinya tanpa memengaruhi situs aktif
Setelah Anda menguji perubahan pada tema Anda, Anda dapat mengunggahnya ke situs langsung Anda atau, lebih baik lagi, Anda dapat mengujinya di situs pementasan dan kemudian mendorongnya untuk ditayangkan
Gunakan Kontrol Versi
Saat Anda membuat perubahan pada tema Anda, Anda harus menggunakan kontrol versi untuk melacak perubahan Anda
Sederhananya, ini berarti mengubah nomor versi tema dan menyimpan salinan kedua versi. Tetapi jika Anda akan melakukan kontrol versi dengan benar, Anda perlu menggunakan layanan seperti GitHub untuk melacak perubahan Anda
Dengan cara ini, jika perubahan menyebabkan masalah, Anda dapat dengan mudah mengembalikannya tanpa harus melakukan pengeditan manual
Kontrol versi bahkan lebih membantu jika Anda bekerja sebagai bagian dari tim, karena Anda dapat melihat apa yang dilakukan anggota lain. Pastikan untuk membaca panduan git vs Github kami
Gunakan Situs Pementasan untuk Menguji Perubahan Anda
Jika Anda memiliki akses ke situs pementasan (seperti pementasan gratis Kinsta yang disertakan dengan semua paket), menguji ini sebelum mengaktifkan versi baru tema Anda (atau tema anak baru) di situs langsung Anda adalah cara teraman untuk melanjutkan
Ini karena situs lokal mana pun akan memiliki beberapa perbedaan dari situs langsung Anda. itu ada di server yang berbeda (satu dibuat di mesin lokal Anda), itu mungkin menjalankan versi PHP yang berbeda atau alat lain apa pun yang menjalankan situs Anda
Buat salinan situs langsung Anda di server pementasan, lalu unggah dan. Uji situs Anda secara menyeluruh untuk memastikan semuanya berfungsi, lalu Anda dapat mendorong perubahan ke situs aktif Anda
Jadikan Tema Anda Responsif
Setiap perubahan yang perlu Anda lakukan pada tema Anda harus berfungsi di perangkat seluler dan juga desktop
Dengan semakin banyaknya orang yang mengakses internet melalui ponsel, dan indeks Mobile-first dari Google, mungkin saat ini tema Anda lebih penting untuk bekerja di ponsel daripada di desktop. Jadi setiap perubahan yang Anda buat pada tema Anda harus atau lebih disukai mobile-first jika relevan
Ini terutama akan berlaku untuk setiap perubahan yang Anda buat pada gaya atau tata letak Anda. periksa apakah tata letak baru berfungsi di perangkat seluler dan Anda telah menambahkan kueri media sehingga tata letak menyesuaikan dengan ukuran layar yang berbeda
Jika tema Anda tidak responsif, itu akan berdampak negatif pada peringkat mesin pencari dan tingkat konversi Anda
Jika Anda tidak memiliki akses ke banyak perangkat seluler yang berbeda untuk diuji, Anda dapat menggunakan alat seperti BrowserStack untuk melihat tampilan situs Anda di perangkat yang berbeda. Anda juga dapat menggunakan alat Pengembang di browser Anda dan tampilan responsif di Penyesuai
Pastikan Penyesuaian Anda Tidak Berdampak pada Aksesibilitas
Setiap perubahan pada tema Anda juga harus dapat diakses oleh pengguna yang memiliki keterbatasan fisik atau gangguan sensorik
Ini bukan hanya tentang memastikan situs Anda berfungsi di pembaca layar. pertimbangan lain seperti skema warna dan ukuran font penting untuk banyak orang
Jika perubahan yang Anda buat pada tema adalah membuat warna lebih terang atau teks lebih kecil, pikirkan lagi. ini mungkin mempersulit orang untuk membaca atau berinteraksi dengan situs Anda
Sebelum membuat perubahan apa pun secara langsung, gunakan pemeriksa aksesibilitas untuk menguji situs Anda dan pastikan situs tidak mengecualikan orang
Tetap berpegang pada Standar Pengodean WordPress
Jika Anda mengedit kode di tema Anda atau membuat tema anak, Anda harus memastikan kode Anda sesuai dengan standar pengkodean WordPress
Standar ini ada untuk memastikan konsistensi dan kualitas kode dan untuk menghindari kode yang berantakan. Ada standar untuk PHP, CSS, dan JavaScript, jadi luangkan waktu untuk memeriksa mana yang relevan bagi Anda dan pastikan Anda mengikutinya
Jika tema WordPress Anda yang ada dikodekan dengan baik dan Anda menulis kode baru dengan cara yang konsisten dengan itu, Anda sedang dalam proses untuk memastikan bahwa kode Anda sesuai. Pastikan Anda menambahkan komentar ke setiap perubahan yang Anda buat pada tema sehingga Anda atau orang lain tahu apa yang Anda lakukan saat kembali mengerjakan kode di masa mendatang. Anda mungkin berpikir Anda tidak akan lupa tetapi setelah beberapa bulan berlalu, sangat mudah untuk melupakan mengapa Anda mengedit baris kode
Perlu menyesuaikan tema #WordPress Anda agar unik? . Pilih yang tepat untuk Anda dalam panduan mendalam kami. 👚👔Klik untuk menge-TweetRingkasan
Menyesuaikan tema WordPress Anda tidak terlalu sulit. Terkadang ini adalah kasus sederhana menggunakan Customizer untuk membuat perubahan pada font, warna, atau favicon Anda (pastikan untuk membaca panduan mendalam kami tentang font WordPress). Di lain waktu, Anda harus membuat tema anak baru untuk menambahkan file template baru ke sebuah tema
Opsi yang Anda miliki untuk menyesuaikan tema Anda termasuk menggunakan plugin atau Penyesuai, mengedit kode tema WordPress secara langsung, atau membuat tema anak
Identifikasi opsi yang tepat untuk Anda dan buat penyesuaian dengan aman, semuanya tanpa merusak situs Anda
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