Loncat ke Konten Utama

Cara menyesuaikan CSS situs web WordPress Anda

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

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

Apa pun tema WordPress yang Anda pilih untuk situs web Anda, akan ada situs web lain yang akan menggunakannya. Dan bahkan dengan banyak opsi penyesuaian yang ditawarkan oleh banyak tema WordPress hari ini, Anda dapat membuat situs web Anda semakin unik.

untuk vraiment untuk menyentuh aspek visual dari tema WordPress Anda, Anda harus melampaui kustomisasi 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: CSS berarti Cascading Style Sheetsyang tidak lebih jelas dari akronim. Jadi, mari kita jabarkan.

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 sangat kuat. Halaman web dapat dirancang dengan beberapa style sheet, seperti air terjun yang mengalir, dengan sheet bawah dengan menambahkan atau mengganti style level atas. Ini penting karena cara Anda menambahkan gaya Anda akan menimpa perubahan asli.

CSS Selector

Sesederhana kelihatannya, CSS dapat digunakan untuk mengubah hampir semua aspek 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 edit file ini! Pembaruan akan menimpa perubahan Anda.

Ada beberapa cara untuk menambahkan kode CSS khusus ke tema WordPress Anda sehingga perubahan Anda bertahan dari pembaruan tema WordPress.

Bagaimana cara menyesuaikan situs WordPress Anda dengan CSS

Sekarang setelah Anda lebih memahami apa itu CSS dan bagaimana tema WordPress menggunakannya, mari kita lihat opsi yang dapat Anda gunakan untuk menyesuaikan blog WordPress Anda, dan kami 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 tema yang telah kami bicarakan sebelumnya tidak lagi menjadi masalah. Pembaruan tema WordPress akan memengaruhi tema "indukMembiarkan perubahan pada tema anak Anda utuh. Banyak pengembang tema WordPress memahami kegunaan tema anak.

Temukan Kapan dan bagaimana untuk menginstal WordPress dalam subdirektori

Membuat tema anak cukup sederhana. Ini melibatkan pembuatan 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 sheet "cascading"?).

Codex WordPress memiliki informasi lebih lanjut tentang cara membuat tema anak.

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 termasuk dalam dashboard 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 pengelola file. Folder tema anak yang Anda buat akan berada di folder " wp-content> Tema« . Anda akan dapat menggunakan editor teks untuk mengedit file style.css.

Opsi # 2: Kustomisasi CSS dari Customizer

Sejak WordPress 3.4, pengembang tema WordPress telah dapat memanfaatkan Penyesuai WordPress untuk membuat opsi untuk ini. Customizer memungkinkan Anda untuk menyesuaikan pengaturan tema dan mempratinjaunya tanpa mempengaruhi tampilan situs web saat Anda menyimpan pengaturan.

Banyak tema WordPress menggunakan Customizer untuk menyederhanakan pengelolaan pengaturan.

Yang menarik bagi kami saat ini adalah kemampuan untuk menambahkan kode CSS khusus, dan untungnya, banyak tema WordPress dapat melakukan ini dengan opsi yang tersedia di penyesuai atau di dasbor WordPress.

Anda dapat membaca dokumentasi tema WordPress Anda untuk memverifikasi bahwa opsi ini tersedia.

Tema WordPress Total misalnya, mengusulkan area pengeditan kode CSS dari dasbor.

CodeCSS Jumlah WordPress

Namun, beberapa tema WordPress akan menawarkan opsi ini langsung dari antarmuka Customizer.

Opsi # 3: Sesuaikan CSS menggunakan plugin

Keuntungan menggunakan plugin untuk kustomisasi CSS adalah Anda tetap menggunakan plugin walaupun Anda mengubah tema WordPress. Ini memiliki trade-off karena gaya tidak dapat ditampilkan dengan baik di semua tema WordPress.

Berikut adalah beberapa plugin:

1. CSS Kustom di Jetpack (Gratis)

WordPress Plugin jetpack diinstal pada lebih dari satu juta situs web WordPress, dan mungkin juga milik Anda. Ini membawa fitur tersedia 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, cukup instal dan aktifkan plugin tersebut. Untuk memodifikasi kode CSS Anda, buka " Penampilan> CSS Kustom« di dashboard WordPress. Terapkan perubahan CSS Anda di kotak teks dan setelah selesai, simpan pengaturan Anda.

