(cache) 初心者必見！WordPressで0からブログを作ってみよう！WordPressでテーマを作成しよう編

初心者必見！WordPressで0からブログを作ってみよう！WordPressでテーマを作成しよう編

次回から引き続きWordPressでブログを作るっていうのをやります。そして今回はついにWordPressを使って作業を進めます。オリジナルのブログを作るのに必要なテーマというのを作成します。

Contents

こんなブログサイトを作る

一緒に作っていくブログサイトは以下のようなものになります。ほとんどこのブログと同じ感じですけど、一般的なブログを作るという意味ではいいのかなと思います。
こんなブログを作ろう

作れるようになるまでの流れ

実際に作っていく手順としては以下のように進めていこうかと思っています。HTML,CSSできるよってかたは3番のWordpressテーマ作成編から進めていただくといいかもしれません。記事アップまでもうしばしお待ち下さい。申し訳ありません。

1. HTMLの入門編
2. CSSの入門編
3. WordPressテーマ作成編 ←いまここ
4. カテゴリメニュー・パンくずリスト・ページャー作成編
5. 検索できるようにしよう編
6. WordPressで問い合わせページを作ろう編
7. レスポンシブでスマートフォンにも対応させよう編　(随時更新予定)
8. 作ったブログをサーバーにアップしてみよう編　(随時更新予定)

上記以外にも、CSSの管理をしやすいようにSassやGulpを使ってみたり、Wordpressのショートコードを作ってみたり、Javascriptでフォームのバリデーションも、その他応用編として記事にしてみようかなと思っています。

今回の作業するにあたって必要なデータ

作業用データはこちら

完成例のオリジナルテーマ

完成例をダウンロード

※テーマのみのダウンロードなのでWordPressをインストールしなければ正常に動作しません。ご注意ください。

WordPressとは

世界中で広く使われている無料のブログ作成ソフトです。イチマルニデザインのブログもWordPressでつくられています。ブログ作成ソフトとしてありますが、実際には企業サイトを作ることもできます。

技術的な話をするとWordPressはPHP（プログラム言語）とMySQL（データベース）で作られています。が、実際にこれらの知識はそこまでなくてもWordPressでブログを作成することができます。とはいえ、PHP（プログラム言語）とMySQL（データベース）の知識や技術にあることにはこしたことはないですが。

WordPress – Wikipedia

バリデーションを通そう

バリデーションといって書いたhtmlのコードが正しく書けているかチェックするツールがあります。WordPressでブログサイトを作る前にチェックをしておきましょう。というのも、WordPressのコードに置き換えるとチェックするのも若干めんどくさくなりますし、もしバグがあった場合に修正もhtmlコードの方が楽です。

Ready to check – Nu Html Checker

バリデーション

sourceにチェックとfile uploadでHTMLファイルをバリデーションチェックしましょう。

もしErrorやWarningが出てしまった場合はそれらがなくなるように頑張って修正しましょう。

開発環境を作ろう

WordPressはPHP（プログラム言語）とMySQL（データベース）で作られています。なので、HTMLのようにブラウザさえあれば見れるというわけではありません。PHP（プログラム言語）が動作する環境が必要になります。

ということで、まずはWordPressの開発する環境を作ります。そしてWindowsとMacで開発環境の作り方が違うので注意してください。

Macでの環境構築

MAMP

インストールはMAMP & MAMP PROで！

MAMPとは、「Macintosh、Apache、MySQL、PHP」の頭文字をとったもので、自分のMacにWordPressを動かすことができる環境を簡単に構築できる無料のソフトウェアです。

インストール方法の詳細はMAMPのインストール、設定、使い方 for MacINTERNET HACK | INTERNET HACKで確認してください。

Windowsでの環境構築

XAMPP

インストールはXAMPP Installers and Downloads for Apache Friendsで！

XAMPPも自分のPCにWordPressを動かすことができる環境をkたんたんに構築できます。おもにWindowsで使われます。

インストール方法の詳細はXAMPPをインストールする方法【超初心者向け】 | TechAcademyマガジンで確認しましょう！

WordPressのインストール

環境構築はできましたか？

ついに、WordPressのインストールをしていきましょう！！僕のPCがMacなのでキャプチャや記事などもMacで進めます。Windowsの方申し訳ありません。

WordPressダウンロード（Mac、Windows共通）

WordPressダウンロード

2015年7月27日現在では4.2.3が最新です。ダウンロードしてくださいね。

WordPressインストール（Mac）

