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

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

1 拡張子をhtmlからphpにしてみよう
2 画像のsrc属性を置き換えよう
3 リンク先を置き換えよう
4 まとめ

拡張子を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」で出力します。

まとめ

まとめと言ってもこれで終わりじゃないわけですが長くなるので今回はここまでです。
最後にWordpress化には今回いくつか出てきたようなPHPの関数の知識が必要になりますがそれらを調べられる辞典的なサイトを紹介しておきます（上記リンク先でも出てきましたが）。

WordPress Codex 日本語版

WordPressの関数で分からなければまずCodexを見ることを初心者は習慣づけましょう。

WordPress化の続きはまた次回。。。

この記事を書いた人
最新の記事

熊田賢太郎

株式会社クロコロールのコーディングを担当。デジタルハリウッドを卒業後、クロコロールに入社。HTML、CSS、JavaScript、Jquery、PHPの言語を使用。現在は、WordPressエンジニアとして、Webサイト制作、既存サイトのカスタマイズやリニューアル、テーマの制作、サイトのWordPress化、カスタム投稿作成、保守などを担当。