• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 7 - Membuat Template Index

12‘13
May

info80.jpg

Bagaimana dengan template header sebelumnya apakah sudah selesai? mudah bukan? sekarang mari kita lanjutkan lagi dengan membuat template index WordPress. Disini kita akan bekerja dengan file index.php, sebuah file yang sangat penting dan merupakan inti dari template WordPress. Mengerjakan file index.php dengan baik dan benar akan membantu kita menyelesaikan keseluruhan pekerjaan dengan mudah.

Ok silahkan buka file index.php, pada tahap pengerjaan Struktur File dan Folder Theme WordPress sebelumnya anda sudah mengisi file index.php dengan tag HTML sebagai berikut

<?php get_header(); ?>

		<div id="primary" class="content-area">
			<div id="content" class="site-content"></div><!-- #content .site-content -->
		</div><!-- #primary .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Dibaris paling pertama silahkan isi dengan inline documentation wordpress dibawah

<php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */
 
get_header(); ?>

Dari tahap awal pengerjaan sekarang sepertinya anda sudah mulai bisa terbisa menambahkan inline documentation :)

Fungsi Pengulangan (The Loop)

Logic pengerjaan template index wordpress dimulai dan diakhiri fungsi pengulangan The Loop yaitu sebuah kode PHP WordPress untuk menampilkan postingan artikel. Tanpa fungsi ini blog WordPress kita tidak akan memiliki konten apapun. Fungsi pengulangan tersebut dapat anda lihat pada kode dibawah:

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

Pada tag diatas kita memulai fungsi pengulangan Wordpress dengan while ( have_posts() ) : the_post() dan mengakhirinya dengan endwhile;. Untuk mempermudah anda memahami logikanya silahkan buat minimal 2 (dua) buah artikel berbeda di wordpress anda lalu pada index.php didalam <div id="content" class="site-content" role="main"> isi kode dibawah

<div id="content" class="site-content" role="main">
    <?php while ( have_posts() ) : the_post(); ?>
        <?php the_content(); ?>
    <?php endwhile; ?>
</div><!-- #content .site-content -->

Gunakan template Anda lalu reload halaman utamanya, sekarang template anda sudah menampilkan konten postingan artikel sebagai berikut

Perhatikan gambar diatas dengan fungsi pengulangan WordPress sekarang kita memiliki 2 buah artikel yang di tampilkan secara berulang, saya brush dengan warna kuning dan hijau untuk membedakan. the_content() sendiri adalah fungsi untuk menampilkan konten artikel wordpress secara lengkap. Apabila anda ingin menampilkan ringkasan artikel anda bisa menggunakan fungsi the_excerpt() didalam fungsi pengulangan

<div id="content" class="site-content" role="main">
    <?php while ( have_posts() ) : the_post(); ?>
    <div class="entry-summary">
        <?php the_excerpt(); ?>
    </div><!-- .entry-summary -->
    <?php endwhile; ?>
</div><!-- #content .site-content -->

Ok, sampai sini anda sudah mengetahui dan paham dengan fungsi loop, the_content() dan the_excerpt() pada wordpress :), sekarang mari kita membuat kepala sedikit lebih terbang lagi dengan membuat fungsi pengulangan yang lebih komplit dan mewakili semua konten worpress seperti postingan artikel, pencarian, dan lainnya.

Sebelum melakukan itu silahkan buka function.php disini kita akan menambahka beberapa fungsi, tambahkan fungsi dibawah pada baris terakhir function.php anda.

if ( ! function_exists( 'W3functionDesign_posted_on' ) ) :
/**
 * Prints HTML with meta information for the current post-date/time and author.
 *
 * @since W3functionDesign 1.0
 */
function W3functionDesign_posted_on() {
    printf( __( 'Posted on <a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date" datetime="%3$s" pubdate>%4$s</time></a><span class="byline"> by <span class="author vcard"><a class="url fn n" href="%5$s" title="%6$s" rel="author">%7$s</a></span></span>', 'W3functionDesign' ),
        esc_url( get_permalink() ),
        esc_attr( get_the_time() ),
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date() ),
        esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
        esc_attr( sprintf( __( 'View all posts by %s', 'W3functionDesign' ), get_the_author() ) ),
        esc_html( get_the_author() )
    );
}
endif;
 
/**
 * Returns true if a blog has more than 1 category
 *
 * @since W3functionDesign 1.0
 */
