WordPressでHTMLやCSS、PHPを段階的に学んでスキルアップする方法

WordPressはHTMLやCSS、PHPの知識や経験がなくてもサイトを構築できますが、同時にWebデザインやサイトの仕組みを学ぶことが可能です。

WordPressでサイトを構築する中でHTMLやCSS、PHPの知識を少しずつ蓄えていこうと考えている個人の方や企業や組織の担当者の方がいらっしゃるのではないでしょうか。 今回はWordPressでHTMLやCSS、PHPを段階的に学んでスキルアップする方法について簡単に説明します。

WordPressでHTMLやCSS、PHPを段階的に学ぶ10ステップ

1.ブラウザの検証ツールと追加CSSでCSSをカスタマイズする

2.ウィジェットで簡単なHTML/PHPコードを試してみる

3.テーマテンプレートでHTMLとPHPの入れ子構造を学ぶ

4.サイトのソースコードとPHPの出力を見比べる

5.WordPressで使われているPHPの関数を読み解いてみる

6.テーマテンプレートにHTMLを追記してみる

7.テーマテンプレートにPHPの関数を追記してみる

8.追記したHTMLのCSSをカスタマイズする

9.テーマテンプレートのHTML/PHPの入れ子を削除してみる

10.カスタマイズした項目を一つ一つ元に戻す

今回は大まかに上記10個のステップで段階的に学ぶ方法を紹介します。

上から順番に学んでいくことで徐々にスキルアップできますが、読み飛ばして各項目を眺めるだけでも大丈夫です。 前提として既に稼働して公開しているWordPressではなく、オフライン環境、ローカル環境やサブで作成したWordPressで練習することをおすすめします。 同時に自分が作業した手順をメモしておきましょう。最終的に「元に戻せるようにすること」がスキルアップに繋がるからです。

1.ブラウザの検証ツールと追加CSSでCSSをカスタマイズする

WordPressの管理画面の外観→カスタマイズを開いて、追加CSSをクリックします。ブラウザの検証ツールを開いて、任意の場所のCSSクラスをカスタマイズしてみましょう。

スクリーンショットでは.blog .entry-titleの部分を赤文字、フォントサイズ50pxに設定してみました。 .blog .entry-title{ color:red; font-size:50px; } HTMLやCSS、PHPを学ぶ時は「変化を感じ取れるかどうか」が非常に大切です。 赤文字にして文字サイズを変更するというような簡単な手順だとしても、積み重ねることで柔軟にカスタマイズできるようになるからです。

2.ウィジェットで簡単なHTML/PHPコードを試してみる

次に外観→ウィジェット→カスタムHTMLの項目でサイドバーにHTMLコードを追加してみます。 PHPに不慣れであれば、まずは簡単にHTMLのP要素で文字列を追加してみましょう。

　 プレビューで確認すると入力した文字列が表示されていることがわかります。一つ一つ手応えを感じながら学ぶことが大切です。

カスタムHTMLのウィジェットにa要素でリンクを付けてみたり、画像を表示させたりしてみましょう。 画像はサイズによってサイドバーからはみ出す可能性があるので、imgタグやcssでサイズ調整する方法も学んでおくと後々役に立ちます。

3.テーマテンプレートでHTMLとPHPの入れ子構造を学ぶ

外観→テーマエディター→メインインデックスのテンプレートを開きます。

　 この段階では意味がまったくわからなくて大丈夫です。 HTMLやCSS、PHPを学ぶ時に大切なのが「どのような構造、仕組みなのか」を感じ取ることです。

タブやインデントによって字下げされている部分にどんな意味があるのか、phpのif、endifはどのような形で閉じられているのか、間にあるHTMLタグはどのような入れ子になっているのかをまずは眺めてみてください。 この時点では特に追記や編集、削除は行わず、スタイルシートやヘッダー、フッターなどの項目をチェックするだけしておきましょう。

4.サイトのソースコードとPHPの出力を見比べる

次にWordPressの管理画面から「サイトを表示」してブラウザの「ソースコードを表示」してみます。

先ほどのメインインデックスのテンプレートを他のタブやウィンドウで開いて見比べてみましょう。 divのクラス名が同じ部分などに注目して、メインインデックスのテンプレートから出力されている項目をチェックしたり、ヘッダーやフッターのテーマテンプレートに切り替えて、どれが出力されているのかをチェックします。 最初に変更したCSSや追加したウィジェット部分がどこで出力されているのかも合わせて見ておくと良いでしょう。

5.WordPressで使われているPHPの関数を読み解いてみる

　参考URL：関数リファレンス - WordPress Codex日本語版

次にWordPressで使われているPHPの関数を読み解いてみます。上記URLにアクセスして、テーマテンプレートで使われているphpの関数をいくつかチェックしてみてください。 WordPressで使われているPHPの関数は英語表記ですが、何となく意味が掴めるようになります。 いきなり関数を使いこなす、コードをバリバリと書くというイメージよりも「ソースやコード、関数を読み解く」という姿勢で進めるとスキルアップしやすいです。

他の人の書いたコードをコピペして機能を追加したり、デザインを整えるのも大事ですが「どのような仕組みなのか」を理解する気持ちを持たないと知識と経験が積み重なりません。 WordPressはHTMLとCSS、PHPのコードのお宝の塊です。しっかりと読み解けるようになれば、必然的にコードを書けるようになるので、じっくりと読み込みましょう。

6.テーマテンプレートにHTMLを追記してみる

次にテーマヘッダーのテーマテンプレートのbodyタグの真下にpタグで文章を埋め込んでみます。 「bodyタグの真下にpタグで文章を埋め込んでみた！」 スクリーンショットでは上記の文章をpタグで囲んで追記して保存しました。

　 ソースコードを確認すると追記したHTMLが表示されていることがわかります。

7.テーマテンプレートにPHPの関数を追記してみる

参考URL：テンプレートタグ/bloginfo

次に上記URLを参考にサイトのタイトルを出力するPHP関数を追記してみます。

※わかりやすくするために5行同じものをコピペしました。

　 CSSを設定していないので単なる文字列として表示されました。

8.追記したHTMLのCSSをカスタマイズする

次に追記したHTMLのpタグに「red」というclassを設定してCSSをカスタマイズしてみます。

　 外観→カスタマイズ→追加CSSで任意のCSSを設定してみましょう。

スクリーンショットでは赤文字、太字、フォントサイズを30pxに設定してみました。 ここまでくるとテーマテンプレートのカスタマイズがそこまで難しかったり、怖かったりするものではないということがわかります。 しかし、これらはPHPの関数や構文の影響のない部分に追記したから大丈夫だっただけで、PHPのif、endifなどの構文内で無闇にPHPの関数をコピペするとWordPressが動かなくなることがあるので注意しましょう。

9.テーマテンプレートのHTML/PHPの入れ子を削除してみる

先ほどテーマテンプレートに追記したHTMLとPHPの入れ子を削除してみましょう。 削除したらサイトを表示してみたり、外観→カスタマイズを開いて、表示されなくなったかチェックしてみてください。

10.カスタマイズした項目を一つ一つ元に戻す

その後は追加CSSで追記したCSSを削除、追加したウィジェットも削除して元の状態に戻してみてください。 WordPressでは追加するだけでなく、削除するタイミングでも注意する必要があります。 なぜなら、思いがけず必要な部分、追記した部分以外を誤って削除してしまう可能性があるからです。

普段から自分が何をしたのか、記憶力に頼らず手順をメモすること、何行のどの部分に追記したのか、削除したのか、編集したのかを記録する癖を付けましょう。 カスタマイズした項目を元に戻せるようになれば、あとはHTMLタグ、PHPの関数を学んで出力したい項目を任意の場所に表示させたり、表示した文字列をCSSで装飾するのも簡単になります。

まとめ

WordPressを学ぶタイミングではプラグインやテーマを入れ替えてみたり、PHPコードを追記したりすることに興味を持ってしまいがちです。 ソースやテーマテンプレートを読み解けないまま追記やコピペばかり覚えてしまうと、修正や削除のできない人になってしまいます。

自分でどこに追記したのか、どこを編集したのか、どこを削除すれば元に戻せるのかという、ごくごく簡単なことを覚えるようにしてください。 プラグインのインストール、テーマの検索、PHPのコピペは誰にでもできます。自分自身で任意の場所に任意のPHP関数やタグを追記して、CSSで装飾できるようになれば、どんなデザインも自由自在になります。 まずはソースコードを読めるようになること、少しずつHTMLタグやPHPの関数を覚えること、そして追記や編集したものを「元に戻せるように」なることを意識してみてください。