【初心者向け】WordPressオリジナルテーマ作成の現実的・具体的学習手順

pyzouのキャプチャ

けんぞう

田中けんぞう

神奈川で家賃2万の家に住むフリーライター。メディア作り・プログラミング・読書が趣味

 

pyzou.net」では、Wordpressの自作テーマを導入しました。レスポンシブ対応で、スマホで見てもレイアウトが崩れない仕様になっています。

pyzouのキャプチャ

正しい学習手順を踏めば、学習期間1~2か月くらいでこれくらいは作れます

今回は、Wordpressで自作テーマを作成して自分のブログやWebサイトに反映させるための具体的手順・学習方法について解説していきます。

オリジナルテーマ作成の具体的学習手順

 

  • STEP.0
    Wordpressブログを開設

    言うまでもないと思いますが、前もって自分のブログをWordpressで開設しておくと良いです。ブログを開設をとおして、以下のことを理解できていればOKです。

    • サーバー・ドメイン取得の流れ
    • サーバー・ドメインの役割
    • WordPress管理画面の基本的使い方(テーマの変更方法など)
  • STEP.1
    テーマ作成のための言語理解
    • HTML&CSS
    • PHP(Wodpressでどう使うか)
    • jQuery

    ざっくりですが、上記の簡易的なテーマ作成までの過程では、これら3つの言語を理解しておく必要があります。逆に言うと、これらの知識があれば割と簡単にサイトは作れます。

     

    HTML&CSSと、jQueryに関しては『Progate』での学習を1~2周しておくと良いです。月額980円で良質な教材で勉強できるので、初心者は必ず登録しておきましょう。

     

    ちなみに道場コースがありますが、ここは一旦飛ばしてしまっても問題ありません。道場コースでは、微妙なレイアウトの崩れでコースをクリアできないなどでモチベーションが続かない可能性があるからです。

     

    PHPは『ドットインストール』のWordpressコースが、おすすめです。Wordpressのテーマ作成のために必要なPHPの知識を、掻い摘んで学ぶことができます。

  • STEP.2
    Kindleとサイトを見ながら実装

    「Kindle学習」と「ネット学習」の2つがおすすめです。

    参考になる本とサイト

    後者の「Plusers」は本当におすすめです。1からテーマ作成の全てを学ぶことができて、初心者向けに詳しい説明も加えられています。

    Mac利用者であれば、Kindle for macを利用して半分の画面で本を読みつつ、コーディングしていくとかなり捗るのでおすすめです。


    HTML関連の書籍であれば、「HTML5&CSSモダンコーディング」もおすすめです。Wordpressの使い方などの解説ではないですが、HTML&CSSでコーディングして様々なサイトを作成していく過程を楽しめます。

  • STEP.3
    応用編:自分で部分的にカスタマイズ

    上記の手順で最低限のテーマ作成ができるようになれば、部分的にカスタマイズを入れていくと理解が深まります。

    僕の場合は、「可視範囲に入ってから、下線を引くアニメーション【jQuery】」などのカスタマイズを行って、jQueryの理解を深めました。

    HTML&CSSのことでわからないことがあれば、「サルワカ」というサイトが分かりやすくおすすめです。

ドメイン代がもったいないならサブディレクトリを使おう

 

現在使用しているテーマが気に入っていて変えたくない。ドメインを取得するお金ももったいないなあ。

 

こんな人は、サブディレクトリを利用するのがおすすめです。サブディレクトリを利用すればドメイン代はプラスでかからずに、子サイトを作成することができます。

こちらの記事で、サブディレクトリについて詳しく解説しています。

サブディレクトリで独立させる流れ WordPressサブディレクトリで特化ブログを作り上位表示させる方法

子サイトについては、親サイトと別テーマを利用することができ、もちろん親サイトへ影響を加えるということもありません。

当サイトに関して言うと、「内向型メモ」という内向型の悩み解決型のメディアを、サブディレクトリを利用して作成しています。


コンテンツ作りに集中したい人は、既存テーマを利用しよう

ここまでで自作のテーマを作成する手順を紹介しましたが、単純にブログを立ち上げて、発信活動を始めたいのであれば、既存テーマを利用することをおすすめします。

既存のテーマを利用すれば、美しいデザインのメディアを数分で作成することができます。

おすすめのテーマについては、こちらの記事で解説していますので、興味がある方はぜひご覧ください。

おすすめテーマアイキャッチ WordPressのおすすめテーマ7選【有料・無料・SEO】

参考