今現在ウェブサイトを作成しています。
サイトを自分で作るため、コーディングをしてます。
固定ページを久しぶりに開くと真っ白の画面で、入力した文字が表示されなくなっていました。
テーマを変えると表示されましたので、テーマに問題があったのだと思います。
下記がコードです。
ヘッダー
<!DOCTYPE html>
<?php
/*
template Name:トップページ
*/
?>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="keywords" content="共通キーワード" />
<meta name="description" content="共通ディスクリプション" />
<title>Engress</title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/css/styles.css" />
<?php wp_head(); ?>
</head>
<body class="body">
<header class="header">
<div class="header-container">
<div class="header-wrapper">
<div class="header-logo">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo_01.png"/>
</div>
<nav class="header-nav">
<ul class="header-nav-list">
<li class="header-nav-item"><a class="header-nav-item-second header-nav-item-first"href="<?php bloginfo('url') ;?>/news">ホーム</a></li>
<li class="header-nav-item"><a class="header-nav-item-third header-nav-item-first" href="<?php bloginfo('url') ;?>/news">お知らせ</a></li>
<li class="header-nav-item"><a class="header-nav-item-fourth header-nav-item-first" href="<?php bloginfo('url') ;?>/news">ブログ</a></li>
<li class="header-nav-item"><a class="header-nav-item-fifth header-nav-item-first" href="<?php bloginfo('url') ;?>/price">コース・料金</a></li>
</ul>
</nav>
</div>
<div class="header-wrapper-second">
<div class="header-outer">
<p class="header-time">平日08:00〜20:00</p>
<div class="header-content">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/header_tel.png" class="main-logo" alt="Engress"/>
<div class="telephone-number">0123-456-7890</div>
</div>
</div>
<div class="header-outer-second">
<div class="header-content-second">
<div class="header-btn-outer">
<a href="#" class="header-btn" style="text-decoration: none;" href="<?php bloginfo('url') ;?>"><p class="header-btn-name">資料請求</p></a>
</div>
<div class="header-btn-outer-second">
<a href="#" class="header-btn-second" style="text-decoration: none;" href="<?php bloginfo('url') ;?>/contact"><p class="header-btn-name">お問い合わせ</p></a>
</div>
</div>
</div>
<div class="header-burger-btn">
<div class="bars bar_top"></div>
<div class="bars bar_mid"></div>
<div class="bars bar_bottom"></div>
</div>
</div>
</div>
<?php wp_head(); ?>
</header>
ページ
<?php get_header(); ?>
<section class="Fv-section">
<div class="Fv">
<div class="Fv-img">
<div class="Fv-img-container">
<div class="Fv-title-wrapper">
<h2 class="Fv-title">TOEFL対策はEngress</h2>
</div>
<div class="Fv-title-wrapper-second">
<p class="Fv-txt-wrapper">日本へのTOEFL指導歴豊かな講師陣の<br>
コーチング型TOEFLスクール
</p>
</div>
<div class="Fv-outer">
<a href="#" style="text-decoration: none;">
<div class="Fv-outer-btn"><p>資料請求</p></div>
</a>
</div>
<div class="contact-link-second">
<a class="contact-link" href="#">
<p class="contact-link-second">お問い合わせ</p>
</a>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="section">
<div class="section-container">
<div class="section-container-title">
<h2 class="section-container-txt">TOEFL学習で<br class="paragraph">こんな悩みありませんか?</h2>
</div>
<div class="section-wrapper">
<ul class="section-list">
<li class="section-item section-txt-first">
<p class="font-size">勉強の習慣が<br class="paragraph-second">身についていない</p>
</li>
<li class="section-item section-txt-second">
<p class="font-size">勉強しているはず<br class="paragraph-second">なのに点数が伸びない</p>
</li>
<li class="section-item section-txt-third">
<p class="font-size">正しい勉強方法が<br class="paragraph-second">わからない</p>
</li>
</ul>
</div>
<div class="section-wrapper-second">
<div class="section-outer-second">
<div class="section-content">
<div class="section-inner">
<div class="section-inner-second">
<div class="section-area-second">
<p class="section-inner-title">Engressは<br class="paragraph-tenth-second">
<span class="section-inner-line">TOEFLに特化した<br class="paragraph-tenth">スクール</span>です
</p>
</div>
<div class="section-area-third">
<p class="section-inner-txt-second section-inner-txt">完全オーダーメイドで、<br class="paragraph-third">一人一人の悩みに合わせた最適な指導で<br>
TOEFLの苦手分野を克服します。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="article">
<div class="article-container">
<div class="article-wrapper">
<div>
<h2 class="article-title">TOEFL対策に特化した<br class="paragraph-eleventh">Engress3つの強み</h2>
</div>
<div class="article-content">
<div class="article-inner-second article-inner">
<div class="article-area-fourth">
<div class="article-section">
<p class="article-item">特徴1</p></div>
<div class="article-item-second">
<p class="article-area-txt">TOEFLに最適化された<br>無駄のないカリキュラム</p>
</div>
<div class="article-item-third">
<p class="article-area-fifth">
TOEFLではビジネス英語には登場しない数多くの学術<br class="paragraph-fourth">的内容が出題さ<br class="paragraph-fifth">れます。そのため、ベースとなる知識<br class="paragraph-sixth">も必要になります。Engressでは過去1000題を<br class="paragraph-seventh">分析し、最適なカリキュラムを組んでいます。
</p>
</div>
</div>
<div class="article-group">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/main_img01.png" class="main-logo" alt="Engress" />
</div>
</div>
<div class="article-inner-third article-inner">
<div class="article-group">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/main_img02.png" class="main-logo" alt="Engress" />
</div>
<div class="article-area-fourth article-area-sixth">
<div class="article-section">
<p class="article-item">特徴2</p>
</div>
<div class="article-item-second">
<p class="article-area">日本人指導歴10年以上の<br>経験豊富な講師陣</p>
</div>
<div class="article-item-fifth">
<p class="article-area-fifth">
Engressの講師陣は、もともと日本人向けにTOEFL<br class="paragraph-fourth">を教えていた人が大多数です。また全メンバーが<br class="paragraph-sixth">TOSOL(英語教授法)を取得しており、知識と経験を<br class="paragraph-seventh">兼ね備えている教育のプロフェッショナルです。<br>
</p>
</div>
</div>
</div>
<div class="article-inner-fourth article-inner">
<div class="article-area-fourth">
<div class="article-section">
<p class="article-item">特徴3</p>
</div>
<div class="article-item-fourth">
<p class="article-area-third">平均3ヶ月でTOEFLiBT20点<br class="paragraph-eighth">アップ</p>
</div>
<div class="article-item-third">
<p class="article-area-second">
Engressは高校生からサラリーマンまで様々な年齢層<br class="paragraph-fourth">の方々が通われていますが、完全オーダーメイドの<br class="paragraph-sixth">カリキュラムで柔軟に対応しているため、平均3ヶ月で<br class="paragraph-seventh">TOEFLスコアを20点アップさせています。
</p>
</div>
</div>
<div class="article-group ">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/main_img03.png" class="main-logo" alt="Engress" />
</div>
</div>
</div>
</div>
</div>
<div class="article-caption">
<div class="article-caption-container">
<div class="article-caption-title">
<h3 class="article-caption-nav">Engressの料金プランはこちら</h3>
</div>
<div class="article-caption-inner">
<a class="article-caption-area" href="#" style="text-decoration: none;">
<p>料金を見てみる</p>
</a>
</div>
</div>
</div>
</section>
<section>
<div class="list-wrapper">
<div class="list-outer">
<h2 class="list-title">TOEPL成功事例</h2>
</div>
<div class="list-outer-second">
<div class="list-content">
<div class="list-inner">
<div class="list-area">
<div class="list-area-title">
<p class="area-txt">TOEFLiBT100点を突破してコロンビア大学大学院に進学できました!</p>
</div>
<div class="list-img">
<div class="person-img">
<?php if (get_field('test-image')) : ?>
<img class="test-image" src="<?php the_field('test-image'); ?>" />
<?php endif; ?>
</div>
</div>
<div class="list-area-txt">
<div class="txt-item">
<p class="txt-item-area"><?php echo get_post_meta($post->ID, 'bunn', true); ?></p>
</div>
<div class="txt-item-second">
<p class="txt-item-area-second"><?php echo get_post_meta($post->ID, 'bunn2', true); ?></p>
</div>
</div>
<div class="txt-item-third">
<p class="txt-item-area-third"><?php echo get_post_meta($post->ID, 'bunn3', true); ?></p>
</div>
</div>
</div>
</div>
<div class="list-content">
<div class="list-inner">
<div class="list-area">
<div class="list-area-title">
<p class="area-txt">半年でTOEFL40点→100点を達成!コロンビア大学大学院に合格</p>
</div>
<div class="list-img">
<div class="person-img">
<?php if (get_field('test-image2')) : ?>
<img class="test-image" src="<?php the_field('test-image2'); ?>" />
<?php endif; ?>
</div>
</div>
<div class="list-area-txt">
<div class="txt-item">
<p class="txt-item-area"><?php echo get_post_meta($post->ID, 'bunn4', true); ?></p>
</div>
<div class="txt-item-second">
<p class="txt-item-area-second"><?php echo get_post_meta($post->ID, 'bunn5', true); ?></p>
</div>
</div>
<div class="txt-item-third">
<p class="txt-item-area-third"><?php echo get_post_meta($post->ID, 'bunn6', true); ?></p>
</div>
</div>
</div>
</div>
<div class="list-content">
<div class="list-inner">
<div class="list-area">
<div class="list-area-title">
<p class="area-txt-second">早稲田大学国際教育学部AO入試合格!TOEFLiBT109点</p>
</div>
<div class="list-img">
<div class="person-img">
<?php if (get_field('test-image3')) : ?>
<img class="test-image" src="<?php the_field('test-image3'); ?>" />
<?php endif; ?>
</div>
</div>
<div class="list-area-txt">
<div class="txt-item">
<p class="txt-item-area"><?php echo get_post_meta($post->ID, 'bunn7', true); ?></p>
</div>
<div class="txt-item-second">
<p class="txt-item-area-second"><?php echo get_post_meta($post->ID, 'bunn8', true); ?></p>
</div>
</div>
<div class="txt-item-third">
<p class="txt-item-area-third"><?php echo get_post_meta($post->ID, 'bunn9', true); ?></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container-info">
<div class="info-title-area">
<h1 class="info-title">ご利用の流れ</h1>
</div>
<div class="info-wrapper-second">
<div class="info-wrapper">
<div class="info-outer">
<dt class="info-list">01</dt>
<div class="info-content">
<div class="info-title-area-second">
<dd class="info-title-second">お問い合わせ</dd>
</div>
<div class="info-inner">
<dd class="info-txt"><span class="info-line"></span>まずはフォームまたはお電話からお申し込みください。</dd>
</div>
</div>
</div>
</div>
<div class="info-wrapper">
<div class="info-outer">
<dt class="info-list">01</dt>
<div class="info-content">
<div class="info-title-area-second">
<dd class="info-title-second">お問い合わせ</dd>
</div>
<div class="info-inner">
<dd class="info-txt"><span class="info-line"></span>まずはフォームまたはお電話からお申し込みください。</dd>
</div>
</div>
</div>
</div>
<div class="info-wrapper">
<div class="info-outer">
<dt class="info-list">01</dt>
<div class="info-content">
<div class="info-title-area-second">
<dd class="info-title-second">お問い合わせ</dd>
</div>
<div class="info-inner">
<dd class="info-txt"><span class="info-line"></span>まずはフォームまたはお電話からお申し込みください。</dd>
</div>
</div>
</div>
</div>
<div class="info-wrapper">
<div class="info-outer">
<dt class="info-list">01</dt>
<div class="info-content">
<div class="info-title-area-second">
<dd class="info-title-second">お問い合わせ</dd>
</div>
<div class="info-inner">
<dd class="info-txt"><span class="info-line"></span>まずはフォームまたはお電話からお申し込みください。</dd>
</div>
</div>
</div>
</div>
</div>
<div class="question-wrapper">
<h1 class="question-title">
よくある質問
</h1>
<div class="question-outer">
<dl>
<div class="question-content">
<div class="question-inner">
<dt class="question-title-second"><div class="fa fa-question-circle-o" aria-hidden="true">
Engressはサラリーマンでも学習を続け<br class="paragraph-ninth">られるでしょうか?</div>
<div class="question-area">
<div class="question-btn"></div>
<div class="question-btn-second"></div>
</div>
</dt>
<dd class="question-txt">Engressは各個人に最適な学習プランをご提供しております。<br class="paragraph-tenth">サラリーマンの方でも継続できます。</dd>
</div>
</div>
<div class="question-content">
<div class="question-inner">
<dt class="question-title-second"><i class="fa fa-question-circle-o" aria-hidden="true"></i>教材はオリジナルのものを使用しているのでしょうか?<br class="paragraph-ninth">
<div class="question-area">
<div class="question-btn"></div>
<div class="question-btn-second"></div>
</div>
</dt>
<dd class="question-txt">はいそうです。</dd>
</div>
</div>
<div class="question-content">
<div class="question-inner">
<dt class="question-title-second"><i class="fa fa-question-circle-o" aria-hidden="true"></i>講師に日本人はいますか?<br class="paragraph-ninth">
<div class="question-area">
<div class="question-btn-third question-btn"></div>
<div class="question-btn-fourth question-btn-second"></div>
</div>
</dt>
<dd class="question-txt">います。</dd>
</div>
</div>
<div class="question-content question-content-second">
<div class="question-inner">
<dt class="question-title-second"><i class="fa fa-question-circle-o" aria-hidden="true"></i>Engressはサラリーマンでも学習を続け<br class="paragraph-ninth">られるでしょうか?
<div class="question-area">
<div class="question-btn"></div>
<div class="question-btn-second"></div>
</div>
</dt>
<dd class="question-txt">TOEFL以外の海外大学合格のサポートもしてもらえるのでしょうか?</dd>
</div>
</div>
</dl>
</div>
</div>
<div class="post-wrapper">
<div class="blog-wrapper">
<div class="blog-outer">
<h2 class="second-article-title">ブログ</h2>
<ul class="blog-list">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li class="blog-item">
<div class="blog-content">
<div>
<div class="blog-inner"><?php the_post_thumbnail(array(150, 110)); ?></div>
<div class="blog-inner-second"><?php the_post_thumbnail(array(100, 73)); ?></div>
<div class="blog-title">
<p class="blog-category">カテゴリー</p>
</div>
</div>
<div class="blog-inner-third">
<div class="blog-inner-area">
<div class="blog-inner-title">
<a class="blog-title-second" href="#"><?php the_title(); ?><?php
if(mb_strlen($post->post_title, 'UTF-8')>1){
$title= mb_substr($post->post_title, 0, 0.5, 'UTF-8');
echo $title.'…';
}else{
echo $post->post_title;
}?></a>
</div>
</div>
<div class="blog-inner-day">
<?php the_time('Y-m-d'); ?>
</div>
</div>
</div>
</li>
<?php endwhile;
endif; ?>
</ul>
</div>
<div class="sec_news">
<h2 class="second-article-title">お知らせ</h2>
<?php
$args = array(
'post_type' => 'news',
'posts_per_page' => 3,
'paged' => $paged
);
$the_query = new WP_Query($args);
?>
<ul class="news-nav-list">
<?php if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
<li class="news-nav-item">
<div class="news-day-area">
<div class="news-day"><?php echo get_the_date('Y-m-d'); ?></div>
</div>
<div class="news-title-area">
<a class="news-title" href="#"><?php the_title(); ?><?php
if(mb_strlen($post->post_title, 'UTF-8')>0.8){
$title= mb_substr($post->post_title, 0, 0.8, 'UTF-8');
echo $title.'……';
}else{
echo $post->post_title;
}
?></a>
</div>
</li>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<?php endif; ?>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>
フッター
<div class="container-bn">
<div class="document-wrapper">
<div class="document-title-outer">まずは無料で資料請求から</div>
<div class="btn-outer"><p class="btn-outer-second">資料請求</p></div>
<div class="contact-content">
<a class="document-link-outer" href="#">お問い合わせ</a>
</div>
</div>
</div>
<div class="background-wrapper">
<div class="contact-wrapper">
<div class="contact-wrapper-second">
<p class="title-contact-wrapper">お電話でのお問い合わせはこちら</p>
</div>
<p class="telephone-contact">0123-456-7890</p>
<div class="title-time-wrapper"><p class="title-contact">平日 08:00~20:00</p></div>
</div>
</div>
<footer>
<div class="footer-container">
<div class="footer-wrapper">
<div class="footer-outer">
<div class="footer-content">
<nav class="footer-nav">
<ul class="footer-nav-list">
<li class="footer-nav-item"><a class="footer-nav-link" href="<?php bloginfo('url') ;?>">ホーム</a></li>
<li class="footer-nav-item"><a class="footer-nav-link" href="<?php bloginfo('url') ;?>/news"> お知らせ</a></li>
<li class="footer-nav-item"><a class="footer-nav-link" href="<?php bloginfo('url') ;?>/blog">ブログ</a></li>
<li class="footer-nav-item"><a class="footer-nav-link" href="<?php bloginfo('url') ;?>/price">コース・料金</a></li>
</ul>
</nav>
</div>
<div class="footer-content-second">
<div class="footer-inner-second">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo_01.png" class="footer-logo-second" alt="Engress"/>
</div>
<div class="footer-inner-third">
<div class="footer-area-third">
<div class="footer-logo">
<div class="footer-logo-wrapper">
<div class="footer-logo-outer">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/footer_tel_02.png" class="footer-telephone" alt="Engress"/>
</div>
<div class="footer-number-area">
<p class="footer-number">0123-456-7890</p>
</div>
</div>
<div class="footer-schedule-outer">
<p class="footer-schedule">平日08:00~20:00</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bg-wrapper">
<div class="footer-bg-outer">
<p class="footer-bg">©2020 Engress.</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function(){
$(".question-outer dt").on("click",function(){
$(this).next().slideToggle();
$(this).toggleClass("open");
})
})
//sticky header
$('.header-burger-btn').on('click',function(){
$('.header-nav').fadeToggle(300);
$('.header-burger-btn').toggleClass('cross');
$('body').toggleClass('noscroll');
});;
</script>
<?PHP wp_footer(); ?>
</body>
</html>