Programing beginner by koala

       
 

【保存版】超初心者のためのWordPressテーマ自作方法!画像&動画付き「過保護解説」

プログラミングド素人でも、phpが分からなくても、Wordpressのテーマって自作できるの?

OKです!!

このWordpressのテーマ、私、自分で作ったんですよぉー!(←かなりの自慢)

私はコードがスラスラ読めるプログラマーかというと、下記の通りですっ!!

●プログラミングの勉強を始めて約2ヶ月目
●html/cssで簡単なサイトをかろうじて作れるようになった
●phpは全く分からんっ!(progateで少しかじったくらい)

そんな私の経験上、Wordpressの大まかな構造が分かれば、あとはhtml/cssの知識でイケると思いますっ!

たぶん私と同じように、プログラマーになる気はないけど(爆)、ブログを自分の思い通りにデザインしてみたい方、または、テーマはあるけどどうやってカスタマイズするか分からないという方、は多いのではないでしょうか。

お任せくださいっ!!

これから、Wordpressの大まかな構造~自作テーマを作成するまでを6回に渡り、全く初心者の私が画像多め&動画付きで解説していこうと思います。

Contents

こちらのサイトの目的

始める前に、こちらのサイトの目的をお伝えしておきます。このサイトは、私の卒業制作のようなものです。

とは言っても、プログラミングスクールに通ったわけではありませんし、誰かに提出するわけでもありません笑。何かを勉強したらアウトプットするというのが一番自分の身になると考えています。つまりは自分のためでもあります笑

4月からプログラミングの勉強を始め、Wordpressテーマを作成するという一つの目標が達成したので、それを自分なりの卒業制作として、形にしてみました。

途中まで無料で提供し、終盤になって有料にする。。といったことはなく、最後まで完全無料でお届けしますので、安心してお付き合いください(^^)

こちらのサイトの対象レベル

html/cssで簡単なサイトが作れる方で、PHPの基礎の基礎の知識がある方対象です。

PHPに関しては、ProgateのPHPコースを1周すればいいかなと思います。

最低でも、PHPはどんなものか、PHPの書き方(<?phpで始まり、?>で終わるとか)とか、どんな関数があるかとか、そういうのは知っておいてください。

一応、このレベル前提で進めています。

私のブログでも、全6回で1サイトを完成させる解説(こちらも完全無料です)もしておりますので、よろしければ参考にしてくださいm(_ _)m

【保存版】超初心者のためのサイトの組み立て方!画像&動画付き「過保護説明」

こちらのサイトのゴール

こちらのサイトのゴールは下記の通りです。

1.Wordpressテーマ自作の大まかな流れが分かる(実際に1テーマ作ります)
2.CSSでWordpressテーマのカスタマイズが出来る
3.コードをいじることへの恐怖が軽減する

まとめると、Wordpressテーマにおいて、自分で出来るようになることが増えるということです。

WordPressテーマを自作する上での注意点

PHPはサーバーを使用することで起動するものになりますので、サーバーを使用していきます。

ローカルサーバー、レンタルサーバー(第1回目で説明しています)のどちらで始めてもOKですが、サーバーに上げるデータとは別にアックアップを取るようにしてください。

とは言っても、私は横着者でめんどくさがり屋なので、バックアップとかほぼ取らない人です!!笑

過去にデータが飛び、泣いた経験が幾度かありますが、その時は「今度からはバックアップを取ろう!」と決意するものの、時間が経つと、また忘れてしまいます。

そんな私が、「バックアップを取ろう!」というのは気が引けますが、何が言いたいかというと、自己責任でお願いします笑

WordPressテーマ自作解説:全6回の目次

1.Wordpressテーマ自作:第1回目「環境を整える」

WordPressテーマ自作の大まかな流れと、PHPを動かす環境について説明しています。

PHPはサーバー上で動くものになりますので、PHPを動かす環境(サーバー)を作ってあげる必要があります。

その選択肢は、ローカルサーバー、レンタルサーバーの2種類があり、それぞれのメリット、デメリットを説明しています。

また、レンタルサーバーに関しては過去に紹介した記事があるのでそちらの記事を紹介させていただき(初心者はエックスサーバー一択です!!)、

これから始める初心者必見!WordPressにお勧めのレンタルサーバー【4つを使ってみた体験談】

こちらではローカルサーバーの設定方法、使用方法を紹介しています。

【ド素人OK!】WordPressテーマを自作したので道のりをシェアするよ①「画像付き過保護説明」

