Untuk melakukan perubahan tampilan situs WordPress, Anda seringkali harus mengedit kode CSS. Pada artikel ini kita akan melihat beberapa cara perubahan CSS kode dalam tema WordPress.

Mengedit file style.css tema Anda

Cara paling umum Pengeditan CSS kode situs WordPress Anda adalah mengubahnya di file style.css tema aktif Anda. Semua tema di WordPress terletak di direktori wp-content/themes dan berdasarkan nama tema aktif Anda, Anda dapat dengan mudah menentukan di direktori mana tema tersebut berada.

Untuk mengedit file style.css tema Anda, Anda perlu memiliki akses ke situs melalui FTP, atau dukungan untuk mengedit file tema langsung dari panel admin WordPress. Jika mengubah file dari panel admin didukung oleh Anda, Anda akan menemukan opsi ini di bagian Penampilan→ Penyunting.

Pastikan file style.css (style sheet) dipilih dalam daftar di sebelah kanan. Mengedit file .php dengan cara ini sangat tidak disarankan, karena kesalahan sekecil apa pun dapat merusak situs Anda. Lagi metode yang dapat diandalkan sedang mengedit melalui FTP.

dikurangi pendekatan ini adalah ketika Anda memperbarui tema, semua perubahan Anda akan hilang. Untuk menghindari hal ini, sebaiknya gunakan tema anak atau plugin pihak ketiga untuk mengedit kode CSS.

Tema Anak WordPress

WordPress memungkinkan Anda membuat perubahan pada tema lain tanpa mengubah kode sumber tema asli. Selain stylesheet, tema anak dapat memodifikasi file templat lain di WordPress, namun hal tersebut berada di luar cakupan artikel ini.

Untuk membuat tema anak baru, berikan folder baru di direktori wp-content/themes dan letakkan di dalamnya berkas kosong dengan nama style.css. Jalur ke file gaya Anda akan terlihat seperti ini: wp-content/themes/my-child-theme/style.css dengan my-child-theme adalah nama tema anak baru kita.

Buka file style.css tema anak Anda di favorit Anda editor teks, dan masuk ke dalamnya kode berikut:

/** * Nama Tema: Tema Anak Saya * Templat: dua puluh dua belas */ @import url("../twentytwelve/style.css"); tubuh ( latar belakang: merah; )

Dengan arahan Nama Tema kami menunjukkan nama tema anak kami, dan pada baris berikutnya dengan arahan Templat kami menunjukkan tema induk yang ingin kami gunakan. Dalam kasus kami, ini adalah tema Dua Puluh Dua Belas, yang terletak di direktori dua puluh dua belas.

Setelah header tema, kami menyertakan gaya tema Dua Puluh Dua Belas dengan perintah @import, dan semua yang mengikutinya adalah kode CSS kami sendiri. Dalam kasus kami, kami mengubah warna latar belakang menjadi merah.

Simpan perubahan pada file style.css tema anak Anda, dan unggah seluruh direktori tema anak saya ke server melalui FTP. Anda akan melihat tema anak baru Anda tersedia saat Anda memilih tema di bawah Penampilan → Tema.

Dengan cara ini, saat Anda mengedit file style.css tema anak Anda, semua perubahan akan terlihat di situs Anda, dan saat Anda memperbarui tema induk, pekerjaan Anda tidak akan terpengaruh.

Mengedit CSS dengan Plugin

Cara lain untuk mengedit kode CSS di WordPress adalah dengan menggunakan plugin. Ada banyak sekali plugin yang memungkinkan Anda mengubah style sheet. Kami merekomendasikan plugin gratis Jetpack, yang berisi modul CSS Khusus.

Modul CSS Khusus memungkinkan Anda mengedit gaya langsung dari panel admin WordPress dan tidak memerlukan akses FTP atau pengaturan khusus hosting situs. CSS khusus memiliki penyorotan dan pemeriksaan sintaksis, mendukung revisi, serta beberapa lainnya Praprosesor CSS(KURANG dan Sass).

