ご依頼を検討されている方

オリジナルのWordPress自作テーマをゼロから作る方法

URLをコピーする
URLをコピーしました!
本記事の想定読者
  • WordPress自作テーマを作成したい
  • 0から100まで教えてほしい

本記事は、上記の方に向けて執筆させていただきます。

おにちゃん

執筆者私はWordPress自作テーマを数々開発しているため、かなり信頼性の高い情報を提供できています。

現在は、WordPress専門屋というWordPressテーマを完全自作で作成しています。

WordPress専門屋:自作のWordPressテーマ
本記事の内容
  • WordPress自作テーマとは
  • WordPress自作テーマの作り方
  • アップロードする方法
  • WordPressの機能を追加する
  • おにちゃん塾のおすすめ本

WordPressの自作テーマについて分からないことがあれば、TwitterのDMなどで教えてください。

WordPress学習者におすすめの記事

目次

自作テーマの前に:WordPressテーマとは

WordPressテーマとは

WordPressテーマを簡単に表現すると、デザインと機能を提供するファイルです。

テーマを活用することで、簡単にデザインや機能を実装することができるのです。

おにちゃん塾では『SWELL』というWordPressテーマを活用しています。

自作テーマを作成したい方は『デザイン+機能』を実装していく必要があります。


WordPress自作テーマのメリット

僕が思いつくメリットはざっとこんな感じです。

  1. カスタマイズ性が高い
  2. 修正がしやすい
  3. 内部SEOが学べる
  4. フリーランスとして働ける

→稼げるエンジニアになれる

こんな感じだと思います。

ただ、販売するようなテーマ開発には『膨大な時間+膨大な知識』が必要になってきます。

ですので、本記事では必要最低限のWordPressテーマ開発について詳しく解説していこうと思っています。

正直、最低限のテーマ開発ができれば、案件などは余裕です。


WordPress自作テーマの作り方

WordPress自作テーマの作り方

WordPress自作テーマの作り方の手順は下記の通りです。

  1. 大前提:WordPressサイトを開設する
  2. 手順①ローカル環境を整える
  3. 手順②全体像を把握する
  4. 手順③index.phpを準備する
  5. 手順④style.cssを準備する
  6. 手順⑤テンプレート分割をする


大前提:WordPressサイトを開設する

WordPressの自作テーマを作成するのであれば、かならずWordPressサイトを開設しておきましょう。

WordPress自作テーマにかかる費用

  • レンタルドメイン:100円
  • レンタルサーバー:5000円程度
  • ローカル環境:無料(有料もあるがここは無料で良し)

レンタルドメインもレンタルサーバーもエックスサーバーがおすすめです。

案件を獲得した際に最も多いサーバーなので慣れておいて損はありません。

おにちゃん

WordPressの自作テーマが作成できるレベルになれば、費用はすぐに回収できるので問題なしです。

費用を出したくない方はセルフバックを活用して5万円ほど稼いでみてください。


手順①:WordPressのローカル環境を整える

WordPress自作テーマ作成手順①はローカル環境を整えるです。

WordPressの環境構築
  • Local
  • MAMP

おにちゃん塾では上記の2つを活用してローカル環境を構築しています。

WordPressのテーマを自作したい方は、まず開発環境を整える必要がありますので、準備ができていない方はすぐに準備しましょう。

WordPressの環境構築がわからない方は、下記の記事を参考にしてみてください。

物凄くシンプルにまとめてあります。



手順②全体像を把握しよう

WordPressでよく使われるファイルをまずは理解しましょう。

  1. index.php
  2. style.css
  3. functions.php
  4. header.php
  5. footer.php
  6. sidebar.php
  7. page.php
  8. single.php
  9. archive.php
  10. search.php
おにちゃん

WordPressの自作テーマに最低限必要なファイルは『index.php』と『style.css』のみです

最低限のファイルではWordPressの良さを活かすことはできませんが、最初はそれでも問題なしです。

実際に、僕も初心者の頃は少ないファイルで自作テーマを作成していました。

