macoblog

「ゲーム × プログラミング」で生きていく

MMORPGに人生捧げてみ?

「WordPressのおすすめ勉強法は?」←短期間で身に付ける方法がある

WordPress

ワードプレス独学マン

ワードプレス独学マン
「ワードプレスを勉強しろ!って言うけどどうやって学べばいいのかよく分からない、とりあえずローカル環境を構築して管理画面からカスタマイズはできた、といっても本やサイト通りにやっただけだけど、、、」

こんなニーズに答える記事になります。

WordPressをどうやって学べばいいか分からないと悩んでいる方に向けて書きました、私自身WEBエンジニアとしてワードプレスをよく使う機会があるので記事の質は保障します。

本記事で解説している内容は、「プログラミングどんとこい」「WEB制作をしたい、その為にWordPressを勉強する」なんてスタンスの方にオススメです。

本気でWordPressを学びたい人だけ読んでください、私も本気で解説させていただきます。

「管理画面を見ている間は勉強になっていない事実」

目次【本記事の内容】

本記事で解説している事をそのまま実践すれば、短期間でWordPressの基礎以上は理解できるかと思います。

あると便利なスキル・環境

  • HTML/CSSの基礎
  • PHPの基礎
  • WordPressのローカル環境

上記はあると良いだけで必須ではないのでご安心ください、勉強過程で身に付ける事ができます。

それではみてきましょう。

スポンサードサーチ


最初に:WordPressを勉強する目的を明確にする

WordPressを勉強する前にその目的は明確にしておきましょう。

ブログを開設したいから

・多機能テーマを使って管理画面からカスタマイズする程度でOK、本記事を読んでも損はしませんがそれを活かす機会は先かもしれません。

WEB制作の勉強の一環として

・それなら管理画面からカスタマイズ出来るだけじゃダメですね。本記事を読む価値ありです。

WordPressのおすすめ勉強法「テーマの自作」

WordPressのおすすめ勉強法「テーマの自作」

WordPressはテーマと呼ばれるテンプレートがあります、使うことでサイトに必要な機能を全て構築してくれるのでプログラミング知識は一切必要ありません(テーマに組み込まれているから)
 
※WordPress導入時に「Twenty Fifteen」を含む3つのテーマがインストールされているはずです(管理画面から、「外観→テーマ」で確認できます)

実は、今回私がおすすめする勉強法は、テーマを自作することにあります。

いきなりテーマの自作なんて無理でしょ?

結論から言うと、可能です。

その理由は簡単で、テーマを自作すること自体は誰でも簡単にできるからです。

テーマを作ることはサイトを作ることと同義です、がゆえに「テーマを自作する」のはハードルが高いと勘違いされる方も多いんですが、やってみれば意外と簡単だったりします。

これについては後述しますので、とりあえず読み進めてください。

テーマを自作する事で得られるもの

なぜテーマを自作するのか。

それはWordPressにおいて必須レベルで理解しておきたい点が網羅的に学べるからです。

投稿した記事の表示、パーツ分け、各テンプレートファイルの役割や使い方など、WordPressでWEB制作をするなら必ず知っておきたいことが学べます。

配布テーマはダメなの?

確かに配布テーマを使って勉強することもできますが、管理画面でのカスタマイズ方法を学べる程度です、おそらくファイルを直接編集するには中がコードだらけでハードルが高く挫折する可能性大。

配布テーマは必要なテンプレートファイルが揃っている分、それがなぜ必要なのか感覚的に分かりづらいという面もあります(勉強に不向き)

テーマを自作すれば必要なファイルを足していく過程が勉強になり、その役割を理解しやすくなるので勉強に向いているというのが私の見解です。

スポンサードサーチ


「テーマ自作」勉強法を4ステップで解説

「テーマ自作」勉強法を4ステップで解説

WordPressの勉強方法として「テーマの自作」をおすすめする理由は理解いただけましたでしょうか。

「それでは実際にやってみてください、以上になります」ってのは鬼ですよね。笑

ご安心ください、風呂敷を広げた責任は取らせて頂くつもりです。

