Tutorial WordPress: Cara Membuat Tema WordPress dari HTML (Bagian 1)

  1. 1. Sedang membaca: Tutorial WordPress: Cara Membuat Tema WordPress dari HTML (Bagian 1)
  2. 2. Tutorial WordPress: Cara Membuat Tema WordPress Dari HTML (Bagian 2)
  3. 3. Pengantar Anatomi Tema WordPress

Jika Anda mulai dengan situs web HTML (+ CSS), Anda tidak perlu membuang semuanya saat pindah ke WordPress. Anda dapat mengkonversi HTML Anda ke WordPress dan menjalankan situs web Anda (sekarang lebih kuat) pada platform WordPress dinamis.


Atau mungkin bukan itu masalahnya. Mungkin Anda hanya ingin tahu bagaimana mengubah desain HTML klien menjadi tema WordPress yang lengkap. Atau mungkin Anda ingin belajar pemrograman WordPress dasar (+ PHP) dari sisi HTML yang lebih akrab.

Apa pun alasan Anda berada di sini hari ini, tutorial WordPress ini akan memperkenalkan Anda pada dasar-dasar membuat tema WordPress dari HTML. Anda dapat mengikuti panduan ini untuk membuat tema Anda dari awal atau Anda dapat menuju ke Github dan mengunduh tema pemula WPExplorer yang menyediakan “kanvas kosong” untuk membuat tema Anda dengan semua file templat yang diperlukan dan kode untuk memulai. Jadi, jika Anda adalah salah satu dari orang-orang yang lebih suka belajar dengan membaca kode lalu mengunduh tema starter, lewati panduan dan lihat bagaimana hal-hal bekerja … Jika tidak, dapatkan editor kode (saya menggunakan dan merekomendasikan Notes++, atau SublimeText) dan browser siap, lalu ikuti panduan sederhana ini sampai akhir.

Penamaan Tema WordPress Anda

Hal pertama yang pertama, kami harus memberi nama Anda tema yang unik, yang tidak perlu jika Anda membuat tema hanya untuk situs web Anda. Apa pun itu, kami perlu memberi nama tema Anda agar mudah dikenali saat pemasangan.

Asumsi umum pada titik ini:

  • Anda sudah menyiapkan indeks.html dan CSS stylesheet Anda.
  • Anda memiliki instalasi WordPress yang berfungsi dengan setidaknya satu tema, mis. Dua puluh empat belas
  • Anda telah membuat folder tema tempat Anda menyimpan tema WordPress baru Anda ��

Mari kita kembali ke penamaan tema WordPress Anda. Buka editor kode Anda dan salin-tempel konten stylesheet Anda ke file baru dan simpan sebagai style.css di folder tema Anda. Tambahkan informasi berikut di bagian paling atas style.css yang baru dibuat:

/ *
Nama Tema: Nama tema Anda
Tema URI: URL tema Anda
Deskripsi: Deskripsi singkat tema Anda
Versi: 1.0 atau versi lain yang Anda inginkan
Penulis: Nama Anda atau nama pengguna WordPress.org
Penulis URI: Alamat web Anda
Tag: Tag untuk menemukan tema Anda di repositori tema WordPress
* /

Jangan tinggalkan tag komentar (/ * … * /). Simpan perubahannya. Info ini memberitahu WordPress nama tema Anda, penulis, dan hal-hal gratis seperti itu. Bagian yang penting adalah nama tema, yang memungkinkan Anda memilih dan mengaktifkan tema Anda melalui dasbor WP.

Memecah Template HTML Anda menjadi File PHP

Tutorial ini selanjutnya mengasumsikan Anda memiliki template HTML Anda diatur dari kiri ke kanan: header, konten, sidebar, footer. Jika Anda memiliki desain yang berbeda, Anda mungkin perlu sedikit bermain dengan kode tersebut. Sangat menyenangkan dan sangat mudah.

Langkah selanjutnya melibatkan membuat empat file PHP. Menggunakan editor kode Anda, buat index.php, header.php, sidebar.php dan footer.php, dan simpan di folder tema Anda. Semua file kosong pada saat ini, jadi jangan berharap mereka melakukan apa pun. Untuk tujuan ilustrasi, saya menggunakan file index.html dan CSS stylesheet berikut:

INDEX.HTML




Cara Mengonversi Template HTML ke Tema WordPress - WPExplorer



Ini adalah bagian tajuk. Letakkan logo Anda dan detail lainnya di sini.

Ini adalah area konten utama.

Dan ini adalah catatan kaki.

CSS STYLESHEET

#wrap {margin: 0 auto; lebar: 95%; margin-top: -10px; tinggi: 100%;}
.header {lebar: 99,8%; perbatasan: 1px solid # 999; tinggi: 135px;}
.konten {lebar: 70%; border: 1px solid # 999; margin-top: 5px;}
.sidebar {float: right; margin-top: -54px; lebar: 29%; perbatasan: 1px solid # 999;}
.footer {width: 99.8%; border: 1px solid # 999; margin-top: 10px;}

Anda dapat mengambil kedua kode jika tidak ada yang bisa dikerjakan. Cukup salin dan tempel ke editor kode Anda, simpan, buat empat file PHP yang baru saja kami sebutkan dan bersiap-siap untuk bagian selanjutnya. Buka yang baru dibuat (dan kosong) header.php. Masuk ke instalasi WordPress Anda yang ada, navigasikan ke Penampilan – >> Editor dan buka header.php. Salin semua kode antara tag dan tempel ke file header.php Anda. Berikut ini adalah kode yang saya dapatkan dari file header.php dalam tema Twenty Fourteen:




<?php wp_title( '|', true, 'right' ); ?>




Lalu buka index.html file dan salin kode tajuk (mis. kode dalam

bagian) ke header.php Anda tepat di bawah tag seperti yang ditunjukkan di bawah ini:




<?php wp_title( '|', true, 'right' ); ?>







Ini adalah bagian tajuk. Letakkan logo Anda dan detail lainnya di sini.

Kemudian tambahkan …

… di mana saja di antara tag di file header.php untuk menautkan stylesheet Anda. Ingat juga untuk meletakkan dan membuka tag di header.php seperti yang ditunjukkan di atas. Simpan semua perubahan.

Salin bagian kedua (yaitu.

dari index.html ke index.php yang baru dibuat , dan tambahkan…

… di bagian paling atas dan …


… ke dasar absolut. Tiga baris ini mengambil header.php, sidebar.php dan footer.php (dalam urutan itu) dan menampilkannya di index.php, yang menempatkan kode Anda kembali. Simpan semua perubahan. Pada titik ini, file index.php Anda akan terlihat seperti:



Kemudian salin konten dari bagian sidebar dan footer di index.html Anda masing-masing ke sidebar.php dan footer.php.

Menambahkan Posting

Template HTML Anda akan berubah menjadi tema WordPress. Kami hanya perlu menambahkan posting Anda. Jika Anda memiliki posting di blog Anda, bagaimana Anda menampilkannya dalam tema “HTML-to-WordPress” yang dibuat khusus? Anda menggunakan tipe khusus fungsi PHP yang dikenal sebagai Loop. Loop hanyalah potongan kode khusus yang menampilkan posting dan komentar Anda di mana pun Anda meletakkannya.

Sekarang, untuk menampilkan posting Anda di bagian konten templat index.php, salin dan tempel kode berikut di antara

dan

tag seperti yang ditunjukkan di bawah ini:

>

Itu akan menangani posting Anda. Semudah ABC. Pada titik ini (dan menggunakan file sampel yang disediakan dalam tutorial ini), header.php Anda akan terlihat seperti ini:




<?php wp_title( '|', true, 'right' ); ?>




Sidebar.php Anda akan terlihat seperti ini:

Footer.php Anda akan terlihat seperti ini:

Dan ini adalah catatan kaki

Apakah Anda memperhatikan penutupan dan tag di footer? Jangan lupa untuk memasukkannya juga.

Style.css Anda akan terlihat seperti ini:

/ *
Nama Tema: Membuat Tema WordPress dari HTML
Tema URI: http://wpexplorer.com
Deskripsi: Tema ini menunjukkan kepada Anda cara membuat tema WordPress dari HTML
Versi: 1.0
Penulis: Freddy untuk @WPExplorer
Penulis URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Tag: wpexplorer, tema khusus, HTML ke WordPress, buat tema WordPress
* /
tubuh {
font-family: arial, helvetica, verdana;
ukuran font: 0.8em;
lebar: 100%;
tinggi: 100%;
}

.tajuk {
warna latar: # 1be;
margin-kiri: 14%;
atas: 0;
lebar-perbatasan: 0,1em;
warna perbatasan: # 999;
gaya perbatasan: solid;
lebar: 72%;
tinggi: 250px;
}

.kandungan {
warna latar: # 999;
margin-kiri: 14%;
margin-top: 5px;
mengapung: kiri;
lebar: 46%;
lebar-perbatasan: 0,1em;
warna perbatasan: # 999;
gaya perbatasan: solid;
}

.sidebar {
warna latar: # 1d5;
margin-right: 14%;
margin-top: 5px;
mengapung: benar;
lebar-perbatasan: 0,1em;
warna perbatasan: # 999;
gaya perbatasan: solid;
atas: 180px;
lebar: 23%;
}

.footer {
background-color: merah;
margin-kiri: 14%;
mengapung: kiri;
margin-top: 5px;
lebar: 72%;
tinggi: 50px;
lebar-perbatasan: 0,1em;
warna perbatasan: # 999;
gaya perbatasan: solid;
}

Dan index.php Anda akan terlihat mirip dengan:





Lagi – ini didasarkan pada situs web kiri ke kanan dengan tajuk, konten, bilah sisi, tata letak footer. Apakah kamu mengikuti? Semua lima file harus disimpan di folder tema Anda. Beri nama folder apa pun yang Anda inginkan dan kompres menjadi arsip ZIP menggunakan WinRar atau program yang setara. Unggah tema baru Anda ke instalasi WordPress Anda, aktifkan dan lihat tema Anda yang dikonversi sedang beraksi!

Itu mudah, bukan? Anda dapat mendesain tema Anda sesuka Anda, tetapi sebagian besar fitur yang kami sukai di WordPress masih tidak aktif karena … tutorial ini mencakup dasar-dasar pengubahan templat HTML menjadi WordPress dan seharusnya sangat berharga bagi Anda sebagai pemula. Dalam tutorial berikutnya, kita akan mengambil hal-hal yang lebih tinggi dan bermain-main dengan aspek lain dari pemrograman WordPress (seperti File Templat dan Tag Templat) yang memungkinkan Anda mengubah templat HTML Anda sesuka Anda. Tetap disini!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map