【WordPress】Bonesでサイト作ってみた！私が修正したポイント10個

完成したかも?!というテンション上がった勢いだけでテンプレートアップしたら、CSSが修正だらけで大慌てのkairingです。。。しかもAnalyticsまた入れ忘れてたっていう…ｗ

さて、

で、

Bonesで作成したサイト公開しました！( ﾟДﾟﾉﾉ”☆ﾊﾟﾁﾊﾟﾁﾊﾟﾁﾊﾟﾁ

毎度のことなんですけど、公開してからあそこもここもちょっと直したい症候群が治らないのですが、一旦締めて修正ポイントをまとめまーす。・・・といいつつGit導入しててんやわんやしたお話は次回・・・

Bonesは常に進化してるっぽい

いくつかBonesについて書いてるブログ記事を見つけましたが、Bones自体どんどん更新されていくもののようで、記事を参考に修正しようとすると記述が変わってることもありますのでご注意ください。

1.アイキャッチの表示

index.phpにアイキャッチ表示がなかったので表示。
functions.phpに、アイキャッチの設定はしてあるので、index.php修正するだけでもOKなはずです。私はサイズを変えるため、functions.phpも編集しました。

functions.php

functions.phpに既に記述はあるのでそこを編集。

<?php 
	// Thumbnail sizes　（デフォルトでは違うサイズが設定されてました）
	add_image_size( 'bones-thumb-600', 969, 600, true );
	add_image_size( 'bones_thumb-400',646,400,true );
	add_image_size( 'bones-thumb-200', 323, 200, true );
	add_image_size( 'bones-thumb-100', 162, 100, true );
?>

index.php

<?php　if(has_post_thumbnail()): //サムネイルがある場合
		the_post_thumbnail( 'bones-thumb-200' );
	else : //サムネイルがない場合?>
		<img src="<?php echo get_template_directory_uri();?>/images/no_image.gif" alt="no-image" title="" width="323" height="200" />
<?php endif; ?>

参考サイト

アイキャッチの表示方法

index.phpで記事全部表示→抜粋表示

デフォルトではindex.phpは記事全部表示されてましたので、抜粋表示し「続きを読む」リンクを表示させました。

index.php

<p class="dami"><?php echo mb_substr(strip_tags($post-> post_content), 0, 80); ?>...</p>
<p class="motto"><a class="more-link" href="<?php the_permalink() ?>">続きを読む</a></p>

OGP対応

SNS対応するためにOGP設定しました。

header.php

<!--OGP開始-->
<meta property="fb:admins" content="654890591211413" />
<meta property="og:locale" content="ja_JP">
<?php	if (is_single()): // 投稿記事
		if(have_posts()):
			while(have_posts()): the_post(); ?>
			<meta property="og:type" content="article">
			<meta property="og:description" content="<?php mb_substr(get_the_excerpt(), 0, 100) ?>">
			<?php endwhile;
		endif; ?>
			<meta property="og:title" content="<?php the_title(); ?>">
			<meta property="og:url" content="<?php the_permalink(); ?>">
	<?php else : ?>
		<meta property="og:type" content="blog">
		<meta property="og:description" content="<?php bloginfo('description'); ?>">
		<meta property="og:title" content="<?php bloginfo('name'); ?>">
		<meta property="og:url" content="<?php bloginfo('url'); ?>">
	<?php endif; ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿記事に画像があるか調べる
	if (is_single() or is_page()):
		if (has_post_thumbnail()):
			$image_id = get_post_thumbnail_id();
			$image = wp_get_attachment_image_src( $image_id, 'full'); ?>
			<meta property="og:image" content="<?php $image[0] ?>">
		<?php elseif ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) : ?>
			<meta property="og:image" content="<?php $imgurl[2] ?>">
		<?php else : ?>
			<meta property="og:image" content="<?php get_template_directory_uri(); ?>/ogp.png">
		<?php endif; 
	else : ?>
		<meta property="og:image" content="<?php get_template_directory_uri(); ?>/ogp.png">
	<?php endif; ?>
