初心者向け！HTMLのWordpress化について

こんにちは、クロコのケンです。
本日はHTMLは分かるけどWordpressは分からないという初心者向けに「HTMLのWordpress化」について話してみたいと思います。
そう聞くと難しそうと感じる方もいるかもしれませんが最低限の知識さえあれば意外と簡単です。

1 拡張子をhtmlからphpにしてみよう
2 画像のsrc属性を置き換えよう
3 リンク先を置き換えよう
4 まとめ
- 4.1 クロコのケン
- 4.2 最新記事 by クロコのケン (全て見る)

拡張子をhtmlからphpにしてみよう

作成したHTMLファイルの拡張子をhtmlからphpにしてみましょう。
例）「index.html → index.php」
初心者は念のため元のHTMLファイルのコピーを作成しバックアップを取ってから、php化した方がいいと思います。

画像のsrc属性を置き換えよう

ただのHTMLならおそらくimgタグは以下のようになってると思います。

<img src="img/aaa.jpg" alt="aaa">

1	<img src="img/aaa.jpg" alt="aaa">

これを…

<img src="<?php echo get_template_directory_uri(); ?>/img/aaa.jpg" alt="aaa">

1	<img src="<?php echo get_template_directory_uri(); ?>/img/aaa.jpg" alt="aaa">

と書き換えましょう。src属性に

<?php echo get_template_directory_uri(); ?>/

1	<?php echo get_template_directory_uri(); ?>/

と追記するだけです。
これはどういう意味かというとget_template_directory_uriで現在有効化されているテーマのディレクトリURLを取得しechoで表示するということです。
echo…訳すると反響・こだまなどの意味ですがphp言語では「出力する」という命令です。
Wordpressではsrc属性は相対パスでは画像が表示されません。このように絶対パスを指定しましょう。

リンク先を置き換えよう

ナビゲーションメニューなど同じサイト内でのリンクがただのHTMLなら以下のようになってると思います。

<a href="○○○.html">○○○</a>

1	<a href="○○○.html">○○○</a>

これを…

<a href="<?php echo esc_url( home_url( '/○○○/' ) ); ?>">○○○</a>

1	<a href="<?php echo esc_url( home_url( '/○○○/' ) ); ?>">○○○</a>

と書き換えましょう。
とこれがTOPページへのリンクなら

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">○○○</a>

1	<a href="<?php echo esc_url( home_url( '/' ) ); ?>">○○○</a>

となります。

一つずつ説明しますと「home_url()」で現在のサイトのホームURLを取得します。要はトップページのアドレスということです。
「esc_url()」はテキストや属性などのURLを無害化する時に用いる関数です。
必須ではありませんが「home_url()」のデフォルトの使い方でも推奨されているので記述した方がベターかと思います。
そしてimgタグと同様に「echo」で出力します。