Blog

2017/10/24

WordPressテーマを作成してみよう 〜準備編〜

Tags

Written by

BACK

初めまして、エヴォワークスでコーダーをやっているY.M.です。

WordPressのテーマ作成の方法を何回かに分けてご紹介します。
今回はテーマ作成をする時の準備について難しいことは端折り必要な事だけを投稿したいと思います。

テーマディレクトリ作成

まず今から作るテーマのディレクトリを「wp-content > themes」に作成するところから始めましょう。

index.phpとstyle.cssを用意

index.phpとstyle.cssの2ファイルを用意しないとテーマとして認識できないので用意してください。

index.php

wordpressの基本となるファイル、主にアーカイブ系のテンプレートファイルになります。

準備段階なのでまだ真っ白なファイルでも大丈夫ですが、念のためindex.phpの中にループを書いておきましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
      <title><?php wp_title ( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
  </head>
  <body>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <!-- 投稿表示ここから -->
      <h2><?php the_title(); ?></h2>
      <?php the_content(); ?>
      <!-- //投稿表示ここまで -->
    <?php endwhile; ?>
      <!-- ページ送りなど -->
    <?php else: ?>
      <!-- 記事がない時の表示 -->
    <?php endif; ?>
  </body>
</html>

style.css

テーマとして使えるようにするにはまずstyle.cssの冒頭にコメント形式でテーマの情報を入力する必要があります。

「管理画面 > 外観 > テーマ」選択画面に表示、オリジナルテーマを配布する際にも必要な情報になるので必ず入力しておきましょう。

@charset "UTF-8";
/*
Theme Name: テーマの名前
Theme URI: テーマを配布しているURI
Description: テーマの説明
Author: 作者の名前
Author URI: 作者のURI
Version: バージョン情報
Tags: テーマに関するキーワード
License: ライセンス種類
License URI: ライセンスのURI
*/

スクリーンショット

管理画面のテーマ選択画面(外観/テーマ)に表示されるテーマサムネイル画像を「screenshot.png」のファイル名で用意します。

画像サイズは 880×660で作成し、テーマディレクトリに保存しましょう。

テンプレートファイル

以上のファイルが揃えばテーマとしては認識されますが、サイト全体は作成するにも足りないので以下のテンプレートファイルも用意しておきましょう。

ちなみに全てのテンプレートファイルが必要ではないので、必要に応じてファイルを用意してください。

comments.php

コメント一覧、コメント入力フォームに使用

header.php

ヘッダーのテンプレート。
以下のテンプレートタグで呼び出し可能。

<?php get_header(); ?>

footer.php

フッターのテンプレート。
以下のテンプレートタグで呼び出し可能。

<?php get_footer(); ?>

sidebar.php

サイドバーのテンプレート
ブログなどのサイドバーを作成しインクルードして使用。
以下のテンプレートタグで呼び出し可能。

<?php get_sideber(); ?>

front-page.php

フロントページテンプレート。
home.phpとfront.phpが両方存在した場合は、front-page.phpがフロントページ表示用のテンプレートとして使われます。

home.php

ホームページテンプレート。
フロントページの表示(にデフォルトとして設定されている最新の投稿)に使われる。固定ページをフロントページとして設定した場合、指定した固定ページがフロントページの表示に使われます。

single.php

個別記事のテンプレート。
ループを書くときはindex.phpと同じでOK。

single-<posttype>.php

カスタム投稿タイプの個別記事を表示させる時に使用。
<posttype>の部分をカスタム投稿タイプで設定したスラッグを入力。

page.php

固定ページのテンプレート。
別々の固定ページテンプレートを利用することが可能。

category.php

カテゴリのテンプレート。
カテゴリのアーカイブを表示

tag.php

タグのテンプレート。
タグのアーカイブを表示。

taxonomy.php

タクソノミーのテンプレート。
カスタムタクソノミのアーカイブを表示。

author.php

作成者のテンプレート。
作者の書いた記事のアーカイブを表示。

date.php

日付別のテンプレート。
日付、時刻毎のアーカイブを表示。
年、月、日、時、分、秒。

archive.php

記事一覧のテンプレート。
上記のアーカイブ全ての表示させる基本となるアーカイブテンプレート。

search.php

検索結果のテンプレート。

attachment.php

添付ファイルのテンプレート。
添付ファイルを個別で表示するときに使用。

image.php

添付画像ファイルテンプレート。
特定の画像ファイルを個別で表示するときに使用。
存在しない場合は attachment.php が使用される。

404.php

404 Not Foundのテンプレート。

とりあえず準備は完了

ひとまずこれだけでテーマとして使用できる状態になりました。
自分はだいたい以下のようなものを先に用意してから作業始めることが多いです。

  • index.php
  • home.php
  • single.php
  • page.php
  • header.php
  • footer.php
  • style.php
  • screenshot.png

これだけで簡単なブログは十分作成できます。

次回はアーカイブと個別記事について書きたいと思います。

Recommend