Jika Anda memiliki pertanyaan saat menggunakan salah satu metode di atas, silakan tinggalkan komentar dan kami akan mencoba membantu Anda.

Apa yang akan saya bicarakan di sini? Artikel ini bukan ulasan berbagai editor, ini dirancang untuk orang-orang dengan lebih banyak tingkat rendah persiapan dalam hal pembuatan website. Oleh karena itu, tiga pertanyaan akan dipertimbangkan di sini:

1. Apa itu editor kode?

2. Jenis editor kode.

3. Tipe mana yang lebih baik digunakan.

Pertanyaan terakhir adalah pertanyaan yang lebih masuk akal, karena akan mengungkapkan kepada pemula sejumlah alasan mengapa mereka tidak boleh menggunakan editor yang sangat memudahkan pekerjaan pembuatan website.

Mengapa Anda memerlukan editor kode?

Jadi apa itu editor kode? Editor kode adalah program yang dirancang khusus untuk menulis kode dalam bahasa pemrograman apa pun. Inti dari program semacam itu adalah membuat kehidupan seorang webmaster semudah mungkin. Program semacam itu biasanya sangat membantu dalam menulis kode dengan kenyamanannya.

Kenyamanan mungkin termasuk:

1. Penyorotan kode, yang sangat memudahkan navigasi dalam kode itu sendiri, karena terkadang kode tersebut bisa berukuran sangat besar.

2. Tombol khusus, ketika diklik, suatu fungsi secara otomatis ditetapkan, atau, dalam kasus HTML, sebuah tag dimasukkan.

Namun, jika saya mulai mendaftar, bahkan masuk garis besar umum, segala fasilitasnya, hasilnya akan menjadi buku yang tak kalah dengan “War and Peace”. Jumlahnya bisa banyak.

Lebih lanjut tentang tipe

Sekarang mari kita beralih ke pertanyaan kedua dan mencari tahu jenis editor kode apa yang dibagi. Hanya ada dua di antaranya - editor kode biasa dan editor visual. Apa perbedaan kedua tipe ini? Perbedaannya adalah dalam editor kode biasa Anda membuat semua perubahan dengan memasukkan kode itu sendiri, dan Anda dapat melihat konsekuensi dari perubahan ini hanya dengan menjalankan file yang Anda edit. Dalam editor kode visual, seseorang tidak dapat mengetahui HTML dan CSS sama sekali, dan tetap membuat halaman yang indah untuk situs tersebut.

Apakah editor kode benar-benar penting?

Tampaknya bisa lebih baik? Anda tidak perlu mengetahui CSS atau HTML, bisa dibilang - Anda bekerja seperti di Microsoft Word, tulis teks Anda, masukkan gambar, tabel, tautan - dan program secara otomatis menyandikannya ke dalam format HTML dan membuatnya halaman kerja situs, terlebih lagi Anda dapat langsung melihat seperti apa tampilan situs yang Anda buat dengan satu klik tombol.

Kenyataannya, jika Anda tahu cara menggunakan program seperti itu (editor kode visual), Anda tidak perlu tahu HTML dan CSS. Dan semuanya tampak baik-baik saja, tapi Para editor ini, harus saya katakan, mempunyai kelemahan besar.

Sekarang kita dengan lancar beralih ke pertanyaan ketiga artikel ini: jenis editor kode apa yang lebih baik untuk digunakan.

Tampaknya semua kartu ada di tangan editor visual; Anda tidak perlu mengetahui HTML atau CSS - cukup tulis teks yang diperlukan dan masukkan gambar yang diperlukan. Tapi ada kekurangannya!

Kontra editor

Kerugian pertama seperti itu- ini adalah biaya. Editor seperti itu menelan biaya beberapa ratus rakun yang dibunuh (cu). Setuju - tidak semua orang mampu membelinya! Namun kekurangan ini dengan cepat berubah menjadi nilai tambah, karena di Internet kami Anda dapat menemukan program apa pun, mengunduhnya, dan menggunakannya secara gratis (secara ilegal). Hal utama adalah mengetahui apa yang harus dicari. Tapi ini adalah kerugian moneter yang dapat dengan mudah diatasi - Anda menghemat pengeluaran dan membelinya.

