wordPress header.phpに貼る固定ページへのリンク記載方法

お世話になっております。
制作中のwordPressサイト「 https://lovebuzz.tokyo/aoba/ 」の制作で行き詰まっております。

表題の通りですが、現在は「当院で働きたい方」のli aの="#"
その直下のul li a="#" ＊2にも同じリンクを貼りたいと思っています。

:::貼りたい側:::
IDは12で
固定ページのファイル名は「page-recruit.php」となります。

参考にした記事は
https://wp-exp.com/blog/id-confirmation/
https://www.sejuku.net/blog/61709

などです。

ご教示いただけますと幸いです。どうぞよろしくお願いします。

##header.php

php
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<meta content="三軒茶屋にある架空の歯科医あおばデンタルクリニックのホームページです" name="description">
7<meta property="og:title" content="あおばデンタルクリニック">
8<meta property="og:type" content="歯科医・歯医者・デンタルクリニック・デンタルケア・オーラルケア">
9<meta property="og:url" content="https://lovebuzz.tokyo/aoba_dental_clinic/">
10<meta property="og:site_name" content="あおばデンタルクリニック">
11<title><?php echo get_bloginfo(); ?></title>
12<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet">
13	
14<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/slick/slick.css" media="screen">
15<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/slick/slick-theme.css" media="screen">
16<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
17	
18
19	
20<!--slick読み込み-->
21<script src="<?php echo get_template_directory_uri(); ?>/slick/slick.js"></script>
22	
23<!--<link href="style.css" rel="stylesheet">-->
24<!--<link href="common/css/sp.css" rel="stylesheet">
25<link href="common/css/tablet.css" rel="stylesheet">-->
26<!--<link rel="stylesheet" href="slick/slick.css"/>
27<link rel="stylesheet" href="slick/slick-theme.css"/>-->
28
29<link href="https://fonts.googleapis.com/css?family=Lexend+Deca|Roboto&display=swap" rel="stylesheet">
30<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
31		<!--Font Awesome CDN-->
32<script src="https://use.fontawesome.com/fc99c6d9b6.js"></script>
33<?php wp_head(); ?>
34<link rel=”SHORTCUT ICON” href=”https://lovebuzz.tokyo/aoba/common/images/favicon.ico”>
35</head>
36
37<body <?php body_class(); ?>>
38
39	<header>
40		<div id="headerInner" class="headerContents">
41			<div id="logo" class="logosize"><a href="<?php echo home_url( '/' );?>"><img src="<?php echo get_template_directory_uri(); ?>/common/images/logo.png" alt="あおばデンタルクリニック"></a></div>
42		</div>
43		<nav>
44	<ul id="nav">
45	  <li class="layout pc"><a href="<?php echo home_url( '/' );?>"><i class="fas fa-home iconfont"></i>Home</a></li>
46	  <li class="layout"><a href="#"><i class="fas fa-comment iconfont pc"></i>ごあいさつ</a>
47	    <ul>
48	      <li><a href="#">院長ごあいさつ</a></li>
49	      <li><a href="#">クリニック紹介</a></li>
50	    </ul>
51	  </li>
52
53		<li class="layout"><a href="#"><i class="fas fa-tooth iconfont pc"></i>診療のごあんない</a>
54	    <ul>
55	      <li><a href="#">初診の方は</a></li>
56	      <li><a href="#">一般診療・予防処置について</a></li>
57	      <li><a href="#">インプラントについて</a></li>
58	            <li><a href="#">矯正治療について</a></li>
59	      <li><a href="#">お子様の矯正治療について</a></li>
60	            <li><a href="#">ホワイトニングについて</a></li>
61	      <li><a href="#">高性能レントゲンについて</a></li>
62	    </ul>
63	  </li>
64		<li class="layout"><a href="#"><i class="fas fa-map-marker-alt iconfont pc"></i>アクセス・診療時間</a>
65	    <ul>
66	      <li><a href="#">住所・電話番号</a></li>
67	      <li><a href="#">地図</a></li>
68	      <li><a href="#">診療時間</a></li>
69	    </ul>
70	  </li>
71		<li class="layout"><a href="#"><i class="fas fa-user-md iconfont pc"></i>当院で働きたい方</a>
72	    <ul>
73	      <li><a href="#">歯科医&nbsp;採用情報</a></li>
74	      <li><a href="#">歯科助手&nbsp;採用情報</a></li>
75
76	    </ul>
77	  </li>
78	</ul>
79		</nav>
80	</header>
81
82</body>
83	<script>
84//スライドショーslickのカスタマイズ	
85$(function(){
86
87$('.slider').slick({
88autoplay: true,
89autoplaySpeed: 5000,
90	cssEase: "ease-in-out"
91});
92
93});
94
95//spとtabletのアコーディオンメニュー  
96$(function(){
97   $('.layout').click(function(){
98     //console.log("クリックされました！");
99     var windowWidth = $(window).width();
100
101if(windowWidth<960){
102      // console.log(windowWidth<960);
103//クリックされた.accordion2の中のp要素に隣接する.accordion2の中の.innerを開いたり閉じたりする。
104         $(this).children('ul').slideToggle(400, infoDown);
105//クリックされた.accordion2の中のp要素以外の.accordion2の中のp要素に隣接する.accordion2の中の.innerを閉じる
106         $('.layout').not($(this)).children('ul').slideUp();
107         function infoDown(){
108         var navHeight = $("#nav").height();
109         //console.log(navHeight);
110         var menuMarginTop = navHeight;
111         $("#information").css("margin-top",menuMarginTop);
112         }
113    }
114   });
115 //ヘッダーロゴをロード後 5秒後に表示させるjQuery
116  $(function(){
117    setTimeout(function(){
118        $("#logo").stop().animate({opacity:'1'},100);
119    },500);
120});
121 //h1をロード後 10秒後に表示させるjQuery	
122	  $(function(){
123    $("h1").css({opacity:'0'});
124    setTimeout(function(){
125        $("h1").stop().animate({opacity:'1'},100);
126    },1000);
127});
128//h1_styleをロード後 14秒後に表示させるjQuery	
129		  $(function(){
130    $(".h1_style").css({opacity:'0'});
131    setTimeout(function(){
132        $(".h1_style").stop().animate({opacity:'1'},100);
133    },1400);
134});
135  
136 
137 //ヘッダーインナー高さを100px下にスクロール後小さくするjQuery
138  $(function() {
139  var $win = $(window),
140      $header = $('.headerContents'),
141      animationClass = 'hI-animation';
142
143  $win.on('load scroll', function() {
144    var value = $(this).scrollTop();
145    if ( value > 100 ) {
146      $header.addClass(animationClass);
147    } else {
148      $header.removeClass(animationClass);
149    }
150  });
151});
152	
153	 //ヘッダーロゴを1スクロールした後小さくするjQuery
154	
155$(function(){
156   $(window).scroll(function(){
157      var scr = $(window).scrollTop();
158      if(scr > 1){
159         $('#logo').addClass('mini');
160      }else{
161         $('#logo').removeClass('mini');
162     }
163   })
164})
165	
166
167 
168 //診療メニューが可視範囲に入ったら上からアニメーションしながら落ちてくるjQuery
169	$(function(){
170    $(window).scroll(function (){
171        $('.imgbox li').each(function(){
172            var position = $(this).offset().top;
173            var scroll = $(window).scrollTop();
174            var windowHeight = $(window).height();
175            if (scroll > position - windowHeight + 200){
176              $(this).addClass('active');
177            }
178        });
179    });
180});
181
182
183			//フッターのContact2を810pxスクロールした後表示させるjQuery
184 $(function(){
185  $("document").ready(function(){
186         var  scroll = $(window).scrollTop();
187          if (scroll > 810){
188              $(this).addClass('scrollin');
189          }
190  });
191  $(window).scroll(function (){
192    $('#contact2').each(function(){
193        var  scroll = $(window).scrollTop();
194          if (scroll > 810){
195              $(this).addClass('scrollin');
196            }else{
197              $(this).removeClass('scrollin');
198            }
199        });
200    });
201});
202});
203		</script>
204</html>
205

tabuu

2021/06/22 23:36

固定ページのslugが「recruit」と固定するのであれば以下のようにハードコーディングでもいいかと思います。 <a href="/recruit/">当院で働きたい方<a>

ema-material

2021/06/23 00:07

ありがとうございます。ハードコーディングという言葉を初めて知りました。そのまま打ってしまうとディレクトリが違うので、404になってしまいました。こういうこともあろうかと思い、固定ページのパーマリンク取得方法で行うことにしました。

行動規範の内容に同意します

回答1件

ベストアンサー

固定ページのID を指定して、固定ページのパーマリンクを取得したいということなら get_page_link で取得できませんか？

上記ドキュメントの例にある

<a href="<?php echo get_page_link( 40 ); ?>">Map</a>

のような感じで...

投稿2021/06/22 22:12

CHERRY

総合スコア25218

ema-material

2021/06/23 00:04

ありがとうございます！できました。 IDの前に$を残したままにしていたのが原因でした。大変失礼しました。勉強させていただきました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

wordPress header.phpに貼る固定ページへのリンク記載方法

関連した質問