Q&A
wordpressテーマ制作において、header.phpファイルをどのようにすればいいのか迷っています。
元のfront-page.htmlファイルは以下です。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <title>IVS Group | 世の中の「面白い」を作る</title> 6 <meta charset="UTF-8" /> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 8 <script type="text/javascript" src="./assets/js/inc.js"></script> 9 <script> 10 meta('./'); 11 </script> 12</head> 13 14<body class="front_page" id="pagetop"> 15 <div class="wrapper"> 16 <script> 17 header('./'); 18 </script> 19 <main>
そして、<script>で読み込まれているheader.htmlは以下です。
html
1<div id="is-loading"> 2 <div id="loading"> 3 <div class="progress"> 4 <div class="bar"></div> 5 </div> 6 </div> 7</div> 8<header class="header"> 9 <div class="header__wrap"> 10 <div class="header--sp__logo"><a href="{$root}"><img src="{$root}assets/images/common/logo_primary.svg" alt="IVS"></a></div> 11 12 <div class="navToggle"> 13 <div class="navToggle--lines"><span></span><span></span><span></span></div> 14 </div> 15 <nav class="gnav--sp"> 16 <div class="gnav--sp__logo"><a href="/"><img src="{$root}assets/images/common/logo_primary.svg" alt="IVS"></a></div> 17 <ul class="gnav--sp__list"> 18 <li><a href="{$root}business.html">BUSINESS</a></li> 19 <li><a href="{$root}company.html">COMPANY</a> 20 </li> 21 <li><a href="{$root}works.html">WORKS</a></li> 22 <li><a href="{$root}contact.html">CONTACT</a></li> 23 <li class="recruit"><a href="{$root}recruit.html">RECRUIT</a></li> 24 <li><a href="{$root}">デザイン1</a></li> 25 <li class="parent1"> 26 <a href="{$root}">テスト</a> 27 <ul class="sub-menu"> 28 <li><a href="{$root}">テスト</a></li> 29 <li><a href="{$root}">テスト</a></li> 30 </ul> 31 </li> 32 <li class="parent2"> 33 <a href="{$root}">デザイン2（開閉）</a> 34 <ul class="sub-menu"> 35 <li><a href="{$root}">テスト</a></li> 36 <li><a href="{$root}">テスト</a></li> 37 </ul> 38 </li> 39 </ul> 40 </nav> 41 </div> 42</header>
困っているのは<head></head>要素下の<body>要素にscriptでヘッダーを読み込んでいる点です。
header.phpを以下のように作成しました。
meta.htmlで読み込まれていた要素やtitleもheader.phpに記載しました。
php
1<?php 2/* 3 * Template Name: メインヘッダー 4 */ 5?> 6<!doctype html> 7<html class="no-js" lang="ja"> 8 <head> 9 <title>IVS Group | XXXXX</title> 10 <meta charset="UTF-8" /> 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 12 <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/inc.js"></script> 13<meta charset="UTF-8" /> 14<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 15<meta name="viewport" content="width=device-width, initial-scale=1" /> 16<meta name="description" content="" /> 17<meta name="keywords" content="" /> 18<meta name="format-detection" content="telephone=no" /> 19<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/assets/images/common/favicon.ico" /> 20<link rel="stylesheet" id="style-css" href="<?php echo get_template_directory_uri(); ?>/assets/css/style.css" type="text/css" media="all" /> 21<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" /> --> 22<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/lib/slick.min.js"></script> 23<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/lib/jquery.magnific-popup.js"></script> 24<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/lib/parallax.js"></script> 25 <?php wp_head(); ?> 26 </head> 27 28<!-- body分岐 --> 29<header class="header"> 30 <div class="header__wrap"> 31 <!-- トップページのとき はh1 --> 32 <div class="navToggle"> 33 <div class="navToggle--lines"><span></span><span></span><span></span></div> 34 </div> 35 <nav class="gnav--sp"> 36 <div class="gnav--sp__logo"><a href="/"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/common/logo_primary.svg" alt="IVS"></a></div> 37 <ul class="gnav--sp__list"> 38 <li><a href="<?php echo esc_url(home_url('/business/')); ?>">BUSINESS</a></li> 39 <li><a href="{$root}/xxx.html">COMPANY</a> 40 </li> 41 <li><a href="<?php echo esc_url(home_url('/works/')); ?>">WORKS</a></li> 42 <li><a href="<?php echo esc_url(home_url('/contact/')); ?>">CONTACT</a></li> 43 <li class="recruit"><a href="<?php echo esc_url(home_url('/recruit/')); ?>">RECRUIT</a></li> 44 <li><a href="<?php echo esc_url(home_url('')); ?>">デザイン1</a></li> 45 <li class="parent1"> 46 <a href="<?php echo esc_url(home_url('')); ?>">テスト</a> 47 <ul class="sub-menu"> 48 <li><a href="<?php echo esc_url(home_url('')); ?>">テスト</a></li> 49 <li><a href="<?php echo esc_url(home_url('')); ?>">テスト</a></li> 50 </ul> 51 </li> 52 <li class="parent2"> 53 <a href="<?php echo esc_url(home_url('')); ?>">デザイン2aaa（開閉）</a> 54 <ul class="sub-menu"> 55 <li><a href="<?php echo esc_url(home_url('')); ?>">テスト</a></li> 56 <li><a href="<?php echo esc_url(home_url('')); ?>">テスト</a></li> 57 </ul> 58 </li> 59 </ul> 60 </nav> 61 </div> 62</header> 63
そしてこのheader.phpを以下のようにfront-pge.phpに挿入しました。
<?php /* * Template Name: front-page */ ?> <body id="pagetop" class="front_page"> <div class="wrapper"> <div id="is-loading"> <div id="loading"> <div class="progress"> <div class="bar"></div> </div> </div> </div> <header class="header"> <?php get_header(); ?> </header> <main>
一応表示には問題ないのですが、この書き方だと<body></body>の中にheader.phpに書いたmeta要素やtitleが読み込まれる形になります。
この場合、どのようにするのが正しいのでしょうか?
回答1件
0
ベストアンサー
質問に書かれている front-pge.php は、HTML としては不正ですね。
<head> 〜 </head> 部分と <body> 内の部分は、別ファイルに分けるべきです。テンプレートで別のテンプレートを読み込む関数として、get_template_part() がありますので、これを利用します。
投稿2021/01/12 21:33
総合スコア25218
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/13 06:31 編集