Minus kedua, dan saya harus mengatakan sangat penting - setiap editor visual yang secara otomatis menghasilkan kode untuk suatu halaman membuat lebih banyak kode ini daripada yang diperlukan.

Biasanya, kode ini berukuran 20 persen lebih besar. Jika lalu lintas ke sumber daya Anda kecil, tidak ada yang perlu dikhawatirkan, tetapi jika Anda memiliki beberapa ratus orang setiap hari, halaman Anda akan dibuat beban ekstra ke server perusahaan hosting, dan bebannya akan meningkat sebesar 20 persen. Dan perwakilan perusahaan tidak akan terlalu menyukai ini.

Masalah ini dapat diselesaikan dengan dua cara - Anda mengoptimalkan halaman untuk mengurangi kode, tetapi untuk ini Anda perlu memahami kodenya - mengetahui CSS dan HTML. Atau Anda membayar ekstra dengan uang Anda sendiri.

Minus ketiga, betapapun “kerennya” editornya, ia tidak akan bisa membuatkan website untuk Anda dengan berbagai fungsi pemrograman. Katakanlah - ini mengirim surat, penomoran halaman, formulir komentar, rating, polling dan banyak hal menarik lainnya yang akan membuat situs Anda modern.

Apakah mungkin membuat situs web menggunakan editor kode?

Untuk membuat situs web modern, ada solusi khusus, yang membuatkan situs web untuk Anda dengan segala sesuatunya siap dalam 5 menit, dan Anda dapat dengan mudah menggunakan opsi bahasa pemrograman yang sudah jadi tanpa memahaminya sama sekali. Solusi ini disebut sistem manajemen konten - CMS.

Namun hal ini juga menimbulkan kelemahan signifikan lainnya, yaitu setiap CMS dilengkapi dengan beberapa CMS templat standar untuk situs web - sederhananya, desain situs web Anda. Dan template ini jelek, tidak unik dan hanya menakuti pengunjung. Dan editor visual tidak akan bisa membuat template untuk CMS! Karena menggunakan gaya dan opsi bawaannya sendiri. Anda perlu mengedit template tersebut secara manual, dan ini sekali lagi memerlukan pengetahuan tentang CSS dan HTML.

Oleh karena itu kesimpulannya - jika Anda menginginkan situs web modern yang indah- Anda memiliki dua opsi - pesan situs web ini dari para profesional, yang biayanya mulai dari seratus dolar atau lebih, atau buat sendiri templat untuk sistem manajemen konten. Dan untuk ini Anda perlu memahami CSS dan HTML - prasyarat! Ya, Anda perlu tahu sedikit tentang PHP, tetapi Anda bisa melakukannya tanpa itu!

Dan untuk mempelajari HTML dan CSS, Anda perlu mengikuti tutorial dan mencobanya dalam praktik, dan bukan dalam editor visual, karena Anda tidak akan mengingat apa pun hanya dengan menekan tombol, tetapi secara teratur, memasukkan setiap fungsi di papan ketik.

Tempat mendownload editor HTML dan CSS secara gratis

Secara pribadi saya tidak menggunakan editor visual, tetapi, jika Anda benar-benar menyukai cara membuat kode ini, dan ingin mempelajari CSS dan HTML, pertama-tama masukkan kode secara manual sampai Anda mempelajari setidaknya elemen paling umum dalam membuat halaman web, dan baru kemudian, dengan hati nurani yang bersih, gunakan editor visual.

Editor tanda kurung Versi Rusia, yang terbaik dan paling mudah dipahami untuk pemula:

Editor SublimeText 3, cepat dan andal, digunakan oleh banyak profesional (walaupun hanya dalam bahasa Inggris):

Bagaimana pendapat Anda?

Editor CSS online adalah alat untuk pengeditan sederhana kode CSS. Sekarang Anda dapat mengedit file CSS bahkan tanpa pengetahuan mendalam tentang aturan CSS. Cukup arahkan dan klik, sesuaikan bilah geser, dan konfirmasikan pekerjaan Anda. Dengan demikian, semua pekerjaan dilakukan dengan sangat cepat dan dengan sedikit usaha.

