ワードプレスのサンプルサイトを作ってみた

2015.01.12

WordPressの勉強にサンプルサイトを作成したので、やったことをメモしておきます。

サイト構成

ホーム
お知らせ一覧
商品
- 商品一覧
- 商品詳細
ブログ
- ブログ一覧
- ブログアーカイブ
- ブログ詳細
ABOUT
お問い合わせ
- 個人情報保護
404ページ

WordPress組み込みの前にHTMLでコーディングを済ませておきます。

テーマ作成の準備

WordPressのインストール後、管理画面にログイン。
設定 > 一般から、サイトのタイトルとキャッチフレーズを登録しておきます。

あらかじめコーディングしておいたトップページのHTMLをコピペして、index.phpファイルを作成します。
wp-content/theme/にテーマ用のディレクトリ(今回はgealachというディレクトリ名)を作成し、
その中にstyle.cssとindex.phpを追加します。

管理画面の外観 > テーマから、追加したテーマ名(gealach)を有効化します。

内容が表示できているか確認。
ファイルパスを変更していないので、この時点では表示が崩れています。

テンプレートの組み込み

<?php wp_title(‘ \| ‘, true, ‘right’); ?>	現在のページのタイトルを取得。区切り線の文字列タイトルを表示するかどうか区切り線の表示位置
<?php bloginfo(‘name’); ?>	管理画面で設定したサイトタイトルを取得
<?php bloginfo(‘stylesheet_url’); ?>	テーマのメインで使われるCSSのURLを取得。 (テーマディレクトリ直下のstyle.css)
<?php echo get_stylesheet_directory_uri() ?>	テーマのディレクトリまでのURLを取得。今回はjsファイルの読み込みに使用していますが、テーマディレクトリ内に画像ファイルを格納して、それを読みに行く場合などにも使用します。
<?php wp_head(); ?>	プラグインなどを使用する時に必要なタグを出力。
<?php body_class(); ?>	bodyにページ毎で異なるclassを付与。
<?php bloginfo(‘description’); ?>	管理画面で設定したサイトのキャッチコピーを取得。
<?php echo home_url(); ?>	サイトトップのURLを取得。
<?php wp_footer(); ?>	プラグインなどを使用する時に必要なタグを出力。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />

<title><?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?></title>

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

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri() ?>/script.js"></script>

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page">
<header id="header">
	<p class="attention"><?php bloginfo('description'); ?></p>
	<div class="l-inner">
		<h1 class="header-logo">
			<a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
		</h1>
		<nav class="header-gnav">
			<ul>
				<li><a href="">商品一覧</a></li>
				<li><a href="">ブログ</a></li>
				<li><a href="">ABOUT</a></li>
				<li><a href="">お問い合わせ</a></li>
			</ul>
		</nav>
	</div>
</header>

<section id="contents">
～略～
</section>

<footer id="footer">
	<div class="l-inner"><small class="copyright">&copy; 2014 cly7796.net</small></div>
</footer>
<!-- / #page --></div>
<?php wp_footer(); ?>
</body>
</html>

これでCSSをきちんと読み込むようになったので、正しい表示になりました。
ただ、画像部分はそのままなので表示されていません。

ヘッダーとフッターの分割

index.phpを複製して、header.phpとfooter.phpを作成します。

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />

<title><?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?></title>

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

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri() ?>/script.js"></script>

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page">
<header id="header">
	<p class="attention"><?php bloginfo('description'); ?></p>
	<div class="l-inner">
		<h1 class="header-logo">
			<a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
		</h1>
		<nav class="header-gnav">
			<ul>
				<li><a href="">商品一覧</a></li>
				<li><a href="">ブログ</a></li>
				<li><a href="">ABOUT</a></li>
				<li><a href="">お問い合わせ</a></li>
			</ul>
		</nav>
	</div>
</header>

footer.php

<footer id="footer">
	<div class="l-inner"><small class="copyright">&copy; 2014 cly7796.net</small></div>
</footer>
<!-- / #page --></div>
<?php wp_footer(); ?>
</body>
</html>

index.phpはheader.phpとfooter.phpを読み込む記述に差し替えます。

<?php get_header(); ?>	header.phpを出力
<?php get_footer(); ?>	footer.phpを出力

index.php

<?php get_header(); ?>

<section id="contents">
～略～
</section>

<?php get_footer(); ?>

固定ページの作成

index.phpを複製して、固定ページ用のpage.phpを作成します。

パンくずリストの追加

今回は「Breadcrumb NavXT」というプラグインを利用して、パンくずリストを作成します。
プラグイン > 新規追加で「Breadcrumb NavXT」を検索。

プラグインをインストールして有効化。

