Dimulai dengan WordPress: Mengedit Tampilan Situs Anda Dengan CSS

Jadi, sekarang kita sudah menyiapkan tema anak, kita siap untuk membuat beberapa perubahan pada tampilan dan nuansa situs kita.

Apa yang Anda perlukan

• Browser web - Saya menggunakan Chrome
• Editor teks - Saya menggunakan Text Wrangler
• Klien FTP - Saya menggunakan FileZilla yang telah kami atur untuk menggunakan Text Wrangler sebagai editor teksnya
• Pengetahuan tentang HTML dan CSS

Sebelum kita mulai

Sebelum kita masuk ke dalam tubuh tutorial kita perlu mengatur sistem pengeditan kita, dan salah satu hal berguna tentang klien FTP modern adalah bahwa dalam preferensi mereka kita dapat mengatur perangkat lunak yang ingin kita gunakan untuk mengedit file. Dengan begitu kita dapat memilih edit ketika memilih file di server, memilikinya unduh ke direktori sementara di sistem lokal kita, edit, lalu ketika kita menyimpannya maka secara otomatis diunggah kembali ke server. Ini adalah sistem otomatis yang mudah, tetapi membutuhkan sedikit perlindungan saat kami mengedit langsung, jadi jika kami membuat kesalahan, situs langsung kami akan terpengaruh. Namun, sebelum kita sampai ke yang mengatur editor teks default Anda.

Buka FileZilla > Preferences > File editing file dan jelajahi direktori Applications atau Programs Anda dan pilih editor teks Anda (seperti yang saya sebutkan, saya menggunakan Text Wrangler, sehingga Anda dapat melihat dalam contoh bahwa Text Wrangler ditetapkan sebagai editor default saya) .

Ok, kita akan kembali ke itu ...

Kedua, sebelum kita mulai mengubah tema (ini adalah momen 'inilah yang sudah saya siapkan sebelumnya') Saya juga telah membuat beberapa posting baru di blog kita dan membedakannya menggunakan post format sehingga kita dapat melihat di mana beberapa perubahan akan tercermin di situs kami yang diterbitkan - Anda dapat melihatnya di gambar pertama, diidentifikasi oleh latar belakang berwarna yang berbeda. Yang pertama adalah tautan, diikuti oleh pos standar, lalu galeri, standar lain, kutipan, dan kemudian video. Twenty Thirteen mengubah gaya masing-masing postingan ini, jadi kita harus mengedit beberapa bagian dari stylesheet situs kita untuk membuat situs kita terlihat berbeda dari yang asli.

Mengubah Gaya Situs Anda

Benar, perubahan gaya pertama yang saya buat tidak memerlukan kode apa pun, saya cukup memperbarui gambar header.

Twenty Thirteen memiliki tiga gambar berpola geometris oranye yang terinstal secara default, kami memasang empat biru/hijau yang baru, dengan masuk ke pengaturan Appearance > Header dan mengunggah beberapa gambar header baru. Tidak ada gunanya mengubah header di CSS ketika tema itu sendiri memberi kami sarana untuk mengubahnya, jadi temukan sendiri beberapa gambar header baru untuk skema warna baru Anda, dan teruskan dan unggah ...

Aku akan menunggu disini.

Ok, sudah ditemukan? Luar biasa, muat dan mari kita beralih ke hal berikutnya.

Tweaking Tema Menggunakan Stylesheets

Untuk memberi Anda sedikit latar belakan/penyegaran pada stylesheet, sebuah situs web terdiri dari 3 lapisan. Yang pertama, pada dasarnya adalah lapisan konten, bagian dari situs yang mengatur konten Anda ke dalam struktur yang berarti di situs Anda. Struktur ini dibuat menggunakan kode yang disebut HTML (Hypertext Markup Language) tempat Anda menandai berbagai bagian konten. Berikut ini beberapa HTML sebagai contoh.

1

<h1>This is a Level One Heading</h1>

2

<p>This is the first Paragraph of text.</p>

3

<!-- This is comment text... put in to help tell you what's what, and it's the beginning of the Unordered list-->

4

<ul>

5

  <li>This is the first item in an unordered list</li>

6

	<li>This is the second item in an unordered list</li>

7

</ul>

8

<!-- this is the end of the unordered list -->

9

<article class="format-gallery">This is an article, a stand alone block of text content with a class of format-gallery</article>

