初心者必見!ワードプレス自作テーマを作るための環境を整えよう

まいどおおきに!おおもと(@so88qa)です

この記事は、「ブログを始めるまでワードプレスを知らない」「プログラミング知識・経験0(ゼロ)」のマジの初心者がワードプレスの自作テーマの作成に挑戦する記事です。

おおもとのアイコン画像おおもと

30歳からの挑戦

ママのアイコン画像ママ

パパがんばって!

ブログを始めてみて、HTML・CSSに初めて触れて『いつか自分も自作テーマを作ってみたい!』と思っている人向けで書いてます!

ぶっちゃけ今の段階では『実用的なテーマができるのか分かりません。』でも、失敗しても次は成功させる精神で頑張りますので、生暖かい目で見守っていてください。

もくじ

ワードプレス自作テーマを作るメリット

有料テーマ・無料テーマ問わず、ブログを運営する上で最高のテーマが揃っています。ぶちゃけ「自作テーマ」を作るぐらいなら記事を書いた方がマシです。

それでも、ぼくが「自作テーマ」を作る理由は

  • ワードプレスの理解を深めるため
  • 自分が使う機能のみを実装するので、ブログが早くなる
  • 自分のスキルアップのため(将来的に無料テーマ・有料テーマとして配布したい)
  • 自分だけのオリジナルブログを作りたい

この4つのメリットがあると感じているため、今回「自作テーマ」作成する事を決めました!

おおもとのアイコン画像おおもと

ワードプレスの知識をつければ、それだけで収入を得られるしね

ママのアイコン画像ママ

馬車馬のように働いて!

もう一つ付け加えると、Coocon(コクーン)やJIN(ジン)などのテーマを自分でカスタマイズすると構造が複雑化します。

そうした場合『テーマのアップデートで不具合が〜〜〜』となる可能性も高い

自作テーマなら「1から全て自分で作る」ので、そう言った不具合も避けれますね。

自作テーマを作成するために用意するもの

用意するものは3つ

  1. 手本にするワードプレステーマ
  2. プログラミング用のエディッター
  3. ローカル環境(デモ環境)
ママのアイコン画像ママ

思ったより用意するの少ないね

おおもとのアイコン画像おおもと

後から増えるかもしれないけど、最初はこんなもんで

  • お手本となるテーマを決める
  • テーマの作成環境を整える

これを用意しなければテーマ作成は始まらないですね!

手本にするワードプレステーマ

僕は、無料テーマの『Cocoon(コクーン)』と『yStandard(yスタンダード)

この2つのテーマをお手本に自作テーマの作成をします。

この2つのテーマは、ユーザーのカスタマイズありきで作成しているワードプレス無料テーマで3つの特徴があります。

  • シンプル構造なのでコードがわかりやすい!
  • 使える機能が充実
  • モバイル・AMPに完全対応

使える機能が充実している点が良いところで、使えそうな機能をパク(ry 参考にさせてもらえるのが助かる!

ママのアイコン画像ママ

パクリはダメだよ!参考にしようね!

モバイル・AMPも完全対応している点もいいですね!パクらせて頂きます!

プログラミング用のエディッター

自作テーマは「プログラミング用のエディッター」で書きます。(ブログエディッターではないですよ!

ウインドウズ(Windows)ならメモ帳で書けますが、何の機能もなくてめっちゃしんどい…

おおもとのアイコン画像おおもと

専用のエディッターを使った方が効率的に作業ができます!

ぼくは、この2つのエディッターをオススメします!

どちらも無料ですので、好きなものを1つだけダウンロードしてください。

ぼくは「Sublime Text」を使って自作テーマ作成しています。

Sublime Textはプラグインが充実しているので、使いやすいように拡張ができるという理由で使ってます。マジでオススメです。

ローカル環境(デモ環境)

テーマ作成には欠かせないローカル環境

いちいち、サーバーを契約してテスト環境を用意するのって大変じゃないですか

おおもとのアイコン画像おおもと

テスト環境のためにお金を払いたくない…

だから、テスト環境はワードプレスのテーマ作成に欠かせない!

そのテスト環境でオススメするツールはLocal by Flywheelだけです!

マジでこれ凄い!

このツール1つで

  1. 複数の開発環境を用意できる
  2. ワードプレスの環境を自由に選べる(後から変更可能)
  3. 動作が軽い!「めっちゃサクサク」
  4. インストール・設定が簡単!

マジで、初心者のためにあるツールですわ!

とりあえず、これ1つをインストールすればOKです

追記:無料で勉強できるWebサイトの紹介

ぼくが、「HTML・CSS・JavaScript」の言語とサイト作成の勉強に『ドットインストール』というサイトを使ってます。

ドットインストールの良い点

  • 無料で使える
  • 3分の動画に短くまとめられている
  • Webサイト立上げなど、多くの教材がある

この3点がとても良いので使っています。

逆に悪い点として、有料会員にならないと質問ができない点

ぶっちゃけ、疑問に思ったことはネットで調べれば出てくるので必要はないと思っています。

ワードプレスに使える基本的なことを簡単に学べるのでオススメです。

ワードプレス自作テーマ作成に必要なもの まとめ

必要なものは3つ

  • 手本にするワードプレステーマ
  • プログラミング用のエディッター
  • ローカル環境(デモ環境)

この記事で紹介したものは全て『無料』で『Mac(マック)・Windows(ウインドウズ)』環境で使える最高のものを紹介しました。

ママのアイコン画像ママ

どんな環境でも使えるのは良いね

おおもとのアイコン画像おおもと

しかも、全部無料だよ〜

ぼくは、プログラミングの知識・経験0(ゼロ)でPCにもウトい「普通のおっさん」です(自慢することじゃない)

普通のおっさんでも、チャレンジすれば「自作テーマぐらい作れる!」という事を伝われば幸いです。

この記事をシェアする

クリックして応援♪

このブログはSWELLで出来ています!

SWELLレビュー
  • 簡単におしゃれな文章が作れる
  • マウスだけで簡単におしゃれなブログを作れる
  • テーマ製作者に事を気軽に聞ける環境
  • 簡単に収益化ができる仕組みを搭載
当ブログもSWELLで出来ています!
気になる人は公式サイトを覗いて見てくださいね♪

コメントを書いて応援♪

コメントする

CAPTCHA

もくじ
閉じる