ダウンロードした「wordpress-4.2.2-ja.zip」を展開していただくと「wordpress」というフォルダーができていると思うので、わかりやすいように「study_wp」とリネームしておきましょう。

詳しいインストール方法は
WordPressをローカルにインストール – MAMP – WordPressの使い方と設定 – Webkaru
MAMPのphpMyAdminでMySQLデータベースの作成 – MAMPの使い方 – PC設定のカルマ

「サイトのタイトル」「ユーザー名」などは練習ですので任意で結構です。

※ブラウザでアクセスする際は「http://localhost:8888/study_wp/」もしくは「http://localhost/study_wp/」にしてください。

WordPressインストール（Win）

「study_wp」とリネームするまでは共通です。が、htdocsの場所などがMAMPとXAMPPで違います。

XAMPPを使ってローカル環境にWordPressをインストールする方法

を参考にしていただくといいと思います。

「サイトのタイトル」「ユーザー名」などは練習ですので任意で結構です。
※設定までできたら「http://localhost/study_wp/」にアクセスしてみましょう。WordPressの設定画面になると思います。

ページを表示しよう

サイト表示

サイトを表示をクリックします

hello world

Hello world!って？

これはWordPressのほうでもともと仮で投稿されている記事なんです。ブログの投稿の練習として試しに記事を投稿してみましょう。

左のメニュー投稿 > 新規追加

そうすると記事投稿画面が表示されます

wp-04

適当にタイトルや記事の文章を書いて「公開」ボタンをクリックしましょう。
投稿が完了したら先ほどのサイトを表示してみましょう。

すると、いま投稿した内容が反映されているはずです。WordPressはインストールしただけですでにブログの仕組みができているということですね〜。すごく簡単だったと思います。だからこそ世界中で人気なんでしょうね。

WordPressのテーマとは

ここまでの作業でお気付きの方もいらっしゃるかもしれませんが、ちょっと殺風景ですがすでにブログサイトができていますね。これはWordPressでは「Twenty Fifteen」(2015年7月16日現在)というテーマというテンプレートが用意されているからなんですね。

さらに、無料や有料でたくさんのテーマが公開されているので、それらをインストールして使うということもできます。なので、なんの知識がなくても見栄えのいいサイトを作ることもできるんですね〜

しかし今回はせっかくHTMLとCSSでコーディングしたサイトがあるので、それらを使ってオリジナルのサイトを作ってみましょう。

今回の作業するにあたって必要なデータ

作業用データはこちら

オリジナルのテーマを作り方　基本

まずはWordPressにはじめから入っている「Twenty Fifteen」のテーマをみてみましょう

・・・study_wp/wp-content/themes/twentyfifteen

「Twenty Fifteen」のテーマ

header.phpやfooter.phpなどのテンプレートファイルと呼ばれるPHPファイルがたくさんありますね。じつはそのテンプレートファイルをいくつか使ってページが作られます。例えばトップページではheader.php、footer.php、sidebar.phpが使われています。

テンプレートファイルについて

テーマ用フォルダを作る

・・・study_wp/wp-content/themes/

のなかに「study_theme」という今回のオリジナルテーマのフォルダを作ります。

オリジナルテーマにとりあえず必要なもの

1.スクリーンショット

スクリーンショットを入れておくとWordPressの管理画面でどのテーマを使うのか一目でわかります。

pngのダウンロード

2.index.htmlをコピー

前回までに作ったindex.htmlを元にテンプレートファイルを作ります

3.imagesフォルダ
これはまるごとコピーしてください

4.cssをコピー
cssフォルダをそのままコピーします。が、ここで注意することがあります。style.cssはテーマフォルダの直下にしてください。なので、cssフォルダにはreset.cssだけになりますね。

テーマフォルダの中身

では、これらを元にテンプレートファイルを作りましょう！！

style.css

CSSの冒頭に下記コードをコピペし、テーマの名前やその他の情報を変更します。

もしオリジナルテーマのCSSのファイル名がstyle.css以外の名前の場合は style.css に変更しておいてください。ちなみに、Autherのとこなどは任意で書き換えてくださいね。

/*
Theme Name: study_theme
Theme URI: 
Description: オリジナルテーマ作成
Version: 1.0
Author: Takumi
Author URI: 
*/

header.php

index.htmlの冒頭部分からbreadcrumbの終わりまでを「切り取り」してheader.phpを作成して「ペースト」してください

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>オリジナルテーマを作成しよう</title>
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/reset.css">
	<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">

	<?php wp_head(); ?>
	