function W3functionDesign_categorized_blog() {
    if ( false === ( $all_the_cool_cats = get_transient( 'all_the_cool_cats' ) ) ) {
        // Create an array of all the categories that are attached to posts
        $all_the_cool_cats = get_categories( array(
            'hide_empty' => 1,
        ) );
 
        // Count the number of categories that are attached to the posts
        $all_the_cool_cats = count( $all_the_cool_cats );
 
        set_transient( 'all_the_cool_cats', $all_the_cool_cats );
    }
 
    if ( '1' != $all_the_cool_cats ) {
        // This blog has more than 1 category so W3functionDesign_categorized_blog should return true
        return true;
    } else {
        // This blog has only 1 category so W3functionDesign_categorized_blog should return false
        return false;
    }
}
 
/**
 * Flush out the transients used in W3functionDesign_categorized_blog
 *
 * @since W3functionDesign 1.0
 */
function W3functionDesign_category_transient_flusher() {
    // Like, beat it. Dig?
    delete_transient( 'all_the_cool_cats' );
}
add_action( 'edit_category', 'W3functionDesign_category_transient_flusher' );
add_action( 'save_post', 'W3functionDesign_category_transient_flusher' );

Pada fungsi W3functionDesign_posted_on() kita mengambil beberapa template tags yang diperlukan seperti tanggal posting, author, link url arsip author dan permalink.

Pada fungsi W3functionDesign_categorized_blog() kita mengambil paling tidak 1 kategory postingan artikel dan menympannya kedalam variable sementara yang bernama transient.

Dan pada fungsi terakhir yaitu W3functionDesign_category_transient_flusher() kita menghapus semua variable sementara kategori artikel yang dibuat di fungsi sebelumnya sehingga list kategori artikel kembali ditampilkan default pada pemanggilan selanjutnya

Menyederhanakan template index wordpress

Tahapan berikutnya kita akan membuat fungsi pengulangan-pengulangan didalam index WordPress. Pada dasarnya semua pengerjaan tahap ini bisa dilakukan didalam index.php, tapi supaya kita lebih mudah mengelola dan menelusuri file-file kita akan membuat index.php tidak terlalu panjang. Pengerjaan pengulangan (The Loop) akan kita lakukan di dalam file yang berbeda yaitu content.php dan selanjutnya content.php kita panggil kedalam index.php

Fungsi WordPress yang membantu kita untuk melakukan penyederhanaan dan membagi template supaya kode tidak terlalu panjang adalah get_template_part(). Ok mari kita langsung praktekan saja, sekarang giliran file content.php yang akan kita isi. SIlahkan buka file content.php anda dan tambahkan kode-kode dibawah

<?php
/**
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */
?>
 
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'W3functionDesign' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
 
        <?php if ( 'post' == get_post_type() ) : ?>
        <div class="entry-meta">
            <?php W3functionDesign_posted_on(); ?>
        </div><!-- .entry-meta -->
        <?php endif; ?>
    </header><!-- .entry-header -->
 
    <?php if ( is_search() ) : // Only display Excerpts for Search ?>
    <div class="entry-summary">
        <?php the_excerpt(); ?>
    </div><!-- .entry-summary -->
    <?php else : ?>
    <div class="entry-content">
        <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'W3functionDesign' ) ); ?>
        <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'W3functionDesign' ), 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->
    <?php endif; ?>
 
    <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 */
                $categories_list = get_the_category_list( __( ', ', 'W3functionDesign' ) );
                if ( $categories_list && W3functionDesign_categorized_blog() ) :
            ?>
            <span class="cat-links">
                <?php printf( __( 'Posted in %1$s', 'W3functionDesign' ), $categories_list ); ?>
            </span>
            <?php endif; // End if categories ?>
 
            <?php
                /* translators: used between list items, there is a space after the comma */
                $tags_list = get_the_tag_list( '', __( ', ', 'W3functionDesign' ) );
                if ( $tags_list ) :
            ?>
            <span class="sep"> | </span>
            <span class="tag-links">
                <?php printf( __( 'Tagged %1$s', 'W3functionDesign' ), $tags_list ); ?>
            </span>
            <?php endif; // End if $tags_list ?>
        <?php endif; // End if 'post' == get_post_type() ?>
 
        <?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?>
        <span class="sep"> | </span>
        <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'W3functionDesign' ), __( '1 Comment', 'W3functionDesign' ), __( '% Comments', 'W3functionDesign' ) ); ?></span>
        <?php endif; ?>
 
        <?php edit_post_link( __( 'Edit', 'W3functionDesign' ), '<span class="sep"> | </span><span class="edit-link">', '</span>' ); ?>
    </footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->

Selanjutnya pada file index.php didalam <div id="primary" class="content-area"> kita tadi sudah mencoba-coba fungsi the_excerpt() dan the_content(), hapus bagian percobaan kita tadi dan ganti dengan kode dibawah