設定の中に Breadcrumb NavXT という項目が追加されます。
ここでプラグインの設定を変更できます。

以下のように記述して、パンくずリストを出力します。

<div class="path">
	<div class="l-inner">
		<?php if(function_exists('bcn_display')) {bcn_display();} ?>
	</div>
</div>

固定ページの記事表示

設定 > パーマリンク設定から、リンクを「投稿名」に変更しておきます。

固定ページ > 新規追加から固定ページを投稿します。

タイトル入力後、下にパーマリンクが表示されるので、リンク先を変更しておきます。
そのページが特定ページの子要素に当たる場合、ページ属性から親ページを選択できます。
今回は個人情報ページをお問い合わせの子ページという扱いにしました。

このままだと投稿された内容が表示されないので、page.phpを変更します。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> ～ <?php endwhile; endif; ?>	投稿内容をこの中に表示する。
<?php the_content(); ?>	投稿内容の本文を表示。

page.phpは以下のようになりました。

<?php get_header(); ?>

<div class="path">
	<div class="l-inner">
		<?php if(function_exists('bcn_display')) {bcn_display();} ?>
	</div>
</div>

<section id="contents">
	<div class="l-inner">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
	</div>
</section>

<?php get_footer(); ?>

トップページの作成

index.phpを複製して、トップページ用のhome.phpを作成します。

functions.phpの作成

functions.phpを作成して、アイキャッチ画像用の設定を追加します。

add_theme_support(‘post-thumbnails’);	アイキャッチ画像の有効化。
set_post_thumbnail_size(280, 210, true);	アイキャッチ画像のサイズ指定。横幅のサイズ縦幅のサイズ自動縮小とトリミングを行うかどうか

<?php
add_theme_support('post-thumbnails');
set_post_thumbnail_size(280, 210, true);
?>

設定 > メディアでサムネイルのサイズを280×210に変更します。

カスタム投稿タイプの使用

プラグイン > 新規追加で「Custom Post Type UI」を検索し、インストールします。

インストール完了後、有効化。
左メニューに CPT UI が追加されます。

商品投稿の作成

CPT UI > 新規追加を選択します。

左側の「投稿タイプ名」に「goods」、ラベルに「商品」と入力し、下部の「Advanced Options」をクリックします。

入力項目が下に追加されるので、下の方にある「サポート」の「Title」「Editor」「Custom Fields」「Featured image」「Page Attributes」にチェックを入れ、「Save Custom Post Type」をクリックします。

左メニューに「商品」が追加されました。
CPU UI > 新規追加から、次は右側の分類名とラベルを入力し、カスタム分類を作成します。

これで商品を投稿する準備が整いました、
商品 > 商品カテゴリーを選択して、あらかじめ商品のカテゴリーを登録しておきます。

今回は「おすすめ」「ケーキ」「チョコレート」「その他」を作成しました。
「おすすめ」に登録されている商品はトップに表示されるようにします。

商品 > add商品で商品を追加します。

<?php query_posts(array(‘post_type’ => ‘goods’), ‘goodscategory’ => ‘recommend’, ‘posts_per_page’ => 6)); ?> ～ <?php wp_reset_query(); ?>	ループの条件を指定。投稿タイプがgoodsで、カスタム分類「goodscategory」の値がrecommendの記事を6件表示。
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> ～ <?php endwhile; endif; ?>	投稿のループ。投稿内容をこの中に表示する。
<?php the_permalink(); ?>	詳細ページへのリンクURLを出力
<?php the_post_thumbnail(‘thumbnail’); ?>	アイキャッチ画像の出力
<?php the_title(); ?>	タイトルの出力
<?php $key=”price”; echo get_post_meta($post->ID, $key, true); ?>	カスタムフィールドのpriceに入力された値を出力
<?php the_content(); ?>	本文の出力

<div class="m-goodsList">
	<h2>おすすめ商品</h2>
<?php query_posts(array('post_type' => 'goods', 'goodscategory' => 'recommend', 'posts_per_page' => 6)); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="item">
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
		<p class="goodsName"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
		<p class="goodsPrice"><?php $key="price"; echo get_post_meta($post->ID, $key, true); ?></p>
		<div class="goodsDescription"><?php the_content(); ?></div>
	</div>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
	<div class="more"><a href="">商品一覧へ</a></div>
</div>

これでトップページにおすすめの商品が表示されました。

お知らせ投稿の作成

CPT UI > 新規追加を選択します。
左側の「投稿タイプ名」に「information」、ラベルに「お知らせ」と入力し、下部の「Advanced Options」をクリックします。

「サポート」の「Title」「Editor」にチェックを入れ、「Save Custom Post Type」をクリックします。

左メニューに「お知らせ」が追加されました。
お知らせ > addお知らせを選択して、お知らせを追加します。

