Membuat Daftar Arsip Bergambar

clip_151

Daftar arsip model bergambar di atas memang bukan yang tersulit yang pernah saya buat, tapi sejauh ini, itu yang paling menarik 🙂 Seperti bisa dilihat dari screenshot, halaman arsip tersebut memuat daftar judul manga yang ada di situs download manga saya (situs yang sama yang ada pada tutorial lalu).

Jika ingin membuat daftar arsip seperti di atas, yang harus disiapkan adalah custom field “image” pada masing-masing post. Custom field “image’ ini berisi alamat URL dari file gambar yang akan dijadikan thumbnail pada daftar arsip. Untuk ukuran bisa Anda sesuaikan dengan kebutuhan, namun untuk contoh di sini ukurannya adalah 32 x 32.

clip_17

Nah, berikut ini langkah-langkah pembuatannya:

  1. Buat file template baru dan unggah ke dalam direktori theme yang Anda gunakan. Misalnya saja arsipgambar.php.
  2. Edit file tersebut melalui editor bawaan WordPress dan tuliskan kode berikut:
    <?php
    /*
    Template Name: Arsip Bergambar
    */
    ?>
    
    <?php get_header();?>
    
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div id="pagecontent">
            <div id="pagearticle">
                <h2><?php the_title() ?></h2>
    <?php $temp_query = $wp_query; ?>
    <?php query_posts('cat=14&showposts=-1&orderby=title&order=ASC'); ?>
    <ul style="margin-left:0; padding-left:0; list-style:none;">
    <?php $ctr=0; ?>
      <?php while (have_posts()) : the_post(); ?>
    <li style="height:40px; float:left; width:250px; margin-right:10px;"><img style="float:left; margin:0 10px 5px 0; padding:0; border:none;" src="<?php echo get_post_meta($post->ID, "image", true); ?>" alt="<?php the_title(); ?>" width="32" height="32" /><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
    <?php $ctr++; if ($ctr%3==0) { ?><div style="clear:both; margin:0; padding:0; height:0;">&nbsp;</div><?php } ?>
      <?php endwhile;?>
    </ul>
    <?php $wp_query = $temp_query; ?>
            </div>    
            </div>
        <?php endwhile; else: ?>
        <?php endif; ?>
    <div style="clear:both;">&nbsp;</div>
    
    <?php get_sidebar(); ?>
    
    <?php get_footer(); ?>
  3. Beberapa bagian dari kode di atas mungkin perlu sedikit Anda sesuaikan dengan format theme yang sedang Anda gunakan. Jangan lupa untuk mengubah nilai parameter cat dan menggantinya dengan index kategori artikel yang ingin ditampilkan.
    <?php query_posts('cat=GANTI_INI&showposts=-1&orderby=title&order=ASC'); ?>
  4. Simpan.
  5. Buat Page baru (Pages – Add New). Beri judul sesuai kebutuhan. Pada bagian Template yang ada di kanan, pilih nama template yang baru saja Anda buat. Publikasikan.
    clip_161
  6. Buka halaman Page tersebut dan lihat hasilnya 🙂

Selamat mencoba!

Iklan

~ oleh cosa pada Maret 27, 2009.

9 Tanggapan to “Membuat Daftar Arsip Bergambar”

  1. Wahh…Pusing dech..Saya ga ahli soal olah2 ginian..Jadi katroks ah…

  2. sebenarnya kan ga harus buat Page Template bos, bisa aja halaman category/tag/archive juga dibikin kaya gitu, lebih maknyus buatku…

  3. Pernah buat yg “mirip” ini. tapi ide di atas menarik sekali, yang bikin menarik itu yg showpost=-1 tuh, tak pikir masak bs ya postingannya ngutang :p soalnya sih biasanya aq bikin nggak minus gitu, bs 10 ato 20.

    dan konternta jg menarik …..
    seep…sep…seep…..

    • hehehe, iya, -1 untuk show all posts. Lagipula anehnya di WordPress kalo kita bikin post/page yg model paged, pasti halaman berikutnya dianggep duplicate content ama Google. Makanya mending sekalian show all di satu halaman 🙂

  4. Tanks bro…, main ya ke dansite.wordpress.com

  5. Oh menarik juga… jd klo buat website komik, DVD, film dan sebagainya bisa buat covernya y mas? kya di itunes store

  6. […] Membuat Daftar Arsip Bergambar Daftar arsip model bergambar di atas memang bukan yang tersulit yang pernah saya buat, tapi sejauh ini, itu yang […] […]

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: