LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress テーマ作成をはじめる

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

連載
WordPressテーマを作ってみよう Vol.1

WordPressテーマを作っていきながら、その様子を公開していきます。

自分でテーマを作りたい方、いっしょに勉強していきましょう。

最初からたくさんのことを一気にするとキツイので少しずつ進めましょう。今回は、自作テーマをWordPressに認識してもらい、そのテーマに切り替えるところまで。

すぐ終わります。

(WordPressがインストール済みのところから始めるので、そこまでの準備の内容は割愛)

WordPressバージョン5.3.2

5.3.2で作り始めてますが、バージョン5以上なら大丈夫なはずです。

何かあったとき、コメントに書いてくれたらありがたいです。

テーマのファイル構成

DocumentRoot
  └ wp-content
      └ themes

WordPressをインストールすると上のような構成になっているはずです。

テーマファイルはthemesディレクトリに配置します。ここに新しいディレクトリを作成しましょう。

**/DocumentRoot
  └ wp-content
      └ themes
          └ mine

とりあえずmineにしました。このディレクトリの下にどんどんファイルを追加して作っていきます。

ファイルを用意する

WordPressには最低限必要なPHPファイルがあります。それを用意するところからはじめましょう。

ファイルの置き場所はさっき作ったテーマディレクトリです。テーマのホームディレクトリと言います。

**/DocumentRoot/wp-content/themes/mine

テーマのファイルはホーム以外に作ることはありません。

style.css

WordPressのテーマは管理画面で切り替えます。そのテーマのリストに自分の作ったテーマが表示されないといけません。

そのテーマ情報を設定するのがstyle.cssです。

テーマのホームディレクトリにstyle.cssファイルを作成しましょう。

**/DocumentRoot
  └ wp-content
      └ themes
          └ mine
              └ style.css

そして、style.cssにコメントを追加します。

/*
Theme Name: Mine
Theme URI: https://sample.com/
Author: my theme create project
Author URI: https://sample.com/
Description: Themes created by myself
Version: 1.0.0
Text Domain: mine
*/

WordPressがテーマとして認識してくれる程度の項目だけ書いてます。

(ほんとうはもっと少なくてもいい。くわしくは省略。)

Theme Nameテーマ名。
自由に決めていい。
ほかのテーマと区別できて分かりやすいこと。
Theme URIWordPress公認テーマの公開リポジトリのURI。
例)https://wordpress.org/themes/twentythirteen

未公認・未公開なら適当でいい。自分のサイトのurlとか。
AuthorWordPress公式のリポジトリで使う自分のハンドル名やプロジェクトチーム名など。
参加していないなら適当でいい。
Author URIAuthorのサイトURI。
ないなら適当でいい。
Descriptionテーマの概要。
どんなテーマか簡潔に書く。
商品説明みたいなもん。
バージョン最初は1.0 か 1.0.0。
テーマを変更すると変えていく。
Text Domainテーマのドメイン名。
テーマのホームディレクトリ名。
(ここではmine)

ディレクトリ名とちがうとWordPressに認識されない。
エンジニア
なんでcssなんだ?

と思いますが、しょうがないです。そういう仕様だから。

CSSは、HTMLファイルの装飾を設定するスタイルを書くファイルです。

本来はこういう使い方はしません。

index.php

もうひとつ、WordPressがテーマを認識するのに必要なファイルがあります。

index.phpです。

このファイルは、すべてのページを作るPHPファイルの親元です。普通はページのホーム表示するのに使います。これがないとWordPressはテーマエラーになります。

<?php
echo '<h1>index.php</h1>';

とりあえずこれだけ書いて保存しましょう。

**/DocumentRoot
  └ wp-content
      └ themes
          └ mine
              ├ style.css
              └ index.php

テーマ確認

自作テーマに変更してみます。

管理画面の外観 -> テーマを開いて、自作テーマが一覧に表示されればOKです。

テーマ作成

いらないテーマ削除

Twenty ***のテーマはWordPress公式の標準テーマです。ひとつは参考に残してもいいですが、いらないものは消しましょう。

themes下のディレクトリを消すだけです。ボクは最新版のTwenty Twentyだけ残しました。

自作テーマのホームを表示してみよう

テーマを自作テーマに変えて、サイトのホームを表示してみます。

さっきの外観 -> テーマで自作テーマを有効化してサイトを表示してください。

テーマ作成

自作テーマが使えるようになりました。ショボすぎるけど。

これにどんどん肉づけしてWordPressサイトらしくしていきます。

今回はここまで。

WordPress テーマ作成の環境づくりと方針
次のページ
【連載】WordPressテーマを作ってみよう Vol.1

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。


WordPressの本5選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください