WordPress関数(相対パス)

kuoki

ここでは、WordPressにオリジナルのテーマを接続したところからCSSやJSなど相対パスの変更、画像ファイルパスの修正のやり方を書いていきます！

WordPressに接続できたのはいいがCSS、JS、画像が表示されません、、

index.phpのhead内の相対パスで記述している箇所はWordPress独自の関数に修正する必要があります。

<?php echo get_template_directory_uri(); ?>

書き方は簡単です。上記の一文を入れるだけ！

書き方の例としてはこんな感じです！


・修正前

画像1


・修正後

画像2

下線部の箇所が変更した部分になります！

修正後、WordPressで適用されます！


次に画像ファイルを同じように修正していきます。

先ほどと同じ、<?php echo get_template_directory_uri(); ?>を画像のパスに入れていきます。


・修正前

画像3


・修正後

画像4


修正後の箇所に、<?php echo get_template_directory_uri(); ?>を挿入します。

ただ画像となれば大量にあり一個一個するのはかなり時間効率が悪くなります、、、

私はVScodeを使用しているのですが、｢command｣+｢shift｣+｢L｣で選択した単語と同じ単語を一斉編集できるので、imgファイルを一斉選択し、貼り付けましょう！


最後にワードプレスで実質必須の関数であるwp_head()とwp_footer()を追加します。

<?php wp_head(); ?>
</head>
<body>
...

<?php wp_footer(); ?>
</body>
</html>

</head>タグの直前に<?php wp_head(); ?>

</body>タグの直前に<?php wp_footer(); ?>を挿入します。

関数を経由してワードプレスの基本機能やプラグイン機能のコードが出力されて使うことができるようになります！


以上、これらの手順は必須関数として忘れずに挿入しましょう！


次の記事では、静的サイトから動的サイトにする過程を紹介します！


この記事が気に入ったらサポートをしてみませんか？