WPtouchに関連記事を表示させる方法「Similar Posts編」

どうも青春野郎です。

今回はWPtouchに関連記事を表示させるための設定を解説していきます。

WPtouchの初期の状態だと、関連記事の表示がされていません。

今はスマホからの訪問者が多いのでWPtouchに関連記事をアイキャッチとともに表示させるべきだと考えます。

特にトレンドサイトでは、直帰率やPV数にも深く関わってくるので必須の設定になります。

まだ、「WPtouch」と「Similar Posts」を導入していない場合は、すぐに導入しておいてください。

ワードプレスサイトをスマホで見る「WPtouch」導入方法

関連記事表示プラグイン「Similar Posts」の設定方法

WPtouchに関連記事とアイキャッチ画像を表示させる方法

まずは、WPtouchのsingle.phpにコードを入力します。

 

single.phpへコードを入力

入力するコードはこちらです。

<?php similar_posts(); ?>

public_html/wp-content/plugins/wptouch/themes/default/single.phpを開きます。

下から36行目あたりに、<!– Let’s rock the comments –>というのがあります。

 

<li><a href="http://ma.gnolia.com/bookmarklet/add?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/magnolia.jpg" alt="" /> <?php _e( "Magnolia", "wptouch" ); ?></a></li>
            <li><a href="http://www.newsvine.com/_wine/save?popoff=0&u=<?php echo get_permalink() ?>&h=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/newsvine.jpg" target="_blank"> <?php _e( "Newsvine", "wptouch" ); ?></a></li>
            <li class="noborder"><a href="http://reddit.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/reddit.jpg" alt="" /> <?php _e( "Reddit", "wptouch" ); ?></a></li>
        </ul>
    </div>
<!-- Let's rock the comments -->
<?php if ( bnc_can_show_comments() ) : ?>
    <?php comments_template(); ?>
<script type="text/javascript">

この<!– Let’s rock the comments –>の上に、上記で指定したコードを入力します。

 

<li><a href="http://ma.gnolia.com/bookmarklet/add?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/magnolia.jpg" alt="" /> <?php _e( "Magnolia", "wptouch" ); ?></a></li>
            <li><a href="http://www.newsvine.com/_wine/save?popoff=0&u=<?php echo get_permalink() ?>&h=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/newsvine.jpg" target="_blank"> <?php _e( "Newsvine", "wptouch" ); ?></a></li>
            <li class="noborder"><a href="http://reddit.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/reddit.jpg" alt="" /> <?php _e( "Reddit", "wptouch" ); ?></a></li>
        </ul>
    </div>
<?php similar_posts(); ?>
<!-- Let's rock the comments -->
<?php if ( bnc_can_show_comments() ) : ?>
    <?php comments_template(); ?>
<script type="text/javascript">

するとこういう形になります。

さらに分かりやすく記述したいのであれば、<!– Let’s rock the comments –>の上にこちらを入力するといいでしょう。

<!--関連記事-->
<div style="margin:0 0 0 10px;"><h4>関連記事</h4></div>
<p><?php similar_posts(); ?> </p>
    <!--/関連記事--> 

 

style.cssへコードを入力

次にstyle.cssへコードを入力します。

public_html/wp-content/plugins/wptouch/themes/default/style.cssを開きます。

.wp-post-image {
        border:solid 1px #ccc;
        padding: 4px;
        float: left;
        margin-right: 5px;
/*      vertical-align: text-top; */
}
.similar_posts {
        padding: 3px;
        margin-top: 3px;
        margin-left: 0px;
}
.similar_posts_title {
        margin:2px;
        font-size: 14px; /* テキストリンクのサイズ */
}
.similar_posts_snippet {
        margin:2px auto;
        font-size: 10px; /* 抜粋文字のサイズ */
        color: #0f0f0f; /* 抜粋文字の色 */
}

一番下にこちらを入力します。

これで設定は完了です。

 

実際にスマホでサイトを確認してみましょう。

画像サイズについて

スマホでのアイキャッチ画像のサイズですが、これはメディアの初期画像サイズが適用されます。

ダッシュボードから、設定→メディアで、サムネイルのサイズを変更することで、スマホのアイキャッチ画像のサイズの変更が可能です。

オススメは[100×100]です。

まとめ

WPtouchの関連記事の表示については必ず導入するようにしておいてください。

これだけで、直帰率やPV数も大きく変わってくるので導入は必須です。

この記事はあなたのお役に立てたでしょうか?

ブログランキングへ破ってみませんか?

破る

ビリビリビリ・・。


本日も破って頂きありがとうございました(´∀`)
dogezas.gif

 
看板      
お名前 メールアドレス
記事を読んで少しでも興味深く思われましたら、
以下のソーシャルメディアボタンで共有してもらえると青春野郎は喜びます!

yaji-006

2件のコメント

  • sz

    はじめまして。
    大変わかりやすいHPですね。
    今回記事を参考に設定しましたが、
    なぜか関連記事が表示されません。
    ちなみにテーマはTCD010になります。
    もしわかりましたら教えて頂けると嬉しいです。

    • 青春野郎 せいちゃん

      コメントありがとうございます。

      Similar Postsを稼動させるには、別途プラグインであるPost-Plugin Libraryを導入する必要があります。

      それでもできない場合は、テンプレートの仕様などにより不具合が生じて表示されないのかもしれませんね。

コメントを残す




CAPTCHA