Cara Mengkonversi HTML Template Statis menjadi tema WordPress Responsif Part-2

Tutorial WordPress rinci ini akan menunjukkan cara untuk mengkonversi template web HTML statis menjadi tema WordPress yang akan berfungsi penuh.

Untuk mulai mengkonversi tema NeoBlog WordPress. Pertama buat folder tema dalam direktori wp-content / themes di folder instalasi WordPress. Harap perhatikan bahwa nama folder harus sesuai dengan nama tema yang ingin kita buat.

File Template

Dibandingkan dengan statis situs HTML dan CSS, tema WordPress terdiri dengan sekelompok file template. Ini adalah file yang berisi kode untuk membuat tema WordPress bekerja. Untuk melakukan ini, membuat file berikut ke dalam direktori tema:

• folder css – Folder ini berisi semua stylesheet. Salin folder ini dari folder HTML dan tema CSS.
• font folder – Folder ini berisi semua font eksternal digunakan di markup. Salin folder ini dari NeoBlog HTML dan tema CSS.
• images folder – folder ini berisi semua gambar seperti logo dan sebagainya. Folder ini akan disalin dari NeoBlog HTML dan tema CSS.
• js folder – folder ini berisi semua javascripts. Juga, copy ini dari NeoBlog HTML dan tema CSS.
• header.php – File ini akan berisi kode untuk bagian header dari tema.
• footer.php – File ini akan berisi kode untuk bagian footer dari tema.
• index.php – ini adalah file utama untuk tema. Ini akan berisi kode untuk Main Area dan menentukan di mana file lainnya akan dimasukkan.
• functions.php – Berkas ini berperilaku seperti Plugin WordPress, menambahkan fitur dan fungsionalitas ke situs WordPress.
• single.php – File ini akan berisi tata letak dasar dari halaman blog.
• page.php – File ini akan berisi tata letak dasar dari halaman.
• page-about.php – ini adalah WordPress built-in Pos Jenis Template. Jika halaman tertentu, atau kelompok halaman harus berperilaku atau menampilkan yang berbeda, ini mudah dicapai dengan halaman template ini. Untuk template ini, itu akan menampilkan tata letak halaman Tentang
• Halaman-contact.php – Tipe lain dari WordPress built-in Pos Jenis Template. template ini akan menampilkan formulir kontak pada halaman itu diatur.
• konten-search.php – File ini akan menjalankan loop untuk pencarian untuk output hasil.
• search.php – File ini bertanggung jawab untuk menampilkan halaman hasil pencarian.
• searchform.php – File ini berisi tata letak form pencarian.
• comments.php – File ini akan berisi kode untuk menampilkan komentar.
• sidebar.php – File ini akan berisi area widget sidebar.
• 404.php – File ini akan mengembalikan “Tidak Ditemukan” pemberitahuan jika permintaan pencarian tertentu tidak ditemukan atau tidak ada dalam database.
• style.css – File ini akan mencakup semua gaya dan informasi dari tema NeoBlog.
• screenshot – file gambar png, yang harus secara akurat menunjukkan desain tema atau judul tema.
Selama tutorial ini, kode akan ditambahkan ke file-file ini yang akan mencakup menu, kait, loop dan widget

Untuk memulai, salin css, font, gambar dan folder js dari NeoBlog HTML dan tema CSS ke folder tema NeoBlog WP.

Sebelum menyatakan dengan file template, pertama menambahkan link dari stylesheet dari NeoBlog HTML dan tema CSS dengan tema NeoBlog WP. Pergi ke depan dan membuat file style.css

Sekarang tema telah berhasil bernama melalui berkas style.css, menambahkan screenshot dari tema. Buat file px 880 x 660 di Photoshop dan menempatkan teks judul, deskripsi singkat dan penulis tema di atasnya.

screenshot hanya akan ditampilkan sebagai 387x 290 px pada panel admin WordPress, tetapi lebih dari gambar berukuran ganda memungkinkan untuk resolusi tinggi melihat pada layar HiDPI.

Setelah menambahkan screenshot dari tema, mengaktifkan tema NeoBlog WP. Tapi sebelum melakukan itu, untuk memeriksa apakah tema bekerja atau tidak, buat pertama index.php kosong di direktori root dari tema NeoBlog WP (jangan khawatir kode akan ditambahkan pada ini nanti).
Berikutnya, mengaktifkan tema, pergi ke admin panel dan mouse WordPress mouse Anda ke Appearance -> Tema. Klik pada tombol Aktifkan.


Tags: #tips blog #trik blog #tutorial blog

Cara Factory Reset Infinix Mudah dan Cepat
Cara Factory Reset Infinix Mudah dan Cepat
Jika Anda memiliki ponsel Infinix, Anda
Membuat Blog Agar lebih telihat menarik dan nyaman dilihat
Membuat Blog Agar lebih telihat menarik dan nyaman dilihat
Membuat Blog Agar lebih telihat menarik dan
Cara Mengatasi Insufficient Memory Android
Cara Mengatasi Insufficient Memory Android
Smartphone menjadi perangkat yang sudah semakin
Proses suatu blog agar terindex oleh Google
Proses suatu blog agar terindex oleh Google
Proses suatu blog agar terindex oleh Google
Cara Bypass Huawei E5577 Dengan Mudah
Cara Bypass Huawei E5577 Dengan Mudah
Anda pernah mendengar istilah bypass? Dalam
Strategi dan Tips Main Saham ala Warren Buffett
Strategi dan Tips Main Saham ala Warren Buffett
Pernah mendengar saham Warren Buffet? Atau
Tips dan Trik Mengubah Tampilan Windows 7
Tips dan Trik Mengubah Tampilan Windows 7
Sebagian orang tentunya sering merasa bosan
Cara Menambahkan Gambar Background Di WordPress Part II
Cara Menambahkan Gambar Background Di WordPress Part II
Cara Menambahkan Gambar Background Di WordPress Part
Must read×

Top
web statistics