熊本県でWeb、EC、IoTなら株式会社クロコロール
Kuroko Blog
クロコブログ
こんにちは、クロコのケンです。
本日はHTMLは分かるけどWordpressは分からないという初心者向けに「HTMLのWordpress化」について話してみたいと思います。
そう聞くと難しそうと感じる方もいるかもしれませんが最低限の知識さえあれば意外と簡単です。
作成したHTMLファイルの拡張子をhtmlからphpにしてみましょう。
例）「index.html → index.php」
初心者は念のため元のHTMLファイルのコピーを作成しバックアップを取ってから、php化した方がいいと思います。
ただの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化の続きはまた次回。。。
