やまでら くみこ のレシピ

短時間で簡単に作れる人気家庭料理を紹介。

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

おすすめ記事

分数の計算機ツール。分数のかけ算・割り算・足し算・引き算を簡単に。

素数判定プログラム。素数を見分けるためのフローチャートも紹介。

素因数分解の簡単計算アプリ!ツールなしで算出するやり方も解説。

最小公倍数の計算アプリ。手計算する場合の簡単な求め方も紹介。

最大公約数の計算機。サイト上で瞬時に計算!簡単な求め方も解説。

フランス語のアルファベットの簡単キーボード。一覧から文字を入力。

スペイン語のアルファベット入力キーボード。変換不要!一覧から文字を選択

ロシア語のアルファベット入力キーボード。変換不要!一覧から文字を選択

累乗・べき乗の計算機。指数が分数・小数・マイナスでもOK!

正三角形の面積・高さ・辺の長さの計算機。公式を使った求め方も紹介。

円の面積・直径・半径・円周の計算機。公式を使った求め方も紹介。

トルコ語のアルファベットの入力ツール。トルコ文字の簡単キーボード。

ギリシャ文字への変換を簡単に!見た目と読み方の一覧からギリシャ語を入力。

ページ内リンクのジャンプ先がずれる原因と解決方法【HTML】

平方根(ルート)の値を求める計算機。分数もOKな電卓サイト。

分数の計算機ツール。分数のかけ算・割り算・足し算・引き算を簡単に。

分数同士の計算をサイト上で簡単に行える、電卓アプリです。かけ算・割り算・足し算・引き算、どの計算方法にも対応しています。このツール…

素数判定プログラム。素数を見分けるためのフローチャートも紹介。

この素数チェッカーは、指定した整数が素数かどうかを簡単に判定できるアプリです。もし素数でない場合は、その整数の素因数を一覧表示しま…

素因数分解の簡単計算アプリ!ツールなしで算出するやり方も解説。

素因数分解をサイト上で簡単に行える、計算機アプリです。入力は15桁以下に抑えるのがおすすめです。入力した数字が大きいと、計算にかな…

最小公倍数の計算アプリ。手計算する場合の簡単な求め方も紹介。

最小公倍数を求めるための計算機アプリです。整数は、3つ以上入力することも可能です。入力する際には、それぞれの整数を空白や改行で区切…

最大公約数の計算機。サイト上で瞬時に計算!簡単な求め方も解説。

最大公約数を求めるための計算機アプリです。整数は、3つ以上入力することも可能です。入力する際には、それぞれの整数を空白や改行で区切…

フランス語のアルファベットの簡単キーボード。一覧から文字を入力。

フランス語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。アクセント記…

スペイン語のアルファベット入力キーボード。変換不要!一覧から文字を選択

スペイン語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。逆疑問符や逆…

ロシア語のアルファベット入力キーボード。変換不要!一覧から文字を選択

ロシア語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。打ち方が分から…

累乗・べき乗の計算機。指数が分数・小数・マイナスでもOK!

累乗とべき乗(冪乗)を簡単に計算する電卓です。数aのn乗、anを算出します。二乗や三乗を計算するときなどに便利です。なお、この計算…

正三角形の面積・高さ・辺の長さの計算機。公式を使った求め方も紹介。

正三角形の面積・高さ・辺の長さを計算するツールです。

円の面積・直径・半径・円周の計算機。公式を使った求め方も紹介。

円の面積と円周の長さを計算するツールです。

トルコ語のアルファベットの入力ツール。トルコ文字の簡単キーボード。

トルコ語のアルファベットを入力するためのオンラインツールです。使い方は簡単で、トルコの文字を一覧から選択するだけでOK。キーボード…

ギリシャ文字への変換を簡単に!見た目と読み方の一覧からギリシャ語を入力。

ギリシャ文字を手軽に入力するためのオンラインツールです。入力したいギリシャ文字を一覧から選ぶだけなので、超簡単。キーボードで文字を…

ページ内リンクのジャンプ先がずれる原因と解決方法【HTML】

ページ内リンクのジャンプ先がずれてしまう原因と、その解決策について解説します。別ページの特定の場所にリンクを貼る場合には、ハッシュ…

平方根(ルート)の値を求める計算機。分数もOKな電卓サイト。

平方根(ルート)の計算機は、平方根の値をサイト上でカンタンに計算できる電卓です。整数だけでなく、小数や分数の平方根にも対応している…