ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

【初心者向け】WordPressで自作テーマを作れるまでの学習方法を解説

WordPress
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

今回はこれからWordPressの学習を始めようとしている方向けに、自作テーマを作れるようになるまでの学習方法を解説します!

2019年はフリーランスを目指す人も増えてきて、比較的仕事量も多く単価も高いWordPressを学習する人も多いのではないでしょうか!

ネコ君
ネコ君

僕もフリーランスを目指していて案件の多いWordPressを勉強しようと思ってます!でも何から勉強したらいいかさっぱり。。。

ネコ君
ネコ君

WordPressはゴールのない学習なので、何をしたらいいか迷いますよね!

今回は自作テーマを目標としてその道筋を解説します!

この記事を最後まで読むと、自作テーマ開発までの道筋がはっきりと見えて、今何をするべきなのかわかるかと思います。

こんな方にオススメ
  • フリーランスエンジニアを目指している方
  • WordPress初心者の方
  • 学習は始めているがどこに向かっているか悩んでいる方

正直この記事通りに学習を進めれば自分でテーマが作れるようになり、クラウドワークスにある案件も取れるようになるでしょう。

※前提としてHTML,CSS,PHPの基礎の学習が終わっているとします。

稼げるWebエンジニになる為のオススメの教材

フルスタック・Webエンジニア講座「稼げるエンジニア」なる事に特化した、動画学習コンテンツで、今なら24,000円が1,560円とかなりお得な教材です!
HTML,CSSだけではなく、高単価な案件が豊富なWordPressやJavaScript、PHP、Pythonなどこれ1本でWeb開発における学習が全てできてしまいます!

「起業したり、フリーランスとして仕事をしたい方」「ウェブサイトを作りたい方」「新しい収入源を得たい方」「経済的自由を得たい方」こんな方にオススメです!

※セールは定期的に行われます

スポンサーリンク

STEP1:WordPressの概要をつかもう

まず始めにそもそもWordPressとは何かを知る必要があり、WordPressで作れるものと作れないものを理解する必要があります。

WordPressで作れるもの
  • 個人のブログ
  • 企業のホームページ
  • ブログ機能付きのLP

主にこの3つを開発することが可能です。

逆に言えばwebサービスやアプリケーションはWordPressで作ることはできません。

あくまで私たちのゴールは顧客が欲しいwebページを作成するということを頭に入れておいてください。

概要を学ぶ方法

さて、WordPressとは何か、私たちのゴールが明確になったところで早速学習を始めていきましょう。

学習方法は以下の3つ

  • 動画学習サイト
  • 参考書を購入
  • グーグルで調べて勉強

この3つの中で最も効率がいいのが、動画学習→文字ベースで再確認という流れです。

動画コンテンツは多くありますが、YouTubeかドットインストールをオススメします。

ドットインストールのWordPress入門23本を全て見ればほとんど基本的なことは網羅できると思います。

しかしドットインストールの情報はかなり古いので、環境開発の構築に手間がかかったりするので、できればYouTubeで最新のコンテンツを見ることをオススメします。

動画学習の際は動画を見ながら真似して必ず手を動かしましょう!

この段階では、WordPressでどんなことができるのか、投稿の方法、メニュー、サイドバーの仕組みが分かって入ればとりあえずOKです。

STEP2:WordPressに触れてみよう

さてWordPressの概要が掴めたところで早速WordPressに触れてみましょう。

実際に触れるにはローカル環境を構築するか、レンタルサーバーを契約するかの2つの方法があります。

MAMPサーバーなどを利用して構築してもいいのですが、難しく挫折する人も多いのでボタン一つでWordPress用のローカル環境が作れるアプリを使います。

↓WordPressのローカル環境がボタン一つで!Local by Flywheelの使い方↓

さてインストールと使い方がわかったところで、実際にWordPressに触れてみましょう!

やってみよう
  • 記事を投稿しよう
  • 固定ページを作成
  • Contactフォームをプラグインを使って実装
  • サイドバー、ヘッダーメニューのカスタマイズ
  • カテゴリー、タグの作成

初心者の方は何が何だかよくわからないかと思いますが、一点だけ意識してもらいたいのが、全てのコマンドを試してみてどこがどう変化するのか確認するということです。

中にはプラグインなど聞いたことないような言葉が多く出てくるかと思いますが、その都度Googleで調べて知識を蓄えていきましょう。

スポンサーリンク

STEP3:無料テーマをインストールして個人ブログを作ってみよう

WordPressの使い方を網羅したら、自身のオリジナルサイトを作ってみましょう。(ここまではプログラミングは使いません)

世の中にはプログラマーが作ったWordPressのテーマというものが存在します。

テーマを簡単にいうと着せ替えです。

テーマをダウンロードすることにより、より洗練されたサイトを構築することが可能です。

なんども言いますが、私たちのゴールはこのテーマを作成することです。

