静的HTMLのWordpress化において、トップページ(front-page.php)から記事一覧ページ(index.php)へのリンクがエラーになる問題について

表題についてなんですが、トップページ（front-page.php）のニュース欄において、
「一覧を見る」のボタンを押すと、記事一覧ページとして作ったindex.phpにリンクを飛ばしたいのですが、
真っ白なページしか表示されません。
テンプレートタグが間違っているのか、その他の読み込みが間違っているのか、
色々試してみましたが、直りませんでした。

フォルダ階層は以下のとおりです。
・front-page.php
・index.php
・header.php
・footer.php
・page.php
・single.php
・style.css
・cssフォルダ

以下が、front-page.php（トップページ）のコードになります。

front
1  <?php get_header() ?>
2  
3  <section class="section news" id="news">
4    <h2 class="heading bg-light fadein">Information</h2>
5    <p class="sub-heading bg-light fadein">お知らせ</p>
6    
7    <main class="news-wrapper">
8      <?php
9      if ( have_posts() ) : while ( have_posts() ) : the_post();
10      ?>
11      
12      <a class="article" href="<?php the_permalink(); ?>">
13        <div class="news-info">
14          <div class="article-component category">NEWS</div>
15          <p class="article-component date"><?php the_time( 'Y年m月d日' ); ?></p>
16        </div>
17        <p class="article-component article-text"><?php the_title(); ?></p>
18        <div class="arrow"></div>
19      </a>
20
21    <?php
22      endwhile;
23      endif;
24      ?>
25    </main>
26
27     <a href="<?php echo get_template_directory_uri(); ?>/index.php" class="news-button fadein">一覧を見る</a>
28  </section>
29
30  <section class="section contact fadein" id="contact">
31    <h2 class="heading bg-dark">Contact</h2>
32    <p class="sub-heading bg-dark">お問い合わせ</p>
33    <p class="contact-text">弊社では、ビジネスパートナー様との協業を積極的に行っております。弊社へのお問い合わせは、以下の「お問い合わせ」フォームをご利用ください。</p>
34    <a href="<?php echo home_url('/contact'); ?>" class="contact-button">お問い合わせはこちら</a>
35  </section>  
36
37  <?php get_footer() ?>
38

以下は、index.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">
<!--  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/normalize.css">-->
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/news-lists.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/news-lists-res.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="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/image/logo-mark.png" alt="Scyna Technologies" class="logo"></a>
  </header>

    
    <main class="news-wrapper">
      <?php
      if ( have_posts() ) : while ( have_posts() ) : the_post();
      ?>
      
      <a class="article" href="<?php the_permalink(); ?>">
        <div class="news-info">
          <div class="article-component category">NEWS</div>
          <p class="article-component date"><?php the_time( 'Y年m月d日' ); ?></p>
        </div>
        <p class="article-component article-text"><?php the_title(); ?></p>
        <div class="arrow"></div>
      </a>

    <?php
      endwhile;
      endif;
      ?>
    </main>


  <?php get_footer() ?>

なお、ワードプレス上に、postsという名前の固定ページを作って、以下の記述で読み込みを試みても結果は同じでした。

<a href="<?php echo get_template_directory_uri(/posts); ?>" class="news-button fadein">一覧を見る</a>

※ちなみに、「お問い合わせ」ボタンからは、お問い合わせフォームのあるpage.phpにきちんとリンクできています。

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

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

回答1件

ベストアンサー

PHP
1<a href="<?php echo get_template_directory_uri(); ?>/index.php" class="news-button fadein">一覧を見る</a>

上記、間違いです。テンプレートファイル (PHP) にリンクを貼っても、正常に動作しません。

管理画面から、固定ページを作る

(ページタイトルは仮に「ニュース」、スラッグは「news」とします。)
2. 管理画面「設定 > 表示設定」にて、「投稿ページ」を1.で作成した固定ページ「ニュース」にする

3. <a>でのリンクを以下のように修正
<a href="<?php echo home_url(); ?>/news/" class="news-button fadein">一覧を見る</a>

投稿2020/05/20 22:06

編集2020/05/20 22:07

new1ro

総合スコア4528

aizen66

2020/05/21 05:40

上記のように修正したら、今度はトップページ自体が表示されなくなって、表示されているのは、レイアウトの崩れた記事一覧ページです。。どこが間違っているのでしょうか、、ちなみに固定ページで新しく作成した「ニュース」には何も入れてないです。また、上記の管理画面の固定ページ→ホームページのボックスには、何も指定していません。（front-page.phpが自然とトップページに表示されていたので、固定ページは作っていないです。）

new1ro

2020/05/21 05:47 編集

「ホームページ」のほうも、同様に固定ページを作って設定してみてください。

aizen66

2020/05/21 05:59

ホームページも同様に固定ページを作って設定したところ、「一覧を見る」ボタンを押すと、記事一覧ページに飛ばせるようになりました。しかし今度は、トップページのニュース項目に、先ほどつくったホームページの固定ページの内容が表示されてしまい、もともと投稿しているニュース（3件）が表示されなくなってしまいました。。

new1ro

2020/05/21 06:12

記事一覧の書き方に問題がある気がします。 (普通の書き方だと固定ページは出てこないはずなので) こちらを参考に、「WP_Query」を用いて、post_typeが「post」の記事を3件表示という記述を追加する必要があります。 https://wemo.tech/160

aizen66

2020/05/21 06:20

ありがとうございます！サイトを参考に試してみます！

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