静的HTMLからwordpress化の作業で index.phpからpage.phpが読み込まれない（404エラー表示する）問題について

表題についてです。

それぞれで、別のcssを読み込みたくて、
index.phpは同じ階層にあるstyle.cssを、
固定ページとしてお問い合わせフォームがあるpage.phpには、cssフォルダ内のcontact-form.cssを読み込もうとしています。

しかし、色々触ってみても、「お問い合わせはこちら」のボタンを押しても、
「404 Not Found」とエラー表示が出るだけです。

一体どこが間違っているのでしょうか。
ご教授いただけますと幸いです。

以下、index.phpのコードになります。

  <?php get_header() ?>

  <section class="firstview bg-slider">
    <h1 class="top-title01">テクノロジーの力で<br>社会に新たな価値を</h1>
    <a href="#" class="scroll"><span></span></a>   
  </section>
  
  <section class="section contact fadein" id="contact">
    <h2 class="heading bg-dark">Contact</h2>
    <p class="sub-heading bg-dark">お問い合わせ</p>
    <p class="contact-text">弊社では、ビジネスパートナー様との協業を積極的に行っております。</p>
    <a href="<?php echo home_url('/page.php'); ?>" class="contact-button">お問い合わせはこちら</a>
  </section>  
  
  <?php get_footer() ?>

以下がheader.phpになります。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

 <!-- stylesheetの読み込み -->
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/normalize.css">
<!-- style.css -->
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<!-- contact-form.css -->
  <?php if ( is_page() ): ?>
<link rel="stylesheet" href="/css/contact-form.css" />
<?php endif; ?>

  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/responsive.css">

  <!-- Faviconの読み込み -->
  <link rel="icon" type="image/x-icon" href="image/favicon.ico">
  <link rel="apple-touch-icon" sizes="180x180" href="image/apple-touch-icon.png">
  <!-- FontAwesomeの読み込み-->
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <!-- Google Fontの読み込み-->
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap" rel="stylesheet">
  <!-- jQueryの読み込み-->
  <script src="<?php echo get_template_directory_uri(); ?>/jquery/jquery-3.4.1.min.js"></script>
  <title><?php bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
  <header class="header">
    <div class="header-innaer">
      <a href="#top"><img src="<?php echo get_template_directory_uri(); ?>/image/logo-mark.png" alt="Technologies" class="logo"></a>
      <ul class="nav">
        <li class="nav-item"><a href="#company">私たちについて</a></li>
        <li class="nav-item"><a href="#service">事業内容</a></li>
        <li class="nav-item"><a href="#news">お知らせ</a></li>
        <li class="nav-item"><a href="#contact">お問い合わせ</a></li>
        <li class="nav-item"><a href="#info">会社概要</a></li>
      </ul>
    </div>
  </header>

そして、こちらがpage.phpのコードです。


  <?php get_header() ?>

  <section class="info-wrapper">
    <div class="contents"></div>
  </section>

  <?php get_footer() ?>

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

回答1件

ベストアンサー

URLでpage.phpに直接アクセスするというのは普通の使い方ではありません。
page.phpとは、固定ページを表示するためのものです。
テンプレート階層

素直に固定ページを管理画面で作成し、そのURLにアクセスすれば表示されると思います。
また、その時にindex.phpのpage.phpへのURLを作成した、固定ページのURLに変更してください。

(本当にpage.phpに直接アクセスさせたいなら、使用しているテーマまでのURLを使用する必要があります。
home_urlではなく、get_template_directory_uriを使用しましょう。ただ、今回の場合、page.phpにget_headerを使っていることからもWordPressを通してpage.phpを表示したいのだと思います。)

投稿2020/05/18 11:17