コード・実装

WordPressの自作テーマの作り方

普段はWordPressを、既存のテーマで作成しているけれど、自分でデザインから作成したいという方はいませんか?

今回は、自作WordPressテーマのおすすめ作成方法を記載していこうと思います。

またWordPressのテーマをPHPを使ってカスタマイズしたいという方にも参考になればと思います。

 

最初はブランクテーマを使うのが個人的におすすめ

いきなりなのですが、ブランクテーマというものを知っていますか?

テーマを最初から全て自分で作る方法でも作ることはできますが、それはかなりの手間になってしまいます。

そのため、私は最初に自分用のスターターテーマを自作で作っているのですが、特にそういうものがない場合、ブランクテーマというのがおすすめです。

ブランクテーマを元に自作スターターテーマを作っても良いですしね。

 

ブランクテーマとは、スターターテーマと呼ばれたりもしますが、WordPressのテーマを自作する時にベースとして使うテーマのことを言います。

ダウンロードするだけで、必要なファイルやコードがすでに記載されているので、すごく便利なんです。

ただ、カスタマイズ前提のテーマなので、かなりシンプルなものになっています。

 

01 ブランクテーマをダウンロード

私はよく「Underscores」というサイトから、ブランクテーマをダウンロードしています。

Underscoresは、スタイリング無しの状態から自作テーマを作りたい人におすすめのWordPressブランクテーマです。

 

ダウンロードは、TOPページのフォーム「CREATE YOUR UNDERSCORES BASED THEME 」の部分から、テーマ名を英数字で入力し、「GENERATE」ボタンを押すだけです。

 

02 ダウンロードしたテーマのファイルを確認

ダウンロードした主なファイルは下記になります。

  • index.php
  • functions.php
  • style.css
  • header.php
  • footer.php
  • archive.php
  • single.php
  • page.php
  • 404.php
  • sidebar.php
  • comments.php
  • search.php

 

下記からファイルの詳細を見ていきましょう

index.php

index.phpはWordPressテーマにとって必須なファイルです。

テーマフォルダには必ずindex.phpを含める必要があります。

なぜなら、index.phpは他のテンプレートの代用をするからです。

例えば、下記で紹介する、archive.php single.php page.phpなどのファイルがテーマ内になかった場合、index.phpが読み込まれます。

この、あらゆる種類のテンプレートが存在しなかった場合に「最終的に使われる」テンプレートがindex.phpなのです。

 

 

functions.php

functions.phpも、WordPressのテーマに必須のファイルの1つです。

関数を定義しておいたり、ショートコードというコードを用意しておいたり、WordPressを使う上で必要なコードを記述しておくことができます。

例えば、function.phpで関数を設定しておけば、header.php やpage.phpなどの他ファイルで呼び出すことが可能です。

ただ、function.phpファイルのカスタマイズをミスるとWordPress全体がエラーになってしまいますので、注意が必要です。

 

 

style.css

ご存知の通り、cssを記載するファイルですが、自作テーマの場合、一つ書いておかなければいけないものがあります。

それは、cssにテーマ名を記載することです。

cssに書かれたテーマ名などの情報が、WordPress管理画面の外観のテーマ一覧に情報が表示されます。

このstyle.cssも必須ファイルになります。

/*
Theme Name: テーマの名前(必須)
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ(カンマ区切り/オプション)
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/

 

header.php

サイト全ページで共通のヘッダーを使用するなどに使用します。

<?php wp_head(); ?>

を< head></head>内に入れるのを忘れないようにしてください。

プラグインなどのcssがここの部分に入ります。

 

他ファイルから呼び出す場合は

<?php get_header(); ?>

で呼び出すことができます。

 

 

footer.php

全ページ共通でページ末尾につけたい内容を記載します。

<?php wp_footer(); ?>

を</body>直前に入れるのを忘れないようにしてください。

プラグインなどのjsがここの部分に入ります。

他ファイルから呼び出す場合は

<?php get_footer(); ?>

で呼び出すことができます。

 

archive.php

アーカイブページ(カテゴリやタグの一覧ページ)ページに使用されます。

カスタム投稿タイプの場合は

archive-(カスタム投稿タイプ名).php

にすると、独自の一覧ページのテンプレートを作ることができます。

 

 

single.php

投稿の詳細ページに使用されます。

カスタム投稿タイプの場合は

single-(カスタム投稿タイプ名).php

にすると、独自の詳細ページのテンプレートを作ることができます。

 

page.php

固定ページに使用されます。

page-(固定ページのスラッグ).php

にすると、その固定ページ独自のテンプレートを作ることができます。

 

404.php

404エラーの際に読み込まれるページです。

 

sidebar.php

サイドバーを読み込むことができます。

呼び出しは

<?php get_sidebar() ; ?>

で可能です。

 

comments.php

コメントで使用されるファイルです。

 

search.php

検索で使用されるファイルです。

 

 

WordPressテーマのカスタマイズをする

上記のファイルを元にファイルをカスタマイズしていきます。

基本的にはHTMLとCSSを使い、またWordPressには独自のPHP書き方などもあります。

次の記事ではそちらを記載していこうと思います。

 

最後に

いかがだったでしょうか?

最初は戸惑うかもしれないですが、意外にやってみると、簡単にできるのもWordPressの自作テーマだと思います。

WordPressのシェアは、全ウェブサイトの39.9%、CMSの64.2%と高く、WEB制作の仕事や副業をする上で、かなり仕事が取りやすい案件だと思います。

もし、WEB制作を仕事にしたい、副業をしたい、とお考えの方は覚えて損はないと思います。

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy

 

MENTA

プログラミングの学習をサポートしてくれる人を探したいのならMENTAがおすすめ。

メンターさんや他のメンティさん(自分と同じようにプログラミングを学習している方々)とやりとりをし、学習を進める形が多いです。

\新規登録で300円割引クーポンプレゼント/プログラミング学習のスキルプラットフォーム【MENTA】