• 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 9 - Membuat Template Komentar (comment.php)

15‘13
May

info80.jpg

Ok tinggal beberapa template lagi yang akan kita kerjakan dan sekarang giliran template komentar (comment) yang akan kita selesaikan. Beberapa hal yang akan kita lakukan pada template komentar diantaranya adalah:

  • Mencegah loading pada bot dan artikel yang diproteksi password
  • Melakukan pemeriksaan apakah postingan artikel memiliki komentar
  • Membedakan antara komentar dan Pelacakan (trackbacks/pingbacks) sehingga kita dapat menampilkan trackback dengan mock-up sederhana.
  • Jika banyak komentar kita akan memberikan navigasi komentar dalam betuk page pagination
  • Terakhir jika komentar dibuka kita akan menampilkan respon komentar

Lumayan banyak yang akan dikerjakan tapi tenang tidak akan terlalu panjang :p, disini kita hanya akan bekerja dengan file template-tags.php dan comment.php

Fungsi untuk komentar and pingbacks

Kita akan menggunakan fungsi wp_list_comments() WordPress yang berguna untuk menampilkan daftar komentar dan markup pingbacks pada postingan artikel. Untuk membuat template komentar kita bekerja kita membutuhkan fungsi yang mengendalikan layout sebenarnya dari komentar dan pingbacks. Silahkan buka file template-tags.php di folder /inc dan pada baris paling terakhir masukan kode berikut

if ( ! function_exists( 'W3functionDesign_comment' ) ) :
/**
 * Template for comments and pingbacks.
 *
 * Used as a callback by wp_list_comments() for displaying the comments.
 *
 * @since W3functionDesign 1.0
 */
