最小構成でwordpressのテーマを作成します。
パート2では以下の行程を進めます。
条件および方針
0. wordpressをサーバーに設置済とする。
1. トップページ(index.html)、投稿ページ(single.html)、固定ページ(page.html)、アーカイブページ(archive.html)を作成する
2. wordpressのthemesディレクトリに作成したファイルをいれる
3. 作成したファイルの書き換え、ファイルの追加 ← パート1はここまで
4. 記事詳細ページの作成(single.php)
5. 固定ページの作成(page.php) ← 本記事はここまでやります
6. アーカイブの作成(archive.php)
7. その他の設定とまとめ
4. 記事詳細ページの作成(single.php)
・single.htmlの拡張子をsingle.phpに変更し、wordpress記事を表示する記述を追加します。
・記事を呼び出す仕組みは、パート1のindex.phpで記事一覧を取得した方法とほぼ同じです。
○single.php
<!DOCTYPE html>
<html lang="ja">
<head>
<title>wordpressテーマ自作</title>
<meta name="description" content="ディスクリプションだよ">
<meta name="keywords" content="キーワード1, キーワード2">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sanitize.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/normalize.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/common.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/single.css">
<?php wp_head(); ?>
</head>
<body>
<header>
<div class="headerWrap">
<div class="centerBox">
<p>ここからheader</p>
<h1>wordpress自作テーマ概略</h1>
<div class="menuBtn">
<span></span>
<span></span>
<span></span>
</div>
<nav class="headerMenu">
<ul>
<li>
<a href="">トップページ</a>
</li>
<li>
<a href="">記事一覧へのリンク</a>
</li>
<li>
<a href="">固定ページへのリンク</a>
</li>
</ul>
</nav>
<p>ここまでheader</p>
</div>
</div>
</header>
<main>
<div class="mainWrap">
<div class="centerBox">
<p>ここからmain</p>
<div class="rowWrap">
<div class="contentWrap">
<p class="text">記事ページのテンプレート</p>
<?php
//投稿記事があれば下記を実行
if(have_posts()){
//記事取得分だけ繰り返す
while(have_posts()) {
the_post();//記事データを取得
?>
<h1><?php the_title(); ?></h1>
<section>
<?php the_content(); ?>
</section>
<?php
}
}
?>
</div>
<div class="sideBar">
<p>サイドバーを書く</p>
<?php get_sidebar(); ?>
</div>
</div>
<p>ここまでmain</p>
</div>
</div>
</main>
<footer>
<div class="footerWrap">
<div class="centerBox">
<p>ここからfooter</p>
<p>ここまでfooter</p>
</div>
</div>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-2.0.0.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/index.js"></script>
<?php wp_footer(); ?>
</footer>
</body>
</html>
これで、wordpressの管理画面から記事を書けばsingle.phpに沿ったデザインで記事が表示される。
5. 固定ページの作成(page.php)
・page.htmlの拡張子を変更し、page.phpとする。
・記事の呼び出しの原理はsingle.phpと同様。
○page.php
<!DOCTYPE html>
<html lang="ja">
<head>
<title>wordpressテーマ自作</title>
<meta name="description" content="ディスクリプションだよ">
<meta name="keywords" content="キーワード1, キーワード2">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sanitize.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/normalize.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/common.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/page.css">
<?php wp_head(); ?>
</head>
<body>
<header>
<div class="headerWrap">
<div class="centerBox">
<p>ここからheader</p>
<h1>wordpress自作テーマ概略</h1>
<div class="menuBtn">
<span></span>
<span></span>
<span></span>
</div>
<nav class="headerMenu">
<ul>
<li>
<a href="">トップページ</a>
</li>
<li>
<a href="">記事一覧へのリンク</a>
</li>
<li>
<a href="">固定ページへのリンク</a>
</li>
</ul>
</nav>
<p>ここまでheader</p>
</div>
</div>
</header>
<main>
<div class="mainWrap">
<div class="centerBox">
<p>ここからmain</p>
<div class="rowWrap">
<div class="contentWrap">
<p class="text">固定ページのテンプレート</p>
<?php
//投稿記事があれば下記を実行
if(have_posts()){
//記事取得分だけ繰り返す
while(have_posts()) {
the_post();//記事データを取得
?>
<h1><?php the_title(); ?></h1>
<section>
<?php the_content(); ?>
</section>
<?php
}
}
?>
</div>
<div class="sideBar">
<p>サイドバーを書く</p>
<?php get_sidebar(); ?>
</div>
</div>
<p>ここまでmain</p>
</div>
</div>
</main>
<footer>
<div class="footerWrap">
<div class="centerBox">
<p>ここからfooter</p>
<p>ここまでfooter</p>
</div>
</div>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-2.0.0.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/index.js"></script>
<?php wp_footer(); ?>
</footer>
</body>
</html>
これで、wordpressの管理画面から固定ページを書けばpage.phpに沿ったデザインで記事が表示される。
※補足 アドレスによって読み込ませるファイルを変更する場合
・URLをcontactとするならば、固定ページでページを作成後スラッグにcontactと設定する。
この時contactにアクセスするとpage.phpの代わりにpage-contact.phpのレイアウトが適用されます。
○page-contact.php (サイドバーがないデザイン)
<!DOCTYPE html>
<html lang="ja">
<head>
<title>wordpressテーマ自作</title>
<meta name="description" content="ディスクリプションだよ">
<meta name="keywords" content="キーワード1, キーワード2">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sanitize.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/normalize.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/common.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/page.css">
<?php wp_head(); ?>
</head>
<body>
<header>
<div class="headerWrap">
<div class="centerBox">
<p>ここからheader</p>
<h1>wordpress自作テーマ概略</h1>
<div class="menuBtn">
<span></span>
<span></span>
<span></span>
</div>
<nav class="headerMenu">
<ul>
<li>
<a href="">トップページ</a>
</li>
<li>
<a href="">記事一覧へのリンク</a>
</li>
<li>
<a href="">固定ページへのリンク</a>
</li>
</ul>
</nav>
<p>ここまでheader</p>
</div>
</div>
</header>
<main>
<div class="mainWrap">
<div class="centerBox">
<p>ここからmain</p>
<div class="rowWrap">
<div class="contentWrap">
<p class="text">サイドバーがないページデザイン</p>
<?php
//投稿記事があれば下記を実行
if(have_posts()){
//記事取得分だけ繰り返す
while(have_posts()) {
the_post();//記事データを取得
?>
<h1><?php the_title(); ?></h1>
<section> <?php the_content(); ?> </section>
<?php
}
}
?>
</div>
</div>
<p>ここまでmain</p>
</div>
</div>
</main>
<footer>
<div class="footerWrap">
<div class="centerBox">
<p>ここからfooter</p>
<p>ここまでfooter</p>
</div>
</div>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-2.0.0.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/index.js"></script>
<?php wp_footer(); ?>
</footer>
</body>
</html>
これで、wordpressの管理画面から固定ページと記事を作成することができるようになりました。
パート3に続く