2.Wordpressテーマ自作:第2回目「html/cssでテーマを作る」

まずはhtml/cssで仮のテーマを作成します。

記事にはコードを全て用意していますが、html/cssの復習を兼ねて、動画を見ながら一緒に作っていきましょう(^^)

【ド素人OK!】WordPressテーマを自作したので道のりをシェアするよ②「動画付き過保護説明」

3.Wordpressテーマ自作:第3回目「PHPファイルを作る」

第2回目で作ったhtml/cssのファイルを、PHPファイルに変えて、それぞれのパーツに分割していきます。

PHPファイルが出てきますが、コピペで済むような回なので、大したことはないのですが、functions.phpというファイルについて、少し解説をしています。

functions.phpを触ることへの恐怖が軽減するかも?!笑

【ド素人OK!】WordPressテーマを自作したので道のりをシェアするよ③「動画付き過保護説明」

4.Wordpressテーマ自作:第4回目「PHPコードを追加していく①」

第4回、5回あたりが山場かなと思います。第3回で作ったPHPファイルに、実際にPHPコードを記述していきます。

ここでは、header.phpfooter.phpsidebar.phpを作り、functions.phpにも少しだけ記述を加えます。

ただ、Wordpressお決まりの書き方みたいなものがあるので、だいたいのコードの意味を理解して、後はコピペいいかな、と(^_^;)

アップロードすると、だいぶテーマっぽくなりますよ!!

【ド素人OK!】WordPressテーマを自作したので道のりをシェアするよ④「動画付き過保護説明」

5.Wordpressテーマ自作:第5回目「PHPコードを追加していく②」

第4回同様、PHPコードを記述していきます。ここではindex.phpを作っていきます。

ここを乗り越えれば、後は簡単です!頑張りましょう(^_^)

【ド素人OK!】WordPressテーマを自作したので道のりをシェアするよ⑤「動画付き過保護説明」

6.Wordpressテーマ自作:第6回目「残りのページを作り、cssでデザイン!」

最後にsingle.phppage.phpを作りますが、これは2分くらいで終わります。。たぶん(-_-)

それよりも、cssでデザインするという楽しいパートになります!!もうすでにテーマがあって、カスタマイズしたい!という方も必見です♪

自作テーマ。。。感動します(T_T)

【ド素人OK!】WordPressテーマを自作したので道のりをシェアするよ⑥「動画付き過保護説明」

スキップOKです!!

途中まで作っていて、ここだけ分からない。。という方は、上記の目次を見て、必要な部分だけ参考にしてもらえればOKかなと思います(^^)

あくまでもスタートです!

いや、お前も初心者だろっ!っていう総ツッコミが入りそうですが笑、作成するテーマは本当に簡単なもので、基礎の基礎になりますので、人にお金をいただくレベルではありません(-_-)

ただ、これでWordpressテーマに興味を持ち、もっとやってみたい!と思えたら、どんどん勉強してお金をいただくレベルに達することは可能かなと思います。

<クラウドワークス>などを見てみても、Wordpress系の仕事は本当に多いなと感じています!

【ハードル低め】プログラミング独学で稼ぐならクラウドワークスよりもココナラ

誰にでも最初の一歩がありますし、こちらの解説は、その第一歩になれれば、この上なくうれしいです(^^)

おわりです!

最後までお付き合いいただ、きありがとうございましたm(_ _)m

私も初心者なので、うまく説明出来ているか分かりませんが、少なくとも、初心者の目線で、専門用語少な目での解説は出来たかなと思っております。

自分が作ったテーマは、とにかく愛着が湧きますし、カスタマイズを加えることで、愛が増していきます。是非、自分色に育てていってくださいね!

最後に、もし少しでもお役に立てましたら、いいね!やシェアしていただけると、飛び跳ねて喜びます♡♡♡

リツイートなど、私に通知が来るものであれば(Twitterの機能はあまりよく分かっていないのですが笑)、御礼のコメントしに行かせていただきますっ!!

追加:Bootstrapで作る方法追加しました!

【超簡単】WordPressのテーマをBootstrapで作る方法!

追伸:無料ダウンロードできるようになりました!

今回作成したテーマは、下記から無料ダウンロード出来るようにしました↓↓

最初から作るのは面倒だけど、とりあえず骨組みだけもらって、後は自分でCSSでデザインしたい!という方は、ご自由にどうぞ(^^)

コアラのテーマをダウンロードする

2019年6月12日