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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

907閲覧

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

aizen66

総合スコア7

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/05/20 19:13

表題についてなんですが、トップページ(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にきちんとリンクできています。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

PHP

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

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

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

(ページタイトルは仮に「ニュース」、スラッグは「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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問