<?php if ( have_posts() ) : ?>
     <?php /* Start the Loop */ ?>
     <?php while ( have_posts() ) : the_post(); ?>
  
          <?php
          /* Include the Post-Format-specific template for the content.
          * If you want to overload this in a child theme then include a file
          * called content-___.php (where ___ is the Post Format name) and that will be used instead.
          */
          get_template_part( 'content', get_post_format() );
          ?>
     <?php endwhile; ?>
<?php endif; ?>

Apa yang telah kita kerjakan diatas akan menghasilkan template seperti gambar dibawah

Pada bagian content.php diatas kita mengunakan tag <artikel> untuk menampilkan konten wordpress, didalam tag <artikel> kita menyimpan judul dan meta dibagian <header> lalu untuk bagian konten kita gunakan statement kondisional untuk bentuk konten pencarian dan default postingan artikel. Pada halaman pencarian kita hanya menampilkan ringkasan artikel dengan tag <div class="entry-summary"> sedangkan untuk halaman utama kita menampilkan default postingan artikel dengan tag <div class="entry-content">

Terakhir kita menggunakan tag <footer> untuk menampilkan komentar, statement kondisional dilakukan disini untuk bagaimana cara menampilkan komentar jiga setidaknya ada 1 komentar, dan belum ada komentar untuk postingan artikel.

Selanjutnya kita mengisi setiap tag template dengan fungsi-fungsi PHP wordpress. Khusus untuk beberapa isi di bagian meta dan footer fungsi sudah dibuat sebelumnya di function.php dengan nama fungsi W3functionDesign_posted_on() dan juga W3functionDesign_categorized_blog()

Beralih ke bagian index.php, disana kita memanggil content.php dengan sebelumnya memeriksa Post format untuk artikel get_template_part( 'content', get_post_format() ). Disini kita memerintahkan WordPress untuk terlebih dahulu mencari file tema yang telah ditentukan templatenya seperti content-aside.php, atau content-quote.php. Dengan fungsi get_post_format() jika WordPress menemukan content-aside.php atau content-quote.php ada didalam folder tema kita, Wordpress akan meload file tersebut sebaliknya WordPress akan meload content.php

Aside Post Format

Kita sudah mensupport Post Format sebelumnya jadi mari kita tambahkan format-format tertentu untuk setiap postingan artikel kita. Bagaimana anda menampilkan bentuk artikel sebenarnya itu tergantung anda, tapi pedoman untuk melakukannya bisa anda temukan di WordPress Codex.

Berdasarkan pedoman di WordPress Codex, Aside Post Format harus ringkas biasanya diformat tanpa author. Mari kita kerjakan sesuai pedoman dengan menyembunyikan nama author, kategori dan tag

Kembali lagi pada tahap pengerjaan Struktur File dan Folder Theme WordPress sebelumnya anda sudah membuat content-aside.php, sebuah template yang sekarang sudah anda ketahui tujuannya yaitu untuk memformat konten Aside. Silahkan buka dan isi dengan kode dibawah

<?php
/**
 * The template for displaying posts in the Aside post format
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */
?>
 
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'W3functionDesign' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
    </header><!-- .entry-header -->
 
    <?php if ( is_search() ) : // Only display Excerpts for Search ?>
    <div class="entry-summary">
        <?php the_excerpt(); ?>
    </div><!-- .entry-summary -->
    <?php else : ?>
    <div class="entry-content">
        <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'W3functionDesign' ) ); ?>
        <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'W3functionDesign' ), 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->
    <?php endif; ?>
 
    <footer class="entry-meta">
        <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'W3functionDesign' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php echo get_the_date(); ?></a>
        <?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?>
        <span class="sep"> | </span>
        <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'W3functionDesign' ), __( '1 Comment', 'W3functionDesign' ), __( '% Comments', 'W3functionDesign' ) ); ?></span>
        <?php endif; ?>
 
        <?php edit_post_link( __( 'Edit', 'W3functionDesign' ), '<span class="sep"> | </span><span class="edit-link">', '</span>' ); ?>
    </footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->

Seperti yang anda lihat dan baca, isi dari content-aside.php tidak jauh berbeda dengan content.php disini hanya tanpa author, kategori dan tag.

Navigasi Artikel (Navigation)

Untuk memudahkan pengunjung dalam mencari artikel yang mereka mau maka pada tema wordpress ini, kita tambahkan fungsi navigasi artikel yaitu next_posts_link() dan previous_posts_link(). Fungsi next_posts_link() digunakan untuk melihat artikel berikutnya, sebaliknya fungsi previous_posts_link() digunakan untuk melihat artikel sebelumnya

