Bagaimana cara menyesuaikan CSS situs WordPress Anda? Cari tahu di artikel ini.
Apa pun tema WordPress yang Anda pilih untuk situs web Anda, akan ada situs web lain yang akan menggunakannya. Dan meskipun banyak opsi penyesuaian yang ditawarkan oleh banyak orang Tema WordPress saat ini Anda dapat membuat situs web Anda lebih unik.
untuk vraiment Untuk menyentuh aspek visual tema WordPress Anda, Anda harus melampaui penyesuaian standar yang ditawarkan oleh opsi atau pengaturan tema WordPress. Kustomisasi CSS dari blog WordPress Anda akan memungkinkan Anda untuk memodifikasitampilan situs web Anda untuk membuatnya benar-benar unik.
Tutorial ini akan melihat berbagai metode yang tersedia bagi Anda untuk menyesuaikan situs web Anda dengan CSS, membuat dan menyesuaikan tema anak, menggunakan plugin Penyesuai WordPress bawaan dan plugin WordPress dari CSS.
Tetapi sebelum Anda mulai, luangkan waktu untuk melihatnya Cara menginstal tema WordPress, Berapa banyak plugin saya harus menginstal pada WordPress.
Kemudian cari tahu bersama daftar kami.
CSS: Dasar-dasar dan bagaimana WordPress menggunakannya
Pertama-tama: singkatan dari CSS Cascading Style Sheets, yang tidak lebih jelas dari akronimnya. Jadi, mari kita hancurkan.
Lembar gaya adalah dokumen yang menggambarkan gaya (seperti font, warna, dll.) untuk digunakan untuk presentasi dokumen lain. Dalam kasus kami, kami berurusan dengan gaya halaman web.
BagianCascadingNama adalah bagian dari apa yang membuatnya benar-benar kuat. Halaman web dapat dirancang dengan beberapa lembar gaya, seperti air terjun bertingkat, dengan lembar bawah menambahkan atau mengganti gaya dari tingkat yang lebih tinggi. Ini penting karena cara Anda menambahkan gaya akan menimpa perubahan asli.
Sesederhana kedengarannya, CSS dapat digunakan untuk mengubah apa saja di halaman web (termasuk tata letak, warna, font, dan bahkan animasi).
Pelajari cara mengelola notifikasi dengan menemukan Bagaimana mengelola pemberitahuan email di WordPress
Sebagian besar Tema WordPress gunakan kode CSS yang tersedia dalam file bernama style.css. Jika Anda membuka file ini, Anda akan melihat daftar aturan gaya lengkap untuk tema WordPress Anda. Apapun yang kamu lakukan, jangan ubah file ini! Pembaruan akan menimpa perubahan Anda.
Ada beberapa cara untuk menambahkan file kode CSS khusus ke tema WordPress Anda sehingga perubahan Anda bertahan dari pembaruan tema WordPress.
Cara menyesuaikan situs WordPress Anda dengan CSS
Sekarang Anda sudah lebih memahami apa itu CSS dan bagaimana caranya Tema WordPress menggunakannya, kita akan melihat opsi yang dapat Anda gunakan untuk menyesuaikan blog WordPress Anda, dan kita akan membahas pro dan kontra dari setiap metode.
Di akhir pekerjaan kami, Anda akan dapat menentukan metode mana yang sesuai dengan tema WordPress Anda.
Opsi # 1: Sesuaikan CSS menggunakan tema anak
Jika Anda menggunakan un tema anak untuk menyesuaikan kode CSS Anda, pembaruan pada tema yang kita bicarakan sebelumnya tidak akan menjadi masalah lagi. Pembaruan tema WordPress akan memengaruhi tema "induk», Membiarkan perubahan pada tema anak Anda tetap utuh. Banyak pengembang tema WordPress memahami kegunaan tema anak.
Temukan Kapan dan bagaimana untuk menginstal WordPress dalam subdirektori
Membuat tema anak sangat mudah. Ini terdiri dari membuat folder di hosting web Anda yang menyertakan file style.css yang mencantumkan tema induk sebagai templat, dan mengimpor file style.css dari tema induk (apakah Anda ingat arti dari style sheets 'cascading'?).
Codex WordPress memiliki lebih banyak informasi tentang membuat tema anak.
Setelah Anda membuat tema anak Anda dan mengaktifkannya dengan benar, Anda dapat mulai menyesuaikan tema WordPress Anda. Cara tercepat adalah mengedit file Anda style.css, yang dapat diakses dengan dua cara.
Lihat artikel ini untuk menemukan Cara mengompres file CSS, HTML dan Javascript Anda
Yang pertama adalah menggunakan editor yang disertakan di dasbor WordPress, dengan mengklik Penampilan> Editor. L 'editor menampilkan daftar file di sebelah kanan yang tersedia dalam tema (Hanya file populer yang ditampilkan). File Anda style.css akan berada di bagian paling bawah daftar, dan mengklik opsi stylesheet file Anda style.css akan dikenakan biaya.
Anda dapat menambahkan perubahan Anda ke lokasi ini dan menyimpan perubahan itu.
Cara lain untuk mengakses file Anda style.css (satu kami sarankan) adalah untuk menelusuri file di hosting web Anda melalui a FTP client atau manajer file. Folder tema anak yang Anda buat akan berada di " wp-content> tema« . Anda akan dapat menggunakan editor teks untuk mengedit file style.css.
Opsi n ° 2: Sesuaikan CSS dari Penyesuai
Mulai WordPress 4.7, pengguna dapat menambahkan CSS khusus langsung dari area admin WordPress. Ini sangat mudah, dan Anda akan dapat melihat perubahan Anda dengan pratinjau waktu nyata.
Pertama, Anda harus menuju ke halaman Tema »Sesuaikan.
Ini akan meluncurkan antarmuka kustomisasi tema WordPress.
Anda akan melihat pratinjau situs web Anda secara real-time di sebelah kanan dengan banyak opsi di panel kiri. Klik pada tab CSS tambahan di panel kiri.
Tab akan bergeser untuk menunjukkan area sederhana tempat Anda dapat menambahkan CSS kustom. Segera setelah Anda menambahkan aturan CSS yang valid, Anda akan dapat melihatnya diterapkan di panel pratinjau waktu nyata di situs web Anda.
Anda dapat terus menambahkan kode CSS khusus, sampai Anda puas dengan tampilannya di situs web Anda. Jangan lupa untuk mengklik " Simpan dan Publikasikan Di atas saat Anda selesai.
Catatan: CSS khusus apa pun yang Anda tambahkan menggunakan Penyesuai hanya tersedia dengan tema WordPress tersebut. Jika Anda ingin menggunakannya dengan tema lain, Anda perlu menyalin dan menempelkannya ke tema baru Anda menggunakan metode yang sama.
Opsi # 3: Sesuaikan CSS menggunakan plugin
Keuntungan menggunakan plugin untuk kustomisasi CSS adalah Anda tetap menggunakan plugin tersebut meskipun Anda mengubah tema WordPress. Ini ada untungnya, karena gaya tidak dapat ditampilkan dengan baik di semua tema WordPress.
Berikut adalah beberapa plugin:
1. CSS Khusus di Jetpack (Gratis)
WordPress Plugin jetpack diinstal di lebih dari satu juta situs WordPress, dan mungkin milik Anda juga. Ini membawa fitur yang tersedia di WordPress.com untuk situs web yang di-hosting-sendiri, dan juga menawarkan a modul untuk kustomisasi CSS.
Setelah modul diaktifkan di dasbor Jetpack, editor CSS khusus akan tersedia, memungkinkan Anda untuk menyesuaikan tema WordPress Anda tanpa membuat tema anak. Anda mengakses editor dengan mengikuti jalur ini " Penampilan> Edit CSS« .
2. CSS Kustom Sederhana (Gratis)
Jika bukan Anda ingin pilihan yang berdiri sendiri, CSS Kustom sederhana adalah pilihan yang bagus. Plugin gratis ini, digunakan di lebih dari situs web 200.000 dengan peringkat bintang 4,9, pasti akan membantu Anda mempersonalisasi blog CSS WordPress Anda.
Plugin ini tidak memerlukan konfigurasi apa pun, Anda hanya perlu menginstal dan mengaktifkan plugin tersebut. Untuk mengubah kode CSS Anda, buka " Penampilan> CSS Khusus« di dasbor WordPress. Terapkan perubahan CSS Anda di kotak teks dan setelah selesai simpan pengaturan Anda.
3. CSS Hero (mulai $ 14 per tahun)
Opsi plugin WordPress terakhir yang kami lihat hari ini adalah plugin WordPress premium yang disebut CSS pahlawan. Dari 14 $ per tahun untuk satu situs web, plugin ini memungkinkan Anda untuk menyesuaikan tema WordPress Anda menggunakan antarmuka yang intuitif.
Dirancang untuk bekerja paling baik dengan puluhan tema WordPress yang kompatibel , CSS Hero memberi Anda kendali penuh atas semua elemen tema WordPress Anda. Untuk tema yang tidak ada dalam daftar mereka, Anda dapat menggunakan Mode roket untuk mengaktifkan kustomisasi Pahlawan CSS.
CSS Hero menghilangkan kebutuhan untuk memahami sintaksis CSS dengan menyederhanakan interaksi dengan kode melalui antarmuka, dan ini berlaku untuk animasi dan transisi. Anda juga dapat melihat perubahan Anda secara real time, dan kembali ke versi sebelumnya.
menemukan Cara memindahkan komentar dari satu artikel ke artikel lainnya di WordPress
Jika Anda ingin sepenuhnya mengubah CSS blog WordPress Anda, tetapi tidak ingin mempelajari CSS, CSS Hero adalah pilihan yang bagus untuk menyesuaikan situs web Anda, terutama jika Anda menggunakan salah satu tema WordPress mereka.
Meskipun Anda tahu bahwa konten itu penting, Anda pasti ingin situs web Anda menonjol dari yang lain, meskipun Anda menggunakan tema WordPress yang populer. Dengan CSS, Anda dapat menyesuaikan desain situs web Anda sehingga benar-benar unik.
Melangkah lebih jauh dengan menemukan Bagaimana untuk memungkinkan pengguna untuk mengedit halaman tertentu
Jadi ada beberapa cara untuk menyesuaikan CSS tema WordPress Anda:
- tema anak.
- yang Customizer.
- CSS Plugin.
Temukan juga beberapa plugin WordPress premium
Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.
Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.
1. Adning Advertising
WP PRO Advertising System adalah plugin manajemen iklan WordPress, yang menawarkan lokasi strategis 18 untuk membantu Anda menampilkan iklan di situs web Anda. Itu juga memiliki bagian statistik rinci dari mana Anda akan melihat kinerja setiap iklan.
Fitur ini sangat penting karena akan membantu Anda meningkatkan kampanye dan memaksimalkan keuntungan Anda. Plugin WordPress Adsense ini juga dilengkapi dengan fitur unik bernama iklan latar. Ini memungkinkan Anda untuk menampilkan iklan sebagai latar belakang konten Anda.
Plus, karena kompatibel dengan plugin seperti WPBakery et Slider Revolusi, Anda dapat menampilkan iklan Anda dalam bentuk slider atau menempatkannya di mana saja di situs web Anda.
Download | Demo | Hébergement Web
2. WP Media File Manager
WP Media File Manager adalah plugin WordPress yang memudahkan untuk mengatur pustaka media dalam bentuk hierarki, menggunakan fungsi Drag and Drop. Ini adalah salah satu plugin WordPress pengelola file paling kuat di CodeCanyon. Anda bahkan tidak perlu membuat folder secara manual.
Plugin WordPress ini memungkinkan Anda mengunggah ribuan file dari pengelola file PC Anda ke situs web dengan menyalin hierarki folder sumber secara otomatis. Jika Anda ingin memiliki file yang sama di folder berbeda, ketahuilah bahwa Anda sekarang memiliki pustaka media nyata yang menyediakan fungsionalitas ini.
Ucapkan selamat tinggal pada masalah dengan mengunduh jenis file tertentu, sekarang Anda hanya perlu menginstal plugin WordPress ini dan membiarkannya membantu Anda mengelola file Anda.
Download | Demo | Hébergement Web
3. menu pahlawan
Hero Menu adalah menu mega plugin WordPress. Dan meskipun tidak terlalu heroik, ia memiliki semua fitur yang diperlukan hanya dengan $ 19. Sedikit seperti Mega Main Menu, ini adalah plugin yang juga menampilkan produk-produk yang ditampilkan di CodeCanyon dan memiliki hampir 4500 penjualan kreditnya saat ini.
Di bagian fitur, Anda akan segera menyadari bahwa membuat file megamenu. Prosesnya hanya membutuhkan beberapa langkah. Tetapi selain itu, Anda akan melihat bahwa plugin tersebut kompatibel dengan WooCommerce, menawarkan desain responsif dan antarmuka "seret dan lepas" untuk membuat menu.
Pembuat menu meningkatkan penggunaan plugin, dan sangat menyederhanakan pekerjaan pembeli. Integrasi UI juga merupakan pekerjaan yang bagus dan UI berperilaku sempurna dengan plugin lain.
Download | Demo | Hébergement Web
Sumber Daya yang Direkomendasikan
Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.
- Cara melindungi formulir dengan kata sandi di WordPress
- Cara membuat transisi yang indah dari halaman di WordPress
- Cara menggunakan API REST WordPress
- Cara mengaitkan situs web WordPress Anda dengan Telegram
- Cara membersihkan WordPress dalam beberapa langkah
Kesimpulan
Here! Itu saja untuk tutorial ini. Kami harap tutorial ini menunjukkan kepada Anda cara menyesuaikan CSS situs WordPress Anda. Jangan sungkan berbagi dengan teman-teman Anda di jejaring sosial favorit Anda.
Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.
Jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar.
...
Halo,
Saya ingin memperkenalkan plugin Anym Live Editor yang memungkinkan pengeditan penuh CSS atau SCSS dan Javascript dari halaman WordPress mana pun, dan yang menawarkan rendering langsung dari perubahan yang dibuat! Selain itu, plugin ini dilengkapi dengan berbagai alat yang memungkinkan Anda berinteraksi dengan halaman yang ingin Anda modifikasi, dan berfungsi seperti IDE biasa (gaya teks Sublime), tetapi kali ini, didedikasikan untuk situs Anda. WordPress.