オリジナルのWordPress自作デザインをゼロから作る方法

2022 8/27

2022年8月27日

あわせて読みたい

【2022年版】SEOに強いWordPressのおすすめテーマ9個を解説【有料級】本記事の想定読者 SEOに強いWordPressのおすすめテーマについて詳しく知りたい有料WordPressテーマがおすすめの理由を知りたいおすすめの無料WordPressテーマも知りたい...

↑WordPressおすすめテーマが知りたい方用↑

本記事の想定読者

WordPress自作デザインを作成したい
0から100まで教えてほしい

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

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

本記事の内容

WordPress自作デザインとは
WordPress自作デザインの作り方
アップロードする方法
WordPressの機能を追加する
当サイトのおすすめ本

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

記事の内容

自作テーマの前に：WordPressデザインとは

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

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

当サイトでは『SWELL』というWordPressテーマを活用しています。

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

WordPress自作デザインのメリット

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

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

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

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

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

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

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

WordPress自作デザインの作り方

WordPress自作デザインの作り方の手順は下記の通りです。

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

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

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

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

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

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

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

エックスサーバー

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

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

あわせて読みたい

【速報】セルフバックにおすすめのASP&稼げる商品ランキングセルフバックにおすすめのASPや稼げる商品を教えてほしい本記事では、上記の方を想定して執筆しています。執筆者：セルフバックのおすすめASP＆商品をランキング形式...

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

WordPress自作デザイン作成手順①は『ローカル環境を整える』です。

WordPressの環境構築

Local
MAMP

当サイトでは上記の2つを活用してローカル環境を構築しています。

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

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

あわせて読みたい

【保存版】WordPressのローカル環境を10分で構築する方法【画像付き】 WordPressの環境構築について学びたい方『簡単に開発環境を整えたい。画像付きで詳しく教えてもらいたい』本記事では『WordPressの開発環境の構築』に特化した内容にな...

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

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

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

index.php
style.css
functions.php
header.php
footer.php
sidebar.php
page.php
single.php
archive.php
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を閲覧すると下記の画面が表示されるはずです。

とは言っても、これではデザイン性がないので、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へ行き、ロードすると下記の画面に変わっているはずです。