ゆるくはじめるWordPress.

初心者でも簡単!テーマフォルダの作り方【WordPressテーマ作り STEP4】

theme-folder

サイトのHTMLとCSSが完成したら、次はそれをWordPressに移すための準備をします。
ここは特に難しい事もないので、いくつかのポイントを押さえて読み進めていけば完了するように簡単にまとめました。

テーマフォルダを作る

必須のファイル

WordPressにテーマとして認識してもらうためのテーマフォルダを作ります。
任意の名前でフォルダを作り、その中にTeraPadなどのテキストエディタでstyle.cssファイルと、index.phpファイルを作ります。この2つのファイルが必須のファイル。これが入っていればテーマとして認識してくれます。

フォルダ内容1

index.php

テンプレートファイルと呼ばれるものの1つ。今は中身は空で大丈夫です。
他にもcategory.php(カテゴリー一覧用)や、single.php(単一記事ページ用)など細かく用意されているのですが、それらがなければ全てこのindex.phpが肩代わりして役目を果たしてくれます。ページごとの細かい表示方法を気にしなければこれだけでもブログを作る事は可能なんです。


style.css

テーマに使用するスタイルシートのファイル。このstyle.cssにテーマの情報を書いていきます。

CSS

/*
Theme Name: テーマ名
Author: 作者の名前
Description: テーマの説明
Version: バージョン情報
License: ライセンス情報
License URI: ライセンスの内容が記載されているページのURL
*/

などなど、色んな情報を含めてWordPressに伝える事ができます。
自分用のテーマならテーマ名だけ書いておけば事足りるので、下記のように好きな名前を書き込んで保存します。これだけ。

CSS

/*
Theme Name: simple
*/

ファイルの文字コードに注意

保存するファイルの形式が適切でないと思わぬところでエラーが出て面倒なことになるので、これだけは絶対注意!な項目。
ファイルを保存する時、文字コードはUTF-8N(UTF-8 BOMなし)、改行コードは指定できればLFで。

文字コード指定

メモ帳などのUTF-8はBOMありでの保存になってしまうので、BOMなしで保存できるエディタを使ってください~。


使いやすくするためにファイルを追加

これまでの2つのファイルだけでもテーマフォルダになるのですが、それではちょっと不便なのでいくつかファイルを足したいと思います。

フォルダ内容2

テンプレートファイルの追加

フォルダの中にheader.php、sidebar.php、footer.phpの3つを作って追加します。中身は空でOK。これはパーツで使うテンプレートファイル。
ヘッダーやフッターなど、どのページでも内容が変わらない部分はパーツごとに別のファイルに分けておき、コード一つで内容をまるごと呼び出して使うことができます。
例えばサイト名に変更があった場合、header.phpを書き換えれば呼び出している全てのページで内容が変更されるので、手間が省けて便利。
今回はHTMLの時点で分けたのと同様にheader、sidebar、footerをそれぞれパーツにしておきたいと思います。


functions.phpを追加

テーマ用の関数ファイル。WordPressのデフォルトで使える機能は案外少なかったりするので、機能拡張をしたい時などに使います。中身はとりあえず下記のように。

PHP

<?php
//ここに色々追加していく
?>

少し書き方をミスっただけで画面に何も表示されなくなったりするような、初心者には難しい奴だったりするんですが、きっといつか必ず使う事になるような便利なものなので入れておきました。
Instant WordPressなどローカルで小さいサイトを作っているうちはエラーが出てもそんなに大変な事にはならないし大丈夫。使って慣れておいてよかったなと自分では思っています。


screenshot.pngを追加

screenshot.png(jpgやgifでも可)という名前で画像ファイルを入れておくと、テーマ一覧でその画像が表示されます。サイズは880x660px。不要だと思ったら無くてもよし。


フォルダを圧縮する

全てのファイルが揃ったらzipに固めます。windowsならフォルダを右クリック>送る>圧縮(zip形式)で作れます。これでフォルダの準備完了!


WordPressにアップロード

ここからテーマの中身を作っていくのでWordPressでの作業です。Instant WordPress等でローカル環境にWordPressがインストールされている前提で進めていきます。
Instant WordPressについては下記ページでも紹介しています。

WordPressのテーマ作りに使ったフリーソフト6つ
まず練習用に、自分用に。と思って作ったので…というか単純に費用も抑えたかったので最初からWordPressのテーマは全部フリーソフトで作りました。 有名なHTML、CSSエディタ

テーマのアップロード方法

WordPressのサイドメニューから、外観>テーマと進むと、上部に新規追加ボタンがあるのでそれをポチ。次にテーマのアップロードボタンが出てくるのでそれもポチ。そこからさっきのzipファイルをアップロードします。最後に有効化ボタンを押せば完了!

テーマの有効化

無事にテーマ一覧に並んでいたら成功です。screenshot.jpgを入れていたら画像左のように、入れていなければ右のように表示されていると思います。

ですがこれではまだ中身が空っぽで使えないので、次回から中身の作り方を書いていきたいと思います。


スポンサーリンク

公開日:2016-1-23