• 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 8 - Membuat Template Single Post, Post Attachment dan 404

14‘13
May

info80.jpg

Anda telah membangun template index sebagai halaman utama WordPress, pada template index secara default disana kita menampilkan ringkasan dari postingan artikel terbaru dan juga pencarian postingan artikel. Sekarang anda memerlukan template untuk menampilkan detail dari setiap ringkasan postingan artikel atau detail artikel yang hilang (Error 404), di sini kita akan membangun template untuk single post, post attachment, dan halaman error 404

Template single post

Pada artikel sebelumnya saya berbohong kepada anda bahwa template selanjutnya akan lebih mudah dari template index, pada kenyataanya structure dari template single.php dan hampir sebagian besar template lainnya akan sama panjangnya dengan index.php :p

Ayo udah tanggung kesini kita lanjutkan jangan menyerah, silahkan buka single.php di folder tema anda lalu isi kode dibawah

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */
 
get_header(); ?>
 
        <div id="primary" class="content-area">
            <div id="content" class="site-content" role="main">
 
            <?php while ( have_posts() ) : the_post(); ?>
 
                <?php W3functionDesign_content_nav( 'nav-above' ); ?>
 
                <?php get_template_part( 'content', 'single' ); ?>
 
                <?php W3functionDesign_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><!-- #content .site-content -->
        </div><!-- #primary .content-area -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Perhatikan pada kode diatas kita menggunakan fungsi get_template_part() lagi disini

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

Baris ini berfungsi untuk memerintahkan wordpress mencari content-single.php di folder theme kita, jika tidak ada maka content.php secara default akan dipanggil wordpress. Selanjutnya perhatikan juga baris kode berikut di dalam single.php

<?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 );
?>

Kita akan memanggil komentar hanya jika komentar di dalam setting wordpress di buka dan setidaknya ada satu komentar didalam postingan artikel. Template untuk komentar akan kita buat dan bahas dibagian artikel yang lain jadi sekarang di fungsi comments_template() kita isi string kosong comments_template( '', true );

Ok sebagian besar kode yang kita pakai hampir sama dengan template index di artikel sebelumnya jadi tidak ada hal istimewa lainnya yang perlu dijelaskan.

Template single content

Sebelumnya sudah saya jelaskan pada fungsi get_template_part( 'content', 'single' ) WordPress akan terlebih dahulu mencari content-single.php jika tidak ada maka content.php secara default akan dipanggil wordpress. Kenapa tidak pake content.php aja sih repot amat? Ya bisa aja content-single.php tidak dibuat karena isinya juga hampir sama dengan content.php, tapi ada perbedaan-perbedaan antara content.php dan content-single.php diantaranya sebagai berikut

  • Pada content-single.php kita tidak memerlukan kondisional fungsi excerpts() yang digunakan sebagai ringkasan artikel pada hasil pencarian karena kita sudah berada di tampilan detail artikel
  • Pada content-single.php kita tidak memerlukan fungsi pengecekan untuk menampilkan meta, disini kita juga tidak memerlukan link komentar karena disini kita sudah memanggil template komentar comments_template()
  • Pada inc/template-tags.php diartikel sebelumnya kita sudah membuat fungsi navigasi yang digunakan khusus untuk single : if ( is_single() ) coba buka dan perhatikan perbedaanya. Untuk content.php kita menggunakan previous_posts_link() sebaliknya pada single.php kita menggunakan previous_post_link() : post dan posts

Ok sekarang mari kita bangun templatenya, silahkan masukan kode berikut kedalam content-single.php

