初心者向け！HTMLのWordPress化について
こんにちは、クロコのケンです。
本日はHTMLは分かるけどWordpressは分からないという初心者向けに「HTMLのWordpress化」について話してみたいと思います。
そう聞くと難しそうと感じる方もいるかもしれませんが最低限の知識さえあれば意外と簡単です。
拡張子をhtmlからphpにしてみよう
作成したHTMLファイルの拡張子をhtmlからphpにしてみましょう。
例）「index.html → index.php」
初心者は念のため元のHTMLファイルのコピーを作成しバックアップを取ってから、php化した方がいいと思います。
画像のsrc属性を置き換えよう
ただのHTMLならおそらくimgタグは以下のようになってると思います。
|
1 |
<img src="img/aaa.jpg" alt="aaa"> |
これを…
|
1 |
<img src="<?php echo get_template_directory_uri(); ?>/img/aaa.jpg" alt="aaa"> |
と書き換えましょう。src属性に
|
1 |
<?php echo get_template_directory_uri(); ?>/ |
と追記するだけです。
これはどういう意味かというとget_template_directory_uriで現在有効化されているテーマのディレクトリURLを取得しechoで表示するということです。
echo…訳すると反響・こだまなどの意味ですがphp言語では「出力する」という命令です。
Wordpressではsrc属性は相対パスでは画像が表示されません。このように絶対パスを指定しましょう。
リンク先を置き換えよう
ナビゲーションメニューなど同じサイト内でのリンクがただのHTMLなら以下のようになってると思います。
|
1 |
<a href="○○○.html">○○○</a> |
これを…
|
1 |
<a href="<?php echo esc_url( home_url( '/○○○/' ) ); ?>">○○○</a> |
と書き換えましょう。
とこれがTOPページへのリンクなら
|
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化の続きはまた次回。。。
クロコのケン
最新記事 by クロコのケン (全て見る)
- カスタムフィールドが連番の時に処理を繰り返す - 2018年9月3日
- プラグイン不要！WordPressでページ別にCSSやJavaScriptを適用する方法 - 2018年8月9日
- ブラウザ別に適用させるCSSハック2018 - 2018年7月30日
