Mengenal struktur CSS WordPress dengan lebih menyeluruh

Posted on October 9, 2010

0


WordPress sangat bergantung pada gaya presentasi dalam CSS. Dengan menggunakan Tema , Anda memiliki pilihan hampir tak terbatas pilihan tata letak. WordPress Theme memudahkan untuk mengubah tampilan situs web Anda, dan membuka lapangan untuk membantu Anda membuat Tema anda sendiri dan tata letak halaman.

CSS singkatan dari Cascading Style Sheets. Hal ini memungkinkan Anda untuk menyimpan informasi presentasi gaya (seperti warna dan tata letak) terpisah dari struktur HTML Anda. Hal ini memungkinkan kontrol ketepatan tata letak situs web Anda dan membuat halaman Anda lebih cepat dan lebih mudah untuk mengupdate.

Artikel ini secara ringkas menjelaskan penggunaan CSS di WordPress, dan daftar beberapa referensi untuk informasi lebih lanjut. Untuk informasi mengenai CSS itu sendiri, lihat Mengenal Sumber Your # CSS .

Isi

[hide]

WordPress dan CSS

WordPress Tema menggunakan kombinasi dari file templatetag template , dan file CSS untuk menghasilkan tampilan situs WordPress Anda.

File template
file Template adalah blok bangunan yang datang bersama-sama untuk membuat situs Anda. Dalam struktur Theme WordPress , header, sidebar, konten, dan footer semua terkandung dalam file individual. Mereka bergabung bersama-sama untuk membuat halaman Anda. Hal ini memungkinkan Anda untuk menyesuaikan blok bangunan. Sebagai contoh, di default WordPress Theme, post-tampilan multi ditemukan di halaman depan, kategori,arsip , dan mencari halaman web di situs Anda, sidebar hadir. Klik pada posting, Anda akan dibawa ke tampilan single post dan sidebar sekarang akan hilang. Anda dapat memilih bagian mana dan potongan muncul pada halaman Anda, dan menyesuaikan mereka secara individu, yang memungkinkan untuk sebuah header yang berbeda atau sidebar untuk tampil di semua halaman dalam kategori tertentu. Dan banyak lagi. Untuk pengenalan lebih luas Template, lihatStepping Into Template .
Tag template
tag Template adalah bit kode yang menyediakan instruksi dan permintaan untuk informasi yang disimpan dalam database WordPress. Beberapa ini adalah sangat dapat dikonfigurasi, memungkinkan Anda untuk menyesuaikan tanggal, waktu, daftar, dan elemen lain yang ditampilkan di situs Web Anda. Anda dapat mempelajari lebih lanjut tentang tag template di Template Melangkah Ke Tag .
Stylesheet
File CSS adalah tempat itu semua datang bersama-sama. Pada setiap file template di dalam situs Anda ada elemen HTML melilit tag template dan konten. Dalam stylesheet dalam setiap Tema aturan untuk mengontrol desain dan tata letak setiap elemen HTML. Tanpa petunjuk ini, halaman Anda hanya akan terlihat seperti halaman diketik panjang.Dengan petunjuk ini, Anda dapat memindahkan struktur bangunan blok di sekitar, membuat header Anda sangat panjang dan penuh dengan gambar atau foto, atau sederhana dan sempit. Situs Anda bisa “mengambang” di tengah layar pemirsa dengan ruang di kiri dan kanan, atau peregangan di layar, mengisi seluruh halaman. sidebar Anda dapat berada di kanan atau kiri, atau bahkan mulai tengah bawah halaman. Bagaimana Anda gaya halaman Anda adalah terserah Anda. Tetapi instruksi untuk styling ditemukan dalam file style.css dalam setiap folder Tema.

WordPress Generated Kelas

Beberapa kelas untuk gambar menyelaraskan dan elemen blok (div, p, dll tabel) diperkenalkan di WordPress 2.5:aligncenter, alignleft dan alignright. Selain itu alignnone kelas akan ditambahkan ke gambar yang tidak selaras, sehingga mereka bisa ditata berbeda jika diperlukan.

Kelas-kelas yang sama digunakan untuk menyelaraskan gambar yang memiliki judul (pada WordPress 2.6). Tiga kelas CSS tambahan diperlukan untuk keterangan, bersama-sama kelas penyelarasan dan keterangan adalah:

 aligncenter,. div.aligncenter {
	 display: block;
	 margin-left: auto;
	 margin-right: auto;
 )
 . Alignleft {
	 float: kiri;
 )
 alignright {.
	 float: right;
 )
 wp-. caption {
	 background-color: # f3f3f3;
	 border: 1px solid # ddd;
	 -KHTML-border-radius: 3px;
	 -Moz-border-radius: 3px;
	 -Webkit-border-radius: 3px;
	 border-radius: 3px; / * sudut dibulatkan opsional untuk browser yang mendukung * /
	 margin: 10px;
	 padding-top: 4px;
	 text-align: center;
 )
 wp-caption img. {
	 border: 0 none;
	 margin: 0;
	 padding: 0;
 )
 wp-caption p.wp.-keterangan-text {
	 font-size: 11px;
	 line-height: 17px;
	 margin: 0;
	 padding: 0 4px 5px;
 )

Setiap Theme harus memiliki ini atau gaya serupa dalam file style.css untuk dapat menampilkan gambar dan keterangan dengan benar. HTML tepat unsur-unsur dan nilai-nilai kelas dan ID akan tergantung pada struktur Tema yang Anda gunakan.

Template dan CSS

Untuk membantu Anda memahami lebih banyak tentang bagaimana CSS bekerja dalam hubungan ke halaman web Anda, Anda mungkin ingin membaca beberapa artikel dikutip dalam daftar ini:

  • Menggunakan Tema – Ada juga artikel canggih dalam daftar ini.
  • Template – Komprehensif daftar WordPress Theme dan artikel Template.
  • Pengembangan tema – WordPress Theme Pengembangan Pedoman dan kode standar.

WordPress Layout Bantuan

Jika Anda mengalami beberapa masalah atau pertanyaan tentang Anda WordPress Theme atau tata letak, mulailah dengan memeriksa situs penulis Theme untuk melihat apakah ada upgrade atau jawaban atas pertanyaan Anda. Berikut adalah beberapa sumber daya lain:

Sumber Daya CSS

 

Posted in: komputer 1