Ditema yang saya buat W3functionDesign, saya akan menambahkan navigasi diatas artikel dan di bawahnya. Fungsi navigasi akan saya simpan di file template-tags.php yang terdapat di dalam folder inc/ silahkan buka dan pada baris terakhir masukan kode dibawah.

if ( ! function_exists( 'W3functionDesign_content_nav' ) ):
/**
 * Display navigation to next/previous pages when applicable
 *
 * @since W3functionDesign 1.0
 */
function W3functionDesign_content_nav( $nav_id ) {
    global $wp_query, $post;
 
    // Don't print empty markup on single pages if there's nowhere to navigate.
    if ( is_single() ) {
        $previous = ( is_attachment() ) ? get_post( $post->post_parent ) : get_adjacent_post( false, '', true );
        $next = get_adjacent_post( false, '', false );
 
        if ( ! $next && ! $previous )
            return;
    }
 
    // Don't print empty markup in archives if there's only one page.
    if ( $wp_query->max_num_pages < 2 && ( is_home() || is_archive() || is_search() ) )
        return;
 
    $nav_class = 'site-navigation paging-navigation';
    if ( is_single() )
        $nav_class = 'site-navigation post-navigation';
 
    ?>
    <nav role="navigation" id="<?php echo $nav_id; ?>" class="<?php echo $nav_class; ?>">
        <h1 class="assistive-text"><?php _e( 'Post navigation', 'W3functionDesign' ); ?></h1>
 
    <?php if ( is_single() ) : // navigation links for single posts ?>
 
        <?php previous_post_link( '<div class="nav-previous">%link</div>', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'W3functionDesign' ) . '</span> %title' ); ?>
        <?php next_post_link( '<div class="nav-next">%link</div>', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'W3functionDesign' ) . '</span>' ); ?>
 
    <?php elseif ( $wp_query->max_num_pages > 1 && ( is_home() || is_archive() || is_search() ) ) : // navigation links for home, archive, and search pages ?>
 
        <?php if ( get_next_posts_link() ) : ?>
        <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'W3functionDesign' ) ); ?></div>
        <?php endif; ?>
 
        <?php if ( get_previous_posts_link() ) : ?>
        <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'W3functionDesign' ) ); ?></div>
        <?php endif; ?>
 
    <?php endif; ?>
 
    </nav><!-- #<?php echo $nav_id; ?> -->
    <?php
}
endif; // W3functionDesign_content_nav

Ok, sekarang kita panggil fungsi W3functionDesign_content_nav() yang kita buat di atas pada file index.php sehingga isi keseluruhan file index.php anda menjadi seperti kode dibawah

<?php 
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */
 
get_header(); ?>

		<div id="primary" class="content-area">
			<?php if ( have_posts() ) : ?>
				<?php W3functionDesign_content_nav( 'nav-above' ); ?>
                
				<?php /* Start the Loop */ ?>
                <?php while ( have_posts() ) : the_post(); ?>
              
					<?php
                    /* Include the Post-Format-specific template for the content.
                    * If you want to overload this in a child theme then include a file
                    * called content-___.php (where ___ is the Post Format name) and    that will be used instead.
                    */
                    get_template_part( 'content', get_post_format() );
                    ?>
                    
				<?php endwhile; ?>
                
                <?php W3functionDesign_content_nav( 'nav-below' ); ?>
                
            <?php endif; ?>
        </div><!-- #primary .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Banyak sekali yang sudah kita kerjakan tapi ini belum selesai, masih ada pekerjaan terakhir di bagian template index yaitu membuat template untuk hasil pencarian yang tidak ditemukan

Membuat bagian template no-results.php

Coba perhatikan fungsi if ( have_posts() ) yang terdapat di baris file index.php, fungsi pengulangan akan dijalankan wordpress jika pada database terdapat artikel have_posts(). lalu bagaimana kalau tidak ada? disinilah no-results.php bekerja, silahkan buka file no-results.php Anda dan tambahkan tag berikut untuk menampilkan pesan saat blog tidak memiliki artikel

<?php
/**
 * The template part for displaying a message that posts cannot be found.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */
?>
 