</head>
<body>
	<header class="header">
		<div class="header__inner clearfix">
			<h1 class="header__logo"><a href="<?php echo home_url(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Logo" width="110" height="50"></a></h1>
			<nav class="header__nav">
				<ul class="header__nav__menu">
					<li class="header__nav__list"><a href="#">HTML</a></li>
					<li class="header__nav__list"><a href="#">CSS</a></li>
					<li class="header__nav__list"><a href="#">Javascript</a></li>
				</ul>
			</nav>
		</div>
	</header>
	<nav class="breadcrumb">
		<ul class="breadcrumb__menu">
			<li class="breadcrumb__list"><a href="#">Home</a></li>
			<li class="breadcrumb__list">記事詳細</li>
		</ul>
	</nav>

いくつかindex.htmlのときのものから追記・変更しています。

上記5行目あたりのmeta要素はIE8以上のブラウザの時にレンダリングモードを指定するものです

<meta http-equiv="X-UA-Compatible" content="IE=edge">

詳しく知りたい方はこの記事を読むといいですよ〜

2015年01月16日

今更だけど、X-UA-Compatibleとレンダリングモードについてのまとめ

X-UA-Compatibleとか、レンダリングモードって盲目的に使っていたようなとこなかったですか？なんでそれを使わなければいけないのか意味を調べてみようと思います。

記事を読む

CSSの指定について

WordPressのテンプレートタグを使ってURL等をコード内に書き込みます。WordPressのテンプレートタグとはWordPressに対して何かを表示・取得させたいときに使うものです。WordPressには管理画面がありますね。そこで入力したものをサイト内で表示させることができます。例えば、ブログのタイトルであったり、ブログの概要を表示したりもできます。

7行目8行目あたり

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/reset.css">
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">

下記はブログのテンプレートがあるとこまでのURLを表示します

<?php bloginfo('template_url'); ?>

これは、テーマ内にある「style.css」を指定しています。ただし、テーマフォルダ内の直下にないといけません。

<?php bloginfo( 'stylesheet_url' ); ?>

次に、下記のテンプレートタグはトップページのリンクを指します

<?php echo home_url(); ?>

そしてheadの終了タグの直前の（10行目あたり）

<?php wp_head(); ?>

これがあることでWordPressのプラグインを正常に使えるようになります。「robots」「wp_generator」「wp_shortlink」などのようなさまざまな要素を出力してくれます。

index.htmlに下記追加

index.htmlのheader.phpに切り取り・ペーストした部分に下記コードを記述します

<?php get_header(); ?>

これで、header.phpを使うよという宣言になります。忘れないようにしてくださいね。

sidebar.php

次はsidebar.phpを作ります。ただ、サイドバーに関しては後々検索できるようにしたり、新着記事を表示したりしたいのですが、難しいので次回以降に記事にします。なので、今回はとりあえずサイドバーが表示されるようにします。

※新着記事の表示についてはこの回の終わりのほうでやります

クラスside-contentの始まり〜終わりまでを切り取り

<div class="side-content">
	<aside>
		・・・省略	
	</aside>
</div>

sidebar.phpを作成し、そこにペーストしてください。

index.htmlに下記追記

次にheader.phpのときと同じようにsidebar.phpを使う宣言をindex.htmlのほうで行います。
side-contentがあった場所に下記を記述しましょう。

<?php get_sidebar(); ?>

footer.php

footer部分からhtmlの終了タグまでを「切り取り」footer.phpへ「ペースト」してください

<footer class="footer">
		<nav>
			<ul class="footer__menu">
				<li class="footer__list"><a href="#">お問い合わせ</a></li>
				<li class="footer__list"><a href="#">このサイトについて</a></li>
			</ul>
		</nav>
		<p class="footer__copyright">コピーライト</p>
	</footer>
	<?php wp_footer(); ?>
</body>
</html>

headerのときと同じように

<?php wp_footer(); ?>

を追記忘れないようにしてください。

index.htmlに追記

index.htmlにfooter.phpを使う宣言をします。footerのあった箇所に下記を記述します。

<?php get_footer(); ?>

index.php

index.phpをつくり管理画面で記事を投稿したらブログに反映されるようにしてきます。

index.htmlをindex.phpにリネームしてください。

ここまでの作業ができていれば下記のようにコードができているはずです。

<?php get_header(); ?>