手順を全て解説するとなると膨大な量になるので、スタートから走り出すまでの手順を4ステップで解説させていただこうかなと思います。

  1. テーマディレクトリとファイル作成
  2. デバッグから学ぶ「急がば回れ」
  3. ①で作ったファイルにマークアップ
  4. パーツ化してテンプレートの理解
  5. まとめ:後は欲しい機能を足していくだけ

WordPressをローカル環境に用意し、それを参考にそれぞれ解説します。

ローカル環境?WordPressってどうやって用意するの?

まずWordPressを WordPress.ORG日本語版からダウンロードしてください。
 
次にローカル環境を構築しますXAMPPダウンロードからお使いのPCに合わせてインストールしてください。
 
最後に設定をすればローカル環境の完成です、設定方法についてはXAMPPを使ってローカル環境にWordPressをインストールする方法を参考にしてください、詳しく解説されています。

ステップ1:テーマディレクトリとファイル作成

WordPressの管理画面にログインできるという前提で話を進めさせて頂きます。

まず、最初にテーマディレクトリとファイルを一つだけ用意しましょう、これが自作テーマの第一歩となります。

テーマディレクトリの作成

テーマディレクトリの作成

テーマディレクトリは[xampp/htdocs/wordpress/wp-content/themes/]に好きな名前で作成してください(上記参照、パスが分かりにくいという方は「XAMPP」の保存先から辿ってみてください、必ずあります。)

テーマディレクトリを「sample」という名前で作成すると、フォルダパスは[xampp/htdocs/wordpress/wp-content/themes/sample]となります。

テーマ内にファイルを一つだけ作る

テーマ内にファイルを一つだけ作る

テーマディレクトリを作成したら、その中に[index.php]というファイルを作成しましょう、ファイルの中には「hello, world」と書いておくと幸せになれるかも(書かなくてもいい)

ファイル編集用のテキストエディタを用意すると便利です(筆者はAtomを使用)、ちなみにこの時点ではメモ帳(Windows)でも作成可能。

ステップ2:デバッグから学ぶ「急がば回れ」

テーマディレクトリとファイルを用意出来たら次は管理画面から[外観→テーマ]に移動してください。

ここで先ほど作ったテーマが表示されていればOK(ここでは「sample」)

見当たらない、、、代わりに変なメッセージがある。

壊れているテーマと表示されている

嫌な感じの文面ですがご安心ください、これが良い勉強になります。

壊れているテーマ
以下のテーマはインストール済みですが、足りない部分があります。
sample スタイルシートが見つかりません。

先に答えを言うと、[style.css]というファイルがテーマディレクトリ「sample」に足らないということです、先ほど作成した[index.php]と同じ場所に作っておきましょう。

テーマにstyle.cssを追加し更新すると、、、

テーマにstyle.cssを追加するとエラーが消えて認識される

エラーが消えてテーマとして認識されていることがわかります、ついでにテーマを有効化しておきましょう([index.php]ファイル内に何も書いていなければ真っ白なサイトが表示されていると思います、書いていればその内容が表示されているはず)

表示されたことを喜ぶ前にインプットしたことを整理しましょう、でないと勉強になりません。

WordPressについて分かったこと(勉強になったこと)

  • テーマは[themes]の中に格納されている
  • 独自テーマの名前は自由に付けていい
  • テーマにはindex.phpstyle.cssが必須

これって当たり前のことなんですが、配布されているテーマを使っていると意識することがありません、自作するからこそ分かることです(テーマ自作で勉強する利点)

勉強する際のポイントについても触れておきます。

今回は「style.cssが足りない」と先に答えを言いましたが、自分で解決まで持っていけるような思考力を持ちましょう。これはググる力と置き換えることもできます、ネットに答えは落ちています、人にすぐ解決策を求める姿勢はダメ。

「トライアル・アンド・エラー」

これが基本です。

ステップ3:①で作ったファイルにマークアップ

ステップ1で作成した[index.php]の中に簡単にマークアップしてみましょう、HTMLが全く分からないという方はドットインストール「HTML入門」で基礎だけでも勉強してきてください。

ここではファイル編集に専用エディタを使う様にしましょう、私は「Atom」を使用しています、他だと「SublimeText」「Brackets」なんかが人気ですね。

分からないことが分からない、、、

そんなこともあろうかとコピペ用のコードを用意してあります、index.phpに下記のコードをコピペしてください。

index.php

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>sample</title>
    <style media="screen">
      header {
        background-color: red;
      }
      .content {
        background-color: yellow;
      }
      footer {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <!-- ヘッダー -->
    <header>ここがヘッダー</header>

    <!-- コンテンツ -->
    <div class="content">ここがコンテンツ</div>

    <!-- フッター -->
    <footer>ここがフッター</footer>
  </body>
</html>

上記をコピペして保存すると、真っ白なサイトからちょっとだけ変わると思います。

HTMLに理解がある方はしっかり作りこんで頂いてOKです。

ステップ4:パーツ化してテンプレートの理解

ここからちょっとだけプログラミングの部分に触れますがご安心ください、基本的にはコピペするだけで大丈夫です。

WordPressでサイトを構築するには先ほど作成したファイルだけでは足りません、テンプレートファイルと呼ばれるものを用意し再構築する必要があります。

これについては説明するより作りながらの方が分かりやすいかと思います。

先ほど作成したindex.phpは3つのパーツに分けることが可能

index.phpはヘッダー、コンテンツ、フッターの3つの要素に分解することができます。

テンプレートファイルに置き換えると[header.php(ヘッダー)][index.php(コンテンツ)][footer.php(フッター)]ですね。

実際に分解してみます、まずindex.phpと同じ場所に[header.php]と[footer.php]を作成しましょう。

作成したら各ファイルにコードをコピペして保存してください。

header.php

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>sample</title>
    <style media="screen">
      header {
        background-color: red;
      }
      .content {
        background-color: yellow;
      }
      footer {
        background-color: blue;
      }
    </style>
    <?php wp_head(); ?>
  </head>
  <body>
    <!-- ヘッダー -->
    <header>ここがヘッダー</header>

index.php

※index.phpに関しては、先ほどコピペしたものは全て消した上で下記のコードをコピペしてください。

    <!-- header.phpを読み込んでいる -->
    <?php get_header(); ?>
    
    <!-- コンテンツ -->
    <div class="content">ここがコンテンツ</div>

    <!-- footer.phpを読み込んでいる -->
    <?php get_footer(); ?>

footer.php

    <!-- フッター -->
    <footer>ここがフッター</footer>
    <?php wp_footer(); ?>
  </body>
</html>

[get_header()][get_footer()]などの見慣れないコードについてはコメントアウトで説明している通りです。

全て用意できたらサイトを確認してみましょう、先ほどと変わってないはずです。

 

変わってないならやる意味なくない?

やる意味は大いにありです。

その理由としては、パーツ化することでメンテナンスしやすくなるからです。

ヘッダーファイルを修正する場合、各ファイルに同じコードを記述しているとその数だけ修正する必要がありますが、ヘッダー用のファイルとして分けておけば一回の修正だけで済みます。

フッターでも同じことが言えますね。

まとめ:後は欲しい機能を足していくだけ

色々と解説してきましたが、とりあえず本記事で解説できることはここまでです。

ここから何をすればいい?

サイトを作ってみてください。

進めていくと画像を読み込ませる事もあるでしょう、そんな時にどうやって画像パスを指定すればいいのか、その都度調べて学んでください。

記事ページを作っていると「アーカイブページが必要だな」「個別記事ページも必要だ」「ここにはサイドバーが欲しいな」なんてことが出てくると思います。

どのテンプレートファイルを作ればいいか、どうやって読み込ませるのか考えてみてください、ネットに欲しい情報は必ず落ちています。

一つのサイトが完成する時、WEB制作に必要なWordPressの知識は身に付いているはずです。

是非挑戦してみてください。

終わりに:ググる力を身に付けろ!

終わりに:ググる力を身に付けろ!

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

ちょっと難しそうだなと思った方もいるかもしれませんが、やる気さえあればWordPressなんてすぐに習得できます。

重要なのは実際に取り組むこと、分からないことは「調べて試す」、これを繰り返しましょう。

最初はうまくいかない事も多いかと思いますが、コツさえ掴めばすぐ理解できると思います。

慣れた頃には欲しい情報をすぐ見つけることができる「ググる力」も身に付いているはずです。

以上になります。