Tiga yang terbaik editor CSS daring:

Mengedit Kode CSS Cukup tugas yang sulit, terutama jika file-file ini menjadi besar dan membingungkan. Terkadang kita hanya perlu mengedit sebagian kecil kode yang disediakan bersama template gratis atau dibeli. Tidak semua webmaster ahli CSS. Jadi, alat ini akan membantu Anda menyelesaikan pekerjaan tanpa pengetahuan atau keterampilan khusus apa pun. Meskipun itu banyak membantu dalam hal ini Plugin pembakar untuk Firefox, ini bukan alat terpisah. Hari ini saya ingin bercerita tentang alat khusus– Editor CSS daring.

Bagaimana cara kerjanya?

Mengedit File CSS dan Menyimpan Perubahan

Anda dapat mengunduh dan mencoba versi gratis editor CSS daring. Panel editor utama dibagi menjadi tiga jendela utama. Bilah URL, panel kontrol, dan jendela pratinjau. Pertama kita masuk URL halaman. Editor akan mendeteksi semua file CSS yang digunakan pada halaman. Setelah file dibuka, semua perubahan pada file CSS dibuat di panel kontrol dan kemudian ditampilkan di layar pratinjau. Anda juga bisa melaksanakannya pratinjau halaman di 9 browser bawaan. Halaman pratinjau berbeda browser yang berbeda, yang memungkinkan Anda membuat satu file css kompatibel dengan semua browser. Setelah selesai mengedit, Anda dapat menyimpan perubahan menggunakan klien FTP terintegrasi dengan mengunggahnya ke lokasi asli di server.

Pengeditan CSS WYSIWYG

Properti visual penyunting

Di sini kita berbicara tentang aplikasi penata gaya editor desktop, tetapi Anda perlu mengunduhnya, ini tidak online, tidak seperti yang disebutkan di atas.

Editor CSS online memiliki beberapa properti unik yang belum pernah ada sebelumnya. Fitur yang paling nyaman dan mencolok adalah Bullseye. Dengan mengaktifkan alat Bullseye, Anda dapat mengarahkan kursor ke elemen tertentu halaman web dalam mode pratinjau, dan alat tersebut hanya akan menampilkan baris kode CSS di panel kontrol yang menghasilkan elemen tersebut. Fungsi Steak out melakukan hal sebaliknya. Arahkan ke sebaris kode CSS, dan alat tersebut akan mempratinjau elemen pada halaman yang didasarkan pada baris kode tersebut. Mengedit atribut seperti padding, margin dan ukuran font dapat dilakukan dengan mouse. Perubahan segera terlihat di panel pratinjau.

Fitur dan alat berguna lainnya

Editor CSS online menyertakan banyak properti dan alat yang mudah digunakan. Yang paling penting dan nyaman: pemilih warna dengan kemampuan menggunakan pipet, mencari dan mengganti teks dalam file CSS, penggaris untuk pemosisian dan perubahan, kaca pembesar untuk pemosisian yang lebih akurat, validasi sintaksis CSS bawaan.

Inilah alat yang akan banyak membantu Anda. Terutama jika Anda tidak menganggap diri Anda seorang guru CSS. Ini adalah alat visual dan WYSIWYG. Hasil perubahan yang dilakukan dapat langsung dilihat di jendela yang sama. Saya yakin perangkat lunak ini unik dan saya pribadi sangat merekomendasikannya kepada Anda. Saya menggunakannya sendiri untuk membuat dan mengedit Templat Joomla. Anda dapat mencoba demo dan memutuskan sendiri apakah Anda memerlukan alat tersebut.

Hari ini saya ingin berbicara tentang sesuatu yang sederhana, namun sangat algoritma yang berguna mengedit gaya templat CSS untuk situs web Joomla. Menurut saya algoritmanya sendiri jauh lebih universal dan cocok untuk semua jenis mesin dan website secara umum, saya hanya akan memberikan contoh saat mengedit desain template website di Joomla, karena ini yang cukup sering saya lakukan. akhir-akhir ini.