<div class="wrapper clearfix">
	<div class="main-content">
		<section>
			<ul class="pannel-group clearfix">
				<li class="pannel-group__item">
					<a href="#">
						<p class="pannel-group__item__category pannel-group__item__category--html">HTML</p>
						<div class="pannel-group__item__img">
							<img src="images/img_blog_sample_01.png" alt="スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの？" width="390" height="240">
						</div>
						<h2 class="pannel-group__item__title">スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの？</h2>
						<p class="pannel-group__item__text">
							スマートフォンサイトの制作時に、リキッドレイアウトと固定幅の2パターンがあります。正直どちらも見た目上がそんなに違いはありませんが、どっちで制作するの...
						</p>
						<p class="pannel-group__item__date">2015/07/08</p>
					</a>
				</li>
				<li class="pannel-group__item">
					<a href="#">
						<p class="pannel-group__item__category pannel-group__item__category--css">CSS</p>
						<div class="pannel-group__item__img">
							<img src="images/img_blog_sample_02.png" alt="知っておくと便利！ちょっとのコードで書ける役立つcssの小技集" width="390" height="240">
						</div>
						<h2 class="pannel-group__item__title">知っておくと便利！ちょっとのコードで書ける役立つcssの小技集</h2>
						<p class="pannel-group__item__text">
							今回は、現場で常に使うわけではないけど、知っておくと便利で使える簡単なCSSのコードを紹介します。文字に装飾したりとかが多めです。
						</p>
						<p class="pannel-group__item__date">2015/07/07</p>
					</a>
				</li>
				<li class="pannel-group__item">
					<a href="#">
						<p class="pannel-group__item__category pannel-group__item__category--css">CSS</p>
						<div class="pannel-group__item__img">
							<img src="images/img_blog_sample_02.png" alt="CSSだけでできちゃう！overflow:scroll;を使った簡単なスライダー" width="390" height="240">
						</div>
						<h2 class="pannel-group__item__title">CSSだけでできちゃう！overflow:scroll;を使った簡単なスライダー</h2>
						<p class="pannel-group__item__text">
							今回はcssのoverflow:scroll;を使って簡単なスライダーを紹介します。Spotlightとかグノシー（アプリ）でも使われていますね。
						</p>
						<p class="pannel-group__item__date">2015/07/06</p>
					</a>
				</li>
				<li class="pannel-group__item">
					<a href="#">
						<p class="pannel-group__item__category pannel-group__item__category--js">js</p>
						<div class="pannel-group__item__img">
							<img src="images/img_blog_sample_02.png" alt="Handlebars.jsっていうjavascriptのテンプレートエンジンを勉強したのでそのまとめ" width="390" height="240">
						</div>
						<h2 class="pannel-group__item__title">Handlebars.jsっていうjavascriptのテンプレートエンジンを勉強したのでそのまとめ</h2>
						<p class="pannel-group__item__text">
							今日は、現場で使っているjavascriptのテンプレートエンジン、Handlebars.jsについて勉強したのでまとめます。結構、わかりやすいので学習コストが低いのが
						</p>
						<p class="pannel-group__item__date">2015/07/05</p>
					</a>
				</li>
			</ul>
			<!-- 繰り返しなので省略します -->
		</section>
		<nav class="pager">
			<ul class="pager__menu">
				<li class="pager__list pager__list--current">1</li>
				<li class="pager__list"><a href="#">2</a></li>
				<li class="pager__list"><a href="#">3</a></li>
			</ul>
		</nav>
	</div>

	<?php get_sidebar(); ?>
	
</div>

<?php get_footer(); ?>

ポイントは1行目、71行目、75行目です。header、footer、sidebarの呼び出しの箇所があっているかしっかりと確認をしてください。この箇所が間違っているとレイアウトが崩れたりしてしまいます。

管理画面でオリジナルテーマを選ぶ

左メニューから「外観」 > 「テーマ」

管理画面でオリジナルテーマを選ぶ

「有効化」をクリック

サイトを表示で一旦ブラウザで確認しましょう。ちゃんとコードが書けていればエラーなどもなく表示されるはずです。

ただし、今はまだ投稿されたものが反映されるようにはなっていませんので、画像が表示されていなくても心配しなくて大丈夫です。これからの作業で管理画面で投稿したものが表示されるようにしていきましょう。

ちょっと豆知識

サイトを表示したときの上の WordPressの黒いバーを消したい場合
ページ上部の管理バーを非表示にする方法 – WordPressの使い方と設定 – Webkaru

ループを確認する

これは記事が100件ある場合にいちいち100件分のhtmlを書くのってめんどくさいですよね。これを1件分のコードだけで他の99件は繰り返し処理をしてくれるようにします。これをループというんですね〜

で、今回やりたいことをまとめると、
・記事のタイトル表示
・記事へのリンク
・記事の画像表示
・記事の抜粋
・記事のカテゴリー
・記事の投稿日時

