0

今現在ウェブサイトを作成しています。
サイトを自分で作るため、コーディングをしてます。
固定ページを久しぶりに開くと真っ白の画面で、入力した文字が表示されなくなっていました。

テーマを変えると表示されましたので、テーマに問題があったのだと思います。
下記がコードです。

ヘッダー

<!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">&copy;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>
8
  • 真っ白というのは「本当に何も出力されていない」なのか「白背景に白文字の状態」なのかといった辺りの切り分けが必要かと思います。 / また、可能であれば再現可能な最小限のコードにまとめると回答が付きやすいと思います。
    – cubick
    Commented 2022年2月9日 11:28
  • ご意見ありがとうございます、本当に何も表示されません、また、どこに問題があるのかわからないので、全てのコードを書いています。
    – kkk
    Commented 2022年2月9日 11:38
  • まずはデバッグをして見てはいかがでしょうか?色々方法はありますが、ソースコードを削っていって問題となるコードを探したり、exitとechoを駆使して問題となるステップに当たるまで追いかける等です
    – keitaro_so
    Commented 2022年2月9日 12:19
  • ありがとうございます、exitとechoはよくわかりませんので、ソースコードを削っていって問題となるコードを探します。
    – kkk
    Commented 2022年2月9日 12:21
  • ソースコードを削っていって問題となるコードを探していたのですが、ちょっとできませんでした、色々削ってもだめでした。
    – kkk
    Commented 2022年2月9日 13:32

1 件の回答 1

1

すいません、どうしてもできないため、色々やった結果、一度最初からうやり直すことにしました。
回答してくださった方々ありがとうございました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。