見出し画像

【第8回】Wordpress自作テーマ作成練習。カテゴリー・月別ページを作成する

物理・プログラミング・Python、Web制作・自己啓発

引き続きWordrpressの自作テーマの練習をやっていこうと思います。

このnoteでは下記の書籍を参考に自作テーマを作成しています。

前回の内容はこちらです↓

今回の内容
「カテゴリー」「月別」ページにアクセスした場合に、ホームページの上に見出しとして表示する。

カテゴリーと月別の表示

まず何をやるのかを確認しましょう。

１．カテゴリーにアクセスした場合に下記の表示を行うようにします。

画像1

２．月別ページにアクセスした場合に下記の表示を行うようにします。

画像2

※「月別ページ」の絵はデザインを追加した後の絵となっています。

Wordpress内のテンプレートを編集する

「カテゴリー」「月別」のページにアクセスした場合の見出しの表示は「index.php」の編集を行うだけです。

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php bloginfo( 'name' ); ?><?php wp_title(); ?></title>

<link href='http://fonts.googleapis.com/css?family=Acme' rel='stylesheet' type='text/css'>

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<header>
<div class="siteinfo">
<div class="container">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</div>
</div>
</header>


<div class="container">

<!-- カテゴリーの表示 -->
<?php if(is_category()):?>
<h1 class="archive-title"><i class="fa fa-folder-open"></i>【<?php single_cat_title();?>】に関する記事です。</h1>
<?php endif; ?>
	
<!-- 月別ページの表示 -->
<?php if(is_month()):?>
<h1 class="archive-title"><i class="fa fa-clock-o"></i>【<?php echo get_the_date('Y年n月');?>】に投稿した記事です。</h1>
<?php endif; ?>

<?php if(have_posts()): while(have_posts()): 
the_post(); ?>

<article <?php post_class(); ?>>

<?php if( is_single() ): ?>
	<h1><?php the_title(); ?></h1>
<?php else: ?>
	<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php endif; ?>

<div class="postinfo">
	<time datetime="<?php echo get_the_date( 'Y-m-d' ) ?>">
	<i class="fa fa-clock-o"></i>
	<?php echo get_the_date(); ?>
	</time>

	<span class="postcat">
	<i class="fa fa-folder-open"></i>
	<?php the_category( ', ' ); ?>
	</span>
</div>

<?php the_content(); ?>


<?php if( is_single() ): ?>
<div class="pagenav">
	<span class="old">
	<?php previous_post_link( 
	'%link', 
	'<i class="fa fa-chevron-circle-left"></i> %title' 
	); ?>
	</span>

	<span class="new">
	<?php next_post_link( 
	'%link', 
	'%title <i class="fa fa-chevron-circle-right"></i>' 
	); ?>
	</span>
</div>
<?php endif; ?>

</article>

<?php endwhile; endif; ?>


<?php if ( $wp_query->max_num_pages > 1 ): ?>
<div class="pagenav">
	<span class="old">
	<?php next_posts_link( '<i class="fa fa-chevron-circle-left"></i> 古い記事' ); ?>
	</span>

	<span class="new">
	<?php previous_posts_link( '新しい記事 <i class="fa fa-chevron-circle-right"></i>' ); ?>
	</span>
</div>
<?php endif; ?>

<div class="blogmenu">
	<ul>
		<?php dynamic_sidebar()?>
	</ul>
</div>

</div> <!-- container -->

<footer>
	<div class="container">
		<small>Copyright &copy; <?php bloginfo( 'name' ); ?></small>
	</div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

今回追加したのは以下の2つです。

<!-- カテゴリーの表示 -->
<?php if(is_category()):?>
<h1 class="archive-title"><i class="fa fa-folder-open"></i>【<?php single_cat_title();?>】に関する記事です。</h1>
<?php endif; ?>
	
<!-- 月別ページの表示 -->
<?php if(is_month()):?>
<h1 class="archive-title"><i class="fa fa-clock-o"></i>【<?php echo get_the_date('Y年n月');?>】に投稿した記事です。</h1>
<?php endif; ?>

「is_category()」や「is_month()」などのis～という関数は、あればtrueを返すという関数です。