<?php query_posts(array(‘post_type’ => ‘information’), ‘posts_per_page’ => 5)); ?> ～ <?php wp_reset_query(); ?>	ループの条件を指定。投稿タイプがinformationの記事を6件表示。
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> ～ <?php endwhile; endif; ?>	投稿のループ。投稿内容をこの中に表示する。
<?php echo get_the_date(‘Y.m.d’); ?>	投稿日の出力
<?php the_title(); ?>	タイトルの出力

<div class="m-information">
	<h2>お知らせ</h2>
<?php query_posts(array('post_type' => 'information', 'posts_per_page' => 5)); ?>
	<ul>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<li>
			<span class="date"><?php echo get_the_date('Y.m.d'); ?></span>
			<p><?php the_title(); ?></p>
		</li>
<?php endwhile; endif; ?>
	</ul>
<?php wp_reset_query(); ?>
	<div class="more"><a href="">お知らせ一覧へ</a></div>
</div>

これでお知らせも表示されました。
次は、トップページで表示した商品、お知らせの一覧ページを作成します。
　

商品一覧、お知らせ一覧ページの作成

page.phpを複製して、page-goods.phpを作成します。

固定ページ > 新規追加で、商品一覧ページを作成します。
その際、スラッグをgoodsにします。

page-goods.phpに以下のように記述します。

<?php query_posts(array('post_type' => 'goods', 'posts_per_page' => 15)); ?>
		<div class="m-goodsList">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<div class="item">
				<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
				<p class="goodsName"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
				<p class="goodsPrice"><?php $key="price"; echo get_post_meta($post->ID, $key, true); ?></p>
				<div class="goodsDescription"><?php the_content(); ?></div>
			</div>
<?php endwhile; endif; ?>
		</div>

		<div class="m-pager">
<?php global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
	$paginate_format = '';
	$paginate_base = add_query_arg('paged','%#%');
}
else{
	$paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
	user_trailingslashit('page/%#%/','paged');;
	$paginate_base .= '%_%';
}
echo paginate_links(array(
	'base' => $paginate_base,
	'format' => $paginate_format,
	'total' => $wp_query->max_num_pages,
	'mid_size' => 4,
	'current' => ($paged ? $paged : 1),
	'prev_text' => '« 前へ',
	'next_text' => '次へ »',
)); ?>
		</div>
<?php wp_reset_query(); ?>

お知らせページも同じように、page-information.phpを作成します。
固定ページ > 新規追加で、スラッグをinformationにしてお知らせ一覧ページを作成します。

page-information.phpに以下のように記述します。

		<div class="m-information">
<?php query_posts(array('post_type' => 'information', 'posts_per_page' => 10)); ?>
			<ul class="m-goodsList">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
				<li>
					<span class="date"><?php echo get_the_date('Y.m.d'); ?></span>
					<p><?php the_title(); ?></p>
				</li>
<?php endwhile; endif; ?>
			</ul>
		</div>

		<div class="m-pager">
<?php global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
	$paginate_format = '';
	$paginate_base = add_query_arg('paged','%#%');
}
else{
	$paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
	user_trailingslashit('page/%#%/','paged');;
	$paginate_base .= '%_%';
}
echo paginate_links(array(
	'base' => $paginate_base,
	'format' => $paginate_format,
	'total' => $wp_query->max_num_pages,
	'mid_size' => 4,
	'current' => ($paged ? $paged : 1),
	'prev_text' => '« 前へ',
	'next_text' => '次へ »',
)); ?>
		</div>
<?php wp_reset_query(); ?>

ブログページの作成

ブログ一覧ページ

page-goods.phpを複製して、page-blog.phpを作成します。
固定ページ > 新規追加で、スラッグをblogにしてブログ一覧ページを作成します。

設定 > メディアで大サイズの幅を640pxに変更します。

設定 > 表示設定で 1ページに表示する最大件数を5に変更します。

投稿 > 新規追加からブログ内容を投稿しておきます。

ブログページのサイドナビに細心の投稿やカテゴリー一覧を表示するため、ウィジェット機能を利用した
サイドバーを追加します。
functions.phpに下記を追記します。

register_sidebar();

外観 > ウィジェットを選択します。
右側部分に表示したい内容を追加します。

最新の投稿とカテゴリーを追加しました。
タイトル項目に表示名を追加します。今回は「最新の投稿」「カテゴリー」と表示させたいため、
そのままにしています。

page-blog.phpに下記を追記します。

<?php dynamic_sidebar(); ?>	ウィジェット機能のサイドバーを表示します。

<div class="m-blogSide">
	<ul>
		<?php dynamic_sidebar(); ?>
	</ul>
</div>