Mengapa mengedit gaya CSS template?

Tentunya jika Anda membaca artikel ini maka Anda sudah mempunyai alasannya, namun banyak yang hanya menebak-nebak mengapa hal tersebut perlu dilakukan. Oleh karena itu, misalnya, kami dapat mengatakan bahwa Anda membuat situs web untuk diri sendiri atau orang lain, menambahkan template yang Anda minati, tetapi pada akhirnya satu atau lebih detail tidak sesuai untuk Anda karena alasan tertentu, misalnya:

• Sangat ukuran besar font judul dalam gaya templat;
• Anda tidak puas dengan warna latar belakang template atau elemen individu desain;
• Saya ingin mengubah ukuran atau lokasi elemen atau bidang tertentu, misalnya logo, dll.

Semua hal yang tampaknya kecil ini sering kali membuat webmaster kesal dan memaksa mereka akhirnya memutuskan untuk menyewa seorang desainer web untuk mengeditnya, atau memasang template lain. Artikel ini akan membantu Anda mengedit template situs web sendiri dan gratis.

Di mana file CSS yang diperlukan?

Templat modern untuk Joomla dan CMS lainnya biasanya berisi banyak folder yang berisi file yang mendukung pengoperasian modul tertentu, gaya keluaran, dll. Hampir selalu, file yang bertanggung jawab untuk desain template terletak di folder template yang disebut CSS. Templat tersebut mungkin memiliki beberapa folder dengan nama yang sama, dan folder itu sendiri mungkin berisi banyak file dengan ekstensi .css, dan Anda perlu memahami dengan jelas file mana yang perlu diedit.

Untuk ini, di peramban Firefox ada satu alat yang berguna sebagai studi tentang unsur-unsur. Selanjutnya saya akan memberikan contohnya. Mari kita edit posisi, tinggi dan warna latar belakang bidang yang dimaksudkan untuk menampilkan header situs.

Jadi, pada area minat yang perlu diedit (bagi kami ini adalah header situs), klik klik kanan tikus. Di menu yang diusulkan, pilih item Jelajahi elemen. Setelah ini, elemen yang diselidiki akan disorot bingkai bertitik dan konsol tambahan akan terbuka, di mana kode halaman dan elemen itu sendiri akan ditampilkan (izinkan saya mengingatkan Anda, dalam contoh, header situs) - lihat gambar di bawah.

Saya harus segera mencatat bahwa saya telah menginstal OS Lubuntu di laptop saya, sehingga grafik program dan aplikasi Anda mungkin berbeda, tetapi ini tidak terlalu penting.

Di sebelah kanan kita melihat kode HTML template, tetapi karena kita perlu mengedit file CSS yang bertanggung jawab atas gaya tampilan header situs, kita langsung membukanya dengan mengklik namanya (klik di tempat yang ditampilkan dengan warna merah di tangkapan layar di atas). Alhasil, yang tepat terbuka untuk kita berkas CSS(lihat tangkapan layar di bawah).

Hal yang nyaman! Anda segera ditampilkan daerah yang dibutuhkan kode, yang membuat pekerjaan Anda lebih mudah! Namun sebelum kita memulai trik desain, mari kita analisa secara dasar potongan kode yang akan kita edit. Saya akan mengutipnya di bawah ini:

Td.logoheader(
margin: 0;
bantalan: 0;
latar belakang: url(../images/123.png) #4B6B94 tengah bawah tanpa pengulangan;
tinggi: 146 piksel;
lebar: 100%;

td.logoheader - nama header situs di file CSS

background - latar belakang header situs, yang terdiri dari gambar ( url(../gambar/123.png)) dan dari kode html warna latar belakang ( #4B6B94), serta dari aturan yang memberitahukan gambar tersebut untuk tidak ditiru ( tidak ada pengulangan) dan berada di tengah bawah ( tengah bawah)

height - tinggi header situs dalam piksel (in dalam hal ini- 146 piksel)

lebar - lebar header situs dalam kaitannya dengan template, dalam contoh dinyatakan dalam % (100%)

Untuk mengubah warna background, ukuran header situs dan foto itu sendiri gambar baru Kami akan membuat perubahan pada parameter latar belakang dan tinggi, kami tidak akan menyentuh sisanya.

Di mana saya harus melakukan perubahan pada file CSS?

Hal yang paling menarik dan menyenangkan adalah itu Kami akan melakukan perubahan kode langsung di editor style sheet di browser Firefox(lihat tangkapan layar kedua). Dan yang sangat nyaman, perubahan akan ditampilkan secara real time dan hanya untuk Anda! Dengan cara ini Anda dapat melakukan eksperimen, temukan solusi optimal dalam desain dan baru kemudian buat perubahan sisa pada file CSS template! Setuju - ini menghemat banyak masalah :)

Agar lebih jelas, mari lakukan perubahan berikut:

• buat tinggi header situs 200 piksel
• mengubah warna background misalnya menjadi putih (kode html putih #fff)
• pindahkan posisi gambar ke kiri dan atas
• Baiklah, kita bisa mengubah gambarnya sendiri (saya upload opsi kedua melalui FTP ke server terlebih dahulu di folder tempat gambar yang ada saat ini berada. Nama gambar baru header.jpg)

Omong-omong, untuk mengetahui dengan tepat jalur ke folder tempat file tersebut berada gambar yang diinginkan, Anda hanya perlu mengklik kanan gambar itu sendiri di browser, lalu pilih Buka gambar latar belakang dan di baris browser Anda akan melihatnya jalur penuh dari domain hingga nama file itu sendiri :)

Dan izinkan saya mengingatkan Anda sekali lagi bahwa saya membuat semua perubahan pada kode langsung di editor browser, jadi lihat hasil dari semua perubahan di atas pada gambar di bawah.

Masalah apa yang mungkin Anda temui saat menyelesaikan file CSS template Joomla?

Sepertinya kami sudah berlatih di editor browser dan memutuskan perubahan desain. Masuk melalui klien FTP ke server atau melalui pengelola file hosting, unduh diperlukan CSS-file template, buka di Notepad++ (atau di editor teks JuffEd, jika Anda memiliki Ubuntu), buat perubahan pada file itu sendiri, simpan, unggah file yang diubah ke server, tetapi tidak ada perubahan visual tidak terjadi pada akhirnya? Apa yang harus dilakukan:

• Periksa izin file CSS yang sedang dimodifikasi. Jika chmod adalah 444 atau 644, maka ubahlah menjadi minimal 755. Setelah melakukan perubahan, kembalikan nilai chmod ke keadaan sebelumnya.
• segarkan cache browser Anda - tekan CTRL+F5 secara bersamaan

Ini manipulasi sederhana harus membantu :)

NeonHTML - Editor gratis HTML dan CSS dengan alat visual. Berbeda dalam fungsi alat. Mendukung XHTML. Memungkinkan Anda mengedit dengan cepat dan nyaman: penyorotan sintaksis, pembuatan tag visual dalam dialog. Sebagian besar alat memiliki pratinjau; mengubah parameter akan langsung memengaruhi tampilan di pratinjau. Ada browser bawaan dengan simulasi resolusi yang berbeda dan skala. Alat pengoptimalan mesin pencari (SEO) dan pemeriksa peringkat situs. Alat variasi teks akan membantu promosi. Sangat kerja bagus dengan warna - palet yang dibuat khusus seperti pada editor grafis, daftar warna terkini, daftar warna halaman, pengeditan cepat warna dalam satu klik, penciptaan instan pilihan gaya dengan pemilihan warna, warna buruh pelabuhan. Alat berinteraksi satu sama lain, ini memastikan adaptasi cepat terhadap antarmuka, kenyamanan dan kecepatan tinggi bekerja. Tidak mengganti keyboard jika tidak diperlukan. Tidak mengandung menu sampah.

________________________________________________________________________________