関連記事一覧が、投稿下に表示されます。
これを縦並びから、横並びにしてみましょう。
関連記事一覧を二列にするカスタマイズ
まず、関連記事をいくつ表示させたいか、です。
デフォルトでは10個表示されていると思います。
これは多分、被リンク効果を狙った設定ですね。
Stinger5、関連記事の表示数を変える
私は関連記事一覧の記事ひとつひとつを大きく表示させています。
なので、10個だととてもページが長くなってしまいます。
関連記事は4つ表示させる事にしました。
kanren.php→
'posts_per_page'=> 10,
の数字のところを変更すればOKです。
偶数にします。
二列表示にさせるコードをphpに追加する
ではコードを入力していきましょう。
同じくkanren.phpから、以下のコードを探します。
while ($st_query -> have_posts()) : $st_query -> the_post(); ?>
<dl class="clearfix">
<dt> <a href="<?php the_permalink() ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'thumb150' ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
<?php endif; ?>
</a> </dt>
<dd>
<h5><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h5>
</dd>
</dl>
<?php endwhile; ?>
上記コードを、変更していきます。
簡単に説明しますと、
元々付けられているCSSコードとは違うものに変えます。
新しいclass名をつけています。
<div class=”related-article-thumb”>
<div class=”related-article-title”>
他には
<li>や、
<ul>を使ったり。
ややこしくなるので、完成したコードを載せておきます。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
while ($st_query -> have_posts()) : $st_query -> the_post(); ?>
<ul class="clearfix"><li>
<div class="related-article-thumb"> <a href="<?php the_permalink() ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'thumb150' ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
<?php endif; ?>
</a> </div>
<div class="related-article-title">
<h5><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h5>
</div>
</li></ul>
<div class="clearfix">
<?php endwhile; ?>
以上です。
関連記事を二列に横並び。CSSで見た目を調整
これについては、
サイトに合わせて色や幅を調整して下さいね。
ざっと載せておきます。
#kanren ul{
width: 135px;
height: 260px;
float: left;
padding: 0px 0px 0px 10px;
list-style: none;
overflow:hidden;
zoom:1;
}
#kanren .related-article-thumb{
width: 100px;
height: 100px;
}
#kanren .related-article-title h5 {
font-size: 14px;
font-weight: bold;
padding: 0px;
margin-bottom: 5px;
}
#kanren .related-article-title h5 a {
color: #333;
text-decoration: none;
}
#kanren .related-article-title h5 a:hover {
color: #b22222;
}
2列にする事で、
ページの長さが少しコンパクトになりますね。
私は4記事しか載せていませんが、
8～10記事位あってもいいと思います。
あまり多いとこれまたページが長くなってしまいます。
参考にしたサイト
【Stinger5カスタマイズ】関連記事を横並びに変えてみた。
ちなみに…
当ブログはBloggerなので、他のツールを使っています。
Milliardです。
このまま下の方へいくと関連記事が見られます。
WordPressではプラグインもあるらしいですよ。
↓ Milliard関連記事は下へ
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク
・ツイート
Tweet
・Google+1
・夜中にも出現します(-_-)zzz
Follow @rabbitshimako
・メルマガは３時のおやつ時
フィード登録