By using WordPress a lot of advantages with the plugin. With
the plugin you can create websites that you want, from plugins to improve SEO
and plugins to build an online store (E-commerce).
But using too many plugins that can lead to your website
wordpress to be slow and there may be some plugins that do not support the
theme that you use so that your website does not work. And there are some
popular plugins and of course often used by many bloggers, the plugin to bring
up related post or related post under the post.
FOLLOWING TUTORIAL RELATED POST WITHOUT PLUGIN:
1. Thumbnails
Enable the thumbnail feature and enter the thumbnail size to
your liking in wordpress by entering the following code in your theme
function.php.
add_theme_support'post-thumbnails' ( ; )
set_post_thumbnail_size( 150, 100, true) ;
2. Add the following code in single.php file
<div class="relatedposts ">
<h3>Related posts</h3>
<? php
$orig_post = $post;
global $post;
$tags = wp_get_post_tags( $post->ID);
if ($tags) {
$tag_ids = array( );
foreach ( $tags as $individual_tag) $tag_ids[ ] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array( $post->ID),
'posts_per_page'=>4, // Jumlah related yang ditampilkan.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args) ;
while ( $my_query->have_posts( )) {
$my_query->the_post( );
?>
<div class="relatedthumb ">
<a rel ="external"href ="<? php the_permalink( )?>"><?php the_post_thumbnail( array( 150,100)); ?><br />
<? php the_title( ); ?>
</a>
</div >
<? php }
}
$post = $orig_post;
wp_reset_query( );
?>
</div >
* note: put the above code under the_content () and you can
set the thumbnail size in the_post_thumbnail (array (150,100))
3. Add the following css code in your theme.css theme
/*thumbnail related */. relatedposts {width: 100%; margin: 0 0 20px 0; float: left; font-size: 12px;}. relatedposts h3 {font-size: 20px; margin: 0 0 5px 0;} . relatedthumb {margin: 0 1px 0 1px; float: left;} . relatedthumb img {margin: 0 0 3px 0; padding: 0;}. relatedthumb a {color: #333; text-decoration: none; display: block; padding: 4px; width: 150px;}. relatedthumb a: hover {background-color: #ddd; color: #000;}
1 komentar
best artikel,, i need this artikel