賢威のトップページをカスタマイズする

公開日: 2014年03月01日
最終更新日: 2014年06月09日

INDEX

inosh blogで使っているテーマ「賢威」のトップページをカスタマイズします。メインイメージの消去、アイキャッチ画像周辺の装飾、記事投稿日とカテゴリー名部分のカスタマイズ、続きを読むボタンやページ送りのカスタマイズなどをしていきます。

もくじ

はじめに

これまでinosh blogのデザインを、賢威のデフォルトからオリジナル性を出すためにカスタマイズしてきましたが、トップページを若干無視気味でした。

現在、このような状態になっています↓
トップページ

ヘッダー下に謎の空白が出来ていますし、投稿ページのアイキャッチ画像の周囲にはborderが表示されているにも関わらずトップページでは表示されていない、「続きを読む」部分がデフォルト状態だから変えたい、カテゴリー名の左右にあるカギカッコやコンマ区切りなどは必要ないなーなど、調整したいところがちょこちょこあります。

また、ページ送りがこのようになっています↓
ページ送り

「以前の記事へ」となっており、1ページずつしか遷移できない状態です。

このページ送り部分も、1・2・3・4・5などと表示させるようにしたいなーと思っています。

それでは、実際にカスタマイズしていきます。

ヘッダー下部分の空白(メインイメージ部分)を消す

現在、上記の画像部分で触れたように、ヘッダー下に謎の空白が出来ております。
これは、メインイメージを設定していないために出来ている空白です。

この部分には、いずれスライドショーまたは何かしらの画像を表示させようかな~と考えたりしているのですが、別に必要ないかな~とも考えている最中です。

とりあえず、現時点では何も表示させないので、ここの部分のコードを根こそぎ削除します。

そのために、index.phpの以下のコードを削除しました。

index.php

<?php if (is_home() && is_front_page()): ?>
<!--メインイメージ-->
<div id="main-image">
<div id="main-image-in">

<?php
$mainimage = the_keni("mainimage");
if ( ! empty( $mainimage ))  { ?>
<img src="<?php echo esc_url( $mainimage ); ?>" class="header-image" alt="" />
<?php } ?>
<div class="catch-copy">
<p><?php echo nl2br(esc_html(the_keni("catchcopy"))); ?></p>
</div>
</div>
</div>
<!--/メインイメージ-->
<?php endif; ?>

これにより、ヘッダー下の空白が消えました。
ヘッダー下の空白が消えた

アイキャッチ画像の周りにボーダーを表示させるなど

まず、CSSファイルに以下のコードを記述して、ボーダーを表示させました。

mystyle.css

