Loncat ke Konten Utama

Bagaimana cara menambahkan CSS khusus ke blog WordPress Anda

Divi: tema WordPress termudah untuk digunakan

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]

Ada lebih dari satu cara untuk menambahkan kode CSS khusus ke blog WordPress.

Hari ini, saya akan menjelaskan kekuatan dan kelemahan dari dua metode berbeda yang saya usulkan kepada Anda, sehingga Anda dapat memilih salah satu yang paling cocok untuk Anda.

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 

Lalu kembali ke mengapa kita ada di sini.

Cara menemukan item yang ingin Anda sesuaikan

Setelah Anda mengisolasi bagian dari tema WordPress yang ingin Anda ubah (misalnya judul artikel), Anda harus melakukannya tentukan properti CSS diterapkan untuk itu sehingga Anda dapat membuat perubahan yang sesuai. Untungnya, proses ini tidak rumit.

CSS menggunakan penyeleksi untuk menentukan elemen mana yang akan mengalami perubahan spesifik yang berbeda. Biasanya, ini dilakukan dengan menentukan " kelas "Dari suatu elemen (atau elemen DOM). Namun, CSS juga dapat digunakan untuk menentukan tata letak seluruh elemen (misalnya, tag " ") atau menggunakan pengenal tag.

Untungnya, browser populer memungkinkan kita melihat pemilih dan deklarasi berbeda yang diterapkan ke elemen halaman hanya dengan beberapa klik. Di Google Chrome, misalnya, Anda hanya perlu menyorot bagian tertentu dari dokumen lalu klik kanan, seperti contoh berikut.

blogpascher-inspeksi

Dengan mengklik Periksa elemen Di menu drop-down yang muncul, Anda akan melihat kode HTML halaman di jendela baru dengan item yang diperiksa disorot di jendela di sebelah kanan (atau di bawah). Anda dapat melihat contoh di bawah ini.

blogpascher-logo

Teks-teks unsur-unsur ini (atau atribut) Disorot dalam warna merah menunjukkan kepada Anda berbagai gaya spesifik yang berlaku untuk item yang telah Anda sorot dengan memeriksa kode.

Baca juga: Bagaimana Tambahkan drop down menu dengan CSS di Editor Visual Anda

Misalnya, elemen " ukuran huruf Memberitahu Anda bahwa font yang ditampilkan dalam item yang disorot berukuran 13 piksel. Deskriptor dikelilingi oleh kawat gigi dan didahului oleh penyeleksi. Nama file style sheet yang sesuai ditampilkan di sebelah kanan pemilih.

Setelah Anda memiliki informasi ini dalam pikiran, mengubah gaya menjadi mudah. Misalnya, jika Anda ingin mengubah font dari 13px ke 14px, Anda cukup mencari file style sheet Anda, pemilih yang sesuai dengan salah satu item yang disorot. Secara umum dalam bentuk ini: (« # Informasi .block-plugin-konten"). Anda kemudian dapat mengubah nilai atribut yang berbeda.

Anda dapat melakukan hal yang sama pada Firefox, cukup sorot bagian tertentu dari halaman tersebut, klik kanan pada item tersebut, lalu pilih " Periksa elemen Di menu yang muncul.

Bagaimana WordPress dan CSS bekerja sama

Ini adalah fakta bahwa tema WordPress dibuat secara berbeda. Jadi, perlu diingat bahwa tema WordPress Anda mungkin tidak 100% sesuai dengan apa yang Anda baca di bagian berikut.

Yang mengatakan, kemungkinan besar CSS yang digunakan di blog WordPress Anda terletak di file yang disebut " style.css " Ini adalah nama umum untuk style sheet untuk semua jenis situs web, bukan hanya WordPress.

Lihat juga: Cara untuk mengubah ukuran gambar Gravatar di Wordpress

Sekarang saatnya untuk melalui berbagai proses pengeditan.

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]

Metode # 1: Mengedit File Gaya Tema WordPress Anda

Ada dua cara untuk mengakses file style.css tema Anda.

Yang pertama adalah melakukannya dari dashboard WordPress Anda. Di menu sebelah kiri, pilih menu " Apparence "Dan kemudian" Penerbit '.

menu-editor-in-picture-tepi

Setelah Anda berada di halaman editor, Anda akan melihat daftar file pada bilah vertikal di sisi kanan halaman. Gulir daftar file. Anda akan melihat file bernama " Style.css style sheet Di bagian bawah halaman.

Jika Anda mengklik pada nama file ini, itu akan dimuat dan ditampilkan di editor di tengah. Anda dapat menggunakan layar ini untuk mengedit file.

menu-wordpress-editor-in-kode

Cara lain untuk menemukan stylesheet adalah dengan menavigasi melalui sistem operasi penyedia hosting Anda dan mencari file di folder tema WordPress (menggunakan klien FTP). Lokasi tepatnya akan bervariasi tergantung pada penyedia hosting Anda. Dalam contoh yang ditunjukkan di bawah ini, nama situs web (dalam kasus thecare kami) Apakah folder di bawah folder public_html.

Sejak WordPress diinstal, Anda dapat melihat folder wp-content di "thecare". Subfolder wp-content adalah folder lain bernama " wp-tema“Di situlah semua tema WordPress diinstal.

Dari situs web ini menggunakan tema yang disebut " laporan berkala », File gaya« style.css Terletak di folder " induk Terakhir '.

Terakhir orangtua-folder-800x401

Metode # 2: Menggunakan plugin untuk memodifikasi CSS

Mungkin cara paling mudah untuk mengedit CSS blog WordPress Anda adalah penggunaan plugin.

