WordPress テンプレートタグ設定について

Question

ワードプレス初心者です。
現在ローカルで作業しており、画像や目次のリンクはローカルのパスをファイルに直書き（href="http://localhost:8080/btp01/page/2/#b"）している状態であったため、テンプレートファイルを用意しタグ埋め込みしているのですが、うまくいきません。
（サイトは固定ページに１投稿で記事を書き、<!--nextpage-->で複数ページに切り分けています。）

【問題点】
・目次/画像のURLが正しいパスで生成されない
・サイト全体にｃｓｓがあたらなくなってしまった。

【対応したこと】
テンプレートファイル「koteipage.php」を用意し、固定ページに投稿した内容をコピペし、リンクをphpのテンプレートタグへ書き換え。
保存場所：htdocs\btp01フォルダ内

koteipage.phpの記載内容

<?php
/*
Template Name: 固定ページのテンプレート作成
*/
?>
/*CSS設定*/
<link rel="stylesheet" href="<?php echo home_url(); ?>/wp-content/themes/cocoon-master/styles.css">

/*↓画像*/
<a href="<?php echo home_url(); ?>/images/takebeIMGL3609_TP_V.jpg">
<img class="aligncenter size-full wp-image-89" src="<?php echo home_url(); ?>/images/takebeIMGL3609_TP_V.jpg" alt="" width="1024" height="706" />
</a>

/*↓目次*/
<nav>
<div id="toc" class="toc tnt-number-detail toc-center border-element">
<div class="toc-title">もくじ</div>
<ul class="index">
<li class="index"><a class="anchor" href="<?php echo home_url(); ?>/page/2/#b">　　1-2 鳥居のくぐり方</a></li>

生成されるパスはこちらです。

本来生成したいパスはこちら。

http://localhost:8080/btp01/page/2/#b

画像に関しても、下記コードから（koteipage.phpの記載内容より抜粋）
表示がされなくなってしまいました。

Answer 1

<<?php echo ⇒ <?php echo

get_template_directory_uri は出力されたHTMLから何が出力されたか確認してみてください。

【get_template_directory_uri() | Function | WordPress Developer Resources】
https://developer.wordpress.org/reference/functions/get_template_directory_uri/

【WordPressのディレクトリやURLを取得する関数まとめ | テクニカルノート】
https://accelboon.com/tn/wordpressのディレクトリやurlを取得する関数まとめ/

Comments

[manmaru]

ご返信ありがとうございます。
まず<が多すぎた点、修正しました。
するとcssも崩れてしまいました。

なるほど、出力されたhtmlのパスは
http://localhost:8080/btp01/<?php echo get_page_link( $b );?>/page/2
となっていました。
http://localhost:8080/btp01/page/2/#b
と出力をさせたいので、私のタグの埋め込み方が間違っているのでしょうね。。

いただいたサイトも基に勉強致します。
（質問内容を最新の画面キャプチャに差し替えをしておきます。）

[kei344]

もしかしてテンプレートではなく記事本文エリアに書いていますか？

[kei344]

そうだとしたら本文エリアはPHPが解釈されないため、テンプレートタグは無視されます。

[manmaru]

えええ！？はい、その通りです。。

ワードプレスの管理画面上で固定ページの投稿をひらき、そこに直書きしています。
htdocs内のフォルダの中に固定ページ内の記述するファイルがなく、DB上に記録されているものと解釈し、方法は管理画面から直書きしかないんだなと思っておりました。。
念のため画像を追加させて頂きます。

[kei344]

固定ページごとに別のテンプレートを用意することも出来ます。WordPressのテンプレートシステムについてはコメントで説明するのが難しいので、入門書などを確認してみてください。（WP5以降の内容が載っている比較的新しい物を探すことがお勧めです）

[manmaru]

そうなのですね。。
ありがとうございます、書き方が間違っているとばかり思いそればかり検索していましたので、ご指摘いただけてとても助かりました。
テンプレートシステムについて勉強いたします。

[manmaru]

kei344様
サイトは固定ページ１投稿内で<!--nextpage-->タグを埋めて、複数ページに切り分ける形で制作しています。

koteipage.phpというファイルを使用しているテーマフォルダ内（wp-content>themes>cocoon-child-masterフォルダ内）に保存し、
管理画面＞固定ページ一覧＞ページ属性より、上記テンプレートを選択できるようにしました。

ただ、このテンプレート内への記述の仕方のところで躓いております。。
質問内容に画面キャプチャ、コードと共に追記をさせていただきます。
もしも何か思いつくことがあれば、ご指摘頂けますと幸いです。

[kei344]

そのエリア内にPHPコードを入れても実行されないので、できません。WordPressのテンプレートシステムについてはコメントで説明するのが難しいので、入門書などを確認してみてください。（WP5以降の内容が載っている比較的新しい物を探すことがお勧めです）

[manmaru]

更新した質問内容のやり方のままで、うまくいきました。
テンプレートタグを<?php echo home_url(); ?>にするべきところを、get_template_directory_uri()としていたところが問題でした。

的確なアドバイスいただきとても助かりました。
どうもありがとうございました。