Pengantar Anatomi Tema WordPress
1. Tutorial WordPress: Cara Membuat Tema WordPress dari HTML (Bagian 1) 2. Tutorial WordPress: Cara Membuat Tema WordPress Dari HTML (Bagian 2) - 3. Dibaca Saat Ini: Pengantar Anatomi Tema WordPress
Beberapa waktu lalu, kami memperkenalkan kepada Anda konsep membuat tema WordPress dari HTML. Kami membagi tutorial menjadi dua bagian dan hari ini kita akan menyempurnakan kedua tutorial tersebut, jadi silakan menganggap postingan ini sebagai porsi ketiga dalam seri postingan. Tujuan saya adalah membongkar tema WordPress untuk memberi Anda gambaran yang jelas tentang cara kerjanya (tema).
Posting ini mengasumsikan Anda memiliki pengetahuan tentang HTML dan CSS. Saya akan melanjutkan dan menyatakan bahwa memiliki keterampilan HTML dan CSS merupakan prasyarat dalam mendesain tema WordPress. Satu hal lagi, postingan ini akan menghindari kata-kata besar dan konsep yang sulit – akan mudah dipahami, jadi bersiaplah untuk bersenang-senang dan belajar.
Sedikit Priming HTML
Setiap halaman web HTML dibagi menjadi beberapa bagian menggunakan tag <div>. Misalnya, Anda dapat membagi badan (<body>) situs web Anda menjadi beberapa bagian seperti navigasi, header, konten utama, sidebar, footer, dan lain-lain.
Setelah halaman web Anda dibagi menjadi beberapa bagian, Anda dapat mengurutkan (atau mengatur) bagian tersebut sesuai keinginan menggunakan CSS. Proses ini dikenal sebagai styling, dan melibatkan penambahan elemen gaya lain seperti warna, ukuran, batas, efek khusus, dll. Itulah kekuatan CSS, yang merupakan kependekan dari Cascading Style Sheets. Saat Anda menggabungkan file HTML dan CSS dan memasukkan beberapa gambar, Anda akan mendapatkan situs web yang lengkap.
Hal-hal yang tidak jauh berbeda dengan tema WordPress. Seperti yang kita lihat di bagian 1 Cara Membuat Tema WordPress dari HTML, tema WordPress dibagi menjadi beberapa file berbeda. Jika Anda tidak dapat menemukan kesamaan pada saat ini, izinkan saya menjelaskannya.
Halaman web HTML statis dibagi menjadi beberapa bagian (yang kami sebut bagian sebelumnya) menggunakan tag <div> (atau tabel jika Anda benar-benar kuno). Di sisi lain, tema WordPress dipecah menjadi beberapa file php yang berbeda, yang kemudian disatukan kembali menggunakan tag template.
Oleh karena itu, alih-alih membuat semua elemen isi (header, konten utama, sidebar, footer, dll) berada dalam satu file (seperti halnya dengan HTML statis), masing-masing elemen isi (dalam tema WordPress) berada dalam file terpisah.
Jadi, header akan berada di header.php, sidebar akan berada di sidebar.php, konten utama akan berada di index.php, atau single.php (jika berupa postingan) atau page.php (jika berupa halaman ). Bagian footer akan tinggal di footer.php dan seterusnya.
Apakah kamu mengikuti? Lihatlah ilustrasi di bawah ini:
Dari ilustrasi kami di atas, <?php get_header(); ?>, <?php get_sidebar(); ?> dan <?php get_header(); ?> disebut tag templat. Tugas mereka adalah mengambil header.php, sidebar.php dan footer.php dalam urutan itu dari direktori tema Anda, dan menampilkan konten di index.php Anda, sehingga melengkapi halaman web.
Jangan biarkan ekstensi .php membuat Anda takut, konten di dalam file php hanyalah kode HTML yang Anda kenal. Misalnya, header.php Anda dapat berisi navigasi daftar HTML yang khas. Demikian pula, Anda dapat meletakkan kode HTML biasa di footer.php, sidebar.php, dan index.php.
Anda juga dapat menempatkan fungsi loop.php di index.php Anda (atau di mana pun Anda suka) untuk menampilkan postingan blog Anda, namun saya harus memperlambatnya dan kembali ke anatomi tema WordPress. Saya telah menyebutkan satu atau dua hal tentang loop di bagian 2 tentang cara membuat tema WordPress dari HTML. dan kita akan membicarakannya (loop) dan fungsi lainnya di masa mendatang.
Bergerak…
Tema dasar WordPress terdiri dari setidaknya empat file template yaitu:
- indeks.php
- header.php
- sidebar.php
- footer.php
Mari kita lihat apa yang ada di masing-masing file ajaib ini:
File Templat Index.php
Ini adalah file utama yang tanpanya Anda tidak akan memiliki tema WordPress yang berfungsi. Ini adalah file pertama (atau default) yang dimuat saat Anda mengunjungi situs WordPress. Anggap saja setara dengan index.html.
Index.php khas di tema WordPress akan terlihat seperti ini:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Anda dapat menambahkan loop di antara <?php get_header(); /> dan <?php get_sidebar(); ?> untuk menampilkan postingan blog di halaman beranda (index.php) seperti gambar di bawah ini:
<?php get_header(); ?>
<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><!--end 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><!--end entry-->
<div class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
</div><!--end post footer-->
</div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class="navigation index">
<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</div><!--end navigation-->
<?php else : ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>File Templat Header.php
File templat ini berisi kode header, navigasi, dan kode kepala HTML Anda. Pada dasarnya, header.php menyimpan semua yang ingin Anda tampilkan di bagian atas situs web Anda. Anda tahu, hal-hal seperti judul situs web Anda dan hal-hal seperti itu.
Anda juga menautkan ke stylesheet CSS Anda di header.php. Berikut adalah contoh dasar header.php:
<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>
<div class="header">
<p>This is header section. Put your logo and other details here.</p>
</div>File Templat Sidebar.php
Sidebar.php berisi semua yang Anda perlukan untuk muncul di sidebar Anda. Sidebar berisi menu tambahan, widget, kategori, ikon media sosial, konten khusus, kode HTML seperti iklan, dll.
Sidebar.php dapat berisi markup HTML murni atau pemanggilan fungsi php tergantung kebutuhan Anda. Dengan demikian, sidebar.php dasar mungkin terlihat seperti:
<div class="sidebar">
Put your custom content or HTML code here.
</div>File Templat Footer.php
Menurut Anda apa yang masuk ke footer.php? Anda dapat meletakkan informasi hak cipta Anda di sini, menu tambahan, tautan, ikon media sosial – apa pun yang Anda inginkan! Apakah Anda ingin melihat tampilan dasar footer.php? Di Sini:
<footer class="footer">
Put your footer content here including php function calls (to fetch different template files e.g. search.php) if need be.
</footer>
</body>
</html>Perhatikan tag penutup