WordPressテーマの作り方(基礎編)

WordPress

2016年07月13日

WordPressテーマの作り方(基本編)

本稿では、WordPressテーマの作り方について解説します。とは言っても、ゼロからテーマを作るのは少し大変。ここでは、すでにあるHTMLファイルを利用してテーマを作っていきたいと思います。テーマの仕組みや必要なファイルについても解説しています。

テーマの構造がわかっていれば、子テーマを利用したテーマのカスタマイズもできるようになります。ある程度WordPressサイトを弄ったことがある方にも参考にしていただければと思います。

WordPressテーマの仕組み

それでは、WordPressテーマの作り方について見ていきましょう。まずは、テーマの仕組みについて簡単に解説します。

WordPressは一つのページを、複数のテンプレートファイルで構成しています。大まかに言うと、一つのページはヘッダーとフッター、コンテンツの3つの部分に分かれます。このそれぞれを異なるPHPファイルとして、別々に用意しているのです。

実際にページが表示される時は、この3つのテンプレートを組み合わせて、一つのページとして表示しています。トップページであれば、index.phpとheader.php、footer.phpの3つが組み合わさっています。固定ページだとpage.phpとheader.php、footer.php、投稿ページだとsingle.phpとheader.php、footer.phpの3つです。

なお、WordPressテーマで使用できるテンプレートは上記の他にも多数あります。より詳しくは、下記のWordPress公式オンラインマニュアルをご覧ください。

テンプレート – WordPress Codex 日本語版

テーマ作成の手順

テーマ作成の手順です。本記事では、すでにあるHTMLファイル(下記)を使ってテーマを作っていきたいと思います。適当な名前で、事前にHTMLファイルを作っておいてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>タイトル</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>ヘッダー</header>
<div>コンテンツ</div>
<footer>フッター</footer>
</body>
</html>

テーマ用のフォルダをつくる

はじめに、作成するテーマのフォルダを作りましょう。フォルダを配置する場所は、/wp-content/themes/の直下です。テーマ用のフォルダをsampleとするなら、/wp-content/themes/sampleとなります。

テンプレートファイルをつくる

次に、テンプレートファイルを作っていきます。ファイルの保存場所は、先ほど作成したテーマ用フォルダの中です。下記の3つのPHPファイルを作成して、保存してください。ファイルの中身は、まだ空欄で大丈夫です。

  • index.php
  • header.php
  • footer.php

今回はトップページのみ作成しますが、この他にも下に列挙したテンプレートも同時に作ることが多いです。

  • home.php
  • sidebar.php
  • page.php
  • single.php
  • archive.php
  • category.php
  • tag.php
  • search.php
  • 404.php

各固定ページごとに、テンプレートを分けることもできます。ハイフンを使って、page-about.phpやpage-inquiry.phpなどのようにそれぞれのテンプレートを分ければOKです。

HTMLを分割する

次に、事前に用意しておいたHTMLを分割していきましょう。上から順番に、header.php、index.php、footer.phpの3つのファイルに分割します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>タイトル</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>ヘッダー</header>
<div>コンテンツ</div>
<footer>フッター</footer>
</body>
</html>

これで、今回使うテンプレートファイルが揃いました。

テンプレートをつくる

HTMLを分割しただけでは、まだテーマとして動きません。WordPressに合わせて、テンプレートを修正していきましょう。

header.php

headタグ内の最後に、wp_headと記述します。これを書いておかないと、必要なコードを読み込めずページが表示されません。忘れずに追加しておきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" type="text/css" />
    <?php wp_head(); ?>
</head>
<body>
<header>ヘッダー</header>

その他にもtitleタグやCSSファイルのリンク先を変えていますが、話が逸れるのでここでは割愛します。

index.php

index.phpでは、分割したヘッダーとフッターを読み込むコードを追加します。

<?php get_header(); ?>
<div>コンテンツ</div>
<?php get_footer(); ?>

footer.php

header.phpと同じように、wp_footerを書き加えてください。あとは変更しなくて大丈夫です。

<footer>フッター</footer>
<?php wp_footer(); ?>
</body>
</html>

style.cssを作成する

テンプレートができたら、テーマのCSSファイルをつくりましょう。テーマ用のフォルダ直下にstyle.cssというファイルを作成して、冒頭に下記のコードを書き込んでください。

※style.cssは、WordPressテーマの必須ファイルの一つです。必ず作るようにしましょう。

/*
Theme Name: テーマの名称
Description:テーマの説明文
Theme URI: テーマと関連するページのURL
Author: 作成者
Author URI: 作成者と関連するページのURL
Version: バージョン
License: ライセンス
License URI: ライセンスのURL
*/

ここで記述した内容は、管理画面のテーマ選択画面で表示されます。テーマの名称など、わかりやすい名前にしておきましょう。

なおCSSコードがある場合は、先ほどのコメントの下に書いておきます。

以上で、テーマの骨組みが完成です。テーマ一覧画面から、ここで作成したテンプレートが選択・有効化できるようになっているかと思います。

なお、テーマ一覧画面では各テーマの画像(サムネイル)が表示されます。サムネイルがなくてもテーマは使えるのですが、配布予定のテーマであれば必須でしょう。サムネイルはscreenshot.pngという画像ファイルでつくり、サイズは880×660が推奨されています。

あとがき

WordPressのテーマ作成の基本について解説しました。骨組みができたら、WordPressの記事一覧(ループ部分)や投稿ページなど、テーマの詳細を作っていきます。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。