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

Pocket

最小構成でwordpressのテーマを作成します。

条件および方針

0. wordpressをサーバーに設置済とする。

1. トップページ(index.html)、投稿ページ(single.html)、固定ページ(page.html)、アーカイブページ(archive.html)を作成する

2. wordpressのthemesディレクトリに作成したファイルをいれる

3. 作成したファイルの書き換え、ファイルの追加　←　本記事はここまでやります

4. 記事詳細ページの作成(single.php)　

5. 固定ページの作成(page.php)　

6. アーカイブの作成(archive.php)　

7. その他の設定とまとめ

1. トップページ(index.html)、投稿ページ(single.html)、固定ページ(page.html)、アーカイブページ(archive.html)を作成する

〇ディレクトリ構成

original
|______inde.html
|______single.html
|______page.html
|______archive.html
|
|______css
|      |______index.css
|      |______common.css
|      |______normalize.css
|      |______sanitize.css
|      |______page.css
|      |______single.css
|      |______archive.css
|
|______js
|      |______jquery-2.0.0.min.js
|      |______common.js
|
|______images
       |______main.png

htmlファイルを作成しますがほとんど一緒です。読み込むcssとテキストの一部が違うくらいです。

〇index.html(デモはこち)

<!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="css/sanitize.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/index.css">
</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>
             <div class="imgItem">
               <img src="images/main.png">
             </div>
             <ul>
               <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
               <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
               <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
               <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
             </ul>
          </div>
          <div class="sideBar">
            <p>サイドバーを書く</p>
          </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="js/jquery-2.0.0.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
  </footer>
</body>
</html>

〇single.html

<!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="css/sanitize.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/single.css">
<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>
          </div>
          <div class="sideBar">
            <p>サイドバーを書く</p>
          </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="js/jquery-2.0.0.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
  </footer>
</body>
</html>

〇page.html

<!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="css/sanitize.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/page.css">
</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>
          </div>
          <div class="sideBar">
            <p>サイドバーを書く</p>
          </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="js/jquery-2.0.0.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
  </footer>
</body>
</html>

〇archive.html

<!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="css/sanitize.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/archive.css">
</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>
             <ul>
               <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
               <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
               <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
               <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
             </ul>
          </div>
          <div class="sideBar">
            <p>サイドバーを書く</p>
          </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="js/jquery-2.0.0.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
  </footer>
</body>
</html>

〇common.css

* {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

ul {
  list-style: none;
}

/*

header

*/
.centerBox {
  padding: 0 15px;
  margin: 0 auto;
}

.headerWrap {
  background-color: #e2f5f7;
  padding: 50px 0;
  max-width: 960px;
  margin: 0 auto;
}

.menuBtn {
  width: 50px;
  height: 50px;
  background: #fff;
  position: relative;
  margin: 0 0 10px;
}

.menuBtn span {
  position: absolute;
  height: 2px;
  width: 25px;
  background-color: #444;
  transition: .3s;
}

.menuBtn span:nth-of-type(1) {
  transform: translate(-50%,-50%);
  top: calc(50% - 8px);
  left: 50%;
}

.menuBtn span:nth-of-type(2) {
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
}

.menuBtn span:nth-of-type(3) {
  transform: translate(-50%,-50%);
  top: calc(50% + 8px);
  left: 50%;
}

.menuBtn.menuBtnOn span:nth-of-type(1) {
  transform: translate(-50%,-50%) rotate(405deg);
  top: 50%;
  left: 50%;
}

.menuBtn.menuBtnOn span:nth-of-type(2) {
  opacity: 0;
}

.menuBtn.menuBtnOn span:nth-of-type(3) {
  transform: translate(-50%,-50%) rotate(-405deg);
  top: 50%;
  left: 50%;
}

.headerMenu {
  display: none;
  margin: 0 0 10px;
}

.headerMenu ul {
  margin: 0;
}

.headerMenu li:not(:last-of-type) {
  margin: 0 0 10px;
}

/*

main

*/
.mainWrap {
  background-color: #ececec;
  padding: 50px 0;
  max-width: 960px;
  margin: 0 auto;
}

.rowWrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

@media print, screen and (min-width: 768px){

}

.contentWrap {
  width: 100%;
  background-color: #f1aeae;
  padding: 20px 10px;
  margin: 0 0 30px;
}

@media print, screen and (min-width: 768px){
  .contentWrap {
    width: calc(100% - 220px);
    margin: 0;
  }
}

.sideBar {
  width: 100%;
  background-color: #c9e2ff;
  padding: 20px 10px;
}

@media print, screen and (min-width: 768px){
  .sideBar {
    max-width: 200px;
    width: 100%;
  }
}

/*

footer

*/

.footerWrap {
  background-color: #edcaf9;
  padding: 50px 0;
  max-width: 960px;
  margin: 0 auto;
}

〇common.js

$(function(){
  $('.menuBtn').on('click', function() {//スマートフォンメニューの開閉
      $(this).toggleClass('menuBtnOn');
      $('nav').slideToggle('');
  });
});

〇index.cssなどは、各自で書いてもらえばOK(今回は読み込みの確認にのみ使用しています。)

/*
index.css
*/

2. サーバーに設置されているwordpressのthemesディレクトリに作成したファイルをいれる

〇wordpressにファイルを入れた直後のディレクトリ構成

themes
|
|______original
       |______inde.html
       |______single.html
       |______page.html
       |______archive.html
       |
       |______css
       |      |______index.css
       |      |______common.css
       |      |______normalize.css
       |      |______sanitize.css
       |      |______page.css
       |      |______single.css
       |      |______archive.css
       |
       |______js
       |      |______jquery-2.0.0.min.js
       |      |______common.js
       |
       |______images
              |______main.png

3. 作成したファイルの書き換え、ファイルの追加

3-1. style.cssの追加

・作成したテーマファイルの認識
wordpressにテーマを認識させるために、oiriginalディレクトリにstyle.cssを追加します。

○style.css

/*
theme Name: original
*/

3-2. index.phpの作成

・作成したテーマファイルの認識
wordpressにテーマを認識させるために、index.htmlの拡張子を変更しindex.phpとする。

3-3. テーマの有効化とパスの修正

・wordpress上からテーマを有効化
wordpress上で先ほど拡張子を変更したindex.phpが反映されていることを確認してください。
(現段階ではcss、js、画像のリンクが切れた状態になっています。)

・リンクの修正
wordpress上の独自関数を使用してcss、css、画像のパスを修正します。
パスを修正することでcss、js、画像が適切に反映されます。

○index.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/index.css">
</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>
          <div class="imgItem">
            <img src="<?php echo get_template_directory_uri(); ?>/images/main.png">
          </div>
          <ul>
            <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
            <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
            <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
            <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
          </ul>
        </div>
        <div class="sideBar">
           <p>サイドバーを書く</p>
        </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>
</footer>
</body>
</html>

3-4. wordpressの機能呼び出し

・headerとfooterにwordpressの独自関数の追加
wordpressの基幹ファイルを呼び出す<?php wp_footer(); ?>、<?php wp_footer(); ?>
をそれぞれ追加する
header に<?php wp_head(); ?>
footerに<?php wp_footer(); ?>

・サイドバーにwordpressの独自関数の追加
wordpressでサイドバーに機能を追加できるようにするために、<?php get_sidebar(); ?>を追加する
サイドバーに出力された表示が崩れている場合は、cssを弄って調整してください。

○index.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/index.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>
          <div class="imgItem">
            <img src="<?php echo get_template_directory_uri(); ?>/images/main.png">
          </div>
          <ul>
            <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
            <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
            <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
            <li><a href="#"><p><span>2020年1月1日</span><span>【カテゴリ】</span>記事のタイトル</p></a></li>
          </ul>
        </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>

3-5. 投稿記事の表示

・投稿記事の表示
トップページで記事一覧を表示させる部分を作成します。

① the_post()で記事の詳細を取得し、取得した記事データからthe_time(‘Y年n月j日’)、 get_permalink()、the_title()といった専用の関数を用いて記事の作成日時、リンク、タイトルを表示させます。

② get_the_category()でカテゴリー情報を取得し、配列で取得された情報からカテゴリ名を選び表示させます。

③ the_post()のみではどの記事の詳細を読み出して良いか判断できないため、have_posts()を用いて全記事を取得し、whileにより記事分①の処理を行っています。

○index.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/index.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>
          <div class="imgItem">
            <img src="<?php echo get_template_directory_uri(); ?>/images/main.png">
          </div>
 <?php
//投稿記事があれば下記を実行
if(have_posts()){
?>
          <ul>
    <?php
    //記事取得分だけ繰り返す
    while(have_posts()) {
      the_post();//記事データを取得
    ?>
            <li>
              <a href="<?php echo get_permalink(); ?>"><p><span> <?php the_time('Y年n月j日'); ?></span><span><?php $category = get_the_category(); $cat_name = $category[0]->cat_name; echo $cat_name; ?></span><?php the_title(); ?></p></a>
            </li>
     <?php
     }
     ?>
          </ul>
<?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>

※headerのメニューのリンクは他ページを作成したのち修正します。

パート2に続く