<!--OGP完了-->

ページネーションの表示

index.phpにはページ数で表示されるページネーションがデフォルトで入っていました。
single.phpで、記事前後のページネーションを表示させたかったので追記。

single.php

<nav class="wp-prev-next">
	<ul id="pagination" class="post">
	<?php
		$prev_post = get_previous_post();
		$next_post = get_next_post();

		if ( !empty( $prev_post ) ): ?>
			<li class="prev"><?php previous_post_link('Prev：%link'); ?></li>
		<?php endif;
		if( !empty( $next_post ) ): ?>
			<li class="next"><?php next_post_link('Next：%link'); ?></li>
		<?php endif; ?>
	</ul>
</nav>

最新記事

最新記事にアイキャッチを表示したかった（でもプラグインは使いたくなかった!）のでfunctions.phpに記述。

functions.php

// 最新記事
function new_post_list($show_num) {
	query_posts('showposts=' . $show_num . '"');
	echo '<ul>';
	if(have_posts()) {
		while(have_posts()) :
		the_post();
		echo '<li class="clearfix"><a href="';
		the_permalink();
		echo '">';
		if(has_post_thumbnail()):
			the_post_thumbnail('bones-thumb-100', array('class' => 'float_left'));
		else:
			echo '<img src="';
			bloginfo("template_url");
			echo '/img/noimage.gif" class="float_left" />';
		endif;
		echo '</a><a href="';
		the_permalink();
		echo '">';
		the_title();
		echo '</a><span class="cont_txt">';
		$cont = get_the_content();
		echo mb_substr($cont, 0, 30);
		echo '…</span></li>';
		endwhile;
	}
	wp_reset_query();
	echo '</ul>';
}

sidebar.php

<div class="widget newentry_list">
	<h4 class="widgettitle">最新投稿記事</h4>
	<div>
		<?php new_post_list(5); ?>
	</div>
</div>

関連記事の関数は自前で設置

Bonesのデフォルト機能の関連記事表示は、投稿タグで関連記事をピックアップしてます。
しかしながら私のブログはタグをつけておりません。理由はこちら→　【WordPress・SEO】カテゴリとタグの併用のことを考え直した

というわけで、同じカテゴリの記事を関連記事として表示させるように、functions.phpに記述してます。

functions.php

//関連記事
function relation_post($show_num) {
	$post_id = get_the_ID();
	foreach((get_the_category()) as $cate) {
		$cate_id = $cate->cat_ID ;
	break ;
	}
	query_posts(
			array(
			'cat' => $cate_id,
			'showposts' => $show_num,
			'post__not_in' => array($post_id)
			)
	);

	if(have_posts()) :
		echo '<ul class="relation clearfix">';
		while(have_posts()) :
		the_post();
		echo '<li class="clearfix"><a href="';
		the_permalink();
		echo '">';
		if(has_post_thumbnail()):
			the_post_thumbnail('bones-thumb-100');
		else:
			echo '<img src="';
			bloginfo("template_url");
			echo '/img/noimage.gif" class="float_left" />';
		endif;
		echo '</a><a href="';
		the_permalink();
		echo '">';
		the_title();
		echo '</a></li>';
		endwhile;
		echo '</ul>';
	endif;
wp_reset_query();
}

<h4>関連記事</h4>
	<?php relation_post(8); ?>

確認さんのプラグイン、Simple GA Rankingを導入!

極力プラグインは入れたくないけど、これは導入決定。
本当は本文の抜粋表示をしたかったのですが、get_the_content() で記事IDの本文は取得できないので今回は諦めました・・・。
でも、こちらのサイトでオプション追加されそうだったという過去を知ったので、このプラグインはそのまま利用することにしました…今後に期待★

functions.php

