1.WordPressテーマの骨組みとなるテンプレートファイルを作成する

WordPressのテーマを作成するためには、はじめに最低限テーマとして動作させるためのファイルをアップロードする必要があります。

このアップロードするファイルは、WordPressのサイトをphpで生成する際に必ず呼び出される、サイトの骨組みとも言えるテンプレートファイルなので事前にローカル上(自分のパソコン上)で準備しましょう。

今回は、WordPrssテーマを構成するための基本的なテンプレートの作成方法と役割についてご紹介していきます。

テーマに必要な最低限のテンプレートを作成する

テーマに必要な最低限のテンプレートファイルを作成しましょう。最低限ブログとして機能させるために必要なテンプレートは、『functions.php』『index.php』『single.php』『header.php』『footer.php』『style.css』の6つですが、サイトにサイドバーを表示させる場合は『sidebar.php』も同時に作成します。

作成するテンプレート

テーマフォルダ

• style.css
• functions.php
• header.php
• footer.php
• index.php
• single.php
• sidebar.php(サイドバーを出力する場合のみ)

WordPressのテーマを作成する際は、まずは上記の7つのテンプレートを、必要最低限な要素を加えながらテーマフォルダの中に作成していきます。テーマの名前を付けたフォルダをローカル上で一つ作成し、その中に各テンプレートファイルを追加してください。

各テンプレートの説明と記述するソースコードは下記の通りです。

style.css

サイトのデザインを指定するcssを記述するためのテンプレートです。サイトのデザインを決めるCSSは、このテンプレートに記述していきます。
また、テーマの情報も最初に記述しておいきます。

@charset "utf-8";
/*
theme Name: WordPressレスポンシブテーマ作成byPlusers
Author: Plusers
Description: original theme
version： 2.0.0
*/

スタイルシートには、文字のエンコードを指定するために『@charset "utf-8";』を一番最初に記入してください。その後、コメントアウト(/*～*/)の中にテーマの概要を記述していきます。

テーマ概要は、テーマを選択する際に表示されるテーマの名前や作成者・バージョンなどの情報なので記述しておきましょう。特に、『theme Name:』は必ず記述しておいてください。

テーマの概要を記述したらcssを記述していきましょう。まずは、各ブラウザが自動で出力するCSSをリセットするためのCSSを記述しましょう。このCSSを記述することで、各ブラウザのデフォルトCSSによるデザインの崩れを防止することができます。

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

リセットするためのCSSを記述したら、続いてサイト全体に共通する基本となるCSSを記述していきます。

/*サイト全体の基準となるCSSを記述*/
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;
}

bodyとはサイト全体の枠組みです。『body』で設定したcssはサイト全体に反映されます。

『font-family』は、左から優先順位が高くなり、左のフォントがなければ右へという順で適応されるので好みに合わせてフォントの指定をしてください。上記のソースでは、標準的なフォント指定で設定しています。

デフォルトの文字色と行間は、自分の好みで設定してください。ただし、bodyで設定する行間は広くしすぎると、デザインの調整がしづらくなってしまうため広げすぎないように注意してください。

また、imgは画面幅よりも大きい画像でも画面の最大幅に合わせて表示されるように『max-width: 100%;』を指定し、画面サイズからはみ出ないように指定しています。

functions.php

WordPressサイトで使う、オリジナルの関数の定義付けをするためのテンプレートです。機能を追加したりルールを決める場合は、functions.phpに記述します。

ここの記述にエラーがあると、WordPressがきちんと機能しなくなるので、関数を記述する際には必ず一時的にバックアップをとっておきましょう。

<?php
//テーマのセットアップ
// HTML5でマークアップさせる
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// Feedのリンクを自動で生成する
add_theme_support( 'automatic-feed-links' );
//アイキャッチ画像を使用する設定
add_theme_support( 'post-thumbnails' );

functions.phpを記述する際は、一番最初にphpの開始タグである『<?php』から記述を初めます。phpの終了タグである『?>』は、基本的に全ての関数を記載した後に記述するか省略します。
WordPressのfunctions.phpでは、最後のPHPの閉じタグ(?>)は省略することを推奨しているようです。

header.php

サイトの共通部分である、ヘッダーを生成するテンプレートです。後述の、index.phpとsingle.phpで呼び出して使用します。

<!DOCTYPE html><!--htmlで書かれていることを宣言-->
<html lang="ja"><!--日本語のサイトであることを指定-->
<head>
<meta charset="utf-8"><!--エンコードがUTF-8であることを指定-->
<meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--viewportの設定-->
<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"><!--font-awesomeのスタイルシートの呼び出し-->

<?php wp_head(); ?><!--システム・プラグイン用-->
</head>
<body <?php body_class(); ?>>
<header>
  <div class="header-inner">

  </div><!--end header-inner-->
</header>

header.php内にはサイトの情報を記載したheadタグを作成しておきましょう。ここには、検索エンジンやSNSにサイトの情報を伝えるためのmetaデータや、各種ファイルを読み込むための記述をしていきます。

SEO用のmetaデータについては、『7.SEOやSNS用にWordPressのheadタグ内にメタデータやアイコンを追加する』で各ページごとに最適化して記述を追加するため、現在は一旦スルーします。

『<meta name="viewport"～』は、レスポンシブデザインのサイトを作成する上では必要不可欠なコードです。viewportを記述しておくことで各デバイスの画面の横幅を認識してページを表示してくれますので必ず記述しておいてください。

また、今回作成するwordpressテーマでは『font-awesome』のWebフォントでアイコンを出力していきます。通常のスタイルシートと一緒に font-awesomeの CDN 版のスタイルシートも一緒に呼び出しましょう。(ver5.0.13)
有料版のアイコンもありますが、今回は無料のアイコンのみを使って作成します。

wordpressのテーマでは『<?php wp_head(); ?>』を『</head>』の前に記述することで、システムやプラグインが情報を出力しています。この記述がないと、システムやプラグインとの連携ができなくなるので、必ず記述してください。

footer.php

サイトの共通部分である、フッターに使用されるテンプレートです。後述の、index.phpとsingle.phpで呼び出して使用します。

<footer id="footer" class="footer">
  <div class="footer-inner">

  </div><!--end footer-inner-->
</footer>
<?php wp_footer(); ?><!--システム・プラグイン用-->
</body>
</html>

『<?php wp_head(); ?>』と同じで『<php wp_footer;(); ?>』もシステムやプラグインが情報を出力するのに必要になりますので、必ず記述しておきましょう。

また、フッターではヘッダーに記述した『body』と『html』タグを忘れずに閉じてください。

sidebar.php

サイドバーを出力するときに使用されるテンプレートです。一般的には、WordPressのデフォルト機能であるウィジェットを出力することが多いのですが、直接記述することもできます。

後ほどウィジェットの設定を行いますので、ここでは要素のみ作成しておきましょう。後述の、index.phpとsingle.phpで呼び出して使用します。

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

  </div><!--end sidebar-inner-->
</aside>

サイドバーエリアは『<aside id="sidebar">』で記述します。asideは本文と関連はあるが違うエリアであることを示すタグです。

index.php

トップページやカテゴリ・タグ・エラーページなどの一覧ページを生成するためのファイルです。『home.php』や『category.php』『tag.php』『archive.php』などの個別テンプレートを作成していない場合は、自動的に『index.php』が適応されます。

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

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

『index.php』には、ヘッダーとフッター・サイドバーを呼び出すためのコードを記述しておきます。

各要素は、『header.php』『footer.php』『sidebar.php』のテンプレートに分けて作成していくため、それぞれのテンプレートを呼び出すためのwordpress独自の関数で出力しましょう。

header.php(ヘッダー)を呼び出す

<?php get_header(); ?>

footer.php(フッター)を呼び出す

<?php get_footer(); ?>

sidebar.php(サイドバー)を呼び出す

<?php get_sidebar(); ?>

single.php

投稿ページ(記事ページ)を生成するためのテンプレートです。記事を開いたときはこのテンプレートが呼び出されて反映されます。

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

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

今の時点では、記述する内容が『index.php』と全く同じですが、後ほど編集する『<div class="contents">～</div>』の中身で、記事用のページにレイアウトします。

WordPressにテーマファイルをアップロードする

ここから

基本の骨組みとなるテンプレートの作成が完了したら、WordPressにテーマファイルをアップロードしましょう。

WordPressの管理画面からアップロードする場合

WordPressの管理画面上からアップロードする場合は、テーマフォルダをZipファイルに圧縮してください。Zipファイルへの圧縮は下記の方法で行うことができます。

Windows

圧縮したいファイルの上で右クリック→『送る』→『圧縮(zip形式)フォルダー』

Mac

圧縮したいフォルダの上で右クリック(ctrl + クリック)→『"◯◯◯"を圧縮』

Zipファイルを作成したら、管理画面よりZipファイルをアップロードします。

管理画面『外観』→『テーマ』→『新規追加』→『テーマのアップロード』よりファイルを選択し、WordPressにインストールして有効化してください。

ローカル環境のWordPressに直接アップする場合(XAMPP)

Cドライブ上にあるXAMPPフォルダ内のWordPrssのテーマが入っているフォルダ内に直接テーマフォルダをドラックしましょう。(Zipに圧縮する必要はありません)

デフォルトの設定のままの場合は、ファイルまでのパスが
『C:\xampp\htdocs\任意のWordPressフォルダ\wp-content\themes』
になるかと思います。ファイルをアップロードしたら管理画面上にテーマが表示されるようになりますので、有効化しておきましょう。

テーマを作成する準備が完了したら中身を作成

現在の時点では、テーマを有効化してブラウザで確認しても真っ白な状態で表示されますが、要素が何も入っていないので、何も表示されていない状態となっているだけです。各要素を入れて行くことで、きちんと表示されるようになります。

今回は以上です。テーマ作成2では、サイトのレイアウトを決め、レスポンシブデザインになるように骨組みを調整していきます。

下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。