<?php query_posts(array('post_type' => 'post', 'paged' => $paged)); ?>
<div class="m-blogList">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="article">
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
		<p class="blogTitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
		<div class="blogDescription"><?php the_content(); ?></div>
	</div>
<?php endwhile; endif; ?>
</div>

<div class="m-pager">
<?php global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
	$paginate_format = '';
	$paginate_base = add_query_arg('paged','%#%');
}
else{
	$paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
	user_trailingslashit('page/%#%/','paged');;
	$paginate_base .= '%_%';
}
echo paginate_links(array(
	'base' => $paginate_base,
	'format' => $paginate_format,
	'total' => $wp_query->max_num_pages,
	'mid_size' => 4,
	'current' => ($paged ? $paged : 1),
	'prev_text' => '« 前へ',
	'next_text' => '次へ »',
)); ?>
</div>
<?php wp_reset_query(); ?>

ブログ個別ページ

page-blog.phpを複製してsingle.phpを作成します。

<div class="m-blogSide">
	<ul>
		<?php dynamic_sidebar(); ?>
	</ul>
</div>

<div class="m-blogList">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="article">
		<h2><?php the_title(); ?></h2>
		<?php the_post_thumbnail('large'); ?>
		<div class="blogDescription"><?php the_content(); ?></div>
	</div>
<?php endwhile; endif; ?>
</div>

カスタムメニューの作成

ヘッダーのナビゲーション部分を管理画面から変更できるようにします。
functions.phpに下記を追記します。

register_nav_menus(array('navigation' => 'グローバルナビゲーション'));

外観 > メニューを選択、メニュー名を入力して、「メニューを作成」をクリック。

必要なメニューを追加・削除して、ドラッグで順番に並び替えます。
テーマの位置はグローバルナビゲーションを選択して、「メニューを保存」をクリック。

header.phpのナビゲーション部分を書き換えます。

<?php wp_nav_menu(array('theme_location' => 'navigation')); ?>

これで管理画面からナビゲーションの変更を行えるようになりました。
　

商品詳細ページの作成

single.phpを複製してsingle-goods.phpを作成します。
single-goods.phpに以下のように記述。

<div class="m-blogList">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="article">
	<h2><?php the_title(); ?></h2>
	<?php the_post_thumbnail('large'); ?>
	<div class="blogDescription"><?php the_content(); ?></div>
</div>
<?php endwhile; endif; ?>
</div>

404ページの作成

404ページは動的に中身を変えるとかはないので、以下のように記述しました。

<?php get_header(); ?>

<section id="contents">
	<div class="l-inner">
		<h2>404　Not Found</h2>
		<p>ページが見つかりませんでした。</p>
	</div>
</section>

<?php get_footer(); ?>

まとめ

以上で今回行った作業のまとめは終わりです。

作り終わってから「もっとああしてればよかった」みたいなことは多々あるし、
やろうと思っていたことを色々と省略していたりするのですが、
今回の目標だったカスタム投稿に関してはなんとなく分かってきたので、
次に作る時はもっとうまいことできればいいなと思います。

参考サイト

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

ワードプレスのサンプルサイトを作ってみた

サイト構成

テーマ作成の準備

テンプレートの組み込み

ヘッダーとフッターの分割

header.php

footer.php

index.php

固定ページの作成

パンくずリストの追加

固定ページの記事表示

トップページの作成

functions.phpの作成

カスタム投稿タイプの使用

商品投稿の作成

お知らせ投稿の作成

商品一覧、お知らせ一覧ページの作成

ブログページの作成

ブログ一覧ページ

ブログ個別ページ

カスタムメニューの作成

商品詳細ページの作成

404ページの作成

まとめ

コメントを残すコメントをキャンセル

Category

Tag

Recent

ワードプレスのサンプルサイトを作ってみた

サイト構成

テーマ作成の準備

テンプレートの組み込み

ヘッダーとフッターの分割

header.php

footer.php

index.php

固定ページの作成

パンくずリストの追加

固定ページの記事表示

トップページの作成

functions.phpの作成

カスタム投稿タイプの使用

商品投稿の作成

お知らせ投稿の作成

商品一覧、お知らせ一覧ページの作成

ブログページの作成

ブログ一覧ページ

ブログ個別ページ

カスタムメニューの作成

商品詳細ページの作成

404ページの作成

まとめ

関連記事

WordPressでfunctions.phpを分割して管理する

custom-blocksで複数のブロックを作成する

WordPressでカスタムブロックを作成する

WP_Query()を使った後にwp_reset_postdata()を使う意味

WordPressのthe_posts_pagination()でページャーを実装する

コメントを残す コメントをキャンセル

Category

Tag

Recent

コメントを残すコメントをキャンセル