//Simple GA Ranking 表示用
function simplegaranking(){
	if (function_exists('sga_ranking_get_date')) : 
		$rankingga = sga_ranking_get_date();
		$nocount=1;
		echo '<ul>';
		foreach ($rankingga as $gavalue) :
		echo '<li class="no'. $nocount .' clearfix">';
		echo '<!--<span class="number">'. $nocount .'</span>-->';
		echo '<a href="'. esc_url(get_permalink($gavalue)) .'" title="'. 	esc_html(get_the_title($gavalue)) .'" class="float_left">';
		echo get_the_post_thumbnail( $gavalue,'bones-thumb-100' ); 
		echo '</a>';
		echo '<a href="'. esc_url(get_permalink($gavalue)) .'" title="'. esc_html(get_the_title($gavalue)) .'">'. esc_html(get_the_title($gavalue)) .'</a>';
echo '</li>';
		$nocount++;
		endforeach;
		echo '</ul>';
	endif;
}

sidebar.php

<div class="widget garank">
	<h4 class="widgettitle">人気記事ランキング</h4>
	<?php simplegaranking(); ?>
</div>

hentryの除去

post_class() 使うとhentryが入るのですが、これが原因でウェブマスターツールでエラーが発生します。
なので、hentryだけ除去します。

こちらのサイトさんでは、特定のテンプレートだけ除去するために最後の1行はテンプレートに直接記述していらっしゃいます。
私の場合は、CSSでhentry使ってないので全部消しちゃって～♪ということでまるっとfunctions.phpに記述しました。

functions.php

//hentry除去
function remove_hentry( $classes ) {
	$classes = array_diff($classes, array('hentry'));
	return $classes;
}
add_filter('post_class', 'remove_hentry');

header.phpのtitleを編集

記事タイトルは出すべきだけどサイト名はいらない（どうせ見えない）だろうということで表示させず。

<title>
<?php if (is_home() && !is_paged() ) {?>
<?php bloginfo('name'); ?>
<?php } elseif ( is_home() && is_paged() ) { ?>
<?php bloginfo( 'name' ); ?>
- Part<?php echo get_query_var( 'paged' ); ?>
<?php } elseif ( is_search() ) { ?>
検索結果:<?php echo the_search_query(); ?>|
<?php bloginfo('name'); ?>
<?php } elseif ( is_single() ) { ?>
<?php wp_title(''); ?>
<?php } elseif ( is_page() ) { ?>
<?php wp_title(''); ?>
<?php } elseif ( is_category() ) { ?>
「
<?php single_cat_title(); ?>
」の記事一覧
<?php } elseif ( is_month() ) { ?>
<?php the_time('Y年F'); ?>
の記事一覧
<?php } elseif ( is_date() ) { ?>
<?php wp_title(''); ?>
の記事一覧
<?php } elseif ( is_tag() ) { ?>
「
<?php single_tag_title();?>
」の記事一覧
<?php } else { ?>
404
<?php } ?>
</title>

文字がにじむのを止めたい

CSSで、text-renderingが設定してあり、且つboldにした場合、文字がにじんで見えたのですが、ちょっとイヤだったので削除しました。

text-rendering:optimizelegibility;

text-renderingというのは、文字のカーニングを最適化してくれるものらしいです。
こちらのサイトがとても分かりやすかったです！最適化してくれるんなら・・・そのうち使いたいですねぇ。

Bonesは慣れれば便利そう！

機能とか表示に関しては主に以上です。
CSSはデザインの都合でだいぶいじってます。

Bonesはプラグイン入れなくても動くようにと最初から機能を追加してあるので、上手く使えばきっと便利です。
でも初心者の勉強用にはやっぱり、デフォルトのテンプレートが向いてますね…。難しかった…orz

WordPressの本もオススメ

[amazonjs asin="4797369469" locale="JP" title="基礎からのWordPress (BASIC LESSON For Web Engineers)"]

[amazonjs asin="488337730X" locale="JP" title="PHPによるWordPressカスタマイズブック―3.x対応"]

[amazonjs asin="4844334387" locale="JP" title="個性派 jQuery で魅せる WordPress デザインアレンジBOOK"]