徐々に、扱えるファイルを増やしていけば問題なしです。
→本記事のメインは『WordPress初心者に教えたい基本知識』がメインなので、今回は、index.phpとstyle.cssを使って必要最低限のWordPress自作テーマを作成していきましょう。

今回は、作業フォルダ【onipress】を作って進めていきます。


手順③index.phpを準備する

作業フォルダonipressの中にindex.phpを準備しましょう。

index.phpファイルを作成できましたら、次に、下記のコードをコピーしてindex.phpに貼り付けましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WordPressの自作テーマ</title>
</head>
<body>
  <h2>WordPressの自作テーマ作成</h2>
</body>
</html>

ローカル環境のテーマ選択ページへ行き、onipressテーマを有効化しましょう。

有効化にした後に、localhost:8888を閲覧すると下記の画面が表示されるはずです。

おにちゃん

ここまでで、最低限のWordPress自作テーマの出来上がりです。

とは言っても、これではデザイン性がないので、cssを追加していきましょう。


手順④style.cssを準備する

onipressにstyle.cssを追加しましょう。

index.phpにsytle.cssを追加しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
  <title>WordPressの自作テーマ</title>
</head>
<body>
  <h2>WordPressの自作テーマ作成</h2>
</body>
</html>

get_template_directory_uri()を使用しないと、しっかりstyle.cssを読み込めないので、必ず使用しましょう。

/*
Theme Name: onipress
*/

h2 {
  color: red;
}

WordPressでstyle.cssを使用する際には、テーマ情報を記載する必要があります。

記述項目日本語訳
Theme Name :テーマの名前(必須)
Theme URL :テーマURL
Description :テーマの概要
Author:テーマ作成者
Version :テーマのバージョンver

必須項目だけ埋めれば問題なしです。

localhost:8888へ行き、ロードすると下記の画面に変わっているはずです。


WordPressの自作テーマをアップロード

WordPressの自作テーマをアップロード

ここからは、WordPressの自作テーマを表示する方法を解説していきます。

本記事では『エックスサーバー』でWordPressブログを開設していることを前提としています。

まだ、サイトを開設していない方は『【ブログの始め方】スマホ1つでワードプレス開設【初心者もできる】』を参考に開設してみてください。

まずは作成したフォルダ(今回はonipress)を圧縮します。

フォルダを圧縮した後に、WordPressの管理画面へと行き、テーマ<テーマのアップロード画面へと行きましょう。

先ほど圧縮したファイルを選択しましょう。

今すぐインストールをクリックすると、WordPress自作テーマがインストールされるはずです。

おにちゃん

このように表示されたら、インストール完了です。


WordPressの機能を追加してみよう

WordPressの機能を追加してみよう


プラグインを準備しよう

WordPressの必要最低限の機能+デザインを準備できた方はプラグインを導入しましょう。

プラグインとは:簡単にデザインや機能を使いできるツールのこと。簡単に導入ができる一方で、重いので自分で作れる部分はプラグインの機能は自作したほうが良い

おにちゃん塾で使用中のプラグインは下記のとおりです。

  • Seo Simple Pack
  • Google XML Sitemaps

もっと詳しくプラグインについて知りたい方は下記の記事を参考にしてみてください。


WordPress自作テーマ作成におすすめの本

WordPress自作テーマ作成におすすめの本

WordPress自作テーマ作成におすすめの本は下記の一冊です

WordPressにおすすめの本

  1. いちばんやさしいWordPressの教本
  2. WordPressデザインの教科書
  3. WordPressユーザーのためのPHP入門
  4. SEO内部対策
  5. WordPressデザインレシピ集
おにちゃん

1番おすすめは『WordPressデザインの教科書』です

どんな本なのか気になる方は下記の記事を参考にしてみてください。


まとめ:WordPress自作テーマ作成は技術を上げてくれる

まとめ:WordPress自作テーマ作成は技術を上げてくれる

ここまでで【準備中】オリジナルのWordPress自作テーマをゼロから作る方法の解説は以上です。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる