*当サイトのリンクにはAmazonアソシエイトやアフィリエイトリンクが含まれております。

プラグインに頼らず関連記事ウィジェットを作る

当テーマでは、ブログ記事の関連記事出力はウィジェット化して、外観→ウィジェットで気軽に場所を変える事が出来るようになってます。
勿論ショートコードでも楽なんですが、ウィジェットのがもっと楽です。
で、その作り方でも

広告

関連記事をウィジェットで作るよ

ソースはこんな感じ。

class My_Widget1 extends WP_Widget {
function __construct() {
$widget_ops = array('description' => 'リフルズ関連記事');
parent::__construct(
false,
'リフルズ関連記事',
$widget_ops
);
}
function widget($args, $instance) {
        ?>
        <?php
            global $post;
            $cat_now = get_the_category();
            $nowid = get_the_ID();
            $nowcat_id = array();
            foreach($cat_now as $cat):
            array_push( $nowcat_id, $cat -> cat_ID);
            endforeach ;
            $related_items = get_posts( array(
                'post_type' => 'post',
                'category__in' => $nowcat_id,
                'posts_per_page' => '6',
                'exclude' => $nowid,
                'orderby' => 'rand'
            )); ?>
            <?php if ( $related_items ) : ?>
            <h3 class="relatedneme"><i class="fa fa-wordpress"></i>関連記事</h3>
            <ul class="related-list">
            <?php foreach( $related_items as $post ): setup_postdata( $post ); ?>
                <li>
                    <a href="<?php the_permalink(); ?>">
                    <?php if( has_post_thumbnail()) : ?>
                    <?php
                    $image_id = get_post_thumbnail_id();
                    $image_url = wp_get_attachment_image_src($image_id, true);
                    $image_caption = get_post(get_post_thumbnail_id())->post_excerpt;
                    $image_description = get_post(get_post_thumbnail_id())->post_content;
                    ?>
                    <article class="related-box"  style="background:url(<?php echo $image_url[0]; ?>) no-repeat 50% 50% / auto 100%;"></article>    
                    <?php else: ?>
                                  <i class="fa fa-wordpress"></i>
                    <?php endif; ?>
            <h2><?php the_title() ; ?></h2>
                    </a>
                </li>       
            <?php endforeach; wp_reset_postdata(); ?>
            </ul>
           <?php endif; ?> 
        <?php
}
function update($new_instance, $old_instance) {
return $new_instance;
}
function form($instance) {
}
}
add_action('widgets_init',create_function('', 'return register_widget("My_Widget1");'));

テーマに書いたコードのコピペなんで、要所要所かえると良い感じになります。
各場所はfunction.phpです。

内容は、ウィジェット作りますよ的な中に、必要なコードです。
関連記事出力のコードは↑の場合カテゴリーベース。
この場合、属してるカテゴリ全部取得して、同カテゴリの記事を集めます。
商品の場合、もう少しコードを変えてます。
タグベースならは、また書き方が変わります。

余談ですが、上のコードで少し面白いのはアイキャッチから画像URLを拾って、バックグラウンドに画像を置いてるトコロ。
CSSの調整がチョット複雑だけど、結構都合良いの出来るんですよ。

で上のコードを設置したら、お好みのサイドバー等に置くか、新たにサイドバーを設置してそこに置くか って感じです。
ではー


おすすめのコンテンツ

広告

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください