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

前回の続きです。

新しいテーマの追加

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

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

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

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

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

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

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

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

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

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

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

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

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

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

テーマの概要

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

style.css

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

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

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

テンプレートの作成

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

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

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

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;
}

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

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の終了タグである「?>」は基本的に省略します。

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>

footer.php

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

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

sidebar.php

<aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">
    </div>
</aside>

index.php

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

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

single.php

<?php get_header(); ?>
<div class="container">
    <div class="contents">
    </div>
    <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

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

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

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

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

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

WordPressでオリジナルテーマを作ろう #3: レイアウトの作成