Tutorial WordPress: Cara Membuat Tema WordPress dari HTML (Pt 1)
- 1. Sedang Dibaca: Tutorial WordPress: Cara Membuat Tema WordPress dari HTML (Bagian 1)
2. Tutorial WordPress: Cara Membuat Tema WordPress Dari HTML (Bagian 2) 3. Pengantar Anatomi Tema WordPress
Jika Anda memulai dengan situs web HTML (+ CSS), Anda tidak perlu membuang semuanya saat berpindah ke WordPress. Anda dapat mengonversi HTML Anda menjadi WordPress dan menjalankan situs web Anda (yang kini lebih canggih) pada platform WordPress dinamis.
Atau mungkin bukan itu masalahnya. Mungkin Anda hanya bertanya-tanya bagaimana cara mengubah desain HTML klien menjadi tema WordPress yang lengkap. Atau mungkin Anda ingin mempelajari pemrograman dasar WordPress (+ PHP) dari sisi HTML yang lebih familiar.
Apapun 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 membuka Github dan mengunduh tema awal WPExplorer yang menyediakan “kanvas kosong” untuk membuat tema Anda dengan semua file template dan kode yang diperlukan untuk memulai. Jadi, jika Anda adalah salah satu dari orang-orang yang lebih suka belajar dengan membaca kode, unduh tema awal, lewati panduan ini dan lihat cara kerjanya…Jika tidak, dapatkan editor kode (saya menggunakan dan merekomendasikan Notepad++, atau SublimeText) dan browser yang siap , lalu ikuti panduan sederhana ini sampai akhir.
Memberi Nama Tema WordPress Anda
Hal pertama yang pertama, kami harus memberi nama unik pada tema Anda, yang tidak diperlukan jika Anda membuat tema hanya untuk situs web Anda. Apapun itu, kami perlu memberi nama tema Anda agar mudah diidentifikasi saat instalasi.
Asumsi umum pada saat ini:
- Index.html dan stylesheet CSS Anda sudah siap.
- Anda memiliki instalasi WordPress yang berfungsi dengan setidaknya satu tema, mis. Dua Puluh Empat Belas
- Anda telah membuat folder tema tempat Anda akan menyimpan tema WordPress baru Anda ?
Mari kembali memberi nama tema WordPress Anda. Buka editor kode Anda dan salin-tempel konten stylesheet Anda ke dalam file baru dan simpan sebagai style.css di folder tema Anda. Tambahkan informasi berikut di bagian paling atas style.css yang baru dibuat:
/*
Theme Name: Your theme's name
Theme URI: Your theme's URL
Description: A brief description of your theme
Version: 1.0 or any other version you want
Author: Your name or WordPress.org's username
Author URI: Your web address
Tags: Tags to locate your theme in the WordPress theme repository
*/Jangan tinggalkan tag komentar (/*…*/). Simpan perubahannya. Info ini memberi tahu WordPress nama tema Anda, penulisnya, dan hal-hal pelengkap seperti itu. Bagian yang penting adalah nama tema, yang memungkinkan Anda memilih dan mengaktifkan tema Anda melalui dashboard WP.
Memecah Template HTML Anda menjadi File PHP
Tutorial ini lebih lanjut mengasumsikan Anda telah menyusun template HTML dari kiri ke kanan: header, konten, sidebar, footer. Jika Anda memiliki desain yang berbeda, Anda mungkin perlu sedikit bermain-main dengan kodenya. Ini menyenangkan dan sangat mudah.
Langkah selanjutnya melibatkan pembuatan empat file PHP. Dengan menggunakan editor kode Anda, buat index.php, header.php, sidebar.php dan footer.php, dan simpan di folder tema Anda. Semua file kosong saat ini, jadi jangan berharap mereka melakukan apa pun. Untuk tujuan ilustrasi, saya menggunakan file index.html dan stylesheet CSS berikut:
INDEX.HTML
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>How To Convert HTML Template to WordPress Theme - WPExplorer</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
</head>
<body>
<div id="wrap">
<header class="header">
<p>This is header section. Put your logo and other details here.</p>
</header><!-- .header -->
<div class="content">
<p>This is the main content area.</p>
</div><!-- .content -->
<div class="sidebar">
<p>This is the side bar</p>
</div><!-- .sidebar -->
<footer class="footer">
<p>And this is the footer.</p>
</footer><!-- .footer -->
</div><!-- #wrap -->
</body>
</html>LEMBAR GAYA CSS
#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;}
.content{width:70%; border:1px solid #999;margin-top:5px;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;}Anda dapat mengambil kedua kode tersebut jika Anda tidak memiliki apa pun untuk dikerjakan. Cukup salin-tempelkan ke editor kode Anda, simpan, buat empat file PHP yang baru saja kami sebutkan, dan bersiaplah untuk bagian selanjutnya. Buka header.php yang baru Anda buat (dan kosongkan). Masuk ke instalasi WordPress Anda yang ada, navigasikan ke Appearance –>> Editor dan buka header.php. Salin semua  kode di antara tag <head> dan tempelkan ke file header.php Anda. Berikut kode yang saya dapatkan dari file header.php di tema Twenty Fourteen:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>Kemudian buka file index.html Anda dan salin kode header (yaitu kode di bagian
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<header class="header">
<p>This is header section. Put your logo and other details here.</p>
</header>Lalu tambahkan…
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />…di mana saja di antara tag <head> di file header.php untuk menghubungkan stylesheet Anda. Ingat juga untuk meletakkan tag pembuka <html> dan <body> pada header.php seperti gambar di atas. Simpan semua perubahan.
Salin bagian kedua (yaitu
<?php get_header(); ?>…di bagian paling atas dan…
<?php get_sidebar(); ?>
<?php get_footer(); ?>…sampai ke titik terendah. Ketiga baris ini mengambil header.php, sidebar.php, dan footer.php (dalam urutan itu) dan menampilkannya di index.php, yang akan menyatukan kembali kode Anda. Simpan semua perubahan. Pada titik ini, file index.php Anda akan terlihat seperti:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Kemudian salin konten dari bagian sidebar dan footer di index.html Anda masing-masing ke sidebar.php dan footer.php.
Menambahkan Postingan
Templat HTML Anda akan berubah menjadi tema WordPress. Kami hanya perlu menambahkan postingan Anda. Jika Anda memiliki postingan di blog Anda, bagaimana Anda menampilkannya dalam tema “HTML-ke-WordPress” yang Anda buat khusus? Anda menggunakan tipe khusus fungsi PHP yang dikenal sebagai Loop. Loop hanyalah sepotong kode khusus yang menampilkan postingan dan komentar Anda di mana pun Anda menempatkannya.
Sekarang, untuk menampilkan postingan Anda di bagian konten pada template index.php, salin dan tempel kode berikut di antara
<div class="content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<div class="date"><?php the_time( 'M j y' ); ?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div><!--.post-header-->
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div><!--. entry-->
<footer class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
</footer><!--.post-footer-->
</div><!-- .post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<nav class="navigation index">
<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</nav><!--.navigation-->
<?php else : ?>
<?php endif; ?>
</div><!--.content-->Itu akan menjaga postingan Anda. Semudah ABC. Pada saat ini (dan menggunakan file contoh yang disediakan dalam tutorial ini), header.php Anda akan terlihat seperti ini:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>Sidebar.php Anda akan terlihat seperti ini:
<?php dynamic_sidebar( 'sidebar' ); ?>Footer.php Anda akan terlihat seperti ini:
<footer class="footer">
<p>And this is the footer</p>
</footer>
<?php wp_footer(); // Crucial core hook! ?>
</body>
</html>Apakah Anda memperhatikan tag penutup