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

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

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

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

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

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

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

作成するテンプレート

テーマフォルダ

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

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

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

functions.php

WordPressの関数の定義付けをするためのテンプレートです。機能を追加したりルールを決める場合は、functions.phpに記述します。
ここの記述にエラーがあると、WordPressがきちんと機能しなくなるので関数を記述する際には一時的にバックアップをとっておきましょう。

<?php//テーマのセットアップ
// titleタグをhead内に生成する
add_theme_support( 'title-tag' );
// 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の終了タグである『?>』は基本的に全ての関数を記載し、最後に記述・もしくは省略でかまいません。

index.php

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

<?php get_header(); ?>
<div class="container">
<div class="contents">
</div>
<?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(); ?>

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

header.php

サイトの共通部分である、ヘッダーに使用されるテンプレートです。index.phpとsingle.phpで記述した『<?php get_header(); ?>』ではこのテンプレートを呼び出します。

<!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 href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><!--font-awesomeのスタイルシートの呼び出し-->
<?php wp_head(); ?><!--システム・プラグイン用-->
</head>
<body <?php body_class(); ?>>
<header>
<div class="header-inner">
</div>
</header>

header.php内にはサイトの情報を記載したheadタグを作成しておきましょう。ここにサイトの情報やmetaデータが出力されます。

通常は、headタグの中にtitleタグをいれてホームページタイトルを設定するのですが、functions.phpに記述した『add_theme_support( ‘title-tag’ );』が同じ役割を果たすため今回は記述の必要はありません。

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

また、今回作成するwordpressテーマでは『font-awesome』のWebフォントでアイコンを出力していきます。通常のスタイルシートと一緒に font-awesomeのBootstrap CDN 版のスタイルシートも一緒に呼び出しましょう。

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

footer.php

サイトの共通部分である、フッダーに使用されるテンプレートです。index.phpとsingle.phpで記述した『<?php get_footer(); ?>』でこのテンプレートを呼び出します。

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

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

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

sidebar.php

サイドバーを出力するときに使用されるテンプレートです。一般的には、ウィジェットを設定されることが多いです。後ほどウィジェットの設定を行いますので、ここでは要素のみ作成しておきましょう。

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

サイドバーエリアは『<aside id=”sidebar”>』で記述します。asideは本文と関連はあるが違うエリアであることを示すタグですが、『<div>』でも問題ありません。

style.css

サイトのデザインを指定するcssを記述するためのテンプレートです。サイトのデザインを決めるCSSは、このテンプレートに記述します。

また、テーマの情報も最初に記述しておきましょう。

@charset "utf-8"; <!--エンコードがUTF-8であることを指定-->
/*
theme Name: WordPressレスポンシブテーマ作成byPlusers
Author: Plusers
Description: original theme
version: 1.0.0
*/

スタイルシートは、まずはエンコードを指定するため『@charset “utf-8”;』を記入してから記述を初め、『/*~*/』にテーマの概要を記述します。

テーマ概要は、テーマを選択する際に表示されるテーマの名前や作成者・バージョンなどのデータです。

テーマの概要を記述したらcssを記述していきましょう。今回は、サイト全体のCSSを記述します。

body {
/*フォントの指定*/
font-family: '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans Japanese', 'メイリオ', 'Meiryo', Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;
/*サイト全体のフォントサイズを指定*/
font-size: 16px;
/*行間の指定*/
line-height: 1.7;
/*サイト全体にかかるmarginをリセット*/
margin: 0;
/*サイト全体にかかるpaddingをリセット*/
padding: 0;
/*サイトのデフォルトとなる文字の色を指定*/
color: #333;
}
/*見出しを全て太字で表示するように指定*/
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
/*画像の最大幅を画面のサイズの最大幅に設定*/
img {
max-width: 100%;
height: auto;
}
/*ヘッダーの下に境界線を引く*/
header {
border-bottom: solid 1px #ddd;
}
/*フッターの上に境界線を引く*/
footer {
border-top: solid 1px #ddd;
}

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

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

デフォルトの文字色と行間は、一番記事が読みやすくユーザビリティが高いと言われている『#333』『1.7』に今回は指定しています。

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

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』

になるかと思います。ファイルをアップロードしたら管理画面上にテーマが表示されるようになりますので、有効化しておきましょう。

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

現在の時点では、テーマを有効化してブラウザで確認しても真っ白な状態で表示されますが問題ありません。phpやhtml要素が何も入っていないので、何も表示されていない状態です。

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