.attachment-post-thumbnail{ border:1px dashed #e41858; padding:4px; }

これでボーダーが表示されましたが、アイキャッチ画像部分のmargin-rightが30pxとなっているため、先日投稿ページで設定した15pxに合わせたいと思います。

(左がトップページ、右が投稿ページ)
トップページと投稿ページでmarginが違う

トップページのアイキャッチ画像部分のmargin-rightを調整するために、以下のコードを記述しました。

mystyle.css

.article .left{ margin-right:15px !important; }

クラス名「left」のmarginに、デフォルトのCSSファイルで!importantが設定されていたため、今回の設定を優先させるためにmystyle.cssにも!importantを設定しました。

次は、投稿日やカテゴリー部分の微調整です。

カテゴリー名部分にあるカギカッコとコンマ区切りを消す

まずは、カテゴリー名の左右にあるカギカッコを消したいと思います。

index.phpを見ても記述がなく、CSSで表示されているわけでもないようでしたので、調べてみたら「get_caterogy_keni」で生成されているようでした。

そのため、カギカッコを消すためにテーマ内にあるfunctions.phpの下記のコードを修正します。

functions.php(デフォルト)

function get_caterogy_keni($param = "', '") {

	$category = get_the_category();

	if (is_array($category) and count($category) > 0) {
		echo '[<span class="post-cat">';
		echo the_category($param);
		echo '</span>]';
	} else {
		$categoryList = get_post_type_object(get_post_type());

		if (is_object($categoryList)) {
			foreach ($categoryList->taxonomies as $taxonomie) {
				$term = get_the_terms(get_the_ID(), $taxonomie);
				if (is_object($term) and !isset($term->errors)) {
					foreach ($term as $val) {
						$list[] = "<a href=\"".get_bloginfo('url').'/'.$val->taxonomy."/".$val->slug."/\">".$val->name."</a>";
					}
				}
			}
			if (isset($list) and count($list) > 0) {
				echo '[<span class="post-cat">'.implode($param, $list).'</span>]';
			}
		}
	}
}

下矢印

functions.php(カスタマイズ後)

function get_caterogy_keni($param = "', '") {

	$category = get_the_category();

	if (is_array($category) and count($category) > 0) {
		echo '<span class="post-cat">';
		echo the_category($param);
		echo '</span>';
	} else {
		$categoryList = get_post_type_object(get_post_type());

		if (is_object($categoryList)) {
			foreach ($categoryList->taxonomies as $taxonomie) {
				$term = get_the_terms(get_the_ID(), $taxonomie);
				if (is_object($term) and !isset($term->errors)) {
					foreach ($term as $val) {
						$list[] = "<a href=\"".get_bloginfo('url').'/'.$val->taxonomy."/".$val->slug."/\">".$val->name."</a>";
					}
				}
			}
			if (isset($list) and count($list) > 0) {
				echo '<span class="post-cat">'.implode($param, $list).'</span>';
			}
		}
	}
}

spanタグ前後にある、[←これと、]←これを消去しました。

続いて、カテゴリー名を区切っているコンマ区切り(,←これ)を削除するために、index.phpを以下のように修正しました。

index.php(デフォルト)

<h2 class="post-title"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p class="post-meta"><span class="post-data"><?php the_time('Y年m月d日') ?></span> <?php if (!is_tag()) { get_caterogy_keni(', '); } ?></p>
<div class="contents clearfix">

下矢印

index.php(カスタマイズ後)

<h2 class="post-title"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p class="post-meta"><span class="post-data"><?php the_time('Y年m月d日') ?></span> <?php if (!is_tag()) { get_caterogy_keni(' '); } ?></p>
<div class="contents clearfix">

get_caterogy_keni(”)の中にある、,←これを削除するだけですね。

ちなみに、たぶん賢威を開発しているウェブライダーの開発者さんが間違えたのではないかと思うのですが、なぜか「get_category_keni」ではなく「get_caterogy_keni」となっていますw

ゲットカテロギー賢威?

え?ゲットカテゴリー賢威じゃなくていいの?って思ったのですが、どうなのでしょう。

もしcaterogyで正しいとなると、私は今とんでもなく恥ずかしいことを言っていたりするのかもしれませんねw だとしたらスミマセン。。。

私はなにせ知識がないので、決してウェブライダーさんが間違えているわけではなく、何かちゃんとした意味があるのかもしれません。

また、私は英語にも弱いため、caterogyという単語があるのかもしれません。

何はともあれ、これでカテゴリー名の左右にあったカギカッコやコンマ区切りがなくなりました。
カテゴリー名部分のカスタマイズ後

次は、CSSでスタイル定義していきたいと思います。

投稿日とカテゴリー名部分のカスタマイズ

何となく、投稿日部分に曜日も表示させることにしました。
そのため、index.phpを以下のように修正します。

index.php(デフォルト)

<h2 class="post-title"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p class="post-meta"><span class="post-data"><?php the_time('Y年m月d日') ?></span> <?php if (!is_tag()) { get_caterogy_keni(' '); } ?></p>
<div class="contents clearfix">

下矢印

index.php(カスタマイズ後)

<h2 class="post-title"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p class="post-meta"><span class="post-data"><?php the_time('Y年m月d日(D)') ?></span> <?php if (!is_tag()) { get_caterogy_keni(' '); } ?></p>
<div class="contents clearfix">

(D)←これを追記するだけですね。

(D)であれば(月)などのように曜日が短縮して表示され、小文字のエル(l)であれば(月曜日)などのように曜日がフルで表示されます。

そして、CSSファイルには以下のように記述しました。

mystyle.css

/* 日付部分 */
.post-meta .post-data {
    font-size:19px;
    font-weight:bold;
    line-height:1.2;
} 

/* カテゴリー名部分 */
.post-meta .post-cat {
    float:right;
    font-size:13px;
} 

これにより、トップページ記事一覧の投稿日・カテゴリー名部分は以下のようになりました。
投稿日とカテゴリー名部分のカスタマイズ後

続きを読むボタンのカスタマイズ

現在、続きを読むボタンは、「タイトル名」の続きを読む という形になっています。
こういう感じ↓
「ページトップへ戻るボタンをCSSでデザインする」の続きを読む

続きを読むボタンに関しては、記事抜粋部分の右下あたりに表示させたいと思っているのですが、このままだと文字列が長すぎるので、タイトル名をいっそのこと削除してしまいたいと思います。

また、後でデザイン調整をするために使用する、divタグも追加します。
index.phpのコードを以下のように修正しました。

index.php(デフォルト)

<!--本文抜粋-->
<?php the_excerpt(); ?>
<p class="link-next"><a href="<?php the_permalink() ?>">「<?php echo(get_the_title('', '', false)); ?>」の続きを読む</a></p>
<!--/本文抜粋-->

下矢印

index.php(カスタマイズ後)

<!--本文抜粋-->
<div id="top_entry_description">
<?php the_excerpt(); ?>
<p class="link-next"><a href="<?php the_permalink() ?>">続きを読む</a></p>
</div>
<!--/本文抜粋-->

これにより、カギカッコやタイトル名などが削除されるとともに、divタグが追加されました。

そしてCSSファイルには以下のように記述しました。

mystyle.css

/* 抜粋部分 */
#top_entry_description p {
    margin-bottom:0;
}

/* 続きを読むボタン */
.link-next {
    clear:none;
}

.link-next a {
    display:inline-block;
    position:relative;
    z-index:2;
    color:#fff;
    text-decoration:none;
    background:#e41858;
    border:2px solid #e41858;
    margin-top:10px;
    padding:3px 15px;
}