これらを記事のある分だけ繰り返して表示させる

っていうのを作っていきます。

以下の部分を追記変更していきます。場所を確認してくださいね。対応箇所のもともとあったhtmlのコードは消してしまっても構いません。

<div class="main-content">
	<section>
		このなかを変更します
	</section>
	<nav class="pager">
		<ul class="pager__menu">
			<li class="pager__list pager__list--current">1</li>
			<li class="pager__list"><a href="#">2</a></li>
			<li class="pager__list"><a href="#">3</a></li>
		</ul>
	</nav>
</div>

while文を使ってループさせる

while文をという繰り返し用のphpの構文を使ってループ処理を行います。3行目で「ここから繰り返し処理を開始」して、19行目で処理を終わりにしています。ようはwhile文で挟まれた中身が繰り返されます。

<ul class="pannel-group clearfix">
				
<?php while (have_posts()) : the_post(); ?>

<li class="pannel-group__item">
	<a href="#">
		<p class="pannel-group__item__category pannel-group__item__category--html">HTML</p>
		<div class="pannel-group__item__img">
			<img src="images/img_blog_sample_01.png" alt="スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの？" width="390" height="240">
		</div>
		<h2 class="pannel-group__item__title">スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの？</h2>
		<p class="pannel-group__item__text">
			スマートフォンサイトの制作時に、リキッドレイアウトと固定幅の2パターンがあります。正直どちらも見た目上がそんなに違いはありませんが、どっちで制作するの...
		</p>
		<p class="pannel-group__item__date">2015/07/08</p>
	</a>
</li>

<?php endwhile; ?>

</ul>

記事詳細へのリンク

the_permalink()

記事のタイトル

the_title()

記事の抜粋

the_excerpt()

投稿日時

the_time(‘Y/m/j’)

これらのテンプレートタグを使って実際にコードを書くと・・・

<?php while (have_posts()) : the_post(); ?>
				
<li class="pannel-group__item">
	<a href="<?php the_permalink() ?>">
		<p class="pannel-group__item__category pannel-group__item__category--html">HTML</p>
		<div class="pannel-group__item__img">
			<img src="images/img_blog_sample_01.png" alt="スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの？" width="390" height="240">
		</div>
		<h2 class="pannel-group__item__title"><?php the_title(); ?></h2>
		<div class="pannel-group__item__text">
			<?php the_excerpt(); ?>
		</div>
		<p class="pannel-group__item__date"><?php the_time('Y/m/j') ?></p>
	</a>
</li>

<?php endwhile; ?>

カテゴリを表示されるようにする

カテゴリといってブログ記事の分類を行います。今回は、「HTML」「CSS」「JavaScript」と三つのカテゴリを作成します。
まずは管理画面のほうで作業をします。

左メニュー「投稿」 > 「カテゴリ」

ここでカテゴリの新規作成ができます。
名前はサイト上に表示されるもので、スラッグはURLに表示されるものです。それらを以下を参考にしながらカテゴリを一つづつ作っていきましょう。

・名前: HTML　スラッグ: html
・名前: CSS スラッグ: css
・名前: JavaScript スラッグ: js

カテゴリ

次にコードを記述します

下記PHPのコードでカテゴリ情報を取得します

<?php 
	// カテゴリー情報を取得
	$category = get_the_category();
	$cat_name = $category[0]->cat_name;
	$cat_slug = $category[0]->category_nicename;
?>

index.php

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

<?php 
	// カテゴリー情報を取得
	$category = get_the_category();
	$cat_name = $category[0]->cat_name;
	$cat_slug = $category[0]->category_nicename;
?>

<li class="pannel-group__item">
	<a href="<?php the_permalink() ?>">
		<p class="pannel-group__item__category pannel-group__item__category--<?php echo $cat_slug; ?>"><?php echo $cat_name ?></p>
		<div class="pannel-group__item__img">
			<img src="images/img_blog_sample_01.png" alt="スマホサイトってリキッドレイアウトと固定幅どっちで作った方がいいの？" width="390" height="240">
		</div>
		<h2 class="pannel-group__item__title"><?php the_title(); ?></h2>
		<div class="pannel-group__item__text">
			<?php the_excerpt(); ?>
		</div>
		<p class="pannel-group__item__date"><?php the_time('Y/m/j') ?></p>
	</a>
</li>

<?php endwhile; ?>

12行目でカテゴリの名前とスラッグ名でCSSのクラスを出し分けできるようにしておきましょう。PHPと組み合わせることでCSSクラスを変更したり条件によって出し分けたりすることができるんですね〜

