ワザ72

コードの基本的な構造を知っておこう

コードを理解する重要な手がかりを知る

WordPressのテーマにはHTML、PHP、CSSという複数の言語が使われています。初めて見るときは難しく感じられるでしょうが、いずれの言語も基本的な構造は、意外とシンプルなものです。構造を大まかにでも知っておけば、コードのどこをどのように編集すればいいのか、理解しやすくなります。

ここでは、Sublime Textで色分け表示したサンプルを見ながら、HTML、PHP、CSSのコードの基本的な構造を見ていきましょう。

「タグ」「セレクタ」「プロパティ」に注目

WordPressのテーマでは、HTMLとPHPは拡張子「.php」のファイルに記述されています。HTMLはさまざまなタグ名が付いた「開始タグ」と「終了タグ」の組み合わせで構成され、タグで挟んだ間を「要素」と呼びます。開始タグの中には「属性」が書き込まれることもあります。PHPは開始タグが「<?php」、終了タグが「?>」と決まっていて、間にプログラムが記述されます。HTMLとPHPでは、どの開始タグと終了タグが対になっているかを追うことで、構造がわかりやすくなります。

CSSは拡張子「.css」のファイルに記述されています。「セレクタ」と「プロパティ」がセットになっていて、箇条書きのような、見やすく整った構造をしていることが特徴です。

コードに書かれる「コメント」も知っておく

コードの中に、コードの説明などの「コメント」が書き込まれていることもあります。Sublime Textではグレーで表示され、コメントであることがわかります。コメントは機能を持たず、Webページにも表示されません。

HTMLでは「」と「」で囲んだ範囲、PHPとCSSでは「/*」~「*/」で囲んだ範囲がコメントになります。PHPは行の中の「//」という記号からうしろの内容もコメントになります。

Tipsファイルの拡張子を表示させる

ファイルの拡張子とは、ファイル名のうしろに付く、ファイルの種類を表す記号です。Windowsで拡張子が表示されない場合は、エクスプローラーの[表示]タブをクリックし、[ファイル名拡張子]にチェックマークを付けると表示されます。

TipsJavaScriptも使われている

テーマには、JavaScriptという言語も使われています。ページに動きを付けるために使われる言語ですが、ユーザーがカスタマイズする機会はあまりないため、本書では触れていません。

Tipsコードを読みやすくする「インデント」

コードはインデント(字下げ)により、見た目が整えられている場合があります。例えば、次のページのHTMLとPHPのサンプルでは、どの開始タグと終了タグが対になっているのかが、わかりやすくなっています。本書の解説ではインデントの調整までは触れませんが、見やすいコードにするためには重要なことです。

コードの基本的な構造の例

HTMLとPHPのコード

HTMLとPHPのコード

CSS のコード

CSS のコード