Menampilkan Single Post Pada Theme Musicii

Bagi yang berminat menampilkan single post pada theme musicii agar web mp3 punya sob sob sekalian terlihat lebih natural di mata om gugel, bisa di cek tutorial berikut.

Tampilan Blog Berisi Loop Single Post

Loop single post yang dimaksud adalah default tampilan blog/codex wordpress.

Menampilkan Single Post Pada Theme Musicii
Menampilkan Single Post Pada Theme Musicii

Tampilan Single Post Pada Theme Musicii

Tampilan Single Post Pada Theme Musicii
Penampilan Single Post Pada Theme Musicii

Cukup menarik bukan? Nah yuk kita mulai merombak dari awal supaya theme musicii nya bisa punya single post layout.

Membuat file yang dibutuhkan

Sebenarnya, theme ini dari awal nya sudah ada template single post nya, tapi mungkin karena semua tampilan nya dinamis, maka sengaja tidak di ikut sertakan.

Template atau file.php pendukung yang harus kita buat adalah: content.php dan single.php

Berikut isi file content.php:


<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> <?php
//first get the current category ID
$categories = get_the_category($post->ID);
if ( $categories ) {
$cat_id = $categories[0]->cat_ID;
//then i get the data from the database
$cat_data = get_option("taxonomy_$cat_id");
//and then i just display my category image if it exists
if (isset($cat_data['cat_color'])){
echo ' style="background-color: '. $cat_data['cat_color'] .'"';
}
}?>>

<?php if ( !is_single() ) : ?>
<div class="grid-box-img"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img alt="<?php the_title_attribute(); ?>" src="<?php echo get_first_image(); ?>" /></a></div>

<?php else : ?>
<?php
$postimgs =& get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC' ) );
if ( !empty($postimgs) ) {
$firstimg = array_shift( $postimgs );
$th_image = wp_get_attachment_image( $firstimg->ID, 'full', false );
?>


<?php } else { ?>

<?php } ?>
<?php endif; ?>

<?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?>
<?php
/* translators: used between list items, there is a space after the comma */
$categories_list = get_the_category_list( __( ', ', 'surfarama' ) );
if ( $categories_list && surfarama_categorized_blog() ) :
?>
<span class="cat-links" <?php if (isset($cat_data['cat_color'])) echo 'style="background-color: '. $cat_data['cat_color'] .'"';?>>
<?php printf( __( '%1$s', 'surfarama' ), $categories_list ); ?>
</span>
<?php endif; // End if categories ?>
<?php endif; // End if 'post' == get_post_type() ?>

<header class="entry-header">
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'surfarama' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php if(the_title( '', '', false ) !='') the_title(); else _e( 'View Post', 'surfarama' ); ?></a></h2>

<?php if ( 'post' == get_post_type() ) : ?>
<div class="entry-meta">
<?php surfarama_posted_on(); ?>
</div><!-- .entry-meta -->
<?php endif; ?>
</header><!-- .entry-header -->

<div class="entry-content post_content">
<?php if ( is_home() || is_archive() || is_search() ) {
if ( has_excerpt() ) {
the_excerpt();
} else {
echo surfarama_excerpt(15);
}
} else {
the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'surfarama' ) );
} ?>
<?php // wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'surfarama' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->

<footer class="entry-meta">
<?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?>

<?php
/* translators: used between list items, there is a space after the comma */
$tags_list = get_the_tag_list( '', __( ', ', 'surfarama' ) );
if ( $tags_list ) :
?>
<span class="tag-links">
<?php printf( __( 'Tagged %1$s', 'surfarama' ), $tags_list ); ?>
</span>
<span class="sep"> | </span>
<?php endif; // End if $tags_list ?>
<?php endif; // End if 'post' == get_post_type() ?>

<?php if ( comments_open() || ( '0' != get_comments_number() && ! comments_open() ) ) : ?>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'surfarama' ), __( '1 Comment', 'surfarama' ), __( '% Comments', 'surfarama' ) ); ?></span>
<span class="sep"> | </span>
<?php endif; ?>

<?php edit_post_link( __( 'Edit', 'surfarama' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- #entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->

Dan untuk single.php, bisa di copy paste yang berikut ini:


<?php get_header(); ?>

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

<div id="main" class="col620 clearfix" role="main">

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

<?php get_template_part( 'content', 'single' ); ?>

<?php surfarama_content_nav( 'nav-below' ); ?>

<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number() )
comments_template( '', true );
?>

<?php endwhile; // end of the loop. ?>

</div> <!-- end #main -->

<?php get_sidebar('post'); ?>

</div> <!-- end #content -->

<?php get_footer(); ?>

Sampai disini, seharusnya sudah bisa menampilkan single post secara normal.

Baca juga:   Tambahkan SPP Pada Campaign WP Automatic

Cara Menampilkan Halaman Blog Di Homepage

Selanjutnya, kalau ingin menampilkan posts di halaman depan, step by step nya:

  1. Add new page, beri nama Blog/Articles/Posts/News/Etc silahkan sesuka hati masing – masing.
  2. Tidak usah di isi content apa apa, langsung publish saja.
  3. Masuk ke settings -> reading
  4. Ubah opsi Front page displays menjadi A Static Page
  5. Untuk front page boleh dikosongkan dulu apabila belum dibuat, dan bagian Posts page silahkan ganti ke page yang baru saja dibuat di step no. 1
  6. Tambahkan link page yang dibuat di nomor 1 ke menu atau widget, bebas ^^
  7. Theme Musicii nya sudah berhasil menampilkan single post 🙂

Bersambung ke bonus tutorial – Alphabet Categories Pada Theme Musicii

0 comments

  • Hello, guest