記事上、記事下、フッターのウィジェットの追加

記事の上や記事の下にウィジェットをよく追加しますね。フッターは、twenty elevenのようにテーマにデフォルトで配置されていないものがありますから、その場合はフッターエリアを追加するかもしれませんね。

追加方法は、function.phpの最後に新しく追加するか、すでにウィジェットがある場合はdynamic_sidebarで検索し、すでにあるウィジェットの続きに追加した方がいいかもしれません。どちらでもできますが、分割すると並び順に若干影響がでることがあります。

次のコードをfunction.phpに追加し、Wordpress > ウィジェットを確認すると、ウィジェットエリアが増えています。

 
/**
 * ウィジェットの追加
*/

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) )
register_sidebars(1,
    array(
    'name'=>'記事上',
    'id' => 'post_top',
    'before_widget' => '<p>',
    'after_widget' => '</p>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
    ));
register_sidebars(1,
    array(
    'name'=>'記事下',
    'id' => 'post_buttom',
    'before_widget' => '<p>',
    'after_widget' => '</p>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
    ));
register_sidebars(1,
    array(
    'name'=>'フッター',
    'id' => 'footer',
    'before_widget' => '<p>',
    'after_widget' => '</p>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
));
register_sidebars(1,
    array(
    'name'=>'フッター2',
    'id' => 'footer2',
    'before_widget' => '<p>',
    'after_widget' => '</p>',
    'before_title' => '<p>',
    'after_title' => '</p>',
    ));
register_sidebars(1,
    array(
    'name'=>'フッター3',
    'id' => 'footer3',
    'before_widget' => '<p>',
    'after_widget' => '</p>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
));
?>

before_widget、after_widget、before_title、after_titleは好きなタグに変更できます。横並びにしたり、応用する場合に役に立ちます。

余談ですが、アドセンスはAdSense Managerのプラグインを使えば、ウィジェットエリアを追加する必要はありませんが、
ウィジェットエリアを追加した方がなんでも使えるため、ウィジェットエリアを使う方法がおすすめです。

ウィジェットを表示する方法

もちろん、function.phpに追加するだけでは、管理画面のウィジェットに追加されるだけです。ブログ上には表示はされないです。

テーマによりますが、記事上や記事下に追加する場合、single.phpに下記のコードを挟みます。表示のコードはどこに追加するかにより表示される場所が変わります。記事上や記事下に追加する場合は、the_content()の前後に挟みます。記事上の場合はthe_content()の上、記事下の場合はthe_content()の下です。

また、loop-single.phpなんかにわかれている場合もあります。フッターの場合は、footer.phpです。dynamic_sidebarの括弧の中は数字も指定できますが、idを指定する方がわかりやすいでしょう。指定したidのウィジェットが表示されます。

<?php dynamic_sidebar( 'post_top' ); ?>

フッターのスタイルシートをわける

フッターのスタイルシートを分けたい場合は、次のような形ですかね。

<div class="footer-left">
<?php dynamic_sidebar( 'footer' ); ?>
</div>
<div class="footer-center">
<?php dynamic_sidebar( 'footer2' ); ?>
</div>
<div class="footer-right">
<?php dynamic_sidebar( 'footer3' ); ?>
</div>

YARPPの画像が歪む原因

表示設定 > サムネイル

を選ぶと、画像が歪みますよね。リサイズするさいに、横長の画像を使うと、縦横比の関係で画像が潰れます。

うーん、とても美しくない…。。

でも、画像が潰れていないブロガーさんもいますね。

こちらの記事をみたら、手っ取り早く解決できました。似てような記事が出回っていますが、こちらにある記事が大元のようですね。
関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする | ごりゅご.com

案の定、解決方法はサムネイルの隣にある「カスタム」を利用します。YARPPの最新バージョンは、カスタムを選ぶと、使用しているテーマフォルダ内にYARPPのPHPファイルが生成されます。FTPで確認すると、テーマフォルダ内にPHPファイルのコピー(生成)されていることが確認できます。デフォルトで用意されているカスタムテンプレートは、そのまま使いにくいので、このファイルをカスタマイズしていきます。

カスタマイズの手順は、

1. YARPPのカスタム設定で、yarpp-template-thumbnail.phpを選ぶ(いくつかテンプレートがありますけどこれかな。オリジナルで作りたい場合は、FTPでyarpp-template-なんちゃら.phpを複製して、yarpp-template-my-customize.phpなんていうファイル名を作ってもOKです。ただ、yarppの管理画面からは、中身のファイル名を参照しているようです。そこの名前を変えると、管理画面から複製ファイルと区別がつくようになります。)
2. テーマないにあるyarpp-template-なんちゃら.phpファイルを修正
3. テーマにCSSを追加

ソースコードです。貼付けておきますので、よかったらどーぞ。

<?php if(have_posts()):?>
     <h2>おすすめの関連記事</h2>
     <div class="related-post">
     <?php while(have_posts()) : the_post(); ?>
          <?php if(has_post_thumbnail()):?>
               <div class="related-entry"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("thumbnail"); ?><?php the_title(); ?></a></div>
          <?php endif; ?>
     <?php endwhile; ?>
     </div>
<?php else: ?>
<!-- 関連記事がない場合 -->
<?php endif; ?>

the_post_thumbnail(“thumbnail”);は、Wordpressのデフォルトだと、メディア設定にある150*150のサムネイルを参照します。

CSSはレスポンティブデザイン対応

次にテーマのCSSを追加。

/*　YARPPのカスタマイズ　*/
.related-post{
     width:100%;
     height:100%;
     overflow:hidden;
     margin-top:5px;
}
.related-entry {
    vertical-align: top;
    float: left;
    width:100px;
    font-size: 12px;
    min-height: 300px;
    margin: 0;
    padding-right: 20px;
}
.related-entry img{
      padding:2px;
      border: #ccc 1px solid;
      width:100px; /* メディア設定の参照した画像サイズを調整 */
}

ポイントはレスポンティブデザインに対応するためにwidth:100%;
こちらをやらないと、スマホで見るとはみでます。

それでも、綺麗に並ばない場合、高さにひっかかることが原因だったりします。 長めのタイトルをつける人は、高さもあわせて変えてあげるといいかもしれないです。

min-height: 200px; → min-height: 300px;

PCとスマホで確認して終了。

参考記事：今回のカスタマイズに直接関係ないものもありますが、参考程度に読んだ記事
【WordPress】関連記事プラグインYARPPカスタマイズ（画像表示・PC/スマホ表示切り替えなど）
公式サイト
mitcho > blog > Using Templates with YARPP 3
WordPress › Support » YARPP not using the square thumbnails

CSSはレスポンティブデザイン対応(ニューバージョン公開しました)

追記になりますが、CSSの別バージョンを作成してみました。現在、当サイトでは、このバージョンを採用しています。

YARPPで、画像左、文字右のリスト形式のテンプレートを作成するカスタマイズ方法

YARPPの「関連スコア設定」方法

おまけでYARPPで関連記事が表示されない場合、関連スコアの設定です。YARPPは、なぜか関連スコアの設定が隠れているんですよね。

画面右上の「表示オプション」を選択したのち、「フィルター設定」と「関連スコア設定」にチェックをいれます。

関連スコア設定 > 表示する最低関連スコア

こちらは「1」にしておけばいいでしょう。

あとは、お好みですが、カテゴリや内容を再重要視したらいいですよ。軽くテストしたところ、内部リンクを貼ったり、共通のタグをいれると、関連記事がでてきますね。

YARPPで「任意の位置」に関連記事を表示する方法

任意の場所に表示するには、下記の1行だけ。投稿記事の場合、テーマによりますが、大抵Single.phpに入れるだけです。

<?php related_posts(); ?>

予め、設定されている自動で関連記事を表示するチェックは、管理画面で外してください。