WordPress 学習③ style.cssへのリンクパスを通す

スポンサーリンク

当ブログではアフィリエイト広告を利用して商品を紹介しています。

WordPress

どうも、にわじゅん(@niwajun_blog)です。

今回は、index.phpファイルへstyle.cssのリンクパスを通します。

WordPress内にあるファイル間のリンクパスは、ディレクトリ階層を取得できるテンプレートタグがあるので、それを使って通します。

その前に試しに、index.phpの<head>内にstyle.cssへのリンクを画像の様に通して、文字サイズを60pxに指定してみます。

この様なパスだとWordPress内ではリンクが途切れてしまうので、画像のように文字サイズのスタイルが反映されてません。

スポンサーリンク

テンプレートタグ get_template_directory_uri(); を使ってパスを通す

では、テンプレートタグ get_template_uri(); を使ってパスを通します。

このテンプレートタグは、WordPress内のディレクトリ構造の情報を取得します。構造の情報を取得するってちょっと分かりにくいですよね。。。

変換してみるとこんな感じです。
get_template_directory_uri();
     ↓
http://myblog.local/wp-content/themes/mytheme

今使っているテーマのフォルダまでのファイル構成を知る事が出来るんです。情報が取得できたので実際に使ってみます。

href=” “の部分を『style.css』『<?php echo get_template_directory_uri(); ?>/style.css』へと変更しました。

echoというのはphp言語で、『表示する』機能があるので、

『echo』 『get_template_directory_uri();』
『取得したディレクトリ構造』を『表示』する

となるので、

となり。パスを通す事ができるようになったのでブラウザで確認してみます。

sytle.cssに記述したフォントサイズ:60pxが反映されて文字が大きくなりましたね。

WordPressのファイル間リンクパスは以上の方法でできるので、他にも画像ファイルやJavaScriptファイルなどのリンクを通す時にも使えます。

今回はここまでです。

WordPressプログラミング
スポンサーリンク
スポンサーリンク
シェアする
にわじゅんをフォローする
にわじゅん公式ブログ

コメント

タイトルとURLをコピーしました