function W3functionDesign_comment( $comment, $args, $depth ) {
    $GLOBALS['comment'] = $comment;
    switch ( $comment->comment_type ) :
        case 'pingback' :
        case 'trackback' :
    ?>
    <li class="post pingback">
        <p><?php _e( 'Pingback:', 'W3functionDesign' ); ?> <?php comment_author_link(); ?><?php edit_comment_link( __( '(Edit)', 'W3functionDesign' ), ' ' ); ?></p>
    <?php
            break;
        default :
    ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
        <article id="comment-<?php comment_ID(); ?>" class="comment">
            <footer>
                <div class="comment-author vcard">
                    <?php echo get_avatar( $comment, 40 ); ?>
                    <?php printf( __( '%s <span class="says">says:</span>', 'W3functionDesign' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?>
                </div><!-- .comment-author .vcard -->
                <?php if ( $comment->comment_approved == '0' ) : ?>
                    <em><?php _e( 'Your comment is awaiting moderation.', 'W3functionDesign' ); ?></em>
                    <br />
                <?php endif; ?>
 
                <div class="comment-meta commentmetadata">
                    <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"><time pubdate datetime="<?php comment_time( 'c' ); ?>">
                    <?php
                        /* translators: 1: date, 2: time */
                        printf( __( '%1$s at %2$s', 'W3functionDesign' ), get_comment_date(), get_comment_time() ); ?>
                    </time></a>
                    <?php edit_comment_link( __( '(Edit)', 'W3functionDesign' ), ' ' );
                    ?>
                </div><!-- .comment-meta .commentmetadata -->
            </footer>
 
            <div class="comment-content"><?php comment_text(); ?></div>
 
            <div class="reply">
                <?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
            </div><!-- .reply -->
        </article><!-- #comment-## -->
 
    <?php
            break;
    endswitch;
}
endif; // ends check for W3functionDesign_comment()

Pada fungsi di atas kita menggunakan PHP SWITCH untuk memeriksa apakah jenis komentar adalah pingbacks atau komentar biasa, SWITCH adalah fungsi yang hampir sama dengan IF ELSE, apabila anda belum mengetahui fungsi ini bisa terlebih dahulu membaca artikel saya tentang Control Flow dalam PHP (if - else, if - elseif - else, switch - case, for, while, break, continue, return, exit).

Perhatikan pada tag <li> yang digunakan untuk membungkus pingback dan komentar, disana saya tidak menutupnya dengan </li> karena fungsi WordPress wp_list_comments() akan secara otomatis menutup tag <li>. Setiap <li> diisi dengan class untuk selanjutnya ditahap akhir nanti akan kita markup dengan CSS, khusus untuk tampilan komentar disini kita menggunakan comment_class() seperti halnya penggunaan body_class() dan post_class() diartikel sebelumnya.

Selanjuntnya kita menggunakan berbagai fungsi WordPress untuk menampilkan avatar get_avatar( $comment, 40 ) dengan ukuran lebar 40 pixel. Mengisi nilai untuk masing-masing tag dengan tanggal publikasi kometar comment_time( 'c' ), link komentar get_comment_link(), isi komentar comment_text() dan lainnya

Template komentar (comment.php)

Ok sekarang kita akan buatkan template utuk komentar WordPress kita, berikut ini panduan dan referensi fungsi-fungsi untuk menampilkan form komentar di postingan artikel WordPress Codex. Silahkan buka fie comment.php anda dan isi dengan kode dibawah

<?php
/**
 * The template for displaying Comments.
 *
 * The area of the page that contains both current comments
 * and the comment form. The actual display of comments is
 * handled by a callback to W3functionDesign_comment() which is
 * located in the inc/template-tags.php file.
 *
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */
?>
 
<?php
    /*
     * If the current post is protected by a password and
     * the visitor has not yet entered the password we will
     * return early without loading the comments.
     */
    if ( post_password_required() )
        return;
?>
 
    <div id="comments" class="comments-area">
 
    <?php // You can start editing here -- including this comment! ?>
 
    <?php if ( have_comments() ) : ?>
        <h2 class="comments-title">
            <?php
                printf( _n( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'W3functionDesign' ),
                    number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
            ?>
        </h2>
 
        <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through? If so, show navigation ?>
        <nav role="navigation" id="comment-nav-above" class="site-navigation comment-navigation">
            <h1 class="assistive-text"><?php _e( 'Comment navigation', 'W3functionDesign' ); ?></h1>
            <div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'W3functionDesign' ) ); ?></div>
            <div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'W3functionDesign' ) ); ?></div>
        </nav><!-- #comment-nav-before .site-navigation .comment-navigation -->
        <?php endif; // check for comment navigation ?>
 
        <ol class="commentlist">
            <?php
                /* Loop through and list the comments. Tell wp_list_comments()
                 * to use W3functionDesign_comment() to format the comments.
                 * If you want to overload this in a child theme then you can
                 * define W3functionDesign_comment() and that will be used instead.
                 * See W3functionDesign_comment() in inc/template-tags.php for more.
                 */
                wp_list_comments( array( 'callback' => 'W3functionDesign_comment' ) );
            ?>
        </ol><!-- .commentlist -->
 
        <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through? If so, show navigation ?>
        <nav role="navigation" id="comment-nav-below" class="site-navigation comment-navigation">
            <h1 class="assistive-text"><?php _e( 'Comment navigation', 'W3functionDesign' ); ?></h1>
            <div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'W3functionDesign' ) ); ?></div>
            <div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'W3functionDesign' ) ); ?></div>
        </nav><!-- #comment-nav-below .site-navigation .comment-navigation -->
        <?php endif; // check for comment navigation ?>
 
    <?php endif; // have_comments() ?>
 
    <?php
        // If comments are closed and there are comments, let's leave a little note, shall we?
        if ( ! comments_open() && '0' != get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
    ?>
        <p class="nocomments"><?php _e( 'Comments are closed.', 'W3functionDesign' ); ?></p>
    <?php endif; ?>
 
    <?php comment_form(); ?>
 
</div><!-- #comments .comments-area -->

Pada kode diatas saya menampilkan komentar didalam tag <div id="comments" class="comments-area"> seperti halnya dengan apa yang telah dikerjakan sebelumnya, setiap tag/elemen html saya isi dengan nilai-nilai yang di ambil dari fungsi PHP Wordpress yang bisa anda lihat disini WordPress Codex

Sampai dengan tahap ini bila kita buka halaman detail postingan artikel pada browser maka akan tampil sebagai berikut

Tentu saja pekerjaan kita sampai tahap ini masih memperlihatkan tampilan yang mati gaya, tapi tenang kita akan make up theme WordPress kita supaya lebih ganteng di tahap CSS nanti, ikuti terus ya dan subscribe RSS kami.

Anda juga mungkin suka dengan artikel ini :

  1. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 8 - Membuat Template Single Post, Post Attachment dan 404
  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 2 - Mengenal Struktur Content Wordpress (HTML Core)
  5. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 5 - Sanitasi dan Validasi untuk Keamanan Theme

Komentar

  • flowmeter tokico (13 Jun 2016 11:21:55)

    thanks share informasinya ...nambah ilmu nih...

  • Kata memikat wanita (16 Feb 2016 07:35:04)

    sangat bermanfaat sekali artikel ini..

  • Obat sakit tulang belakang pas (13 Jan 2016 09:31:33)

    Trik Baru nih , Akan Saya coba gan

  • Distro Online (15 Dec 2015 10:29:05)

    Wah ternyata keren, mantap untuk dikembangkan

  • produk muslim (12 Nov 2015 04:05:00)

    ok gan, di coba dulu, semoga sukses

» Muat Komentar Sebelumnya (20 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