Tulisan terkait di WordPress Tanpa Plugin

Dalam artikel ini Anda akan belajar tentang cara menambahkan posting terkait di WordPress tanpa plugin, mengapa itu penting dan bagaimana menambahkan gaya ke posting terkait.

A+ A-

Dalam artikel ini kita akan membahas tentang posting terkait di WordPress. Bagaimana menampilkan mereka tanpa plugin dan mengapa Posting terkait penting. Banyak orang menggunakannya, tetapi beberapa dari mereka hanya menggunakan mereka karena orang lain juga. Mereka tidak tahu alasan, mengapa ia membantu dan hal-hal penting lainnya kecil.

Pos terkait

Mengapa Posting terkait Penting untuk Website atau Blog

Posting terkait seperti yang Anda harapkan, display terkait kontak dengan artikel tertentu yang Anda lihat. Dan dengan menggunakan posting terkait untuk menampilkan konten yang sama, pengunjung situs Anda mungkin tertarik pada artikel lain yang telah ditampilkan di sana. Ini berarti mereka tinggal lebih pada website Anda, yang mengurangi tingkat bouncing. (Anda dapat menggunakan Google Analytics untuk memeriksa tingkat bouncing).

Bagaimana Tambahkan Related Posts di WordPress Tanpa Plugin

Untuk dapat menambahkan fungsi ini ke website WordPress Anda, Anda harus memiliki keterampilan sedikit coding. Kami menyediakan Anda berjalan melalui tentang cara melakukannya langkah demi langkah. Tapi Anda perlu tahu cara mengakses file tema Anda. (Default path adalah: www.example.com/wp-contant/themes/mytheme).

Setelah Anda telah menemukan folder tema Anda, mencari functions.php dan membuat cadangan dari itu. Kemudian membukanya. Ini adalah file yang berisi setiap fungsi kustom yang digunakan oleh tema Anda. Hal pertama yang perlu kita lakukan adalah untuk membuat fungsi kita. Jadi gulir ke bawah ke bagian bawah file dan tambahkan berikut:

function my_related_posts() {
}

Ini akan menjadi fungsi yang akan menampilkan konten yang terkait untuk setiap posting Anda ketika seseorang melihat itu. Setelah ini kita perlu menambahkan beberapa argumen. Argumen yang digunakan untuk membiarkan fungsi tahu apa yang kita inginkan untuk menjadi serupa dalam artikel terkait dan dalam satu saat. Untuk melakukan hal ini, kita menambahkan variabel yang disebut $ args. ( Fungsi Referensi / WP mengurai args ) Dalam variabel ini kita menyimpan dua hal. Pertama berapa banyak posting kita ingin menampilkan dan kedua apa kondisi untuk artikel yang akan ditampilkan. Menambahkan berikut dalam fungsi Anda:

$args = array(
        'posts_per_page' => 5,
        'post_in'  => get_the_tag_list()
);

Langkah selanjutnya adalah membuat variabel lain, yang disebut $ the_query. ( Kelas Referensi / WP Query ) Variabel ini digunakan oleh WordPress untuk itu menampilkan posting. Menggunakan kode berikut untuk menambahkan argumen kami untuk itu:

$the_query = new WP_Query( $args );

Sekarang apa yang perlu kita lakukan adalah benar-benar menampilkan posting. Untuk melakukan hal ini kita menggunakan loop sementara yang terlihat seperti berikut:

echo '<ul>';
while ( $the_query->have_posts() ) : $the_query->the_post();
        ?> 
        <li><a href="<?php the_permalink(); ?>">< ?php the_title(); ?></a> </li>
        < ?php
endwhile;
echo '</ul>';

Kode di atas akan menampilkan setiap posting terkait sebagai tag anchor (link). Langkah baik adalah untuk mengatur ulang query. Tambahkan potongan kode berikut untuk melakukan hal ini:

wp_reset_postdata();

kode akhir Anda akan terlihat seperti berikut:

function my_related_posts() {
$args = array(
        'posts_per_page' => 5,
        'post_in'  => the_tags()
    );
echo '</ul><ul>';
while ( $the_query->have_posts() ) : $the_query->the_post();
        ?> 
        <li><a href="<?php the_permalink(); ?>">< ?php the_title(); ?></a> </li>
        < ?php
endwhile;
echo '</ul>';
 wp_reset_postdata();
}

Gunakan kode berikut untuk menampilkan tulisan di mana Anda ingin:

my_related_posts()

Jika Anda menggunakan Genesis Kerangka digunakan potongan berikut:

add_action('genesis_after_content','my_related_posts');

Menambahkan Beberapa Gaya ke Daftar

kode di atas hanya akan menampilkan daftar sederhana. Tapi itu tidak terlihat terlalu bagus kan? Jadi kenapa tidak kita menambahkan beberapa gaya untuk itu. Seperti thumbnail kecil atau data ketika posting ini ditulis, atau dalam kategori itu milik. Nah, untuk melakukan hal ini kita perlu menambahkan beberapa kode tambahan ke dalam kode kami.

Untuk menampilkan Posts Related sebelum daftar, tambahkan kode berikut sebelum echo '<ul>';

echo '<h2>Related Posts</h2>';

Jika Anda ingin menambahkan thumbnail untuk itu, tambahkan kode berikut sebelum kode di bawah ini:

<a href="<?php the_permalink(); ?>">< ?php the_title(); ?></a>

Kode:

< ?php if ( has_post_thumbnail() ) { ?>
<div class="related_thumb"><a href="<?php the_permalink(); ?>">< ?php the_post_thumbnail(); ?></a></div>
< ?php } ?>

Jadi kode Anda akan terlihat seperti ini:

while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<li>
< ?php if ( has_post_thumbnail() ) { ?> 
<div class="related_thumb"><a href="<?php the_permalink(); ?>">< ?php the_post_thumbnail(); ?></a></div> 
< ?php } ?>
<a href="<?php the_permalink(); ?>">< ?php the_title(); ?></a>
</li>
< ?php
endwhile;
&#91;/php&#93;

<h4>Stylish Display
<p>If you want to display the post as thumbnails with the title below it near each other, like on the image, use the codes below:</p>

<p><img src=/ot;https://wp-content/uploads/2013/03/related-posts-thumb.png" alt="Related Posts Thumb" width="550" height="202" class="aligncenter size-full wp-image-10709" /></p>

<h3>The Function Code:</h3>


function ll_related_posts() { 
$args = array(
'posts_per_page' => 5,
'post_in'  => get_the_tag_list(),
); 
$the_query = new WP_Query( $args ); 
echo '<section id="related_posts">'; 
echo '<h2>Related Posts</h2>'; 
while ( $the_query->have_posts() ) : $the_query->the_post();
?> 
</section><section class="item">
< ?php if ( has_post_thumbnail() ) { ?> 
</section><section class="related_thumb"><a href="<?php the_permalink(); ?>">< ?php the_post_thumbnail( 'related-post' ); ?></a></section> 
< ?php } else { ?>
<section class="related_thumb"><a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_directory')?/>/lib/images/thumb.png" /></a></section>
< ?php } ?> 
< ?php the_title(); ?>

< ?php
endwhile; 
echo '<div class="clear">'; 
wp_reset_postdata(); 
}

CSS

#related_posts {
	margin-top: -10px;
	margin-bottom: 10px;
	padding-bottom: 20px;
	border-bottom: 20px solid #E2E2E2;
}

#related_posts .item {
	width: 132px;
	max-height: 200px;
	overflow: hidden;
	float: left;
	margin: 6px;
	font-weight:bold;
	text-align:center;
}

#related_posts .item img {
	-webkit-box-shadow: 0 0 4px #999;
	box-shadow: 0 0 4px #999;
	border: white solid 1px;
	padding: 4px;
	margin: 0 auto;
	background: #f2f2f2;
}

Kesimpulan

Pada artikel ini kita belajar bagaimana menampilkan posting terkait di WordPress tanpa plugin dan mengapa itu penting. Juga sekarang kita tahu bagaimana untuk menyesuaikan dgn mode mereka untuk ditampilkan. Jadi, mengapa untuk menggunakan plugin untuk menampilkan posting terkait ketika kita bisa melakukannya tanpa plugin? Jika Anda memiliki pertanyaan, jangan ragu untuk meminta mereka di bagian komentar di bawah ini.