ねずみのブログ

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

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

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

wordpress sidebar

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

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

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

サイドバーの新着記事

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

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

sidebar.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>
<!--新着一覧終了-->

style.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;}

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

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

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

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

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

コメントを残す

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

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