サイト制作に関するメモ書き

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

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

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

サイト構成

  • ホーム
  • お知らせ一覧
  • 商品

    • 商品一覧
    • 商品詳細
  • ブログ

    • ブログ一覧
    • ブログアーカイブ
    • ブログ詳細
  • ABOUT
  • お問い合わせ

    • 個人情報保護
  • 404ページ

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

make-a-sample-site-in-wordpress01
 

テーマ作成の準備

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

make-a-sample-site-in-wordpress02

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

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

make-a-sample-site-in-wordpress03

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

make-a-sample-site-in-wordpress04
 

テンプレートの組み込み

<?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をきちんと読み込むようになったので、正しい表示になりました。
ただ、画像部分はそのままなので表示されていません。

make-a-sample-site-in-wordpress05
 

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

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」を検索。

make-a-sample-site-in-wordpress06

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

make-a-sample-site-in-wordpress07

make-a-sample-site-in-wordpress08

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

make-a-sample-site-in-wordpress09

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

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

 

固定ページの記事表示

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

make-a-sample-site-in-wordpress10

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

make-a-sample-site-in-wordpress11

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

make-a-sample-site-in-wordpress12

このままだと投稿された内容が表示されないので、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に変更します。

make-a-sample-site-in-wordpress13
 

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

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

make-a-sample-site-in-wordpress14

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

make-a-sample-site-in-wordpress15
 

商品投稿の作成

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

make-a-sample-site-in-wordpress16

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

make-a-sample-site-in-wordpress17

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

make-a-sample-site-in-wordpress18

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

make-a-sample-site-in-wordpress19

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

make-a-sample-site-in-wordpress20

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

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

make-a-sample-site-in-wordpress21

<?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>

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

make-a-sample-site-in-wordpress22
 

お知らせ投稿の作成

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

make-a-sample-site-in-wordpress23

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

make-a-sample-site-in-wordpress24

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

make-a-sample-site-in-wordpress25

<?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にします。

make-a-sample-site-in-wordpress26

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にしてお知らせ一覧ページを作成します。

make-a-sample-site-in-wordpress27

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にしてブログ一覧ページを作成します。

make-a-sample-site-in-wordpress28

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

make-a-sample-site-in-wordpress29

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

make-a-sample-site-in-wordpress30

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

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

register_sidebar();

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

make-a-sample-site-in-wordpress31

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

make-a-sample-site-in-wordpress32

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' => 'グローバルナビゲーション'));

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

make-a-sample-site-in-wordpress33

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

make-a-sample-site-in-wordpress34

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(); ?>

 

まとめ

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

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

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP