株式会社シスアナコム

情報システムに関することなら、どんなことでも適切に助言いたします!

この投稿は1年以上前に公開されました。
現在では状況や内容が変わっている可能性があります。
ご注意下さい。m(_ _)m

STINGER3の関連記事を削除して、WordPress Related Postsを使う

      2014/10/16

シスアナコム社長の杉山です。

ワードプレスで作られた様々なウェブサイトを見て勉強中です。

ワードプレスで作られたウェブサイトを見ていると、本文の後に関連する記事が表示されていることがよくあります。

関連する記事を表示することより、見ている人の滞在時間を延ばすことができますし、内部リンクを充実させることにもなります。

ワードプレスの人気テーマであるSTINGER3を採用すれば、プラグインを何も追加しなくても関連する記事を自動的に表示してくれます。素晴らしい。

ただ、STINGER3の標準の関連記事だと、ずらっと下に連続して表示されるので、かなり表示が縦に長くなってしまいます。

「記事を読む」ボタンが連続して表示されるのも何とかしたい。

本文と違って関連記事の部分なので、それほど気にする事はないと思うのですが、もう少しコンパクトに関連記事を表示できるようにカスタマイズしてみます。

プラグインWordPress Related Postsを追加

関連する記事を表示してくれるワードプレスのプラグインはいくつか存在します。

以前、弊社のウェブサイトのテーマがTwentyThirteenだったときは、「Yet Another Related Posts Plugin(YARPP)」を使っていました。

このプラグインもとっても優秀なのですが、結構カスタマイズしないと格好良く表示されません。

そこで、別のプラグインを探したところ、「WordPress Related Posts」の方が簡単そうなので採用することにしました。

WordPress Related Postsの設定

このプラグインのインストールや使い方については、いろんなウェブサイトで解説されているので、ここでは細かく触れません。

プラグインをインストールして有効化。

オレンジ色の「Turn on」というボタンをクリック。

「Related Posts Title:」に「  おすすめの記事はこちら」(ご自由に)

STINGER3の場合、表示が少し崩れるので、全角スペースを2つ入れています。

「Number of Posts:」に「10」「15」(5の倍数が見た目に良い)

2014/10/15:STINGER5だと、パソコンで5、スマホで3が見た目によいので、公倍数の15に設定を変えました。

「Advanced Settings」の「Layout」は「Vertical(Medium)」

「Customize」は「Display Thumbnails…」と「Display Publish Date」にチェック。

それ以外の設定はそのままで「Save changes」

これで終わり。簡単です。

もう少し追加カスタマイズ

これで文章の直後に関連記事が表示されます。

レイアウトは2行×5列でコンパクトに表示されるようになりました。

でも、今まで表示されていた関連記事と表示される位置が異なっています。

今まで通りSNSボタンの下に表示されるように追加カスタマイズします。

「WordPress Related Posts」の設定画面で、「Auto Insert Related Posts…」のチェックをはずして(クリアして)「Save changes」で設定を保存。

これで「WordPress Related Posts」による関連記事は表示されなくなりますが、問題ありません。

ワードプレスの設定画面で外観→テーマ編集をクリックして、子テーマにコピーした「single.php」を編集。

このファイルの中で、関連記事を表示する直前、「<!–ループ終了–>」というコメントが書いてある直後をこんな感じに修正します。

<!--ループ終了-->
<?php wp_related_posts()?>
<div class="kizi02">

これでSNSボタンの直後に「WordPress Related Posts」による関連記事が表示されます。

後は標準の関連記事を表示している部分を全て削除するだけ。

  <!--ループ終了-->
  <?php wp_related_posts()?>
  <div class="kizi02">
    <!--関連記事-->
    <h4 class="kanren">関連記事</h4>
    <div class="sumbox02">
...
...
...
        </div>
      </div>
    </div>
  </div>
  <!--/kizi-->
  <!--/関連記事-->
  <div style="padding:20px 0px;">
    <?php get_template_part('ad');?>
  </div>
  <?php comments_template(); ?>
  <!--ページナビ-->

かなりの量を削除しますので、間違えないように注意して下さい。

これで終わりかと思ったのですが...

ヘッダ文字が装飾されない。なんでだろ。

スマホでの表示は問題ないのに。

見た目に関しては、今後、少しずつカスタマイズしていく予定です。

では。

 - ひとこと, ひとこと(ワードプレス)

↓ブログランキングに参加しています!


ネット・PC(全般) ブログランキングへ
にほんブログ村 IT技術ブログ ITコンサルティングへ
にほんブログ村

Message

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