Membuat Tema WordPress : bagian 4

Pada bagian keempat ini kita akan menyiapkan halaman untuk posting alias halaman single dimana posting yang sedang dibaca ditampilkan. Pada halaman single ini selain posting tentunya ada juga bagian untuk Komentar. Jadi pada bagian keempat ini, kita akan melewati bagian tersulit dari pembuatan tema, jadi baca dengan seksama dan terus ulangi sampai mengerti.O.. ya. jika ada kesulitan ketika pembuatan tema anda bisa tanyakan dengan berkomentar pada tutorial yang bersangkutan.

single.php

Isi dari file single.php sebenarnya hampir sama dengan file index.php namun ada penambahan di bagian ini dan itu. Jadi kita mulai dengan mengcopy file index.php dan rename menjadi “single.php” (tanpa tanda kutip). Dan kita mulai mengedit file single.php, Let’s Rock!!

Pertama kita ubah bagian Post-Meta, bagian yang berisi post-thumbnail, Judul Posting, Penulis tanggal terbit dan rangkuman posting.

<section class="post-meta">
	<h2>
		<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	</h2>
	<?php the_post_thumbnail(array(120,120)); ?>
	<small>oleh <?php the_author(); ?> / <?php the_category(','); ?> / <?php comments_popup_link('No Comments;','1 Comment', '% Comments'); ?></small>
	<p><?php the_excerpt(); ?></p>
	<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">read more</a>
</section><!-- End of Post Meta contaning Title, Author, Category and an Excerpt -->

Hapus Bagian Rangkuman dan Link Read more, karena kita tidak membutuhkannya pada halaman single. Sehingga hasil akhirnya menjadi seperti berikut.

<section class="post-meta">
	<h2>
		<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	</h2>
	<?php the_post_thumbnail(array(120,120)); ?>
	<small>oleh <?php the_author(); ?> / <?php the_category(','); ?> / <?php comments_popup_link('No Comments;','1 Comment', '% Comments'); ?></small>
</section><!-- End of Post Meta contaning Title, Author, Category and an Excerpt -->
<div style="clear:both;"></div>

Selanjutnya adalah isi posting itu sendiri (Bukan rangkuman seperti pada index.php), mengacu pada file template single.html, Konten dari posting berada di <section class=”post-content” >, jadi tambahkan Kode berikut di bawah kode yang kita edit di atas dan tepat di atas kode </article>.

<section class="post-content">
	<?php the_content(); ?>
</section> <!-- End of Post Content	 -->

Anda dapat mencoba merefresh situs wordpress anda, dan membuka satu posting sebagai contoh.

Kolom Komentar

Bagian Komentar adalah bagian tersulit dari sebuah theme, saya pun masih sedikit bingung dengan bagian ini, tetapi saya akan menggunakan metode sederhana untuk menampilkan komentar ini. :).

Pada latihan membuat tema ini, saya tidak akan menggunakan kode komentar yang mendukung Threaded Comment, jadi komentar akan di tampikan sama meskipun komentar tersebut adalah balasan dari sebuah komentar (tidak ditampilkan menjorok ke dalam).

Masih dalam file single.php, kita panggil file comments.php yang akan kita buat nanti. Tambahkan kode berikut setelah bagian </section> <!-- End of Post Content -->.

	<?php comments_template(); ?>

Sekarang buat file comments.php, lalu tambahkan baris kode berikut :

<section class="comments">
	<h2>195 Comments</h2>

	<ul id="comment-list">

		<li class="comment">
			<div class="comment-avatar">
				<img src="" alt="" width=48 height=48 />
			</div>
			<div class="comment-content">
				<span class="arrow"></span>
				<b>Ahmad Adam Thariq</b> Says 
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
				<a href="" title="" class="reply">Reply</a>
			</div>
		</li>	
	</ul>

	<div id="respond">
		<h2>Leave a comment</h2>
		<form action="" id="comment-form">
			<input type="text" name="name" value="" placeholder="Name">
			<input type="email" name="email" value="" placeholder="Email">
			<input type="url" name="url" value="" placeholder="URL">
			<textarea name="comment" ></textarea>
			<div>
				<input type="submit" name="" value="Submit Comment">
			</div>
		</form>
	</div>
</section><!-- End of Comments -->

Kode tersebut adalah bagian dari file template single.html untuk komentar. Anda dapat membuka file single.html untuk memverifikasinya :).

Sekarang kita mulai mengedit bagian-bagian komentar. Sama seperti pada Index.php kita akan melakukan Looping untuk mengambil komentar yang ada pada post yang sedang dibuka. Pertama-tama kita edit bagian judul yang berisi jumlah komentar yang ada.

	<h2>195 Comments</h2>

Menjadi seperti berikut :

<?php if ( have_comments() ) : ?>
<h2><?php echo 'Ada '. get_comments_number() . ' Komentar' ; ?></h2>

Sebelumnya kita cek terlebih dahulu apakah posting ini memiliki komentar, jika Ya kita tampikan komentar-komentar tersebut. Jangan dulu mengetest tema anda karena akan menghasilkan error :).

Template tag get_comments_number(); akan menghasilkan jumlah komentar, pada kode di atas kita menggabungkan kata Ada dengan jumlah komentar dan diakhiri dengan kata komentar, jadi hasil akhirnya jika terdapat komentar menjadi seperti berikut : “Ada 50 Komentar” :).

Selanjutnya kita Edit bagian berikut :

<ul id="comment-list">
	<li class="comment">
		<div class="comment-avatar">
			<img src="" alt="" width=48 height=48 />
		</div>
		<div class="comment-content">
			<span class="arrow"></span>
			<b>Ahmad Adam Thariq</b> Says 
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
			<a href="" title="" class="reply">Reply</a>
		</div>
	</li>	