ですので、存在すればif文の中に入って、h1タグを表示するという仕組みです。

下記のアイコンの表示には「FontAwosome」を使っています。

画像3

FontAwosomeは上記のnoteでも取り扱っています。

デザインをあてる

デザインをあてるには、h1タグに「archive-title」というクラス名を付けていたので、「style.css」に追加するだけです。

style.css

@charset "UTF-8";
/*
Theme Name: MY THEME (Chapter 2)
Author: TRAVEL SKETCH
Description: This is my original theme.
Version: 1.0
*/


body	{margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}

.container	{max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* 記事 */
article	{margin-bottom: 40px;}

article h1	{margin: 0;
	font-size: 32px;
	font-weight: normal}

article h1 a	{color: #000000;
	text-decoration: none}


/* 記事の付加情報 */
.postinfo	{margin-top: 15px;
	font-size: 14px}

.postinfo a	{color: #000000;
	text-decoration: none}

.postinfo .postcat	{margin-left: 20px}

.postinfo i	{color: #888888}


/* 前後の記事へのリンク */
.pagenav a	{padding: 5px 10px;
	border: solid 1px #cccccc;
	border-radius: 10px;
	color: #666666;
	font-size: 12px;
	text-decoration: none}

.pagenav .old a	{float: left}

.pagenav .new a	{float: right}

.pagenav	{overflow: hidden;
	margin-top: 40px;
	margin-bottom: 40px;
	clear:both}


/* ヘッダー */
header	{margin-bottom: 40px;
	background-color: #1e90ff;
	color: #ffffff}

header a	{color: #ffffff;
	text-decoration: none}

.siteinfo	{overflow: hidden;
	padding-top: 14px;
	padding-bottom: 14px}

.siteinfo h1	{
	float: left;
	margin: 0;
	font-family: 'Acme', sans-serif;
	font-size: 20px}

.siteinfo p	{float: right;
	margin: 0;
	margin-top: 5px;
	font-size: 12px}

/* フッター */
footer	{margin-top: 40px;
	padding-top: 14px;
	padding-bottom: 14px;
	background-color: #1e90ff;
	color: #ffffff}

/* 本文中の画像*/
article img{
	border:none;
   max-width: 100%;
   height:auto;
}

.aligncenter{
	display:block;
	margin-top:30px;
	margin-bottom:30px;
	margin-left:auto;
	margin-right:auto;
}

.alignleft{
	float:left;
	margin-bottom:30px;
	margin-right:30px;
}

.alignright{
	float:right;
	margin-bottom:30px;
	margin-left:30px;
}

.blogmenu ul{
	margin:0;
	padding:0;
	list-style:none;
}

.blogmenu .widget{
	margin-bottom:30px;
	padding:20px;
	background-color:#f8f8ff;
}

.blogmenu .widgettitle{
	margin-top:1px;
	margin-bottom:20px;
	border-right:solid 10px #4a5f7e;
	color:#4a5f7e;
	font-size:14px;
}

.blogmenu li a{
	display:block;
	padding:10px 15px;
	color:#666666;
	font-size:14px;
	text-decoration:none;
}
.blogmenu li a:hover{
	background-color:#ffffff;
}
.archive-title{
	margin-top:0;
	margin-bottom:40px;
	background-color: #eeeeee;
	font-size:14px;
	font-weight:normal;
	color:#696969;
}

.archive-title i{
	padding:15px;
	background-color:#4a5f7e;
	color:#ffffff;
}

追加したのは以下の部分です。

.archive-title{
	margin-top:0;
	margin-bottom:40px;
	background-color: #eeeeee;
	font-size:14px;
	font-weight:normal;
	color:#696969;
}

.archive-title i{
	padding:15px;
	background-color:#4a5f7e;
	color:#ffffff;
}

これで「カテゴリー」「月別」でアクセスがあった場合に見出しが表示されるようになりました。

完成品がこちら↓

画像4

Twitter➡@t_kun_kamakiri
ブログ➡宇宙に入ったカマキリ（物理ブログ）

この記事が気に入ったらサポートをしてみませんか？