3. Pahlawan CSS (mulai dari $ 14 per tahun)

Opsi terakhir dari plugin WordPress yang kita 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 sintaks CSS dengan menyederhanakan interaksi dengan kode melalui antarmuka, dan ini berlaku untuk animasi dan transisi. Anda juga dapat melihat pratinjau perubahan Anda secara langsung, 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 belajar CSS, CSS Hero adalah pilihan serba bagus untuk menyesuaikan situs web Anda, terutama jika Anda menggunakan salah satu tema WordPress mereka.

Meskipun Anda tahu bahwa konten itu penting, Anda akan ingin situs web Anda menonjol dari yang lain, bahkan jika 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.

Fitur ini sangat penting karena akan membantu Anda meningkatkan kampanye dan memaksimalkan keuntungan Anda. Plugin WordPress Adsense ini juga dilengkapi dengan fitur unik yang disebut iklan latar. Ini memungkinkan Anda untuk menampilkan iklan sebagai latar belakang untuk konten Anda.

Plus, karena kompatibel dengan plugin seperti WPBakery et Slider RevolusiAnda dapat menampilkan iklan sebagai bilah geser 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 memungkinkan Anda untuk dengan mudah mengatur perpustakaan media ke dalam bentuk hierarki, menggunakan fitur Drag and Drop. Ini adalah salah satu plugin WordPress paling kuat dari pengelola file CodeCanyon. Anda bahkan tidak perlu membuat folder secara manual.

Plugin WordPress ini memungkinkan Anda untuk mengunggah ribuan file dari manajer file PC Anda ke situs web dengan secara otomatis menyalin hierarki folder sumber. Jika Anda ingin memiliki file yang sama di folder yang berbeda, perlu diketahui bahwa Anda sekarang memiliki perpustakaan media nyata yang menyediakan fungsionalitas ini.

Perpisahan mengunduh masalah jenis file tertentu, sekarang Anda hanya perlu menginstal plugin WordPress ini dan membiarkannya menemani Anda dalam pengelolaan file Anda.

Download | Demo |Hébergement Web

3. menu pahlawan

Menu Pahlawan adalah plugin WordPress dari menu mega. Dan meskipun tidak melakukan banyak heroik, ia menawarkan semua fitur yang dibutuhkan hanya 19 $. Agak seperti Mega Main Menu, ini adalah plugin yang juga membuat produk ditampilkan di CodeCanyon dan memiliki hampir penjualan 4500 sekarang.

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 membuatnya cukup mudah megamenu. Prosesnya hanya membutuhkan beberapa langkah. Tetapi selain itu, Anda akan melihat bahwa plugin tersebut kompatibel dengan WooCommerce, mengusulkan desain responsif dan antarmuka "seret dan lepas" untuk membuat menu.

Pembuat menu meningkatkan penggunaan plugin, dan sangat menyederhanakan pekerjaan pembeli. Integrasi antarmuka pengguna juga merupakan pekerjaan yang hebat dan yang terakhir berperilaku sempurna dengan plugin lain.

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Temukan sumber daya lain yang direkomendasikan yang akan menemani Anda dalam membuat dan mengelola situs web Anda.

Kesimpulan

Here! Itu saja untuk tutorial ini. Kami berharap tutorial ini telah menunjukkan kepada Anda bagaimana menyesuaikan CSS situs WordPress Anda. Jangan ragu untuk melakukannya 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 memberi tahu Anda plugin Anym Live Editor yang memungkinkan edisi lengkap CSS atau SCSS dan Javascript dari halaman WordPress mana pun, dan yang menawarkan rendering langsung dari modifikasi yang dilakukan! Selain itu plugin ini dilengkapi dengan perangkat lengkap yang memungkinkan untuk berinteraksi dengan halaman yang ingin diubah, dan berfungsi seperti IDE biasa (gaya teks Sublime), tapi kali ini, didedikasikan untuk situs Anda WordPress.

Tinggalkan komentar

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

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
4 saham
saham2
menciak
Register2