Loncat ke Konten Utama

Cara menyesuaikan CSS situs web WordPress Anda

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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 tema WordPress saat ini, Anda dapat membuat situs web Anda menjadi 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 pada blog WordPress Anda akan memungkinkan Anda untuk mengubah tampilan situs web Anda agar benar-benar unik.

Tutorial ini akan melihat berbagai metode yang tersedia untuk menyesuaikan situs web Anda dengan CSS, membuat dan menyesuaikan tema anak, menggunakan plugin penyesuai WordPress dan plugin CSS WordPress.

Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda 

Kalau begitu mari kita kembali ke mengapa kita ada di sini

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 menggunakan 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 setelah Anda memiliki pemahaman yang lebih baik tentang apa itu CSS dan bagaimana tema WordPress menggunakannya, kami akan melihat opsi yang dapat Anda gunakan untuk menyesuaikan blog WordPress Anda, dan kami 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

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

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

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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 plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web 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 pengelola file WordPress 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

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

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.

... 

Artikel ini berisi 1 komentar

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

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Kembali ke atas
Melihat: Offset tidak terdefinisi: 0 in /home2/voirplu/public_html/wp-content/plugins/UltimateTetutesse-master/public/partials/shared-footer.php on line 17