スポンサーリンク
かっこいいブログには必ずと言っていいほど実装されている、サイドバーのサムネイル付きの新着記事表示（もしくはアクセスランキング）僕もさっそく設置してみたので、備忘録的に残しておきます。基本的にはコピペだけで簡単に設置できました。（参考にした記事）
ちなみに、このブログはWordPressの公式テーマ「Twenty Twelve」をベースにカスタマイズしています。他のテーマにも応用可能です。
それでは、さっそく説明していきます。
function.phpに記述するコード
以下のコードをfunction.phpに追記します。
ここで注意。function.phpはとてもデリケートなファイルです。少しでも不具合があるとブログだけでなく、ワードプレス管理画面にすらログインできなくなってしまいます。事前にバックアップを取っておくことを忘れないで下さい。
/* 人気記事一覧ウィジェット */
class New_Posts extends WP_Widget {
/* コンストラクタ */
function New_Posts() {
parent::WP_Widget(
false,
$name = 'New_Posts',
array( 'description' => '新着記事を一覧表示します。' )
);
}
/* カスタマイズ画面で可変に設定したいパラメータをなどを記述 */
function form($instance) {
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('タイトル:'); ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
name="<?php echo $this->get_field_name('title'); ?>"
value="<?php echo esc_attr( $instance['title'] ); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('limit'); ?>"><?php _e('記事件数:'); ?></label>
<input type="text" id="<?php echo $this->get_field_id('limit'); ?>"
name="<?php echo $this->get_field_name('limit'); ?>"
value="<?php echo esc_attr( $instance['limit'] ); ?>" size="3">
</p>
<p>
<label for="<?php echo $this->get_field_id('excerpt'); ?>"><?php _e('記事抜粋:'); ?></label>
<select name="<?php echo $this->get_field_name('excerpt'); ?>" id="<?php echo $this->get_field_id('excerpt'); ?>">
<option value="0" <?php if (esc_attr( $instance['excerpt'] ) === '0') { echo 'selected'; } ?>>表示しない</option>
<option value="1" <?php if (esc_attr( $instance['excerpt'] ) === '1') { echo 'selected'; } ?>>表示する</option>
</select>
</p>
<?php if (esc_attr( $instance['excerpt'] ) === '1') { ?>
<p>
<label for="<?php echo $this->get_field_id('words'); ?>"><?php _e('抜粋文字数:'); ?></label>
<input type="text" id="<?php echo $this->get_field_id('words'); ?>"
name="<?php echo $this->get_field_name('words'); ?>"
value="<?php echo esc_attr( $instance['words'] ); ?>" size="3">
</p>
<?php } ?>
<p>
<label for="<?php echo $this->get_field_id('category'); ?>"><?php _e('カテゴリ:'); ?></label>
<select name="<?php echo $this->get_field_name('category'); ?>" id="<?php echo $this->get_field_id('category'); ?>">
<option value="0" <?php if (esc_attr( $instance['category'] ) === '0') { echo 'selected'; } ?>>表示しない</option>
<option value="1" <?php if (esc_attr( $instance['category'] ) === '1') { echo 'selected'; } ?>>表示する</option>
</select>
</p>
<?php
}
/* カスタマイズ画面の入力内容が変更された場合の処理 */
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['limit'] = is_numeric($new_instance['limit']) ? $new_instance['limit'] : 5;
$instance['excerpt'] = strip_tags($new_instance['excerpt']) ? $new_instance['excerpt'] : '0';
if (esc_attr( $instance['excerpt'] ) === '1') {
$instance['words'] = is_numeric($new_instance['words']) ? $new_instance['words'] : 50;
}
$instance['category'] = strip_tags($new_instance['category']) ? $new_instance['category'] : '0';
return $instance;
}
/* ウィジェットの表示時のデザインを記述 */
function widget($args, $instance) {
extract($args);
echo $before_widget;
if(!empty($instance['title'])) {
$title = apply_filters('widget_title', $instance['title']);
}
if ($title) {
echo $before_title . $title . $after_title;
} else {
echo '新着記事';
}
// クエリパラメータを設定
$args = array(
'posts_per_page'=> $instance['limit'],
'orderby' => 'date',
'order' => 'DESC'
);
// クエリ実行
$results = new WP_Query($args);
?>
<?php if($results->have_posts()): ?>
<ul class="new-list">
<?php while ($results->have_posts()) : $results->the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" target="_self">
<?php if (has_post_thumbnail()) { echo get_the_post_thumbnail($post->ID, 'thumbnail', 'class=new-thumbnail'); } else { ?>
<img src="<?php echo catch_the_image(); ?>" class="new-thumbnail wp-post-image" width="100" height="100" alt="<?php the_title_attribute(); ?>">
<?php } ?>
</a>
<a href="<?php the_permalink(); ?>"
class="new-title" title="<?php the_title_attribute(); ?>" target="_self">
<?php echo the_title_attribute(); ?>
</a>
<?php if (esc_attr( $instance['excerpt'] ) === '1') { ?>
<div class="new_excerpt"><?php echo mb_substr(strip_tags(get_the_content()), 0, $instance['words']) .' ...'; ?></div>
<?php } ?>
<?php if (esc_attr( $instance['category'] ) === '1') { $categories_list = get_the_category_list(', '); ?>
<span class="new-category"><?php echo $categories_list; ?></span>
<?php } ?>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php
echo $after_widget;
}
}
/* 自作ウィジェットを登録 */
register_widget('New_Posts');
この複雑なコード、もちろん僕も全ては理解していません。なんてったってphp勉強し始めたばかりなので。とりあえず実装できたらいい！という方はこのまま貼りましょう。
当ブログの実際のCSSコード
これはどのカスタマイズにも共通することですが、見た目の調整を担当するのが「CSS」さんです。これも当ブログで実際に使っているコードです。
/*--------------------------------------
新着記事一覧
--------------------------------------*/
.new-list li {
display: block;
overflow: hidden;
position: relative;
clear: both;
margin: 0 0 0 -20px !important; /* ここをいじってサイドバー内での位置を調整 */
border-bottom: 1px solid #ededed ;
}
.new-list li:hover {
filter: alpha(opacity=85);
-moz-opacity: 0.85;
opacity: 0.85;
background-color: #fddac4 !important;
}
.new-thumbnail {
float: left;
margin: 10px 10px 10px 10px !important;
}
.new-title {
color: #f22d30 !important;
display: block;
font-size: 14px;
font-weight: 600;
margin: 10px 15px 0 0 !important;
line-height: 22px;
}
.new-category {
display: block;
text-align: right;
font-size: 12px;
font-weight: 600;
background-color: #DD4453;
color: #fff;
margin: 5px 10px 10px 0px;
padding: 2px 15px;
float: right;
}
.new-category a,
.new-category a:hover {
color: #fff !important;
}
.new_excerpt {
font-size: 11px;
margin-left: 120px;
padding: 3px 10px 0 0;
line-height:20px;
}
@media screen and (max-width:599px){ /* スマホ表示用の追記 */
.new_excerpt {
display:none; /* 記事の抜粋を非表示 */
}
.new-list li {
margin: 0 0 0 -25px !important;
}
.new-title {
line-height: 26px;
}
}
参照したコードをベースにして、いくつか変更を加えています。
ひとつめ。サイドバー内での位置を整えるために、.new-list li の margin を変更しました。margin はその要素の周囲の余白を整えることができる関数？コトバ？です。
今回は-20pxの「マイナスマージン」にすることで、ウィジェットをサイドバーの「ほぼ真ん中」に「力技で」置いてます。正攻法のプログラムはまだ書けなくても、こういう手段もある、ということを学びました。
ふたつめ。スマホ表示用の追記もしました。記事の抜粋を非表示、文字サイズと行間を変更、marginでスマホ用の位置調整。
@media screen and (max-width:599px){} ← これは「画面サイズが599px以下の場合は以下の様に表示して下さい」という意味です。
ここらへんはそれぞれのサイトに合わせてお好みで調整してみて下さい。
管理画面からウィジェットを追加
ここまで来たらあとは設置するだけです。
外観 → ウィジェット と進んで
ウィジェットを追加して
ここでお好みの設定にします。これで完了です。ブラウザのキャッシュを消して再読み込みすれば、きっと上手く更新されているはずです。
まとめ
コピペだけでここまで実装できました。このブログのデザインは、コピペと微調整の繰り返しでした。その微調整の中で少しずつ疑問点を解消し、少しずつオリジナリティを出せるようになりました。皆さんもその第一歩として、導入してみて下さいね。改めて参照元の記事さん、ありがとうございました。
スポンサーリンク
スポンサーリンク