「WordPress無料テーマ」などでググってお気に入りのテーマがあればダウンロードして、有効化してみましょう。

テーマをダウンロードしたらファイルの中身を見てみましょう!

フォルダがどんな構成になっているのかざっくりとでいいです。

テーマの有効化が終わったところで、テーマをインストールしたことによってどこが変わったかを確認しましょう。

記事一覧がカード型になっていたり、サイドバーに検索窓が設置されていたりします。

テーマの便利機能を駆使して、記事を3記事くらい後悔して自分のオリジナルブログを作っってみましょう。

STEP4:テーマをカスタマイズしてオリジナルサイトを作ろう

さてここからが本番です。

STEP3まではコーディングをしてこなかったですが、これからはゴリゴリにコーディングして行きます。

このSTEP4を終えると、デザインの仕様変更案件や、カスタマイズの案件はこなせるようになるでしょう。

STEP4でやること
  • style.cssでデザインを編集
  • index.phpを編集し記事一覧の記事数を変更
  • pagenation関数をいじってみる
  • 検索窓をheaderに設置してみる

index.phpのフォルダを開けてみるとみたことのない関数がズラって並んでいてびっくりすると思いますが安心してください、これらの関数はWordPress独自の関数で暗記する必要はなくWordPressの公式リファレンスにすべて載っています。

なので何か機能を追加したい時にはググれば出てくるので、それをそっくりそのまま真似すればいいだけです。

あとは基礎的なifやwhileの使い方functionを使って関数を作る方法さえ知って入ればあとは自由自在にカスタマイズできてしまいます。

使ったWordPress関数や編集した関数は次回いつでも使えるようにメモするようにしましょう!

STEP5:テーマをHTML,CSSで模写

次に1からWordPressのテーマを作成する段階に移ります。

このフェーズではテーマ作成の下準備として、実際に販売されているテーマのでもサイトをHTML,CSSを使って模写してみましょう。

僕がオススメするのは日本の個人ブログの中で最も人気なJINのテーマです。

7つでもサイトがあるんですが、カルーセル機能やアニメーションがついてなくてシンプルな、4番目か最後のテーマを模写してみましょう。(TOPページのみで大丈夫です)

テーマ化するとスタイリングが多少変わってしまうので80%くらい模写する程度でOKです。

レスポンシブデザインもスマホだけでいいので、スタイリングしておきましょう。

STEP6:静的サイトをWordPress化しよう

STEP5で作ったHTML,CSSファイルをWordPress化します。

↓HTMLからWordPressへの詳しい手順↓

JINそのままのテーマを真似することはこの段階では無理なので、以下の6つは実装してください。

  • 検索した時に特定の記事の表示
  • 404ページ
  • ページネイションの設置
  • 個別記事に移動する
  • サムネイルの設置
  • カテゴリー、日付の設置

このレベルまでできると、自分で簡単なオリジナルテーマが作れるようになるはずです。

テーマ化で使用したWordPress関数は暗記するのでなく、いつでも使えるようにメモにてストックしておきましょう。

STEP7:オリジナルテーマを作ってみよう

さてここまでお疲れ様でした。

あなたはもう自分でオリジナルテーマを作れるスキルが身につきました!

早速簡単なオリジナルテーマを作成してみましょう。

まず始めに手書きでもいいので、ブログのレイアウト(構成)を決めましょう。

最低限実装して欲しいのは以下の10個。

  • ブログタイトル
  • ヘッダーメニュー
  • 記事一覧(サムネイル付き)
  • ページネイション
  • サイドバー
  • フッターメニュー
  • 個別ページ
  • お問い合わせフォームページ
  • 404ページ
  • 検索機能

テーマが完成した後に確認するのがScreamingfrog というツールを使って、URLの構造に問題が無いかチェックするようにしましょう。

HikoPro
HikoPro

ふぅ。やっとテーマの開発が終わったー!

ネコ君
ネコ君

いえ!ここからがスタートですよ!

開発したテーマにカスタマイズは無限なので、ググりながら完成度の高いテーマを目指しましょう!

まとめ

お疲れ様でした!

このレベルまで達すると簡単なWordPress案件はこなせるようになるので、実際に仕事を受注して実践力をつけていきましょう!

WordPress学習にゴールは無いので、自分が思い描いてるテーマが作れるまで勉強し続けるようにしましょう!

最後までご覧いただきありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

WordPressの学習にオススメの本

WordPressの基礎知識がある程度ある方向けの参考書で、HTMLファイルをWordPressのテーマ化にするまでの過程が詳しく書かれているので、実務にも使えるスキルが身につきます。

また、お客様のニーズで多い、カスタムフィールドの導入方法や、プラグインの開発方法や、管理画面の編集など実務でよく使う技術がよく学べます!

これからWordPressで高単価な案件を取りたい方は必ず読んでおきたい1冊です!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
WordPress
HikoPro Blog

コメント

タイトルとURLをコピーしました