<?php
/**
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */
?>
 
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <h1 class="entry-title"><?php the_title(); ?></h1>
 
        <div class="entry-meta">
            <?php W3functionDesign_posted_on(); ?>
        </div><!-- .entry-meta -->
    </header><!-- .entry-header -->
 
    <div class="entry-content">
        <?php the_content(); ?>
        <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'W3functionDesign' ), 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->
 
    <footer class="entry-meta">
        <?php
            /* translators: used between list items, there is a space after the comma */
            $category_list = get_the_category_list( __( ', ', 'W3functionDesign' ) );
 
            /* translators: used between list items, there is a space after the comma */
            $tag_list = get_the_tag_list( '', ', ' );
 
            if ( ! W3functionDesign_categorized_blog() ) {
                // This blog only has 1 category so we just need to worry about tags in the meta text
                if ( '' != $tag_list ) {
                    $meta_text = __( 'This entry was tagged %2$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'W3functionDesign' );
                } else {
                    $meta_text = __( 'Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'W3functionDesign' );
                }
 
            } else {
                // But this blog has loads of categories so we should probably display them here
                if ( '' != $tag_list ) {
                    $meta_text = __( 'This entry was posted in %1$s and tagged %2$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'W3functionDesign' );
                } else {
                    $meta_text = __( 'This entry was posted in %1$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'W3functionDesign' );
                }
 
            } // end check for categories on this blog
 
            printf(
                $meta_text,
                $category_list,
                $tag_list,
                get_permalink(),
                the_title_attribute( 'echo=0' )
            );
        ?>
 
        <?php edit_post_link( __( 'Edit', 'W3functionDesign' ), '<span class="edit-link">', '</span>' ); ?>
    </footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->

Template post attachments

Tidak semua orang menggunakan post attachments pada wordpressnya, tapi disini akan saya tunjukan caranya. Saat anda menambahkan gambar pada artikel anda secara tidak langsung anda melampirkannya pada postingan artikel, tentu saja anda bisa melampirkan selain gambar seperti video, audio atau aplikasi.

Disini saya akan menunjukan cara membuat template untuk gambar dengan file image.php yang telah di buat di tahapan Struktur File dan Folder Theme WordPress sebelumnya. Jika anda mau membuat template untuk video dan lainya anda bisa mengadaptasi dari tutorial membuat template gambar ini dengan file video.php, audio.php, dan application.php caranya sama saja.

Ok silahkan buka file image.php anda dan isi dengan kode berikut

<?php
/**
 * The template for displaying image attachments.
 *
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */
 
get_header();
?>
 
        <div id="primary" class="content-area image-attachment">
            <div id="content" class="site-content" role="main">
 
            <?php while ( have_posts() ) : the_post(); ?>
 
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <header class="entry-header">
                        <h1 class="entry-title"><?php the_title(); ?></h1>
 
                        <div class="entry-meta">
                            <?php
                                $metadata = wp_get_attachment_metadata();
                                printf( __( 'Published <span class="entry-date"><time class="entry-date" datetime="%1$s" pubdate>%2$s</time></span> at <a href="%3$s" title="Link to full-size image">%4$s × %5$s</a> in <a href="%6$s" title="Return to %7$s" rel="gallery">%7$s</a>', 'W3functionDesign' ),
                                    esc_attr( get_the_date( 'c' ) ),
                                    esc_html( get_the_date() ),
                                    wp_get_attachment_url(),
                                    $metadata['width'],
                                    $metadata['height'],
                                    get_permalink( $post->post_parent ),
                                    get_the_title( $post->post_parent )
                                );
                            ?>
                            <?php edit_post_link( __( 'Edit', 'W3functionDesign' ), '<span class="sep"> | </span> <span class="edit-link">', '</span>' ); ?>
                        </div><!-- .entry-meta -->
 
                        <nav id="image-navigation" class="site-navigation">
                            <span class="previous-image"><?php previous_image_link( false, __( '← Previous', 'W3functionDesign' ) ); ?></span>
                            <span class="next-image"><?php next_image_link( false, __( 'Next →', 'W3functionDesign' ) ); ?></span>
                        </nav><!-- #image-navigation -->
                    </header><!-- .entry-header -->
 
                    <div class="entry-content">
 
                        <div class="entry-attachment">
                            <div class="attachment">
                                <?php
                                    /**
                                     * Grab the IDs of all the image attachments in a gallery so we can get the URL of the next adjacent image in a gallery,
                                     * or the first image (if we're looking at the last image in a gallery), or, in a gallery of one, just the link to that image file
                                     */
                                    $attachments = array_values( get_children( array( 'post_parent' => $post->post_parent, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID' ) ) );
                                    foreach ( $attachments as $k => $attachment ) {
                                        if ( $attachment->ID == $post->ID )
                                            break;
                                    }
                                    $k++;
                                    // If there is more than 1 attachment in a gallery
                                    if ( count( $attachments ) > 1 ) {
                                        if ( isset( $attachments[ $k ] ) )
                                            // get the URL of the next image attachment
                                            $next_attachment_url = get_attachment_link( $attachments[ $k ]->ID );
                                        else
                                            // or get the URL of the first image attachment
                                            $next_attachment_url = get_attachment_link( $attachments[ 0 ]->ID );
                                    } else {
                                        // or, if there's only 1 image, get the URL of the image
                                        $next_attachment_url = wp_get_attachment_url();
                                    }
                                ?>
 
                                <a href="<?php echo $next_attachment_url; ?>" title="<?php echo esc_attr( get_the_title() ); ?>" rel="attachment"><?php
                                    $attachment_size = apply_filters( 'W3functionDesign_attachment_size', array( 1200, 1200 ) ); // Filterable image size.
                                    echo wp_get_attachment_image( $post->ID, $attachment_size );
                                ?></a>
                            </div><!-- .attachment -->
 
                            <?php if ( ! empty( $post->post_excerpt ) ) : ?>
                            <div class="entry-caption">
                                <?php the_excerpt(); ?>
                            </div><!-- .entry-caption -->
                            <?php endif; ?>
                        </div><!-- .entry-attachment -->
 
                        <?php the_content(); ?>
                        <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'W3functionDesign' ), 'after' => '</div>' ) ); ?>
 
                    </div><!-- .entry-content -->
 
                    <footer class="entry-meta">
                        <?php if ( comments_open() && pings_open() ) : // Comments and trackbacks open ?>
                            <?php printf( __( '<a class="comment-link" href="#respond" title="Post a comment">Post a comment</a> or leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'W3functionDesign' ), get_trackback_url() ); ?>
                        <?php elseif ( ! comments_open() && pings_open() ) : // Only trackbacks open ?>
                            <?php printf( __( 'Comments are closed, but you can leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'W3functionDesign' ), get_trackback_url() ); ?>
                        <?php elseif ( comments_open() && ! pings_open() ) : // Only comments open ?>
                            <?php _e( 'Trackbacks are closed, but you can <a class="comment-link" href="#respond" title="Post a comment">post a comment</a>.', 'W3functionDesign' ); ?>
                        <?php elseif ( ! comments_open() && ! pings_open() ) : // Comments and trackbacks closed ?>
                            <?php _e( 'Both comments and trackbacks are currently closed.', 'W3functionDesign' ); ?>
                        <?php endif; ?>
                        <?php edit_post_link( __( 'Edit', 'W3functionDesign' ), ' <span class="edit-link">', '</span>' ); ?>
                    </footer><!-- .entry-meta -->
                </article><!-- #post-<?php the_ID(); ?> -->
 
                <?php comments_template(); ?>
 
            <?php endwhile; // end of the loop. ?>
 
            </div><!-- #content .site-content -->
        </div><!-- #primary .content-area .image-attachment -->
 
<?php get_footer(); ?>

Pada dasarnya isi file tidak jauh berbeda dengan single.php disini tampak memusingkan karena kita tidak memisahkan template get_template_part() untuk content yang berada dibawah fungsi pengulangan. Kalo anda mau membuatnya terpisah bisa saja, buat file lain lalu gunakan get_template_part() untuk memanggilnya.

Pada image.php perbedaanya dengan single.php adalah jelas disini kita menampilkan lampiran gambar. Berdasarkan kode diatas coba periksa kode berikut

                    <header class="entry-header">
                        <h1 class="entry-title"><?php the_title(); ?></h1>
 
                        <div class="entry-meta">
                            <?php
                                $metadata = wp_get_attachment_metadata();
                                printf( __( 'Published <span class="entry-date"><time class="entry-date" datetime="%1$s" pubdate>%2$s</time></span> at <a href="%3$s" title="Link to full-size image">%4$s × %5$s</a> in <a href="%6$s" title="Return to %7$s" rel="gallery">%7$s</a>', 'W3functionDesign' ),
                                    esc_attr( get_the_date( 'c' ) ),
                                    esc_html( get_the_date() ),
                                    wp_get_attachment_url(),
                                    $metadata['width'],
                                    $metadata['height'],
                                    get_permalink( $post->post_parent ),
                                    get_the_title( $post->post_parent )
                                );
                            ?>
                            <?php edit_post_link( __( 'Edit', 'W3functionDesign' ), '<span class="sep"> | </span> <span class="edit-link">', '</span>' ); ?>
                        </div><!-- .entry-meta -->
 
                        <nav id="image-navigation" class="site-navigation">
                            <span class="previous-image"><?php previous_image_link( false, __( '← Previous', 'W3functionDesign' ) ); ?></span>
                            <span class="next-image"><?php next_image_link( false, __( 'Next →', 'W3functionDesign' ) ); ?></span>
                        </nav><!-- #image-navigation -->
                    </header><!-- .entry-header -->

Pada bagian ini kita menampilkan judul gambar mulai dari kapan dipublikasikan, kapan di modifikasi, kapan diupload, ukuran gambar, dimensi gambar berikut link untuk memodifikasi gambar

Selanjutnya kita menampilkan menu navigasi untuk gambar, beberapa fungsi untuk gambar pada inc/tweaks.php sudah kita buatkan di bagian Menyiapkan Fungsi-fungsi (Functions) Theme sebelumnya. Tentu dibagian artikel tersebut masih ingat dengan fungsi W3functionDesign_enhanced_image_navigation(), fungsi ini berguna disini untuk membuat layar browser berada di tempat yang sama pada saat navigasi gambar di klik.

Sampai dengan tahap ini anda sudah mendapatkan halaman detail postingan artikel, bila anda klik link postingan artikel dari halaman awal anda akan mendapatkan tampilan single.php sebagai berikut

Wow sekarang sudah banyak yang bisa dilihat pada tema WordPress kita

Template error 404

404 adalah kode error server untuk halaman yang hilang atau tidak dapat ditemukan, bisa terjadi karena postingan artikel sudah tidak di publish atau kesalahan penulisan URL. Pada WordPress error ini harus kita tangani dan WordPress menyediakan template 404.php untuk menangani error 404. Silahkan buka template 404.php dan kita isi dengan kode dibawah

<?php
/**
 * The template for displaying 404 pages (Not Found).
 *
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */
 
get_header(); ?>
 
    <div id="primary" class="content-area">
        <div id="content" class="site-content" role="main">
 
            <article id="post-0" class="post error404 not-found">
                <header class="entry-header">
                    <h1 class="entry-title"><?php _e( 'Oops! That page can’t be found.', 'W3functionDesign' ); ?></h1>
                </header><!-- .entry-header -->
 
                <div class="entry-content">
                    <p><?php _e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', 'W3functionDesign' ); ?></p>
 
                    <?php get_search_form(); ?>
 
                    <?php the_widget( 'WP_Widget_Recent_Posts' ); ?>
 
                    <div class="widget">
                        <h2 class="widgettitle"><?php _e( 'Most Used Categories', 'W3functionDesign' ); ?></h2>
                        <ul>
                        <?php wp_list_categories( array( 'orderby' => 'count', 'order' => 'DESC', 'show_count' => 1, 'title_li' => '', 'number' => 10 ) ); ?>
                        </ul>
                    </div><!-- .widget -->
 
                    <?php
                    /* translators: %1$s: smilie */
                    $archive_content = '<p>' . sprintf( __( 'Try looking in the monthly archives. %1$s', 'W3functionDesign' ), convert_smilies( ':)' ) ) . '</p>';
                    the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_title=</h2>$archive_content" );
                    ?>
 
                    <?php the_widget( 'WP_Widget_Tag_Cloud' ); ?>
 
                </div><!-- .entry-content -->
            </article><!-- #post-0 .post .error404 .not-found -->
 
        </div><!-- #content .site-content -->
    </div><!-- #primary .content-area -->
 
<?php get_footer(); ?>

Ya seperti sebelumnya pada single.php tidak ada yang istimewa dan perlu dijelaskan, disini pada error 404 saya tidak memanggil sidebar, tapi apabila anda menginginkannya silahkan tambahkan kodenya anda sudah tentu bisa.

Anda juga mungkin suka dengan artikel ini :

  1. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 3 - Struktur File dan Folder Theme
  2. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 4 - Menyiapkan Fungsi-fungsi (Functions) Theme
  3. Penyerangan BotNet Kepada Para Pengguna Wordpress
  4. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 7 - Membuat Template Index
  5. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 6 - Membuat Template Header

Komentar

  • audio haji (20 Nov 2015 03:31:24)

    Mudah dimengerti, di coba dulu gan

  • Blogging Tips (27 Jun 2015 07:23:23)

    Menarik sekali pembahasan cara membuat templatenya gan. Kebetulan lagi belajar php nih. Soalnya selama ini hanya terbiasa dengan html karena lama pake cms blogger.

  • sonny (09 Jun 2015 03:00:24)

    kelamaan belajarnya ribet keburu aus duluan

  • Irwan (10 Apr 2015 07:23:00)

    Gan mau nanya gimana cara nampilin INBOX SMS dari Gammu di Home Page WP...ada tutorialnya Nggak?

  • heriganteng (14 Dec 2014 05:02:16)

    mau nanya apa bedanya
    post dan page ?
    saya lihat di tempat saya ada script ini
    <?php the_content(); ?>
    apakah fungsinya sama untuk ditampilkan di post dan di page?
    mohon bantuannya via email ya

» Muat Komentar Sebelumnya (6 komentar) loading

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