HTML itu sendiri tidak menata apa pun. HTML hanya menyusun konten. Untuk membuat perubahan pada gaya konten, kami naik ke lapisan tengah situs, lapisan presentasi. Salah satu hal hebat tentang usia pembuatan situs web ini adalah pemisahan presentasi dari konten. Sistem inilah yang membuatnya sangat mudah untuk mengubah tampilan situs web Anda hanya dengan menggantikannya dengan tema baru (yang pada dasarnya adalah, bertukar satu stylesheet dengan yang lain).

Bahasa yang berbicara pada lapisan presentasi ini adalah CSS (Cascading Style Sheets) dan itu adalah CSS yang akan kami sesuaikan untuk membuat perubahan gaya pada tema Twenty Thirteen kami.

Setiap kali kita melihat struktur CSS sebagai bahasa, kita dapat melihat tiga hal:

1

selector { property: value; }

Jadi jika kita ingin mengubah sesuatu seperti heading tingkat pertama, tag h1 adalah selector kita seperti ini:

1

h1 { property: value; }

Hal berikutnya adalah properti, dan dalam hal ini properti yang ingin kita ubah akan warna - juga, dalam CSS kita menggunakan ejaan Amerika. Jadi saat saya menulis warna dalam konten, ketika saya menulis dalam kode, ia menggunakan color.

1

h1 { color: value; }

Akhirnya kita akan mengatur nilai. Sekarang dalam hal warna kita dapat menulis warna dalam tiga cara:

1. Nama-nama warna
2. Kode heksadesimal
3. Nilai warna RGB

Untuk sebagian besar kita akan menggunakan heksadesimal, jika Anda ingin mencari tahu tentang nilai-nilai lain Anda dapat menemukan referensi di sini. Dalam hal ini kami mengubah teks menjadi putih, yang dalam heksadesimal adalah #FFFFFF.

1

