Cara Membuat Template WordPress Bagian 3 – Body Single.php

Di pertemuan yang ketiga ini kita akan melanjutkan template yang kemarin sudah dibuat bagian headernya. Nah jika sudah selesai bagian header, kita akan masuk ke bagian bodynya.

Promo Tutorial Premium Video Tutorial Mahir Web Development (Bangun 5 Project Website) + Video Tutorial Membuat Aplikasi Mobile (Bangun 4 Aplikasi Android + Upload Playstore) + Bonus Tutorial Membuat Theme Wordpress Premium - 3 Tutorial (5DVD) Hanya Rp 137.500 - Terbatas hanya sampai 17 Desember 2019!

Dibuat oleh praktisi yang memiliki pengalaman lebih dari 12 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0838 1157 5876, atau bisa pesan secara online di sini)

Sebelum mengedit bagian body, ada yang perlu diketahui di antaranya, tag-tag atau syntax yang diperlukan dalam menyusun bagian body template wordpress adalah

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

		<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

			<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

			<?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>

			<div class="entry">
				<?php the_content(); ?>
			</div>

			<div class="postmetadata">
				<?php the_tags('Tags: ', ', ', '<br />'); ?>
				Posted in <?php the_category(', ') ?> | 
				<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?>
			</div>

		</div>

	<?php endwhile; ?>

	<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>

	<?php else : ?>

		<h2>Not Found</h2>

	<?php endif; ?>

Anda dapat menggunakan script di atas namun harus di sesuaikan dengan struktur pada template yang akan digunakan nantinya. Misalkan kita masih menggunakan template coolblue yang kemaren, dengan catatan sudah diselesaikan bagian header dari template tersebut sesuai dengan praktik yang pertama dan yang kedua minggu-minggu sebelumnya.

Dalam template coolblue bagian artikel itu terdapat pada

<div id="content" class="clearfix">

<!-- main -->
<div id="main">

	<article class="post">

		<div class="primary">

			<h2><a href="index.html">Read Me First</a></h2>

			<p class="post-info"><span>filed under</span> <a href="index.html">templates</a>, <a href="index.html">internet</a></p>

			<div class="image-section">
				<img src="images/img-post.jpg" alt="image post" height="206" width="498"/>
			</div>

			<p>CoolBlue is a free website template by <a href="http://www.styleshout.com/">styleshout.com</a>. This work is
			released and licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
			Creative Commons Attribution 3.0 License</a>, which means that you are free to
			use and modify it for any personal or commercial purpose. All I ask is that you give me credit by including a link back to
			<a href="http://www.styleshout.com/">my website</a>.
			</p>

			<p>
			You can find more of my free template designs at <a href="http://www.styleshout.com/">my website</a>.
			For premium commercial designs, you can check out <a href="http://themeforest.net?ref=ealigam" title="Site Templates">Themeforest</a>.
			</p>

			<p><a class="more" href="index.html">Continue Reading &raquo;</a></p>

		</div>

		<aside>

			<p class="dateinfo">JAN<span>31</span></p>

			<div class="post-meta">
				<h4>Post Info</h4>
				<ul>
				   <li class="user"><a href="#">Erwin</a></li>
				   <li class="time"><a href="#">12:30 PM</a></li>
				   <li class="comment"><a href="#">2 Comments</a></li>
				   <li class="permalink"><a href="#">Permalink</a></li>
				</ul>
			</div>

		</aside>

	</article>

...
...
...

</div>

</div>

dari tag HTML tersebut kita bisa mengetahui bahwa artikel di letakkan di dalam <div id="main">, dan artikel-artikelnya itu di ulang-ulang denggan menggunakan <article> ini artinya, pengulangan artikel di template wordpress dilakukan di bagian <div id="main">

Sehingga

<div id="content" class="clearfix">

<!-- main -->
<div id="main">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article class="post">

	<div class="primary">
	...	
</div>

<aside>
...
</aside>

</article>

<?php endwhile; ?>

<?php else : ?>

<h2>Not Found</h2>

<?php endif; ?>

</div>

</div>

Cara untuk single.php ini sama halnya digunakan ke dalam page.php . Silahkan lanjutkan ke bagian akhir dari tutorial cara membuat template wordpress sendiri Cara Membuat Template WordPress Bagian 4 – Polesan Akhir