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 WordPressBerapa 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.

Cara menyesuaikan CSS situs web WordPress Anda

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.

cara menyesuaikan situs web css wordpress 1

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.

cara menyesuaikan situs web css wordpress 1 1

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.

stylesheet WordPress

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.

cara menyesuaikan situs web css wordpress 2

Pertama, Anda harus menuju ke halaman Tema »Sesuaikan.

Akses ke penyesuai WordPress untuk menyesuaikan tema

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.

masukkan kode css tambahan dan publikasikan

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.

jetpack-bentuk-plugin

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.

single-custom-css

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.

CSS pahlawan WordPress Plugin

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:

  1. tema anak.
  2. yang Customizer.
  3. 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.

Plugin Adning Advertising WordPress

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.

WP Media File Manager Folder Perpustakaan Media WordPress Kategori Unggah Plugin

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.

Plugin Menu Pahlawan Responsif WordPress Mega Menu

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.

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.

...