h1 {color: #FFFFFF; }

Jadi, dengan itu dalam pikiran, dan untuk mulai mendapatkan tema kita terlihat sedikit lebih seperti 'milik kita', pertama-tama kita akan mengubah font teks baik dalam judul dan konten body. Jadi mulailah dengan membuka FileZilla dan bernavigasi di jendela remote ke stylesheet tema anak Anda, lalu klik kanan pada file style.css dan pilih View/Edit.

Klik dan Anda akan menemukan bahwa file terbuka di editor teks Anda.

PENTING

Sebelum kita melangkah lebih jauh, kita akan menyimpan salinan stylesheet kita ke desktop kita sebagai cadangan. Ini karena kami sedang mengedit server langsung yang kami inginkan mundur jika kami melakukan sesuatu untuk memecahkan kode kami.

Jadi, sebelum Anda melakukan hal lain, di Text Wrangler dengan file Anda tekan CMD + A untuk memilih semua teks. Tekan CMD + C untuk menyalinnya dan membuka file baru di Text Wrangler (CMD + N). Paste teks yang Anda salin ke dokumen baru (CMD + V) dan simpan file itu sebagai cadangan di desktop Anda. Dengan cara ini, jika terjadi kesalahan, Anda selalu dapat menyalinnya kembali ke file yang terakhir diedit dan menyimpannya ke server, memulihkan situs ke versi kerja terakhir.

Ikuti proses ini di atas dan simpan file ini setiap kali Anda membuat perubahan (perubahan yang berfungsi seperti yang diharapkan), dengan cara ini file selalu menjadi versi terbaru Anda. (Ada banyak cara yang luar biasa dan lebih rumit untuk menjaga kontrol versi ini. Untuk pemula mutlak, ini adalah awal yang cukup bagus, jika Anda ingat untuk terus melakukannya)

Baiklah, sekarang kita siap untuk berkreasi!

Mengubah font

Untuk mengubah font di situs kita harus memiliki akses ke file font yang di-host. Ini mengatasi kenyataan bahwa tidak setiap komputer di luar sana akan memiliki font yang sama dimuat pada sistem mereka yang kita lakukan. Jadi, salah satu hal hebat yang kita miliki akses ke hari ini adalah beberapa font web host yang terlihat bagus, disediakan secara gratis oleh Google Web Fonts. Untuk situs kami, kami telah menemukan dua font yang bekerja sama dengan sangat baik, Rancho untuk judul, dan Gudea untuk teks body.

Jadi, di situs Google Fonts, tambahkan dua font ini (Rancho dan Gudea, atau dua pilihan Anda) ke koleksi; tekan tab Use lalu @import untuk mengambil kode berikut untuk menempelkannya ke stylesheet kami:

1

@import url(http://fonts.googleapis.com/css?family=Gudea:400,700,400italic|Rancho);

Ini memberitahu tema kita di mana menemukan font. Kami selanjutnya akan memberitahu stylesheet kami di mana harus menampilkannya dengan mengedit beberapa selector - tetapi bagaimana kita tahu elemen mana yang ingin kita kerjakan atau bahkan selector mana yang dapat kita tweak?

Menggunakan Alat Pengembang

Salah satu hal keren tentang browser modern adalah banyaknya alat yang tersedia untuk membantu pengembang. Di Chrome mereka disebut Developer Tools dan Anda dapat mengaksesnya dengan mengklik kanan elemen pada halaman web yang ingin Anda periksa, dan pilih Inspect Element. Di Firefox, alat pengembang pilihan disebut Firebug dan Anda bisa mendapatkannya dengan menginstalnya sebagai ekstensi (Firefox juga memiliki alat pengembang sendiri yang terpasang di dalamnya), di Safari, alat tersebut juga disertakan, tetapi Anda harus mengaktifkannya (Preferences > Advanced > Show develop menu in the menu bar).

Pokoknya, mari kita periksa header situs. Klik kanan pada teks header itu sendiri dan kemudian pilih Inspect Element

Klik itu, yang akan memunculkan panel alat di bagian bawah halaman kami.

Di sebelah kiri panel adalah bagian elemen HTML dengan elemen yang dipilih dan kami sorot. Di sebelah kanan adalah CSS. Setelah memilih elemen <h1> dalam HTML, kita dapat menggulir CSS di sebelah kanan untuk menemukan semua selector yang beroperasi pada HTML ini. Jika Anda menggulir ke bawah hanya beberapa baris Anda akan menemukan urutan selektor heading dengan properti yang disebut font-family.

Salah satu hal yang rapi tentang alat pengembang adalah Anda dapat mengedit properti ini dan melihat perubahan Anda disimulasikan secara langsung tanpa efek aktual pada situs langsung Anda untuk pengguna lain, dan ketika Anda memiliki pemilih yang mencari apa yang Anda inginkan, Anda dapat menyalin itu ke dalam stylesheet anak Anda. Jadi letakkan kursor Anda di atas properti (dimulai dengan kata Bitter) dan, karena kami telah menyimpan font Rancho ke stylesheet kami menggunakan selector @import, kami dapat mengubah font Bitter saat ini di inspektur menjadi 'Rancho' untuk melihat font berubah secara langsung.

Jika kami puas dengan font baru ini, kami dapat menyalin CSS dari Inspektur dan menempelkannya ke stylesheet kami.

Pilih kode sepenuhnya mulai dari selector mulai dari h1 ke bawah sampai tanda kurung tutup, dan salin.

Kemudian paste kode ke dalam stylesheet Anda.

Sifat stylesheet adalah bahwa mereka mengalir ke bawah. Jika ada beberapa selector dalam stylesheet untuk elemen HTML tertentu, yang ada di bagian bawah halaman adalah yang memiliki keunggulan dalam hierarki dan karenanya ditampilkan oleh browser.

Dalam kasus kami, kami mengimpor stylesheet di bagian atas tema anak kami di sini, jadi semua kode baru yang kami tulis sekarang hadir di akhir kode yang ada di tema induk. Sebagai konsekuensinya, kode kami adalah kode yang akan ditindaklanjuti saat situs ditampilkan. Lebih lanjut, karena kode yang kami tempel mengandung baris yang tidak kami ubah, dan dengan demikian menjaga agar baris-baris ini pada dasarnya akan menduplikasi kode yang sudah ada (itu sama di induk sehingga kami tidak perlu menggunakannya lagi pada anak), kami akan menghapus baris di atas dan di bawah properti font-family, karena itu tidak diperlukan.

Sekarang tekan save pada stylesheet kami, lalu lompat ke FileZilla di mana kita akan melihat lansiran ini:

Jika Anda senang dengan perubahan Anda, miliki cadangan di desktop Anda, dan siap untuk pergi, tekan Yes untuk menimpa file di server. Kemudian menuju ke situs Anda untuk menyegarkan halaman dan melihat perubahan Anda dipublikasikan.

Setelah kami melakukan itu pada font header, kami akan melakukan hal yang sama pada body. Jadi dengan situs Anda terbuka, klik kanan pada sedikit teks isi dan pilih Inspect Element. Di inspektur CSS, navigasikan untuk menemukan selector font-family di panel CSS Anda dan kemudian ubah nilai Source Sans Pro ke 'Gudea'. Harus ditunjukkan pada titik ini bahwa pemilih yang kita edit sebenarnya bukan selector p (untuk paragrah) seperti yang Anda harapkan, sebenarnya selector yang mempengaruhi pagragraf dalam hal ini adalah selector html (Anda dapat mengatakan bahwa dalam inspektur karena yang gelap, yang diklik dalam array selector tidak mempengaruhi sedikit teks ini), dalam hal ini html adalah selector induk yang mempengaruhi SEMUA elemen turun dari itu pada halaman.

Bagaimanapun, salin teks itu, dari selector ke kurung tutup, seperti yang kami lakukan di atas, ke dalam stylesheet Anda. Dalam hal ini, tidak perlu menghapus selector yang tidak digunakan karena font-family adalah satu-satunya. Simpan dan unggah file Anda.

Anda dapat melihat dalam kode di atas saya telah menambahkan beberapa baris sebagai komentar, terbungkus karakter berikut /* untuk membukanya dan kemudian, */ untuk menutupnya. Saya sarankan Anda membuat kebiasaan meninggalkan catatan sendiri dengan cara ini sehingga nanti Anda dapat dengan mudah menemukan apa yang Anda lakukan dalam kode Anda.

Hal berikutnya yang saya lakukan adalah mulai memeriksa situs yang ada dengan Inspektur saya dan memilih semua elemen yang warnanya ingin saya ubah ... dan ada cukup banyak daftar.

1

/* First, the site Heading Colour*/

2

.site-header .home-link {

3

	color: #ffffff;

4

}

Selanjutnya, bilah navigasi dan tautan

1

/* Nav Section Header edits */

2

3

.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {

4

	color: #0A6EBC; /*Link Colour */

5

}

6

7

.toggled-on .nav-menu li:hover > a,

8

.toggled-on .nav-menu .children a {

9

	color: #121314; /* Active Link Colour */

10

}

11

12

.toggled-on .nav-menu li a:hover,

13

.toggled-on .nav-menu ul a:hover {

14

	background-color: #2e51dc; /* Hover Link Colour */

15

}

16

17

navigation a {

18

	color: #2AB9E6; /* Link Colour */

19

}

20

21

.navigation a:hover {

22

	color: #2091B4; /* Hover Colour */

23

}

24

25

ul.nav-menu ul a:hover,

26

.nav-menu ul ul a:hover {

27

	background-color: #2e7fdc; /* Hover Background*/

28

}

Oke, jadi sekarang Anda sudah mendapatkan dasar-dasar apa yang mungkin Anda bisa secara sistematis mengunjungi situs yang diterbitkan, mencari selector yang ingin Anda edit dan bermain dengan mereka di inspektur Anda, sesuaikan pengaturan, salin dan tempel perubahan baru Anda ke dalam stylesheet tema anak!

Saya bisa memberi Anda daftar semua perubahan yang telah saya buat pada stylesheet agar Twenty Thirteen tampak seperti pada contoh gambar ini, tapi di mana asyiknya?

Kesimpulan

Sambil melihat kode situs di Developer Tool itu bisa sangat luar biasa. Tetapi ketika Anda terbiasa dengan bagaimana CSS berhubungan, dan bertindak, elemen HTML Anda akan mulai melihat apa kemungkinannya. Ini adalah dunia yang menantang dan menyenangkan untuk dijelajahi! Jadi, luangkan waktu bermain-main dengan tema minggu ini dan lihat apakah Anda dapat membuatnya terlihat seperti gambar biru di atas.

Minggu depan, sebelum kita memposting pelajaran berikutnya saya akan memberi Anda stylesheet yang membuat Twenty Thirteen warna biru yang indah ini.

P.S. Jika Anda masih merasa sedikit bingung dengan HTML dan CSS, ingat, Anda dapat mengunjungi 30 Hari untuk Belajar HTML dan CSS: Kursus Premium Gratis Tuts+