wordpress自作テーマ作成【パート2】

Pocket

最小構成で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に続く

シェアする

  • このエントリーをはてなブックマークに追加

フォローする