<article id="post-0" class="post no-results not-found">
    <header class="entry-header">
        <h1 class="entry-title"><?php _e( 'Nothing Found', 'W3functionDesign' ); ?></h1>
    </header><!-- .entry-header -->
 
    <div class="entry-content">
        <?php if ( is_home() && current_user_can( 'publish_posts' ) ) : ?>
 
            <p><?php printf( __( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.', 'W3functionDesign' ), admin_url( 'post-new.php' ) ); ?></p>
 
        <?php elseif ( is_search() ) : ?>
 
            <p><?php _e( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'W3functionDesign' ); ?></p>
            <?php get_search_form(); ?>
 
        <?php else : ?>
 
            <p><?php _e( 'It seems we can’t find what you’re looking for. Perhaps searching can help.', 'W3functionDesign' ); ?></p>
            <?php get_search_form(); ?>
 
        <?php endif; ?>
    </div><!-- .entry-content -->
</article><!-- #post-0 .post .no-results .not-found -->

Isi dari file no-result.php tidak ada yang istimewa dan perlu dijelaskan, kurang lebih sama dengan isi content.php malah disini setiap pesan langsung dituliskan lebih mudah bukan? Sekarang di index.php kita perlu memanggil file no-result.php dengan cara sebagai berikut

<?php else : ?>
    <?php get_template_part( 'no-results', 'index' ); ?>

Tuliskan baris diatas setelah fungsi pengulangan sehingga keseluruhan file index.php kita menjadi seperti berikut

<?php 
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */
 
get_header(); ?>

		<div id="primary" class="content-area">
			<?php if ( have_posts() ) : ?>
				<?php W3functionDesign_content_nav( 'nav-above' ); ?>
                
				<?php /* Start the Loop */ ?>
                <?php while ( have_posts() ) : the_post(); ?>
              
					<?php
                    /* Include the Post-Format-specific template for the content.
                    * If you want to overload this in a child theme then include a file
                    * called content-___.php (where ___ is the Post Format name) and    that will be used instead.
                    */
                    get_template_part( 'content', get_post_format() );
                    ?>
                    
				<?php endwhile; ?>
                
                <?php W3functionDesign_content_nav( 'nav-below' ); ?>
                
			<?php else : ?>
            	<?php get_template_part( 'no-results', 'index' ); ?>
            <?php endif; ?>
        </div><!-- #primary .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Membatasi jumlah postingan artikel yang ingin ditampilkan

Secara default wordpress akan menampilkan beberapa postingan artikel terbaru di halaman index dan yang lainnya, untuk membatasi atau merubah default jumlah postingan artikel yang ditampilkan anda bisa menggunakan fungsi query_posts('posts_per_page=5') yang ditempatkan tepat sebelum fungsi pengulangan (the loop)

<?php query_posts('posts_per_page=2'); ?>
<?php while ( have_posts() ) : the_post(); ?>
    <?php the_content(); ?>
<?php endwhile; ?>

Perhatikan pada kode diatas dengan menuliskan perintah posts_per_page=2 sebelum loop, maka wordpress akan menampilkan 2 postingan artikel terbaru anda di halaman yang anda tentukan

Ok sampai disini kita sudah menyelesaikan pekerjaan untuk membuat template Index WordPress, masih ada template lain yang menanti untuk dikerjakan diantaranya template untuk Single Post, Post Attachment, 404, Comments, Search, The Page , Archive , Sidebar Template dan terakhir Footer. Tapi tenang saja tetap semangat, template yang lain seharunya lebih mudah di bandingkan Index.

Anda juga mungkin suka dengan artikel ini :

  1. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 6 - Membuat Template Header
  2. Penyerangan BotNet Kepada Para Pengguna Wordpress
  3. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 2 - Mengenal Struktur Content Wordpress (HTML Core)
  4. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 5 - Sanitasi dan Validasi untuk Keamanan Theme
  5. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 1 - Instalasi Wordpress dan Development Tool

Komentar

  • Arif (06 Sep 2014 04:22:10)

    kok muncul error kayak gini ya ? "Fatal error: Call to undefined function W3functionDesign_posted_on() in C:xampphtdocswpwp-contentthemesWPcontent.php on line 13"
    butuh pencerahan dong

  • asep (05 Nov 2013 10:32:26)

    saya sudah mengikuti tahapan smpai bagian 6, tpi di hasilnya, tidak ada menu Home, itu knpa ya? mhon bntuannya.

  • i[at]w3function.com (14 May 2013 07:22:30)

    @yayan di artikel ini saya sudah update dan tambahkan penjelasan untuk menjawab pertanyaan anda, silahkan baca bagian terakhir, cheers

  • Yayan (13 May 2013 05:20:36)

    Kalau misalnya saya mau batasi jumlah posting yang muncul lewat kode ditema bagaimana ya?
    misalnya disetting reading saya taruh 5. tapi yang mau saya tampilin 2 saja. bagaimana ya????
    mohon bantuannya master

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff