Bagi yang belum membaca apa saja yang harus dipersiapkan bisa mengunjungi ini : Persiapan Membuat Tema Wordpress
Bagi yang sudah silakan lanjutkan membaca dan praktikan ya.
Sebelumnya untuk membuat program saya disini menggunakan notepad++. Bagi yang ingin menggunakan notepad++ juga bisa didownload di sini.
#1 : DASAR-DASAR MEMBUAT TEMA WORDPRESS
Pertama-tama persiapkan atau buat folder terlebih dahulu dengan nama terserah anda didalam folder theme yang terletak di C:\xampp\htdocs\wordpress\wp-content\themes\. Disini saya akan membuat tema bernama contoh, maka saya membuat folder bernama contoh di dalam folder themes tersebut. Selanjutnya saya akan menyiapkan file yang disimpan didalam folder C:\xampp\htdocs\wordpress\wp-content\themes\contoh\ :
- footer.php
- header.php
- index.php
- sidebar.php
- style.css
footer.php berisi kode untuk menampilkan desain footer agan, header.php untuk menampilkan desain header, sidebar.php untuk menampilkan desain pinggir atau samping content agan, index.php untuk pemanggilan header.php, sidebar.php, footer.php, style.css, dan lain-lain . Jika diblogspot yang bertugas menampilkan halaman home atau halaman awal dari blogspot adalah index.php nya. Langsung saja saya akan memulai coding :
header.php :
<!DOCTYPE html>
<html lang="en">
<head>
<title> <?php bloginfo('title'); ?> </title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="container">
<div id="header">
<div style="font-size:22px;color:#090909;padding-top:20px;padding-left:20px;">
<b><?php bloginfo('name'); ?></b>
</div>
<div style="font-size:18px;color:#3a3a3a;padding-left:20px;">
<?php bloginfo('description'); ?>
</div><br/><br/>
<a href="<?php bloginfo('url');?>" class="menu-header">Home</a>
</div>
<!-- #header END -->
Copykan kode diatas ke header.php. Disini saya hanya akan membahas hanya kode wordpressnya saja ya gan. Untuk tutorial css dan html bisa dicari di google. Untuk penulisan kode header.php diatas tidak pakai penutup </body> dan </html> . Penutup </body> dan </html> dari kode tersebut akan diletakkan pada footernya. Fungsi-fungsi pada kode wordpress diatas :
<?php bloginfo('title'); ?> berfungsi untuk menampilkan judul dari website agan.
<?php bloginfo('stylesheet_url'); ?> untuk menggunakan style.css yang tadi sudah dibuat, cukup gunakan dan letakan kode tersebut pada href nya, jadi kode tersebut adalah alamat style.css berada.
<?php bloginfo('name'); ?> berfungsi untuk menampilkan nama blog agan.
<?php bloginfo('description'); ?> berfungsi untuk menampilkan deskripsi dari blog agan.
<?php bloginfo('url');?> ini adalah alamat dari home atau index.php blog agan.
sidebar.php :
<div id="sidebar">
sidebar
</div>
Kode diatas untuk mendesain sidebar atau sisi dari konten. Berikut adalah tataletaknya :
footer.php :
<div id="footer">
Copyright © 2018| <a href="http://www.contoh.com">contoh.com</a>
</div>
<br></div><br>
</body>
</html>
Kode diatas untuk mendesain footernya. Dimana semua kode yang dipanggil di header.php belum ditutup, makanya ditutup nya disini dengan </> .
<div id="footer"></div> Kode css ini berfungsi untuk memanggil id footer yang sudah dideklarasikan di style.css .
style.css :
/*
Theme Name: Mada's theme
Theme URI: https://massmada.blogspot.co.id/
Author: mada
Author URI: https://massmada.blogspot.co.id/
Description: Belajar membuat theme wordpress
Version: 0.1
License: GNU General Public License v2 or later
License URI: gnu.org/licenses/gpl-2.0.html
Text Domain: Mada's theme
*/
.clear{
clear:both;
}
body{
font-family: 'Open Sans', sans-serif;
padding:0px; margin:0px;
background: #EEE;
}
#container{
background: #FFF;
width: 1100px;
margin: 0px auto;
height: 100%;
}
#header{
height: 140px;
background: #1ed8c9;
}
.menu-header{
background:#f1f1f1;
padding:5px;
border-radius:3px;
text-decoration:none;
color:#000;
margin-left:20px;
border-bottom:4px solid #cfcfcf;
}
#content{
width: 700px;
padding:10px;
float:left;
margin-left:50px;
}
#content .daftar-posting{
font-size:13px;
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
}
#content .daftar-posting h1{
font-size:22px;
}
#sidebar{
float:right;
width:300px;
padding:10px;
height:100%;
}
#footer{
background: #333;
color:#FFF;
font-size: 12px;
text-align: center;
padding:10px;
}
#footer a{
color:#FFF;
}
Kode diatas berfungsi untuk pengaturan desainnya. Sebenarnya dalam 1 website cms wordpress dapat mempunyai banyak pemanggilan file css. Untuk pemanggilan yang tidak hanya 1 file css dapat dilakukan pada functions.php . Penjelasan part selanjutnya akan saya jelaskan. Kode di bawah ini yang terdapat di atas juga penting ya, kode dibawah ini akan menampilkan nama, deskripsi, dll dari theme agan pada admin wordpress agan. Berikut adalah penjelasannya:
/*
Theme Name: Nama tema agan
Theme URI: Alamat website tema
Author: Nama pembuat
Author URI: Alamat pembuat tema
Description: Deskripsi dari tema gan
Version: Versi tema
License: Lisensi tema
License URI: Alamat lisensi
Text Domain: Domain agan
*/
Hasil dari kode diatas akan berpengaruh pada halaman theme pada admin di wp-admin.
Dibawah adalah hasilnya :
index.php :
<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) :
while (have_posts()) :
the_post();
?>
<br>
<div class="daftar-posting">
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?> at <?php the_time('g:i a'); ?> </h4>
<p><?php the_content(__('(more...)')); ?></p><br>
</div>
<?php
endwhile;
else: ?>
<p>
<?php _e('Maaf posting tidak tersedia'); ?></p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<br />
<div class="clear"></div>
<?php get_footer(); ?>
Index sebenarnya adalah halaman home. Di index.php tempat pemanggilan footer.php, header.php, style.css dll. Jadi header, footer, content, sidebar dan lainnya yang dipisahkan akan digabungkan di index.php ini sehingga akan menjadi tampilan web yang utuh. Untuk lebih memahami tentang kode diatas, dibawah adalah penjelasannya :
<?php get_header(); ?> Kode ini berfungsi untuk memanggil header, file yang dipanggil adalah header.php. Jadi desain header akan tampil di index.php ini.
Ingat kode :
if(pernyataan) :
//kodenya
else:
//kodenya
endif;
Sama dengan if(pernyataan){ //kodenya } else { //kodenya }
Untuk perulangan while() juga sama seperti diatas.
<?php if (have_posts()) : ?> Cara membacanya "Jika mempunyai postingan" atau have_posts() maka akan menjalan kan kode dibawahnya.
<?php while (have_posts()) : ?> Untuk menampilkan semua postingan yang tersedia kita menggunakan while(){} , lalu dalam parameter while() diberikan fungsi have_posts() agar setiap postingan dapat tampil.
the_post() untuk menerima data pada saat looping, jadi agar setiap postingan dapat ditampilkan kode ini juga diperlukan.
the_title() Untuk menampilkan judul dari postingan.
the_time() untuk menampilkan waktu posting.
the_time('F jS, Y') Untuk menampilkan kapan postingan diposting. F itu untuk menampilkan bulan, jS untuk menampilkan tanggan dan Y untuk menampilkan tahun.
the_time('g:i a') untuk menampilkan jamnya, dimana g untuk menampilkan jam, i untuk menampilkan menit, dan a untuk menampilkan am atau pm.
the_content(__('(more...)')) atau the_content() Untuk menampilkan konten atau isi dari postingan.
_e('Maaf posting tidak tersedia') atau _e() Untuk menampilkan tulisan 'Maaf posting tidak tersedia'. Sebenarnya kode _e() sama fungsi nya dengan echo ""; pada pemrograman PHP. Bedanya jika di wordpress kode _e() dapat difungsikan untuk menampilkan tulisan sesuai bahasa yang dipilih, misalnya jika website tersebut mempunyai 2 bahasa (bahasa indonesia dan inggris) dan jika yang dipilih bahasa inggris, maka jika menggunakan kode _e() maka yang ditampilkan teks berbahasa inggrisnya (ingat tidak hanya menggunakan kode itu saja, masih ada kode yang lainnya).
get_sidebar() berfungsi untuk menampilkan atau memanggil sidebar.php dimana hasil berupa desain dan konten yang ada pada sidebar akan tampil pada index.php ini .
get_footer() berfungsi untuk menampilkan atau memanggil footer.php dimana hasil berupa desain dan konten yang ada pada footer akan tampil pada index.php ini .
#HASILNYA
Agan masuk dahulu ke admin wordpress agan, lalu pilih tampilan dan klik tema atau themes. Kemudian klik tombol sesuaikan :
Jika sudah tersetting maka hasilnya dari kita yang sudah capek-capek menulis seperti diatas, maka akan jadi seperti ini :
Untuk tutorial selanjutnya saya akan sambung di part 3 ya gan 😁
Bagikan
Membuat Tema atau Theme Wordpress Dari Nol Part 2
4/
5
Oleh
Bayu Ambika
Silahkan berkomentar secara bijak dan sesuai dengan topik pembahasan ...
Untuk menyisipkan kode pendek, gunakan <i rel="code"> ... KODE ... </i>
Untuk menyisipkan kode panjang, gunakan <i rel="pre"> ... KODE ... </i>
Untuk menyisipkan gambar, gunakan <i rel="image"> ... URL GAMBAR ... </i>