WordPressのオリジナルテーマに使用する画像やCSSを読み込む

テーマフォルダから画像を読み込む時は相対パスで

<img src="img/img_about.webp" alt="" class="sample_img">

こういった記述をしていると思います。

WordPressでテーマ化する時は相対パスの前にワードプレスのテンプレートフォルダに該当する箇所からのパスに変更しないといけません。

なので

<img src="<?php echo get_template_directory_uri(); ?>/img/img_about.webp" alt="" class="sample_img">

このような記述を追加することで相対的に各素材を使用する事ができるようになります。

htmlからWordPressへと作り直す時には相対パスになるところに

<?php echo get_template_directory_uri(); ?>

を追加すればOKです。

CSSに関しては

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

というスタイルシートの場所を指し示す専用のWPタグがあるので、そちらを使用してください。

ただし、リセットCSSや個別にCSSを設定する場合などはget_template_directory_uriで記述して問題ないかと思います。

JSファイルの読み込みも同様にget_template_directory_uriで大丈夫かと。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css">
<script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>

もしかしたら細かい部分でこだわった方がいいのかもですが、今まで挙動で問題はありませんでした。