熊本県でWeb、EC、IoTなら株式会社クロコロール

Kuroko Blog

クロコブログ

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

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

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

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

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

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

これを…

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

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

リンク先を置き換えよう

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

これを…

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

となります。

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

まとめ

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

WordPress Codex 日本語版

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

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


The following two tabs change content below.

クロコのケン

株式会社クロコロールで主にコーディングを担当しています。 まだまだ見習いの身です…

«

»

CATEGORY

Google Photography MakeShop NEWS CSS/HTML Wordpress Amazon Yahoo!ショッピング Other