試しに記事を新規投稿してカテゴリをお好きなものを選んで表示の確認をしてみてくださいね。やり方は覚えていますか？忘れてしまった場合は上に戻って新規投稿してみてくださいね。

アイキャッチで画像が出るようにしよう

アイキャッチ画像というのはWordPressで投稿ごとにメインとなる画像を差し込むことができる機能です。今回のブログのように一覧ページの画像などに使う場合にいいですね。

アイキャッチ画像を使えるようにする

まずはアイキャッチ画像を使えるようにしなければいけません。テーマフォルダ内直下に「functions.php」というファイルを作成しましょう。このfunctions.phpというのはWordPressにいろんな機能を追加したりカスタマイズしたりするときに使います。例えば、pagerを作ったり、パンくずリストを作るときにもfunctions.phpにコードを書きます。

※pagerを作ったり、パンくずリストについては次回以降に作ります。

function.php

<?php 
	//アイキャッチ画像
	add_theme_support( 'post-thumbnails' );
?>

アイキャッチ画像のサイズを指定する

今回必要な画像サイズは

・一覧画面の390px x 240px
・記事詳細画面の640px x 300px
・サイドバーの80px x 80px

<?php
//アイキャッチ画像
add_theme_support( 'post-thumbnails' );

function add_thumbnail_size() {
	add_theme_support( 'post-thumbnails' );
	add_image_size( 'list-thumbnail', 390, 240, true );
	add_image_size( 'large-thumbnail', 640, 300, true );
	add_image_size( 'small-thumbnail', 80, 80, true );
}
	add_action( 'after_setup_theme', 'add_thumbnail_size' );
?>

というようにサイズを3種類作りました。ページによって使い分けなければいけませんね。ただ、このように作っておけばいつでもどこのページでもどのサイズでも画像が使えます。

さらに、「true」というのは指定サイズよりも画像が大きい場合はトリミングをするという記述になります。

index.phpにこのアイキャッチがでるようにしましょう。５行目の記述を追記してくださいね。

<li class="pannel-group__item">
<a href="<?php the_permalink() ?>">
	<p class="pannel-group__item__category pannel-group__item__category--<?php echo $cat_slug; ?>"><?php echo $cat_name ?></p>
	<div class="pannel-group__item__img">
		<?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'list-thumbnail' ); } ?>
	</div>
	<h2 class="pannel-group__item__title"><?php the_title(); ?></h2>
	<div class="pannel-group__item__text">
		<?php the_excerpt(); ?>
	</div>
	<p class="pannel-group__item__date"><?php the_time('Y/m/j') ?></p>
</a>
</li>

今回はアイキャッチ画像が設定されているときだけというようにコードを書きました。

アイキャッチの確認

確認のためアイキャッチを設定の上、記事を新規投稿しましょう

サンプルのアイキャッチ画像

今までと同じように記事の新規作成を行ったら

新規投稿画面右下にあるリンクをクリックします

アイキャッチ画像を設定

アイキャッチ画像を設定 > ファイルを選択

アイキャッチ

代替テキストに任意のテキストを入力したら「アイキャッチ画像を設定」ボタンをクリックします。

ここまでできたら「公開」を押してブラウザで確認をしてみてくださいね。これで今回の投稿からアイキャッチ画像が表示されるようになりましたね。だいぶブログらしくなってきました。

記事があるときとないときの処理

普通にブログを運営していればほとんどないのですが、念のため記事が全くない場合の処理も行います。

if文を使ってみよう

先ほどもアイキャッチの設定のときに出てきましたが、if文というのは条件をつけて出し分けることができます。今回であればブログ内に記事が1件でもある場合と、1件もない場合で出し分けをします。

ブログ内に記事が1件でもある場合については、ここまで作った記事の一覧がでればOKですね。記事が全くない場合は、テキストで「記事がありません」と表示するようにしましょう。

ifの使い方としてはこんな感じになります

<?php if (have_posts()) : ?>//記事があるかどうか
	記事がある場合の処理
<?php else : ?>
	記事がない場合の処理
<?php endif; ?>

index.php

3行目、41行目、43行目あたりに追記しています