.link-next a:before,
.link-next a:after {
    position:absolute;
    z-index:-1;
    display:block;
    top:0;
    width:50%;
    height:100%;
    background-color:#e41858;
    content:'';
}

.link-next a:before {
    right:0;
}

.link-next a:after {
    left:0;
}

.link-next a:hover {
    color:#e41858;
    background-color:#fff;
    border-color:#e41858;
}

.link-next a:hover:before,
.link-next a:hover:after {
    width:0;
    background-color:#e41858;
}

.link-next a,
.link-next a:before,
.link-next a:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box; 
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
    -o-transition:0.3s;
    transition:0.3s; }
}

これにより、続きを読むボタンは以下のようになりました。
続きを読むボタン

マウスオーバーすると、カーテンが開くように中央から両端にかけて背景が開きます。

ページ送りのカスタマイズ

現在、トップページのページ送り(ページネーション)はこのようになっています↓
以前の記事へ

1ページずつしか遷移できませんし、なんとなくデフォルトのデザインっていうのも嫌です。

これを、1・2・3・4・5などと表示させるとともに、1番古い記事へもバビューンっていけるようにしたいと思います。

ここをカスタマイズするにあたり、WordPressにプラグイン無しでページネーションを設置する方法 | コリスを参考にさせていただきました。

まずは、上記のリンク先にあったコードを参考に(一部修正して)functions.phpに以下のコードを追加しました。

functions.php

function pagination($pages = '', $range = 3) {
     $showitems = ($range * 2)+1;  
     global $paged;
     if(empty($paged)) $paged = 1;
     if($pages == '') {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages) {
             $pages = 1;
         }
     }   
     if(1 != $pages) {
         echo "<div class=\"pagination\"><span class=\"pages\">".$paged." / ".$pages."</span>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; めっちゃ最近</a>";
         for ($i=1; $i <= $pages; $i++) {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {
                 echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
             }
         }
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>はるか昔 &raquo;</a>";
         echo "</div>\n";
     }
}

そして、index.phpのページ送りを読み込んでいる部分のコードを以下のように修正しました。

index.php(デフォルト)

<?php endwhile;
pager_keni();
else : ?>

下矢印

index.php(カスタマイズ後)

<?php endwhile; ?>
<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>
<?php else : ?>

すると、このようにページ送りの表示が変わりました↓
ページ送り2ページ中の1

分かりにくいですが、2ページ中の1ページ(Page 1 / 2)という表示があり、その右側にある1と2がページ送りです。現在1ページを開いているため1はリンクになっておらず、隣の2が2ページ目へのリンクになっています。

現在、トップページには記事を10個表示させるようにしているのですが、まだ17記事しか投稿していないため、ページ送りが2ページ目までしかありません。

分かりやすくするため一時的にトップページへの記事表示数を1個にすると、以下のようになります。
ページ送り17ページ中の1

17ページある中の1ページ目を表示していて、2・3・4・はるか昔とリンクが貼られています。

これらのデザインを調整するために、CSSファイルには以下のように記述しました。

mystyle.css

/* ページ送り全体のスタイル */
.pagination {
    clear:both;
    margin-bottom:30px;
    padding:20px 0;
    position:relative;
    font-size:14px;
    line-height:13px;
}

/* 「現在のページ / 全体ページ数」部分のスタイル */
.pagination .pages {
    padding-top:8px;
    font-size:16px;
}

/* 各要素のスタイル */
.pagination span,
.pagination a {
    display:block;
    float:left;
    margin:2px 2px 2px 0;
    padding:6px 9px 5px;
    width:auto;
    color:#222;
}

/* ページ送り内のaタグ */
.pagination a {
    text-decoration:none;
    border:1px solid #222;
}

.pagination a:hover {
    color:#fff;
    background:#e41858;
    border-color:#e41858;
}
 
/* 現在表示しているページの数字 */
.pagination .current {
    padding:6px 9px 5px;
    color:#fff;
    background:#222;
    border:1px solid #222;
}

するとこのようなデザインになりました。
(1が現在のページで、4がマウスオーバー時)
ページ送りのカスタマイズ後のデザイン

中間あたりの7ページを開くと、このようになります。
ページ送り17ページ中の7

ビフォーアフター

びふぉ
トップページ

あふたぁ
トップページ(カスタマイズ後)

当ページ内で書いた内容以外で、最後に記事タイトル部分の下線を消し、SNSのシェアボタンのmargin-bottomを少し狭くしました。

とりあえず、以上で一旦はinosh blogのデザインカスタマイズは終了にしたいと思います。

次回以降、放置していたfaviconの設定や、スマートフォン用のアイコン(ウェブクリップアイコン)などの設定をしていきます。

\(^o^)/ ぼっけぇシェア \(^o^)/

この記事へ2件のコメント

  1. sa
    2014年7月23日 0:20

    ありがとうございます!

    • inosh
      2014年7月23日 11:00

      なんだかこちらこそありがとうございます!

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む