Template WordPress GeneratePress Fast: Ringan, Responsif, Valid, Gratis. Tema WordPress Responsif Tercepat Dasar Terpilih Tema WordPress termudah

Perlu diingat bahwa WordPress menghasilkan beberapa kelas yang harus ada di stylesheet. Misalnya kelas aligncenter, alignleft dan alignright berfungsi untuk menyelaraskan gambar dan elemen blok, dan mereka perlu dimasukkan dalam stylesheet Anda (Anda dapat menyalin dari stylesheet tema default):


.aligncenter,
div.aligncenter (
tampilan: blok;
margin-kiri: otomatis;
margin-kanan: otomatis;
}
.rata kiri (
mengapung: kiri;
}
.rata kanan (
mengapung: benar;
}

Kelas berikut digunakan untuk menyelaraskan gambar yang memiliki teks (dapat disalin dari tema default, nanti, jika perlu, benar):


.wp-caption (
perbatasan: 1px solid #ddd;
perataan teks: tengah;
warna-latar belakang: # f3f3f3;
padding-atas: 4px;
margin: 10 piksel;
/ * parameter opsional yang akan membuat sudut membulat di browser yang didukung * /
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
batas-radius: 3px;
}
.wp-caption img (
margin: 0;
bantalan: 0;
batas: 0 tidak ada;
}
.wp-caption p.wp-caption-text (
ukuran font: 11px;
tinggi garis: 17px;
bantalan: 0 4px 5px;
margin: 0;
}

Selain itu, ada beberapa kelas WordPress lagi yang tidak perlu dijelaskan di stylesheet. WordPress menghasilkan halaman menggunakan mereka, Anda juga dapat menatanya:


.kategori (...)
.cat-item / * Kelas ini ditugaskan ke semua kategori * /)
.current-cat (/ * gaya kategori saat ini * /)
.current-cat-parent (/ * style untuk parent dari kategori saat ini * /)
.anak-anak (/ * kelas anak * /)
.pagenav (/ * navigasi halaman * /)
.page_item (/ * item apa saja dalam daftar * /)
.current_page_item (/ * kelas ini ditetapkan dalam daftar halaman ke halaman yang sedang aktif * /)
.current_page_parent (/ * kelas untuk halaman induk relatif terhadap yang sekarang * /)
.current_page_ancestor (/ * halaman tingkat atas apa pun sehubungan dengan yang ini * /)
.widget (/ * semua widget dibungkus dalam kelas ini * /)

Dalam proses tata letak, gunakan blok dan gaya untuknya, seperti yang didefinisikan dalam tangkapan layar di awal artikel. Ini tidak perlu, tetapi sangat diinginkan.

Misalnya, di masa depan kami akan menghubungkan formulir pencarian ke situs melalui khusus. tag wordpress , akibatnya wordpress akan menampilkan formulir ini:

Oleh karena itu, kami mempertimbangkan hal ini saat mendesain tema.

Dan hal terakhir yang perlu Anda tambahkan ke style.css adalah informasi tentang diri Anda dan tema favorit Anda. Informasi ditempatkan di awal file dalam komentar:

/*
Nama Tema: Munculkan nama tema yang unik
URI Tema: http: // tautan-ke-tema-beranda
Deskripsi: Deskripsi tema
Penulis: Pemula Utas
URI Penulis: http: // tautan-ke-halaman-penulis
Templat: nama-tema leluhur
Tag: tag tema - hanya dari daftar yang disarankan oleh wordpress.org
Versi: versi
Nah, inilah teks lisensinya
*/

Juga jangan lupa lakukan tangkapan layar.png dan letakkan di folder template (di root). Informasi yang ditempatkan dengan cara ini di style sheet akan ditampilkan di panel admin di bagian Manajemen "tema"... Kami menguji template bawaan di browser, jika semua aturan, Anda bisa melangkah lebih jauh.

Saya tidak akan memberikan kode halaman template set, karena itu cukup besar, Anda cukup mengunduhnya, kemudian kami akan mengerjakannya.

Cara kerja tema wp:

Jika Anda membuka folder tema default (konten wp / tema / default), Anda akan melihat banyak file PHP (file tema) dan satu file style.css. Saat kita menelusuri blog, WP menyertakan file tema (index.php<

Ini melengkapi persiapan awal dan kita dapat melanjutkan ke pembuatan tema dari materi sumber yang ada.

Langkah 1:
Pertama, di direktori theme WordPress (wp-content/themes), buat folder dengan nama theme kita. Biarlah ruseller_lessons... Kemudian dari folder tema default (konten wp / tema / default) salin file komentar.php, cari.php dan 404.php ke folder tema kami. File-file ini bertanggung jawab atas komentar dan pencarian di blog. Kemudian di ruseller_lessons salin lembar gaya style.css templat kami, tangkapan layar.png (300x225) dan folder gambar-gambar.

Sekarang file template kita perlu "dipotong", yaitu. tarik file terpisah footer, sidebar dan header. Diagram menunjukkan tampilan file yang disederhanakan index.php dengan tanda yang dengannya kami akan memotongnya:

Langkah 2 - Header.php
Kita buka index.html dan gunting semua yang ada sebelum komentar, buat file baru header.php dan rekatkan kode yang dipotong ke dalamnya, simpan di direktori tema kami ruseller_lessons:






index.html






Sekarang buka folder dengan tema default, buka header.php dan salin tag dari sana , <link>, <h1>, dan <div class=description> </b> dan ganti dengan baris yang sesuai di . kami <b>header.php</b>.</p> <p>Kemudian semua tag <li>terletak <b>id = "nav"</b>(daftar halaman di bagian atas blog) pengganti fungsi wordpress</p> <p><b> <?php wp_list_pages("sort_column=menu_order&depth=1&title_li=");?> </b></p> <p>Hasilnya, kita mendapatkan:</p><p> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title><?php wp_title("«", true, "right"); ?> <?php bloginfo("name"); ?>
"type =" teks / css "media =" layar "/>
" />





Langkah 3 - Bilah Sisi.php
Kembali ke file index.htm. Pertama-tama, kami menghapus seluruh formulir pencarian, lalu kami memotong semuanya dari