Tautan Emosi dan Pikiranku

Situs Portal Dengan WordPress, Kenapa Tidak ? (part 1)

Pengalaman ini adalah tentang kemudahan memanajemen situs portal yang saya buat menggunakan wordpress,  – milik teman saya di kalimantan. Sebelumnya situs ini saya instal menggunakan mesin Joomla. Awalnya, sebelum menjadi situs portal, vivaborneo.com adalah sebuah blog, dengan wordpress sebagai scriptnya. Lalu saya berpikir, kenapa gak dijadikan portal aja, dan ternyata teman saya setuju. Maka dengan modal sedikit pengetahuan joomla saya berusaha membuat domain vivaborneo.com menjadi portal. Karena waktu itu yang saya ketahui, untuk membuat portal dengan mudah adalah dengan menggunakan joomla. Tapi ternyata ribet juga menggunakan joomla, secara (niru bahasa gaul Jakarta) saya sudah kadung akrab dengan wordpress, ditambah serangan hacker turki yang mengacak-acak halaman depan vivaborneo sebanyak tiga kali, lumayan capek juga menangani orang iseng. Akhirnya saya berpikir ulang untuk terus menggunakan joomla atau yang lainnya. Pernah kepikiran menggunakan codeigniter, karena katanya lebih aman, tapi belum bisa saya terapkan sekarang karena saya baru belajar.

Sebenarnya saya sudah merasa nyaman dengan menggunakan wordpress, tetapi hanya untuk keperluan blog. Belakangan saya mencoba mencari alternatif untuk membuat situs portal dengan kenyamanan yang sama saat memanajemen wordpress. Apa mungkin ?

Mungkin saja.

Jawabannya adalah dengan memodifikasi themes-nya.

Scenarionya adalah seperti ini :

Saya ingin situs portal tersebut menampilkan semua atau sebagian dari kategori di halaman depan. Contoh bisa dilihat disini

Kedua, saya ingin situs portal menampilkan headline di halaman depan dari semua kategori. Artinya kategori apapun yang akan ditampilkan pada headline akan terlihat tanpa mengganggu kategori lainnya.

Mulailah saya mencari themes wordpress yang mendukung scenario saya dengan kata kunci themes magazine.

Sudah puluhan themes yang saya coba, tetapi baru dapat yang memuaskan dan mendukung scenario diatas  karena mudah dimodifikasi. Selain daripada itu themes-themes yang lain hanya terlihat tampilannya saja seperti situs portal tapi konsepnya sama, seperti blog. Posting terakhir akan menggusur posting yang terdahulu.

Berikut ini kode sumber dari themes yang saya pakai :

Pada bagian home.php (index.php)

untuk menampilkan headline :

<div id=”homepage”>

<div id=”homepageheadline”>

<h3>Headline</h3>

<!–This is where the thumbnails are found for the homepage bottom section – note the custom field name for this image is “thumbnail”. Recommended image size is 70×70, as the stylesheet is written for this size.–>

<?php $recent = new WP_Query(“cat=5&showposts=1”); while($recent->have_posts()) : $recent->the_post();?>

<div class=”intro”>

<div class=”intropost”>

<div class=”introinfo”>

</div>

</div>

</div>


<?php if( get_post_meta($post->ID, “image”, true) ): ?>
<div class=”judul”>

<span class=”image”>

<a href=”<?php the_permalink() ?>” class=”thetip” title=”<?php the_title() ?> :: <?php the_content_rss(”, TRUE, ”, 50); ?>”><img style=”float:left;margin:0px 10px 0px 0px;” src=”<?php $key=”image”; echo get_post_meta($post->ID, $key, true); ?>” alt=”img”/></a>

</span>

<?php else: ?>
<!– jika tidak keluar maka akan muncul gambar berikut –>


<a href=”<?php the_permalink() ?>” rel=”bookmark”><img style=”float:left;margin:0px 10px 0px 0px;”  src=”<?php bloginfo(‘template_url’); ?>/images/thumbnail.png” alt=”<?php the_title(); ?>” /></a>

<?php endif; ?>

<b><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></b>

<p><em><?php the_time(‘d F Y’); ?></em></p>
<?php the_content_limit(350, “”); ?>
<p><span class=”continue”><a title=”Permanent Link to <?php the_title(); ?>” href=”<?php the_permalink() ?>”></a></span></p>

<div style=”border-bottom:1px dotted #2255AA; margin-bottom:10px; padding:0px 0px 10px 0px; clear:both;”></div>

<?php endwhile; ?>

<!–This is where you can specify the archive link for each section. Replace the # with the appropriate URL–>
<div class=”judulbawah”>
<b><a href=”url untuk kategori situs anda” rel=”bookmark”>Lihat semua entry dari kategori ini</a></b>
</div>
</div>

</div>
</div>

<!– selesai –>

Penjelasan :

1. Yang perlu diperhatikan adalah code berikut :

<?php $recent = new WP_Query(“cat=5&showposts=1”); while($recent->have_posts()) : $recent->the_post();?>

pada bagian WP_Query(“cat=5&showposts=1“)

Angka 5 adalah Nomer ID category situs. Artinya, nanti yang akan di tampilkan adalah category nomer lima. Dalam kasus situs saya adalah category Berita.

Sedangkan Nomer 1 adalah banyaknya post yang akan tampil. Bisa diisi sesukanya, tapi karena ini untuk headline, biasanya sih hanya satu.

2. Untuk menampilkan gambar dengan ukuran otomatis

<?php if( get_post_meta($post->ID, “image”, true) ): ?>
<div class=”title”>

<span class=”image”>

<a href=”<?php the_permalink() ?>” class=”thetip” title=”<?php the_title() ?> :: <?php the_content_rss(”, TRUE, ”, 50); ?>”><img style=”float:left;margin:0px 10px 0px 0px;” src=”<?php $key=”image”; echo get_post_meta($post->ID, $key, true); ?>” alt=”img”/></a>

</span>

Sedangkan code berikut adalah untuk menampilkan gambar jika dalam posting, custom fieldnya dibiarkan kosong :

<?php else: ?>
<!– jika tidak keluar maka akan muncul gambar berikut –>


<a href=”<?php the_permalink() ?>” rel=”bookmark”><img style=”float:left;margin:0px 10px 0px 0px;”  src=”<?php bloginfo(‘template_url’); ?>/images/thumbnail.png” alt=”<?php the_title(); ?>” /></a>

<?php endif; ?>

Untuk ukuran image dan thumbnail headline, pada bagian style.php bisa dipasang code berikut :

.title {
font-size: 18px;

}

span.image {
float:top;
margin:0px 0px 10px 10px;
}

.image img {
border:1px solid #3B352C;
width: 280px;
height: 200px;
}

span.thumb {
float:top;
margin:0px 0px 10px 10px;
}

.thumb img {
border:1px solid #3B352C;
width: 280px;
height: 200px;

}

Key yang digunakan untuk menampilkan gambar adalah “image” maka pada custom fieldnya nanti beri key:  image

Sekian dulu, semoga bermanfaat.

Untuk selanjutnya saya akan membahas mengenai tampilan category pada halaman depan setelah headline.

Advertisements

10 responses

  1. yulli

    wah..wah…hebaat awakmu cak..hiiiiihiii…aku jadi dikit ikutan ngerti…ayoo lanjutin lagi yahh..hehehe

    May 2, 2009 at 7:53 pm

  2. mantab banget juragaan… wordpress emang lebih simple. saya dulu jg ikut2an pake joomla, mau posting malah susah banget…

    May 7, 2009 at 7:07 am

  3. betul gan.. pake si joom.. membuat pusing kepala, wah ga nyangka pakar TI bisa nyasar kesini….

    May 7, 2009 at 9:15 am

  4. ini yang kucari…
    thank

    September 4, 2009 at 8:26 am

    • siip.. perkembangan wordpress cukup cepat, bahkan perusahaan2 besar sekarang sudah banyak yg menggunakan wordpress karena kemudahannya.

      September 4, 2009 at 2:06 pm

  5. Pencerahan yang oke banget, tapi omong2 vivaborneo.com-nya kok lambat ya ? Apa koneksi saya yang lagi down ? Tapi gak masalah yang penting oke !

    January 10, 2010 at 2:51 pm

    • wah, agak lambat ya, mungkin karena terlalu banyak script yg ga kepakai kali. maklum baru belajar, jadi banyak kode2 yg sebenarnya hanya untuk latihan masih terpasang di vivaborneo. makasih atas masukkannya..

      January 12, 2010 at 4:26 am

  6. thanks… boormark! http://www.inijakarta.com

    February 26, 2010 at 5:06 am

  7. Perlu pake plugin tambahan gk mas, ku binging udah beli domain http://surveyorindonesia.info tp bingung,pinginya sih buat portal tp pke wp

    February 9, 2011 at 9:29 pm

    • ada beberapa plugin yg saya pake. tapi gak masalah ko.
      klo sekarang udah banyak banget themes khusus untuk portal, coba aja dengan kata kunci di google “themes magazine wp, magazine themes wordpress,” dll

      February 10, 2011 at 2:53 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s