ねずみのブログ

ネットショップ運営に関する情報や、自分の好きな事を発信するブログです。

WordPressのサイドバーにプラグインなしで新着記事を表示するやり方

公開しているソースに不備があった為、2014年4月16日に更新しました。

wordpress sidebar

WordPressのサイドバーに新着記事を表示するやり方をご紹介いたします。僕のブログにも設置してますが、プラグインは使わずに表示しています。

調べてみると結構簡単なので、今回はプラグインなしでサイドバーに表示するやり方をご紹介。ただしCSSを少しいじってもらう必要はあります。

新着記事の画像とタイトルのみをサイドバーに表示

サイドバーの新着記事

今回の設定は、新着記事の画像とタイトルをサイドバーに表示する方法になります。設定方法はsidebar.phpとstyle.cssに記載するソースを張り付け、CSSで自分のブログに合わせたカスタマイズをするという流れです。

※丸々コピーして貼り付けても、たぶん綺麗に表示されないと思うのでCSSでカスタマイズして下さい。

sidebar.phpに記載するコードは下記になります。

[php]
<!–新着一覧–>
<div class="col2">
<h4 class="widgettitle">最近の投稿</h4>

<!–記事を3つ表示する–>
<?php query_posts(‘posts_per_page=5’); ?>
<?php while (have_posts()) : the_post(); ?>

<ul>
<li>

<!–サムネイル画像–>
<div class="new-img">
<a href="<?php the_permalink(); ?>"><?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail(array(100,100)); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/thumb.jpg" alt="" width="100" height="100">
<?php endif; ?></a>
</div>

<!–日付–>
<div class="postinfo3">
<time datetime="<?php echo get_the_date( ‘c’ ); ?>">
<?php echo get_the_date(); ?>
</time>
</div>

<!–記事タイトル–>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

<div class="flokai"></div>

</li><hr>
</ul>

<?php endwhile;?>
<!–記事を3つ表示する終了タグ–>

<p class="motto"><a href="<?php echo home_url(); ?>/">→もっと見る</a></p>
</div>
<!–新着一覧終了–>
[/php]

style.cssに記載するコードは下記になります。

[css]
/* サイドバー新着記事 */
.col2 {
background-color: #ffffff;
width: 300px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 1px 1px 3px #aaaaaa;
box-shadow: 1px 1px 3px #aaaaaa;
border-radius: 10px;
padding: 15px 10px 10px 10px;
margin-bottom: 20px;}

.columns .col2 ul {list-style-type: none;
padding: 0;}

.col2 h4 {
padding-top: 0px;
margin-top: 0px;}

.col2 a {line-height: 1.6;
color: #333;
font-size: 14px;}

.col2 a:hover {
color: #2A8EC8;
text-decoration: underline}

.new-img {float: left;
margin-right: 8px}

.postinfo3 {font-size: smaller;
margin-bottom: 5px;
padding: 0;}

.motto {text-align: center;}
[/css]

<?php query_posts(‘posts_per_page=5’); ?>の数字は、記事の表示数です。僕の場合だと5つの記事を表示しています。お好きな数に変更してください。

次に<?php echo get_template_directory_uri(); ?>/thumb.jpg は何かというと、サムネイル画像がなかった場合に表示する画像になります。

※僕の場合はテーマフォルダの中にthumb.jpgという画像を入れてあります。

以上でWordpressのサイドバーにプラグインなしで新着記事を表示するやり方終了です。Wordpress超初心者だと少し難しいと思います。(3ヶ月前の僕もそうでしたから)

WordPressを勉強するのにおすすめの本(評価がいい物)
 

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)