Mari Belajar WordPress lagi, kali ini kita akan coba membahas tentang cara bikin custom page dengan custom loop dan tentu saja custom query. Bingung? Tidak kan? oke mari kita lanjutGan.
Tujuan pembelajaran WordPress kali ini, adalah untuk membuat suatu page khusus dalam blog atau website kita yang mana di page khusus itu hanya akan memuat tulisan dari kategori tertentu (kita juga bisa menggunakan beberapa parameter selain kategori, tapi saya akan kasih contoh dengan katogori dahulu) Contohnya, saya mempunyai halaman wordpress theme gratis, lha kalau kita coba simak dihalaman itu hanya menampilkan tulisan saya dengan jenis WordPress theme kan?
Oke, Mari kita mulai, siapkan lapak dulu biar nyaman dan hasilnya mantap. Sekarang bukan text editor favorit kalian dan lakukan duplikasi dari page.php di theme yang sampean sedang pake.
Jika sudah rename namanya (contoh page-custom.php) kemudian buka file page-custom.php tadi dan tambahkan sedikit kode diatasnya seperti ini
/*
Template Name: Page Custom
*/
?>[/php]
Sebelum melangkah lebih jauh, saya akan sedikit jelaskan fungsi kode diatas, fungsinya kode diatas sebagai perkenalan kepada mesin WordPress bahwa pada theme yang sedang dipake ada Custom Template page. Dengan nama Page Custom. Oke? LanjutGan
Sekarang kita akan menulis kode sedikit lebih banyak, jadi daripada sedikit pusing nanti kodenya COPAS aja terus di MODIF. Anda bisa menambah kode ini diakhir looping/query asli dari page-custom.php setelah ketemu akhir dari looping itu segera tambahkan kode berikut ini
[php]<?php $temp_query = $wp_query; ?><?php
$paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
$sticky=get_option(‘sticky_posts’);
$args=array(
‘caller_get_posts’=>1,
‘category_name’ => ‘Tricks’,
‘post__not_in’ => $sticky,
‘paged’=>$paged,
‘posts_per_page’=>6,
);
//query_posts($args);
$my_query = new WP_Query($args);
while ($my_query->have_posts()) : $my_query->the_post();
?>
<div id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div>
<p><?php the_excerpt(); ?></p>
</div>
<div><?php the_tags(‘Tags: ‘, ‘, ‘, ‘<br />’); ?> <?php if(function_exists(‘echo_tptn_post_count’)) echo_tptn_post_count(); ?></div>
<div></div>
</div>
<!– Post –>
<?php endwhile; ?>
<br />
<?php if(function_exists(‘wp_pagenavi’)) { ?>
<div>
<?php
wp_pagenavi(); ?>
</div>
<br />
<?php } else { ?>
<div>
<div>
<?php next_posts_link(__(‘← Previous Entries’,’public’)) ?>
</div>
<div>
<?php previous_posts_link(__(‘Next Entries →’,’public’)) ?>
</div>
</div>
<?php } ?>
<?php
$wp_query = $temp_query;
wp_reset_query();
?>
[/php]
Setelah sukses menulis kode yang lumayan tadi, mari kita pelajari apa yang kita tulisakan tadi :D Pada baris pertama kode ini $temp_query = $wp_query; bertujuan untuk menyimpan query asli, tujuannya apa? Salah satu tujuannya untuk mengembalikan query itu ketika custom loop kita telah selesai, kenapa harus dikembalikan? agar Comment bisa tepat sasaran, karena kalau tidak kembalikan di terakhir baris ini $wp_query = $temp_query; bisa bisa nanti ketika ada pengunjung kasih komen akan lari ke artikel terakhir dari custom loop kita. Bisa fatal bukan? Pada bagian ini
‘caller_get_posts’=>1,
‘category_name’ => ‘Tricks’,
‘post__not_in’ => $sticky,
‘paged’=>$paged,
‘posts_per_page’=>6,
);
[/php]
Kita bisa bermain-main dengan parameter yang kita mau, seperti category_name, post_per_page dan lain lain, silahlah explore sendiri aja
Setelah kode tadi sudah dianggap beres, silahkan diupload di server dan bikin page baru dengan Title terserah dan jangan lupa pada bagian Page Template pilih template yang barusan kalian bikin ini. Semoga tips sederhana Cara Membuat Custom Page dengan Custom Loop dan Query pada WordPress ini bermanfaat, jika ternyata kode saya ini kurang sempurna, mohon maaf dan jika ada yang bisa lebih menyempurnakan dengan senang hati akan kami terima. Aritkel ini juga terdapat bahasa bule yang bisa disimak di Create Custom Page with Custom Loop
Berikut Kode Komplitnya yang saya coba di Client saya
[php] <?php/*
Template Name: Page Custom
*/
?>
<?php get_header(); ?>
<?php if ( $paged < 2 ) : // Do stuff specific to first page ?>
<div class="sekapur-sirih">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_excerpt(‘<p class="serif">’.__(‘Read the rest of this page »’,’public’).'</p>’); ?>
<?php wp_link_pages(array(__(‘before’,’public’) => ‘<p><strong>’,__(‘Pages:’,’public’),'</strong> ‘,__(‘after’,’public’) => ‘</p>’,’next_or_number’ => __(‘number’,’public’))); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link(__(‘Edit this entry.’,’public’), ‘<p>’, ‘</p>’); ?>
</div>
<?php endif; ?>
<div class="ebook">
<h2 class="pagetitle">Artikel Tricks</h2>
<?php
$paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
$sticky=get_option(‘sticky_posts’);
$args=array(
‘category_name’=>’Tricks’,
‘caller_get_posts’=>1,
‘post__not_in’ => $sticky,
‘paged’=>$paged,
‘posts_per_page’=>6,
);
query_posts($args);
while(have_posts()) : the_post();
?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="metadata">
<?php _e(‘by’,’public’); ?> <?php the_author_posts_link(); ?>
<span class="time"><?php the_date(‘d F Y’) ?> <?php the_time(); ?></span> <?php edit_post_link(__(‘Edit’,’public’), ”, ”); ?>
</div>
<div class="entry">
<?php the_content(__(‘Read the rest of this entry →’,’public’)); ?>
</div>
<div class="botmeta">
<div class="tagged">
<?php the_tags(‘Tags: ‘, ‘, ‘, ‘<br />’); ?>
</div>
<div class="commr">
<?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php if(function_exists(‘wp_pagenavi’)) { ?>
<div class="navinavi">
<?php
wp_pagenavi(); ?>
</div>
<br class="clear" />
<?php } else { ?>
<div class="navigation">
<div class="alignleft">
<?php next_posts_link(__(‘← Previous Entries’,’public’)) ?>
</div>
<div class="alignright">
<?php previous_posts_link(__(‘Next Entries →’,’public’)) ?>
</div>
</div>
<?php } ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/php]
Tulisan ini permintaan dari saudara saya Annosmile, semoga bermanfaat
Related Info
45 comments
Oke ane ikutin caranya mas Nurdin
lumayan ribet juga prosesnya…. tapi di patut di coba… nice post kang .. tanks ya
waahhh sangat membantu banget gan,,oya gan ane mau tanya nih gan tentang contom page,,jadi gini gan bisa kah kita membuat costom page yang isi di dalamnya semacam dasboard yang nantinya bisa di terapkan sebagai dasboard member,,dan si member bisa membuat artikel di situ dan melihat hasil postingan yang sudah di aprove sama adminnya, tolong email ane ya gan makasih.,,salam suses :D
Bisa mas.. dengan membuat Plugin…
mas, saya kan nyoba membuat sebuah plugin,, saya install wordpress di localhost. nah disitu kan aktif di dashboard admin,, bagaimana cara dia bisa tampil dengan membuat sebuah page baru sendiri ketika visit site??
apakah harus membuat script php sendiri yg fungsinya untuk tampil ke user?
numpang baca2 gan
pak, mo nanya
Gimana cara menampilkan pengaturan “PAGE TEMPLATE”?
Saya coba2 gak nemu pengaturannya :(
Pengaturan seperti apa? kalau hanya membuat Page Template baru tinggal modifikasi aja
page.phpkemudian simpan sebagai page-baru.php. Di atas sendiri dari kode ditulis seperti ini[sourcecode language=”php”]
/*
Template Name: Page Baru
*/
[/sourcecode]
Langkah selanjutnya tinggal bikin Page baru dan arahkan ke Page Baru sebagai kustom pagenya
makasih udah bagi caranya sgt bermanfaat.
sukses slalu Gan.
wah,. gak mudeng mas hurufnya,..
hahhahaha
kursus donk mass…bingung neh,simpelnya gini bukan mas kalo sekiranya total baris d postingan kita ada 10 trus pake cara mas bisa tampil 3-5 baris yah??betul g c mas??kalo mmg betul brarti ini mmg yg saya lagi carii!!!tlg d kroscek mas,maklum newbie mode on.
Laaa…hurufnya kriting semuanya…pusing deh mas!!!
Gan, mhn bantuan nih.. di’dashboardku kok gak ada nyang namanya ‘plugin’ ya?? (mode nubiw)… (sleeping) (sleeping)
Ini harus SELF INSTALL WordPress mas.. bukan yang WordPress.com
mas jauhari, itu kan pake the_excerpt(); . kalo pake the_excerpt itukan otomatis tulisan menjadi satu paragraf. misal di konten saya terdapat 2 paragraf tetapi dengan the_excerpt() maka tulisan tersebut menjadi 1 paragraf. nah yang saya pertanyakan bagaimana membuat summary di custom page dengan menggunakan the_content()??
klo defaultnya di index.php, category.php, tag.php, search.php kan biasanya pake the_content() dan saat di query ada summary teksnya. bagaimana dengan kasus ini??
terima kasih atas jawabannya mas :)
Setau saya kalau tulsian
the_excerpt()sampean masukkan sewaktu Posting (coba di cari field excerpt) dan masukan dengan penambahan paragraph make dengan sendirinya nantithe_excerpt()mas taufiq akan ada paragraph sebanyak mas taufiq bikin di bagian excerpt.Mantap infonya, makasih atas ilmunya
waduch…. klw soal php mah ribet amat yaa (sick)
lbih suka aq Html biasa …. (rock)
wew, ruwet juga neh script2nya, hehe. salam
Aduh …rumit ya…ada yg lebih simple!?? maklum msh newbie!!
Hasil ending-nya kayak apa sih mas?!!!
thank
infonya sob..
gitu pembelajaran….hehehe
Mantap bos
Gan gimana caranya bikin tampilan seperti di bawah post artikel,….Pembaca kami juga menyukai nah di bawahnya ada recent post dg gampar maupun tulisan gimana cara buatnya….
terimakasih banyak… :-) :-) :-)
Ko ga dikasih prevew page-nya kang? jadi bingung + ragu saya mau cobanya di Blepot.Com
Mas jauhari, ane mau tanya. Klo untuk custom page untuk gambar hasil attach di blog kita apa bisa pakai cara ini. Sebagai contoh di moreindonesia.com ( bukan blog saya ) tp punya temen hehe. saat gambar nya di klik maka menghasilkan tampilan blog yang berbeda ^_^. terima kasih pencerahan nya :)
komentar sama masuk spam mas
.-= annosmile´s last blog ..Menikmati Sejuknya Kebun Raya Bogor =-.
saya coba pake themes default (kubric) wordpress
wp-page navinya gak jalan mas
cuma keluar tulisan PAGE 1 – 0
boleh tau yg kemarin blog yg kata mas jauhari bisa menggunakan code diatas
pake wp-page navi versi berapa?
codenya sama persis atau ada penambahan mas?
looping/query asli dari page-custom.php itu sebelah mana mas? maaf gak tau istilah2nya
Nanti saya UPDATEnya tutorial saya mas.. CODE lengkapnya.. biar mudah… ;)
Trus ini intinya gimana ??
buat “Custom Page” … apa bedanya dengan “Page Template” yang biasa dipake untuk merubah tampilan pada page tertentu ??
Sorry bro masih bingung ini …
Ya kalau page template standard kan hanya menampilkan data default.. lha ini salah satu cara meng Kustomnya pakde…
Oww jdi gtu caranya ya mas, dlu prnah coba cara yg dikit beda tpi gak berhasil. Thanks
artikel menarik, walaupun saya masih blank dengan PHP :-P
mkasih ya. info yg membantu. lnjtkan!!
Kalau di WP gratisan bisa nggak mas? (mmm)
.-= Perawan Desah´s last blog ..PR blogku 3 =-.
saya bingung bro :), eh itu foto siapa saja?
matur nuwun banget mas..
sangat membantu sekali
.-= annosmile´s last blog ..Ka’bah Itu Berada di Pantai Selatan Yogyakarta =-.
ngakak moco’ komentmu nno’
bukan’e kamu di awal paragraf sudah terhipnotis kata bingung :D
xixixixi
.-= raiderhost´s last blog ..Ternyata Cinta yang Menguatkan Aku =-.
woh mantap gan, dulu didats pernah bikin tutor ginian tapi bukan untuk page, intinya sih hampir sama memisahkan salah satu postingan dari kategori pada posisi berbeda. praktekah
.-= geblek´s last blog ..Jembatan Barelang Di Malam Hari =-.
wooohhh kudu belajar jopo montro iki critane..