やまでら くみこ のレシピ

テレビで話題の人気レシピをメインに紹介しています。

Stinger3カスタマイズ。yet another related posts pluginで関連記事を表示する。

投稿日:2014年1月20日 更新日:

wordpress

関連記事を表示してくれるプラグイン、YARPP(yet another related posts plugin)。
このWordPressプラグインを、無料テーマ「Stinger3」と併用する際の設定をメモしておきます。

Stinger3の機能をつかって関連記事の抜粋を表示し、なおかつ、YARPPの機能をつかって精度の高い関連記事を表示する。
SEOの面でも、また、読者の利便性の面でも、悪くないカスタマイズだと思いますよ。

カスタマイズの手順

まずは、YARPPをインストールして、テンプレートファイルを作成します。
この方法については、例えば、こちらのブログを参照してください。

yet another relative plugin

テンプレートファイルを作成したら、その中身を削除し、テンプレートファイルに以下のコードを貼り付けます。

<?php if(have_posts()):?>
    <h2 class="kanren">関連記事</h2>
    <div class="sumbox02">
    <div id="topnews">
    <div>
<?php while(have_posts()) : the_post(); ?>
        <dl>
        <dt>
            <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
                    <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
<?php endif; ?>
            </a>
        </dt>
        <dd>
            <h2 class="saisin">
                <a href="<?php the_permalink() ?>">
<?php the_title_attribute(); ?>
                </a>
            </h2>
            <p class="basui">
<?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ''; ?>
            </p>
            <p class="motto"><a href="<?php the_permalink() ?>">記事を読む</a></p>
        </dd>
        </dl>
<?php endwhile; ?>
    </div>
    </div>
    </div>
<?php else: ?>
    <!– 関連記事がないときのHTMLをここに書く–>
<?php endif; ?>

続いて、Stinger3の「single.php」内の関連記事を表示するコードを削除します。具体的には、下記のコードです。

<!–関連記事–>
<h2 class="kanren">関連記事</h2>
  <div class="sumbox02">
    <div id="topnews">
    <div>
<?php
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
'post__not_in' => array($post -> ID),
'posts_per_page'=> 10,
'category__in' => $category_ID,
'orderby' => 'rand',
);
$st_query = new WP_Query($args); ?>
<?php
if( $st_query -> have_posts() ): ?>
<?php
while ($st_query -> have_posts()) : $st_query -> the_post(); ?>
      <dl>
      <dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
        <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
<?php endif; ?>
        </a> </dt>
      <dd>
        <h2 class="saisin"> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
        </a></h2>
        <p class="basui">
<?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ''; ?></p>
        <p class="motto"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
      </dd>
      </dl>
<?php endwhile;?>
<?php else:?>
      <p>記事はありませんでした</p>
<?php
endif;
wp_reset_postdata();
?>
    </div>
    </div>
  </div>

最後に、削除したコードの代わりに下記のコードを貼り付けます。

<?php related_posts(); ?>

以上、Stinger3とyet another related posts pluginを併用するカスタマイズでした。







画像引用元:how to make WordPress needle cushion by Odyssey

おすすめ記事

【文字数カウント】いちどに複数の文章をチェックできるWebアプリ。

文字数カウンター/文字数チェッカーを作りましたので、サイト運営に役立て…

「ヘロンの公式」計算機。三角形の面積と高さを、3辺の長さから計算します。

「ヘロンの公式」計算機は、三角形の面積と高さをWeb上でカンタンに計算…

台形の面積 計算機。基本公式と高さが分からないときの求め方。

「台形の面積」計算機は、台形の面積をWeb上でカンタンに計算できる電卓…

写真の位置情報を確認するツール「Exif-GPS」。iPhone、Android、PC対応。

「Exif-GPS」は、iPhoneやAndroidなどのスマホで撮っ…

Macでデスクトップを表示する2つの方法。キーボードショートカットとトラックパッドで簡単操作。

マックでデスクトップ画面を表示する方法をご紹介します。 ウィンドウズな…

wordpress

WordPressをブルートフォースアタックから守るために、最低限やっておきたい.htaccessの設定

世界中で頻発する、WordPressを狙った不正なアタック。 その手口…