TutorialPedia Tutorial Bahasa Pemrograman, Linux dan Blogging
Pada artikel sebelumnya kita telah mencoba membuat related post didalam postingan dengan menggunakan plugin inline related post. Karena ada beberapa pertanyaan pada grup wordpress indonesia bagaimana cara membuat inline related post tanpa plugin. Saya akan membuatkan tutorial cara membuat related post seperti berikut :
related post seperti diatas banyak sekali digunakan pada situs-situs populer seperti jalan tikus , males banget dsb.
Dibawah adalah inline related post yang ada di malesbanget.
Related post jalantikus.com
Sedangkan dibawah ini adalah related post yang ada di jalantikus.
Related post jalantikus.com
Gambar diatas adalah contoh dari related post di dalam postingan yang akan kita buat. Tutorial ini hanya digunakan untuk anda yang menggunakan CMS WordPress self host.
Pada tutorial ini kita hanya perlu menambah function baru pada wordpress dan dengan sedikit custom css agar tampilan sesuai dengan gambar diatas.
Membuat Related Post di dalam Postingan tanpa Plugin
tambahkan kode berikut pada function.php pastikan kode tersebut berada di dalam <?php ?> untuk beberapa themes yang mendukung untuk custom function seperti theme yang saya gunakan, akan lebih baik di letakkan pada file tersebut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?php function ShortCodeIseng($atts){ extract(shortcode_atts(array( 'number' => 5, 'tag' => 'default-tag', 'bacajuga' => '<div class="bacajuga">', 'titlebaca' => '<div class="titlebaca"><strong>Baca Juga:</strong></div>', 'contentbaca' => '<div class="contentbaca">', 'openul' => '<ul>', 'id' => get_the_ID(), ), $atts)); $return_string .= ''.$bacajuga.''.$titlebaca.''.$openul.''; $the_query = new WP_Query(array('tag' => $tag, 'orderby' => 'date', 'order' => 'DESC' , 'showposts' => $number , 'post__not_in' => array( $id ), 'tag__not_in' => array(00001, 00002, 00003) )); if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $return_string .= '<li><strong><a target="_blank" href="'.get_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a></strong></li>'; } } else { } wp_reset_postdata(); $return_string .= '</ul>'; $return_string .= '</div>'; $return_string .= '<div class="partner-banner-aftc-baca-juga" style="text-align: center; margin-top: 30px;"></div>'; return $return_string; } add_shortcode( 'postingan', 'ShortCodeIseng' ); ?> |
kode diatas berfungsi untuk menampilkan post berdasarkan tag, dengan function sederhana untuk membuat shorcode agar mudah penggunaan nantinya. Untuk informasi lebih lanjut tentang shotcode pada wordpress, anda bisa membaca dokumentasinya berikut. Shortcode API
lalu tambahkan css berikut ini pada Appearance -> edit css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.bacajuga{ position: relative; display: inline-block; } .bacajuga .titlebaca{ background-color: white; position: absolute; margin-left: 30px; margin-top: -14px; padding: 0px 15px; } .bacajuga .contentbaca{ border: solid 1px #dddddd; padding: 20px 20px 0px 20px; } |
Cara penggunaannya
Cukup tambahkan shortcode berikut pada postingan anda.
[postingan number=3 tag=”wordpress” ]
number : adalah jumlah artikel yang akan di tampilkan. apabila tidak diisi maka secara default ia akan menampilkan 5 artikel.
tag : artikel yang akan ditampilkan berdasarkan tag.
jikan anda ingin menambahkan lebih dari satu tag, gunakan slug +
[postingan number=3 tag=”Tutorial+wordpress” ]
Demikian adalah cara memasang related post di dalam postingan tanpa plugin.
Selamat mencoba.
mantap gan, makasi gan
jangan lupa kunjungan balik
Saya banyak banget mas kode <?php di function.php. Yang saya pilih yang mana ya ?
CSS untuk .bacajuga .contentbaca {} ga jalan gan.. Jadi bordernya ga bisa tampil.. Kenapa ya?
mana link blognya biar saya cek
mantap gan, akhirnya saya bisa buat Related Post di dalam artikel.
Kok engga work ya gan 🙁