ある程度Web制作にも慣れてきて、WordPressテーマを自作したい！と思って試したことがあることがある方は、一度はぶつかったことがあるのではないでしょうか？
クリブロCSSが反映しない、、！
それどころか画像やリンクまで。。なんで、、？
HTML/CSSの学習が終わって、WordPressの制作に取りかかる方は一度はハマる落とし穴だと思います。
でもこの記事を読めば、PHP分からなくても大丈夫！ささっと読んで理解できちゃいます。
そのまま使える頻出コードも後でご紹介するのでぜひご活用ください！
表示されない理由は、ルートパスが変わるから。
WordPress制作の際、こんな経験はないでしょうか。
- 画像が表示されない
- リンクが飛ばない
- CSSが効かない
その理由はズバリ【ルートパス】が変更されるためでした。
HTMLで作った静的ページで制作したサイトは、WordPress化すると階層が色々と変わってしまうのでそのままのコードでは問題が生じます。
クリブロ良く考えればそうだよなぁ。
冷静に考えたら難しいことはないね！
次からはコピペで簡単に解決できるコードをご紹介いたします。
コードの紹介【コピペで簡単に解決！】
WordPressはHTML（静的サイト）と階層が異なるので、テーマがある階層（index.phpやstyle.cssがある階層）までのURLを取得する必要があります。
<?php echo get_template_directory_uri() ?>
このコードが↓のようにHTMLで表示されます
http://example.com/wp-content/themes/有効化しているテーマ名<?php echo home_url("/"); ?>
このコードが↓のようにHTMLで表示されます
http://example.com/wp-content/themes/有効化しているテーマ名/トップページ/基本的にはこの2つをまずは押さえておきましょう！
このコードはWordPressを制作する時に、めちゃめちゃ使うコードなので、コピペしてすぐに引き出せるようにメモすることをおすすめします。
実践編
では、実際に使うシーンを想定して実践的なコードを3つを書き留めておきます。
しつこいようですが、こちらもめちゃめちゃ使うコードなので慣れるまでは自分でメモしたり、この記事をお気に入り登録したりすると制作スピードUPできると思います。
画像を表示させるコード
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png">こんな感じで、自分がHTMLで書いたimgタグのsrcに先ほどのコードを添える形で記載すればOKです。
phpが分からなくてもコピペで貼り付けて終わりです。
リンクを飛ばすコード
<a href="<?php echo home_url( '/' ); ?>">トップに行くよ</a><a href="<?php echo home_url( '/contact/' ); ?>">お問い合わせ</a>
飛ばしたいページのスラッグ（ファイル名）を記載上記のようにトップページの時は( ‘ / ‘ )で、
他のページの時は( ‘ / スラッグ/’ )で簡単に書けちゃいます。
CSSを読み込むコード
CSSはHTML（静的ページ）で書くと<head>の中に<link>で記載してますが、WordPressではちょっと特殊な書き方をします。
上記で紹介したコードを利用して書くことももちろんできるのですが、一般的にfunctions.phpというテンプレートに書いて読み込んでいます。
functions.phpって何だえ〜？分からんよ〜？
って方はまずは下記のコードを利用して読み込んでみましょう！
ポイントは画像<img>の時と同じように、元々のパスに添える形でphpコードを書き込んでみてください。
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/example.css">そして一般的な読み込みの方法で実装したいぞ！！
って方は次の記事で詳しくご紹介していますので是非チェックしてみてください。
まとめ
今回はWordPress化した際に【ルートパスを書き換える方法】を書き留めました！
最初はつまづくことも多いですが、慣れてしまえば難しいことはありません。
いろいろなパターンを見てもらいつつ、実際にコピペで使えるコードや実践方法もご紹介したので、ぜひ参考になればと思います！
また他にもためになる情報や実際のコードを紹介して、初めての方でもわかりやすいようにお伝えしていければと思っておりますので、ぜひ今後の記事もチェックしてみてください！
最後まで読んでいただきありがとうございました。
コメント