Salah satu keuntungan utama menggunakan plugin mirip dengan tema anak. Iya Anda memperbarui tema WordPress, perubahan Anda tidak akan ditimpa, karena akan disimpan secara terpisah dan tidak di antara file tema. Keuntungan lainnya, tentu saja, Anda tidak perlu membuat tema anak.

Berikut ini beberapa plugin premium yang dapat Anda gunakan untuk memodifikasi kode CSS dari tema WordPress Anda:

1. Pensil Kuning: Editor Gaya Visual CSS

Yellow Pencil adalah editor gaya visual yang dapat Anda gunakan dengan tema apa pun untuk mempersonalisasi situs web Anda dalam hitungan menit (font, warna, animasi, dan lainnya…).Plugin wordpress Editor Gaya Visual CSS YellowPencil

Plugin WordPress premium ini akan membuat gaya CSS di latar belakang saat Anda bermain dengan warna seolah-olah itu adalah game. Ini dirancang untuk pemula dan juga pengguna berpengalaman.

Temukan juga milik kami Plugin 5 WordPress untuk menampilkan notifikasi

Tidak diperlukan pengetahuan pengkodean. Namun, plugin WordPress memiliki editor CSS yang bagus untuk mereka yang suka membuat kode. Anda dapat membuat kode langsung dengan editor ini dan menyesuaikan CSS Anda.

Download | Demo | Hébergement Web

2. JS dan CSS khusus untuk Gutenberg

JS dan CSS Khusus untuk plugin WordPress premium Gutenberg akan memungkinkan Anda menambahkan gaya kustom dalam jumlah tak terbatas ke editor WYSIWYG untuk posting dan halaman WordPress Anda. Ini sepenuhnya kompatibel dengan versi Gutenberg WordPress.

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]

Kustom JS dan CSS untuk plugin Gutenberg WordPress

Anda cukup membuat gaya baru dengan editor CSS yang mudah digunakan. Plugin WordPress ini memperluas fitur bidang khusus dari situs web Anda dan memberi Anda kemampuan untuk memodifikasi bidang khusus Anda dengan modul personalisasi yang dinamis dan kuat. dan fungsi dari pratinjau waktu-nyata plugin WordPress ini membuatnya sangat nyaman dan ramah pengguna.

Download | Demo | Hébergement Web

3. SiteOrigin CSS

Sejauh ini plugin WordPress yang menawarkan opsi terbanyak dalam daftar ini. Hal yang paling menakjubkan tentang yang terakhir adalah gratis. Plugin WordPress ini adalah satu-satunya yang tidak dapat ditemukan di customizer.

SiteOrigin CSS - plugin WordPress

Setelah menginstal dan mengaktifkan plugin, Anda perlu menavigasi ke lokasi berikut " Penampilan> CSS Khusus Untuk mengakses edisi CSS plugin. Di halaman ini, Anda dapat melihat editor teks yang tidak menawarkan pratinjau langsung. 

Baca juga artikel kami di Plugin 10 WordPress untuk meningkatkan penjualan situs web Anda

Untuk mengakses yang terakhir, Anda harus mengklik salah satu dari dua tombol yang muncul di sebelah kiri, tepat di atas editor. Tombol dengan ikon mata akan menampilkan editor kode CSS visual yang akan disukai para penggemar. Ikon dengan panah ekstensi akan menampilkan editor teks yang menyiratkan penguasaan kode CSS.

Download | Demo | Hébergement Web

4. CSS Kustom sederhana

CSS Kustom sederhana adalah salah satu plugin yang paling populer.

CSS Kustom Sederhana - plugin WordPress WordPress.org

Temukan juga milik kami Cara membuat blog Anda cepat: mengelola file CSS dan JS.

Ini telah diinstal lebih dari 100 kali dan telah menerima peringkat bintang lima.

Download | Demo | Hébergement Web

5. WP Tambah Kustom CSS

WP Tambahkan CSS Khusus adalah plugin yang memungkinkan Anda untuk melakukannya ubah tata letak blog WordPress artikel keseluruhan atau hanya individu. Ini adalah pilihan bagus jika Anda mencari fleksibilitas dalam menyesuaikan item.

wp-add-kustom

Plugin telah diunduh lebih dari 10.000 kali dan saat ini menikmati peringkat 4,3 bintang.

Download | Demo | Hébergement Web

6. Tema Junkie Kustom CSS

Jika Anda mencari solusi yang menawarkan pratinjau langsung dari perubahan Anda, Anda dapat mempertimbangkan untuk menggunakan Tema Junkie Kustom CSS

tema-junkie-css

Buat Toko Online Anda dengan mudah

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

Solusi ini menambahkan manajer CSS khusus ke dasbor Anda, tempat Anda dapat menambahkan gaya Anda sendiri. Ini juga menawarkan alternatif menggunakan tema anak.

Download | Demo | Hébergement Web

Sumber daya lain yang direkomendasikan

Kami juga mengundang Anda untuk berkonsultasi dengan sumber daya di bawah ini untuk melangkah lebih jauh dalam cengkeraman dan kontrol situs web dan blog Anda.

Kesimpulan

Sini! Itu saja untuk tutorial ini, saya harap Anda akan berhasil menambahkan kode CSS khusus ke blog WordPress Anda dalam 2 metode, Jika Anda punya komentar atau saran, jangan ragu untuk memberi tahu kami di bagian yang disediakan untuk ini.

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 atau yang di Divi: tema WordPress terbaik sepanjang masa.

Jika Anda menyukai artikel ini, njangan ragu untuk berbagi di jejaring sosial favorit Anda

...  

Artikel ini berisi 1 komentar

  1. Terima kasih banyak untuk semua artikel berbeda di situs Anda !! Itu selalu sangat eksplisit dan dapat dimengerti untuk pemula seperti saya… Saya pikir saya akan sering kembali !!

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