</ul>

Menjadi seperti berikut.

<ul id="comment-list">
	<?php foreach ($comments as $comment) { ?>
	<li class="comment">
		<div class="comment-avatar">
			<?php echo get_avatar( $comment->comment_author_email, $size = '48'); ?>
		</div>
		<div class="comment-content">
			<span class="arrow"></span>
			<b><a href="<?php comment_author_url(); ?>"><?php comment_author(); ?></a></b> Says 
			<p><?php echo $comment->comment_content; ?></p>
		</div>
	</li>	
	<?php } ?>
</ul>

Dengan looping tersebut kita akan menampilkan komentar-komentar yang ada. dan perlu di perhatikan, link untuk Membalas (Reply) komentar saya hapus karena kode ini tidak mendukung Threaded Comments.

Selanjutnya, modifikasi form untuk menambahkan komentar berikut :

<div id="respond">
	<h2>Leave a comment</h2>
	<form action="" id="comment-form">
		<input type="text" name="name" value="" placeholder="Name">
		<input type="email" name="email" value="" placeholder="Email">
		<input type="url" name="url" value="" placeholder="URL">
		<textarea name="comment" ></textarea>
		<div>
			<input type="submit" name="" value="Submit Comment">
		</div>
	</form>
</div>

Edit kode tersebut menjadi seperti berikut:

<?php if ( ! comments_open() ) : ?>
	<h2>Komentar ditutup</h2>
<?php else: ?>

	<div id="respond">
		<h2>Leave a comment</h2>
		<form action="<?php bloginfo('url'); ?>/wp-comments-post.php" method="post" id="comment-form">
			<input type='hidden' name='comment_post_ID' value='<?php echo $post->ID; ?>' id='comment_post_ID' />
			<input type="text" name="author" value="" placeholder="Name">
			<input type="email" name="email" value="" placeholder="Email">
			<input type="url" name="url" value="" placeholder="URL">
			<textarea name="comment" ></textarea>
			<div>
				<input type="submit" name="" value="Submit Comment">
			</div>
		</form>
	</div>
<?php endif; ?>

Berikut penjelasan kode yang dirubah :

  1. Pertama-tama kita membuat kondisi, apakah Posting ini bisa dikomentari atau tidak, jika tidak maka kita tampilkan pesan “Komentar Ditutup”, jika tidak (Dapat berkomentar) maka kita tampilkan form untuk menambahkan komentar
  2. Kita tambahkan Action pada atribut form, action mengarah ke file system wordpress yang mengurusi bagian komentar.
  3. Saya juga menambahkan sebuah input baru, untuk menyimpan ID dari posting yang akan dikomentari.

Sekarang, Anda boleh merefresh wordpress anda, dan cobalah untuk menambahkan komentar.

Download Source Code

Kesimpulan

Untuk Bagian ke Empat ini mungkin hanya itu saja, sebenarnya tema yang telah kita buat telah selesai, namun saya akan memberikan cara untuk membuat halaman template pada Bagian ke-5 minggu depan. Halaman Template ini biasa digunakan ketika kita membuat Page baru. biasanya digunakan untuk Halaman Archive, Contact, Full width dan lain sebagainya. Jadi jika kita perlu menampilkan suatu Page dengan penampilan yang berbeda maka kita gunakan halaman template ini.

Category WordpressTag , ,

20 Komentar untuk “Membuat Tema WordPress : bagian 4

  1. Mau tanya ni gan.
    klu yang “the_content”, “the_ID”, trus “the_permalink”
    tu pa nama nya ya??
    apakah itu fungsi ??
    terus dimana letak file fungsi tersebut, dan bisa gg klu di modify fungsi-fungsi itu?

      1. hehehe., banyak mas.. pusing..
        sbnarnya saya punya problem, untuk menampilkan posting terbaru dari setiap category.
        jadi klu ada 5 category, maka akan tampil posting terbaru untuk setiap 5 category tersebut…
        tu gimana ya??
        saya sudah coba, tpi selalu gagal.
        tolong saya πŸ™‚ πŸ˜€

      2. ohh.. iya2..
        btul juga..
        tpi, mas..
        setelah saya coba teliti kaya’ na gg bisa deh untuk nmpilkan 1 posting untuk 1 category..
        klu script ini
        query_posts( array( ‘category__and’ => array(1,3,4), ‘posts_per_page’ => 1, ‘orderby’ => ‘id’, ‘order’ => ‘DESC’ ) );

        yang muncul cuma id 1,
        gimana mas…. ? tolong banget ya mas… πŸ™‚

  2. Mas itu di bagian awal, mungkin maksudnya yang diganti (copy/save as) single.html kali ya, bukan index.php, soalnya content nya kan adanya di file single.html itu.

    CMIIW

  3. mas, mau nanya dong.
    jika di single.php , kita mau menambahkan widget tags/category di sebelah kanan di post-an kita. script-nya seperti apa? thx before

  4. mas, mau tanya. pas saya coba komen sendiri. di send terus malah ERROR: please type a comment. | itu kenapa mas? mohon pencerahannya, thx before

  5. mas, pas saya coba logout dan komen pakai nama dan email saya(blm login).. muncul ERROR: please fill the required fields (name, email). | mohon pencerahannya mas. thx before

  6. Om, kok form komentar gak ada yah kalau post belum ada koment’a??
    kalau yang Hello World kan sudah ada jadi muncul, tapi kalau post lagi form komen’a gak ada??

Tinggalkan Komentar Anda