003：外部ファイルのURLを関数で取得
WordPressでサイトを構築する際の注意
WordPressはテンプレートファイルを使って各ページを生成します。
テンプレートファイルがどんなURLで使用されるかわからない為、テンプレートファイル内で画像やCSSなど外部ファイルを読み込む際は絶対パスで指定します。
例）固定ページ用テンプレート「page.php」が使用される場面
会社案内総合ページ：https://jobtech.jp/company/
会社案内事業ページ：https://jobtech.jp/company/it/
関数を使って絶対パスを取得
WordPressサイトの作成時はテスト環境で作成した後、本番環境へ移行することが多いため絶対パスが環境によって変わってしまいます。
絶対パスの「http://localhost/」や「https://jobtech.jp/」部分は直書きせず、関数を使って取得します。
<?php echo get_theme_file_uri(‘/テーマフォルダからのパス’) ?>
使用例：
<img src="<?php echo get_theme_file_uri('/img/logo.png'); ?>" alt="ロゴ">
CSSファイル内は相対パスでOK
テーマ内のCSSファイルは常に同じ位置にあるため、CSSファイルからテーマフォルダ内の画像等（外部ファイル）を読み込む場合は相対パスで構いません。
使用例：
.hero .inner {
background-image: url(../img/hero_text.png);
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
外部ファイルのURLを絶対パスに修正
よく使う処理はWordPress関数としてあらかじめ用意してあります。
特にファイルパスに関する記述はWordPress関数を使うことでテスト環境から本番環境へ移行しやすくなります。
サーバ名「http://localhost/」を直に記述しないようにしましょう。
外部ファイルのURLを絶対パスに変換する主な関数は以下です。
テーマCSS読み込み
get_stylesheet_uri()
テーマフォルダ内「style.css」までのURLを返します。「echo」で出力することを忘れずに！
headタグ内でテーマフォルダ内の「style.css」を読み込みます。
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
外部ファイル読み込みを絶対パスに変更
get_theme_file_uri(‘/テーマフォルダからのパス’)
現在使用しているテーマフォルダまでのURLに引数のパスを追加した文字列を返します。「echo」で出力することを忘れずに！ 例）「テーマフォルダ > img > logo.png」を表示
<img src="<?php echo get_theme_file_uri('/img/logo.png'); ?>" alt="ロゴ">
テンプレート修正
コピペ用関数
<?php echo get_stylesheet_uri(); ?>
<?php echo get_theme_file_uri('/img/logo.png'); ?>/
このページで出てくる関数
テンプレートに直に記述していた内容を関数で取得・表示しています。
特にファイルパス部分が関数に置き換わっていることを確認しましょう。
WordPress関数は「公式サイトのドキュメント」で確認しましょう。
WordPress関数
