Persiapan Membuat Template Wordpress Sendiri

Persiapan Membuat Template WordPress Sendiri

December 13, 2018
oleh Edusoft Center

Adapun yang harus dipersiapkan untuk membuat template wordpress:

Sudah Memahami HTML, CSS, Javascript, dan PHP
Teks Editor
WordPress yang sudah terinstal di localhost atau server

Pemahaman terhadap kode HTML, CSS, Javascript, dan PHP akan sangat membantu sekali dalam pembuatan template.

Konstruksi Awal Template

Semua template wordpress akan disimpan pada direktori wp-content/themes/. Di sanalah kita akan membuat tema baru.

Silahkan buat direktori baru di sana dengan nama temanya. Contoh: nama tema yang akan saya buat adalah petanikode.

Kita akan meletakan semua file tema di dalam direktori tersebut. Pada tahapan awal pembuatan tema ini, kita buat dulu dua file penting, yaitu:

index.php
dan style.css

File index.php adalah file utama yang akan diaksess saat website dibuka (homepage). Sementara itu, file style.css berisi kode CSS untuk menghias dan mengatur tampilan tema.

Isi file index.php

<!DOCTYPE html>
<html>
    <head>
         <title>Tema Wp pertama</title>
    </head>

<body>
    <h1>Hello world, ini adalah tema WordPress perama saya</h1>
    <p>dibuat dari nol dengan penuh semangat<p>
</body>
<html>

dan isi file sytle.css

/*
Theme Name: Petani Kode
Author: Ardianta Pargo
Author URI: https://ardianta.github.io
Version: 0.1
Description: Tema ini untuk belajar membuat tema dari nol. Saat ini isinya masih sedikit karena masih dasar. Insa’allah nanti akan menjadi makin banyak.
*/

Perhatikan!

Di dalam kode style.css berisi komentar yang akan menjadi meta data atu keterangan dari template.

Theme Name adalah nama tema
Author adalah nama pembuat tema atau developer
Author URI adalah alamat website pembuat tema
Version adalah versi tema
Description adalah keterangan singkat tentang tema

Contoh kode css untuk meta data yang lebih lengkap:

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Keterangan:

Theme URI adalah alamat website tema
License adalah lisensi tema
License URI adalah alamat lisensi tema
Tag tag untuk tema

Ujicoba Template WordPress

Sekarang saatnya kita mengujicoba template yang baru saja kita buat.

Masuk ke wp-admin>appearance>themes, di sana kita akan menemukan sebuah tema tanpa gambar thumbnail. Itu adalah tema yang baru saja kita buat. Silahkan aktifkan tema tersebut.

Setelah itu, coba buka website wordpress-nya.

Hore! selamat.

Untuk mempercepat pemahaman ini, daftar segera kursus komputer di Edusoft Center. Ada puluhan paket kursus dengan trainer yg handal dan berpengalaman.

Info selengkapnya bisa hubungi

Office : 0271 745 2187
No XL : 08180 4542 586 (WA & Telegram Ada)
No Simpati : 082 22922 2121

atau

Bisa Langsung Registrasi Online lewat Formulir Online:
www.edusoftcenter.com