WordPressでオリジナルテーマを作ろう #2: テンプレートの作成

![wordpress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/38380512-f1e3-7d6a-5a9d-ce16ceaf6ca3.png)

[前回](https://qiita.com/takahashitakuya031126/items/088a07e5d3868b58c0b5)の続きです。

####新しいテーマの追加

WordPressの管理画面を開き、左側のメニューから外観を選択します。

![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/9f7e323f-c77a-7dcf-6102-69e968db50f0.png)

デフォルトで3つのテーマが入っていることがわかります。今はTwenty Twentyというテーマが有効になっています。

ここに新しいテーマを追加するわけですが、その前にWordPressのテーマがどこにあるのかを確認していきます。

Localの画面を開き、赤枠の中の「>」を選択します。

![img2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/8aeb49ee-f61c-5ccc-8555-dc7c64fb8095.png)

するとmysiteディレクトリが開くので、app/public/wp-content/themesに移動します。

themesディレクトリの中に先ほどの3つのWordPressテーマがあるのがわかります。

themesディレクトリに新しいディレクトリを作成します。名前は好きに決めてください。本記事ではwp-sampleとします。

WordPressがテーマとして認識するには、最低でも2つのファイルが必要になります。index.phpとstyle.cssです。

実際に2つのファイルを作りましょう。中身は空のままで大丈夫です。

作ったらWordPressの管理画面を更新しましょう。

![img3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/cc615f52-b45c-67ba-8439-1861e4b44d92.png)

これで新しいテーマが追加されました。

テーマの詳細を確認すると、バージョン情報がなく、作成者が匿名になっています。

![img4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/3fd4000b-76e1-ed52-ffcf-60e0c2a2a3b0.png)

有効化を選択し、サイトを表示させてみましょう。まだ何もコードを記述していないので、真っ白な画面が現れます。

これで一応テーマの作成は完了です。

####テーマの概要

style.cssにコードを追加します。

```CSS:style.css
@charset "utf-8";
/*
theme Name: WordPressオリジナルテーマ
Author: Takahashi Takuya
version: 1.0.0
Description: original theme
*/
```

cssファイルの保存後、管理画面を更新し、自分の作成したテーマを確認します。

![img5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/dd370ebd-a3e0-3c53-2ff1-0b62d588d333.png)

テーマ名、作成者名、バージョン、テーマの説明が表示できました。

####テンプレートの作成

作成するファイルは以下の通りです。

- style.css
- functions.php
- header.php
- footer.php
- index.php
- single.php
- sidebar.php

各ファイルに記述するコードを見ていきましょう。

```CSS:style.css
@charset "utf-8";
/*
theme Name: WordPressオリジナルテーマ
Author: Takahashi Takuya
version: 1.0.0
Description: original theme
*/

/*cssのリセット*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,abbr,address,cite,code,del,dfn,em,img,
ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,
ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
figcaption,figure,footer,header,hgroup,menu,nav,section,
summary,time,mark,audio,video {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  background: transparent;
}

body {
  line-height: 1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
}

ins {
  text-decoration: none;
  color: #000;
  background-color: #ff9;
}

mark {
  font-weight: bold;
  font-style: italic;
  color: #000;
  background-color: #ff9;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  cursor: help;
  border-bottom: 1px dotted;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ccc;
}

/*サイト全体*/
html {
    font-size: 16px;
}

body {
    /*フォントの指定*/
    font-family: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans Japanese', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    /*行間の指定*/
    line-height: 1.4;
    margin: 0;
    padding: 0;
    /*サイトのデフォルトとなる文字色*/
    color: #333;
}

/*見出しを全て太字で表示*/
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #000;
}

img {
    max-width: 100%;
    height: auto;
}
```

デフォルトの文字色や行間はお好みで設定してください。

```PHP:functions.php
<?php

add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'post-thumbnails' );
```

functions.phpにコードを記述する場合は、冒頭に「<?php」を書きます。phpの終了タグである「?>」は基本的に省略します。

```PHP:header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
    <div class="header-inner">
    </div>
</header>
```

```PHP:footer.php
<footer id="footer" class="footer">
    <div class="footer-inner">
    </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
```

footer.phpには、header.phpに記述したbodyとhtmlの閉じタグを忘れずに書いておきましょう。

```PHP:sidebar.php
<aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">
    </div>
</aside>
```

```PHP:index.php
<?php get_header(); ?>
<div class="container">
    <div class="contents">
    </div><!--end contents-->
    <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
```

index.phpは一覧ページを生成するためのファイルです。

```PHP:single.php
<?php get_header(); ?>
<div class="container">
    <div class="contents">
    </div>
    <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
```

single.phpは投稿ページを生成するためのファイルです。

これでサイトのひな型が出来上がりました。

現時点では、ブラウザを確認しても真っ白な画面が表示されるだけです。

次回以降、要素を入れていきますので、そのときにきちんと表示されるようになります。

次回はサイトのレイアウトを作成します。

[WordPressでオリジナルテーマを作ろう #3: レイアウトの作成](https://qiita.com/takahashitakuya031126/items/d275345d78de18bf0b8f)