<div class="main-content">
	<section>
	<?php if (have_posts()) : ?>
		<ul class="pannel-group clearfix">
			
			<?php while (have_posts()) : the_post(); ?>

			<?php 
				// カテゴリー情報を取得
				$category = get_the_category();
				$cat_name = $category[0]->cat_name;
				$cat_slug = $category[0]->category_nicename;
			?>
			
			<li class="pannel-group__item">
				<a href="<?php the_permalink() ?>">
					<p class="pannel-group__item__category pannel-group__item__category--<?php echo $cat_slug; ?>"><?php echo $cat_name ?></p>
					<div class="pannel-group__item__img">
						<?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'list-thumbnail' ); } ?>
					</div>
					<h2 class="pannel-group__item__title"><?php the_title(); ?></h2>
					<div class="pannel-group__item__text">
						<?php the_excerpt(); ?>
					</div>
					<p class="pannel-group__item__date"><?php the_time('Y/m/j') ?></p>
				</a>
			</li>

			<?php endwhile; ?>

		</ul>
		<!-- 繰り返しなので省略します -->
	</section>
	<nav class="pager">
		<ul class="pager__menu">
			<li class="pager__list pager__list--current">1</li>
			<li class="pager__list"><a href="#">2</a></li>
			<li class="pager__list"><a href="#">3</a></li>
		</ul>
	</nav>
	<?php else : ?>
		<h2 class="title--h2">記事がありません</h2>
	<?php endif; ?>
</div>

記述する場所を間違えないように気をつけてくださいね。

WordPress管理画面で記事を全部けす方法

左メニュー投稿 > 投稿一覧

セレクトメニューから「ゴミ箱に移動」を選択

全ての記事をチェックボックスで選択

「適用」

で消せます

ちなみに、もとに戻すには

同画面の一覧のちょっと上「ゴミ箱」選択

記事全て選択

セレクトメニューから「復元」を選択

「適用」

サイドメニューに最新記事を載せよう

sidebar.phpを変更します。が、index.phpでやったこととほぼ同じことをやるだけです。注意点としてはアイキャッチの画像のサイズと、表示する件数を5件にするところですね。

新薬記事を5件表示

<?php query_posts('posts_per_page=5'); ?>

小さいアイキャッチ画像を表示

<?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'small-thumbnail' ); } ?>

sidebar.php

<div class="side-content__item">
	<h2 class="title title--h2">
		新着記事
	</h2>
	<ul class="side-post-lists">
	<?php query_posts('posts_per_page=5'); ?>
	<?php while (have_posts()) : the_post(); ?>
		<li class="side-post-lists__item">
			<a href="<?php the_permalink() ?>" class="clearfix">
				<div class="side-post-lists__item__img">
					<?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'small-thumbnail' ); } ?>
				</div>
				<div>
					<p class="side-post-lists__item__date"><?php the_time('Y/m/j') ?></p>
					<h3 class="side-post-lists__item__title"><?php the_title(); ?></h3>
				</div>
			</a>
		</li>
		<?php endwhile;?>
	</ul>
</div>

とりあえずここまででトップページ（記事一覧ページ）の作成ができました。ただ、ブログの記事詳細ページを作っていないのでまだ、一覧のリンクをクリックしても詳細ページには遷移しませんね。

singleページを作ろう

WordPressでは詳細ページのテンプレートファイルはsingle.phpというように決まりごとになっています。ということで、single.phpを新規作成をして書きをコピーペーストしましょう。

single.php

<?php get_header(); ?>

<div class="wrapper clearfix">
	<div class="main-content">
		<section>

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

			<?php 
				// カテゴリー情報を取得
				$category = get_the_category();
				$cat_name = $category[0]->cat_name;
				$cat_slug = $category[0]->category_nicename;
			?>
				
			<article class="article">
				<header class="article__header">
					<h2 class="title title--h1">
							<?php the_title(); ?>
					</h2>
					<ul class="article__summary">
						<li><?php the_time('Y年m月j日') ?></li>
						<li><?php echo $cat_name ?></li>
					</ul>
				</header>
				<p class="article__thumb">
					<?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'large-thumbnail' ); } ?>
				</p>

				<div class="content">
					<?php the_content(); ?>
				</div>
			</article>
			<?php endwhile; ?>
			<?php else : ?>
			<article class="article">
				<h1 class="title title--h1">記事が見つかりませんでした。</h1>
			</article>
			<?php endif; ?>
		</section>
	</div>

	<?php get_sidebar(); ?>
	
</div>

<?php get_footer(); ?>

マークアップは少し変更されていますが、PHPの構文は似たような感じで作られているのがわかると思います。While文で繰り返し処理をしてテンプレートタグで表示させるって感じですね。

CSSで見た目を整える

記事詳細の基本スタイルをレイアウトです。アイキャッチの画像はfunctions.phpで幅640pxとしていますが、PCのメインコンテンツの幅は820pxなので拡大されて表示されるようにしました。640pxはスマートフォンで見たときのサイズが最適になるように設定しました。

/* article
--------------------------------------------------------- */
.article{
}

.article__header{
  margin-bottom:20px;
}

.article__summary{
  font-size:1.2em;
  background: #f8f8f8;
  padding:5px 10px;
}

.article__summary li{
  display:inline-block;
  margin-right:20px
}

.article__thumb{
  width:100%;
  margin-bottom:40px;
}

.article__thumb img{
  width:100%;
  height:auto;
}

記事内のスタイルを定義する

WordPressの記事本文では基本的にpタグでマークアップされます。なので、今回はとりあえずpタグのスタイルだけ記載します。

/* content
--------------------------------------------------------- */
.content p{
  font-size:1.4em;
  margin-bottom:30px;
}

というように.content内のpタグにはこのスタイルというようにしておくといいです。pタグなどに単体でクラスなどをCSSに定義してしまうと管理画面で投稿する際にいちいち段落ごとにクラスを指定しなければいけなくなります。

このような感じで、h1やh2など他のタグもご自分のお好きなようにCSSを定義するといいと思います。

一応サンプルとして載せておきます

.content h2 {
    font-size: 2.4em;
    margin-bottom: 48px;
    margin-top: 80px;
    border-top: solid #333 1px;
    border-bottom: solid #333 1px;
    padding: 16px 0;
    line-height: 1.2;
}
.content h3 {
	font-size: 2em;
	margin-bottom: 48px;
	margin-top: 80px;
	border-left: 8px solid #ccc;
	padding: 8px;
	line-height: 1.2;
}
.content h4 {
    font-size: 1.6em;
    margin-bottom: 48px;
    margin-top: 80px;
    border-left: 8px solid #eee;
    padding: 8px;
    line-height: 1.2;
}
.content h5 {
    font-size: 1.4em;
    margin-bottom: 48px;
    margin-top: 80px;
    border-left: 8px solid #eee;
    padding: 8px;
    line-height: 1.2;
}

トップページの完成イメージ

記事詳細ページの完成イメージ

おわりに

いかがですか？ここまででWordPressのオリジナルのテーマをほぼほぼ作成することができたと思います。初心者で難しいなっていう方はコピペで作ってしまってもいいと思います。ちょっと自身のあるかたはカスタマイズをしたりして理解をより深めてみるのもいいかもしれませんね。

次回は以降はこのブログサイトをもっと使いやすくしていきます。よろしくお願いしますー

完成例のオリジナルテーマ

完成例をダウンロード

※テーマのみのダウンロードなのでWordPressをインストールしなければ正常に動作しません。ご注意ください。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

今すぐフォローしよう！

@102_designさんをフォロー

こんなブログサイトを作る

作れるようになるまでの流れ

WordPressとは

バリデーションを通そう

開発環境を作ろう

Macでの環境構築

Windowsでの環境構築

WordPressのインストール

WordPressダウンロード（Mac、Windows共通）

WordPressインストール（Mac）

WordPressインストール（Win）

ページを表示しよう

Hello world!って？

WordPressのテーマとは

オリジナルのテーマを作り方 基本

テーマ用フォルダを作る

オリジナルテーマにとりあえず必要なもの

style.css

header.php

CSSの指定について

index.htmlに下記追加

sidebar.php

index.htmlに下記追記

footer.php

index.htmlに追記

index.php

管理画面でオリジナルテーマを選ぶ

ちょっと豆知識

ループを確認する

while文を使ってループさせる

記事詳細へのリンク

記事のタイトル

記事の抜粋

投稿日時

カテゴリを表示されるようにする

アイキャッチで画像が出るようにしよう

アイキャッチ画像を使えるようにする

アイキャッチ画像のサイズを指定する

アイキャッチの確認

記事があるときとないときの処理

if文を使ってみよう

WordPress管理画面で記事を全部けす方法

サイドメニューに最新記事を載せよう

singleページを作ろう

CSSで見た目を整える

記事内のスタイルを定義する

トップページの完成イメージ

記事詳細ページの完成イメージ

おわりに

イチマルニデザインブログをフォローしよう

いいなと思ったらシェアお願いします

同じカテゴリーの記事

compassをgulpでコンパイルしてさらにCSS圧縮まで自動化しよう

レスポンシブに対応したcssフレームワーク Materializeを使ってみた感想

cssのz-indexの重なり順で困ったときにしてみたこと

初心者必見！WordPressで0からブログを作ってみよう！CSSの入門編

オリジナルのテーマを作り方　基本

レスポンシブに対応したcssフレームワーク　Materializeを使ってみた感想