2019/11/12 (更新日: 2019/11/15)

プログラミング未経験者がWordPressの自作テーマを作る勉強方法について

今回の記事では『WordPressの自作テーマを作りたいけど、どう勉強すればいいのか分からない…』と言う方に向けて、私が実践した勉強方法についてご紹介したいと思います。

プログラミング未経験の方も、この勉強方法を実践することでオリジナルデザインのブログを作ることができるのでぜひお試し下さい。

HTML/CSSを学習する

まずは Web制作の基本となるHTML/CSSを学習する必要があります。

HTML/CSSとは、簡単に言うと『Webページの見た目を作る言語』です。

初学者の方にまず読んで欲しい書籍は1冊ですべて身につくHTML & CSSとWebデザイン入門講座です。

この書籍の発売日は【2019年3月】と新しく、今時のWebサイトの作り方(レスポンシブ・Frexboxなど)を学ぶことができます。

また、プログラミングの学習をしながら実際にサイトを制作するため、Webサイトがどのような仕組みでできているのかを理解しながら知識を身に付けることができます。

HTML/CSSを理解するなら、この一冊で十分です。

ブログのトップページを作る

次は、先ほどの書籍を参考にしながら、自分のブログのトップページを作っていきます。

なぜトップページだけなのかと言うと、基本的にブログのほとんどのページは『トップページのデザイン構成』が中心になっているからです。

このブログを参考にして頂ければわかると思うのですが、記事の表示場所以外はトップページと同じ構成だと思います。(サイドバー・ヘッダー・フッターなど…)

記事の表示に関しては、WordPressを組み込む際に設定するので、とりあえず自分のブログのトップページを作り、その後にWordPressを組み込む方が効率的だと思います。

WordPressを組み込む

ブログのトップページができましたら、あとはWordPressを組み込むだけです。

WordPressには、PHPが元となっているWordPress関数というものがあり、それらをHTMLに組み込むことで自作テーマを作ることができます。

WordPressをHTMLに組み込むといってもあまりイメージが湧かないと思うので、このブログのヘッダータイトルを例に説明したいと思います。

下記のプログラムは、WordPressを組み込む前のHTMLです。

<div class="header__title">
 <a href="/">FRONTEND DIARY</a>
</div>

WordPressを組み込むと下記のようになります。

<div class="header__title">
 <a href="/"><?php bloginfo('name'); ?></a>
</div>

このように、ブログタイトルの部分に【<?php bloginfo(‘name’); ?>】を組み込むことで、WordPressでブログタイトルを変えた時に、自動的に全てのHTMLのブログタイトルを書き換えてくれます。

【WordPressを組み込む=WordPressとHTMLを繋ぎ合わせる】と思っていただければ大丈夫です。

WordPressを組み込む方法についてはWordPress 仕事の現場でサッと使える! デザイン教科書を読めば全て分かります。

この書籍は、既に用意されているサイト(HTML/CSS)に1つずつWordPress関数を組み込みながら自作テーマを作っていくので、非常に分かりやすいです。

また、

この書籍を参考にしながら、自分のサイトにWordPressを組み込んでいきましょう。

まとめ

いかがでしたでしょうか?

この勉強手順を実践することで、誰でもオリジナルデザインのブログを作ることができます。

ただ、プログラミング未経験の方は『予想外のエラー』が起きた時に自分だけで対処するのが大変かもしれません。

もし『独学は厳しい…』という方は、TechAcademyWordPressコースがおすすめなのでぜひご検討下さい。

 

おすすめプログラミング未経験からWebエンジニアになる方法

おすすめWordPressテーマを自作するメリット・デメリットとは?【実体験を元に解説】

ブログで稼ぎたい方はこちら
誰でもわかるWordPressブログの始め方