MENU
Wordpress制作を学ぶためのブログ
Nino-Blog
Nino-Blog
  1. ホーム
  2. wordpress
  3. テーマ作り
  4. 【完全解説】WordPressでヘッダーを自作してみよう！（コーポレートサイト編）

【完全解説】WordPressでヘッダーを自作してみよう！（コーポレートサイト編）

2025 1/28
wordpress テーマ作り
2023年2月10日2025年1月28日

皆さんこんにちは！ニノです。
WordPressを使っていのHP制作において重要なのが「Wordpress化」ではないでしょうか？
WordPressの1番の特徴はやはり「誰でも編集できて簡単に更新できる」点です。
その特徴を活かすにはべた書きのコードをではなくWordpress関数などを使って後から「更新しやすい」コードを書く事です。

この記事では、HP制作のヘッダーを例に「HTML、CSS、JavaScriptで制作したヘッダー」をWordpress化したいと思います。
カスタマイズ事例なども併せて読んでいただけるとヘッダーの制作幅がグッと広がりますのでぜひ参考にしてみてください。

＼ NinoBlogのサービス紹介です! ／

実績100件以上！集客できるホームページ制作します SEO対策とデザインで集客力UP！更新可能なホームページを！
目次

完成形を確認

まずはヘッダーの完成図を確認します。
今回は「コーポレートサイト風」のシンプルなヘッダーを作成します。

PCでの見た目

スマホでの見た目

スマホ表示では、メニュー開閉ボタン（通称：ハンバーガー）を設置しボタンを押すとメニューが右から表示されるデザインを実装しています。

事前準備

制作を始める前にまずは環境準備やテーマのインストールなどの事前準備を行います。

ヘッダーのHTML、CSS、JavaScriptを準備

今回のヘッダーWordpress化にあたりHTML、CSS、JavaScriptを準備しました。
デザインとしては、前章の「PCでの見た目」、「SPでの見た目」と同じです。
手を動かし一緒にヘッダーwordpress化をしたい方は以下のダウンロードリンクよりダウンロードして一緒に制作しましょう！

＼ HTML、CSS 、JavaScriptファイルのダウンロードはこちらから ／

ファイルをダウンロード

HTMLの内容

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="site-header">
        <div class="first-mess">
            <div class="first-mess-inner">
                <p>「もっと」を求める姿勢が未来を切り開く｜Nino-Blog</p>
            </div>
        </div>
        <div class="header-inner">
            <h1 class="header-logo">
                <a href="#"><img src="images/logo_transparent 3.png" alt=""></a>
            </h1>
            <nav class="header-menu">
                <ul>
                    <li><a href="#">会社概要</a></li>
                    <li><a href="#">サービス/料金</a></li>
                    <li><a href="#">イベント</a></li>
                    <li><a href="#">新着情報</a></li>
                    <li><a href="#">HP制作実例</a></li>
                    <li><a href="#">HP制作依頼</a></li>
                </ul>
            </nav>
            <div class="header-menu-2">
                <ul>
                    <li><a href="#"><i class="fa-solid fa-book-open"></i>資料請求</a></li>
                    <li><a href="#"><i class="fa-solid fa-question"></i>よくある質問</a></li>
                    <li><a href="#"><i class="fa-regular fa-envelope"></i>お問い合わせ</a></li>
                </ul>
            </div>
            <div class="humburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <nav class="sp-header-menu">
                <ul>
                    <li><a href="#">会社概要</a></li>
                    <li><a href="#">サービス/料金</a></li>
                    <li><a href="#">イベント</a></li>
                    <li><a href="#">新着情報</a></li>
                    <li><a href="#">HP制作実例</a></li>
                    <li><a href="#">HP制作依頼</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <div class="main-visual">
            <img src="images/25253109_m.jpg" alt="">
        </div>
    </main>
    <footer>

    </footer>
    <script src="https://kit.fontawesome.com/c8829ab63d.js" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>
</html>

CSSの内容

/* body,main,footerについては仮で設定していたのでこちらは移行しません。 */
/* body {
    margin: 0;
}
* {
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
main {
    height: 1000px;
    background-color: #e8e8e8;
}
footer {
    height: 800px;
    background-color: azure;
} */

header.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 77px;
    z-index: 2;
}
.first-mess {
    display: block;
    height: 25px;
    width: 100%;
    overflow: hidden;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAABtJREFUGFdjZGBg+M/AwMDIAAVwBjYBsEoMFQBW5gIF0HSEnwAAAABJRU5ErkJggg==) repeat;
}
.first-mess-inner {
    display: inline-block;
    line-height: 20px;
    padding-left: 100%;
    white-space: nowrap;
    animation: flow-text 20s linear infinite;
}
.first-mess p {
    display: inline-block;
    margin: 0;
    font-size: 13px;
    color: #FFFFFF;

}
@keyframes flow-text {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media screen and (max-width:520px) {
    .first-mess {
        display: none;
    }
}
.header-inner {
    height: 77px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: rgba(255,255,255,.7);
}
h1.header-logo {
    margin: 0;
}
h1.header-logo a img {
    max-width: 150px;
}
.header-menu ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 30px;
}
.header-menu ul li {
    margin-right: 25px;
}
.header-menu ul li:last-child {
    margin-right: 0;
}
.header-menu ul li a {
    text-decoration: none;
    color: #333333;
    font-size: 14px;
    font-weight: 700;
}
.header-menu ul li a::after {
    content: "";
    display: block;
    width: 0%;
    height: 1px;
    background-color: #B993D6;
}
.header-menu ul li a:hover::after {
    width: 100%;
    transition: all .4s;
}

@media screen and (max-width:1030px){
    .header-menu ul {
        margin-left: 20px;
    }
    .header-menu ul li {
        margin-right: 10px;
    }
    .header-menu ul li a {
        font-size: 14px;
    }
}
@media screen and (max-width:768px) {
    .header-menu,
    .header-menu-2 {
        display: none;
    }
}
.header-menu-2 ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-menu-2 ul li {
    display: flex;
    align-items: center;
    margin-left: 40px;
}
.header-menu-2 ul li a {
    text-decoration: none;
    color: #333333;
    white-space: nowrap;
    font-weight: 700;
    font-size:14px;
}
.header-menu-2 ul li a i {
    position: relative;
    margin-right: 18px;
}
.header-menu-2 ul li a i:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 40px;
    height: 40px;
    border-radius: 40px;
    z-index: -1;
}
.fa-solid.fa-book-open,
.fa-solid.fa-question,
.fa-regular.fa-envelope {
    color: #333333;
}
@media screen and (max-width:1030px){
    .header-menu-2 ul li {
        margin-left: 20px;
    }
    .header-menu-2 ul li a {
        font-size: 14px;
    }
    .header-menu-2 ul li a i {
        position: relative;
        margin-right: 10px;
    }
    .header-menu-2 ul li a i:after {
        width: 30px;
        height: 30px;
        border-radius: 30px;
    }
}

.header-menu-2 ul li:nth-child(1) i::after {
    background: #70e1f5;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ffd194, #70e1f5);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ffd194, #70e1f5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.header-menu-2 ul li:nth-child(2) i::after {
    background: #FF4E50;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F9D423, #FF4E50);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F9D423, #FF4E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.header-menu-2 ul li:nth-child(3) i::after {
    background: #B993D6;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #8CA6DB, #B993D6);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #8CA6DB, #B993D6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.header-menu-2 ul li a:hover i::after {
    background: #00d2ff;
    transition: .5s;
}
.header-menu-2 ul li a:hover {
    transform: translateY(-3px);
    transition: .3s;
}


/* humburger */
.humburger {
    display: none;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 999;
}
.humburger span {
    position: absolute;
    left: 50%;
    width: 30px;
    height: 2px;
    background-color: #333333;
}
.humburger span:nth-child(1) {
    top: 10px;
    transform: translateX(-50%);
}

.humburger span:nth-child(2){
    top:50%;
    transform: translate(-50%,-50%);
}
.humburger span:nth-child(3) {
    bottom: 10px;
    transform: translateX(-50%);
}
.humburger.active span:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(315deg);
    transition: .3s ease-out;
}

.humburger.active span:nth-child(2){
    display: none;
}
.humburger.active span:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-315deg);
    transition: .3s ease-out;
}
/* sp-menu */
.sp-header-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 100%;
    display: inline-block;
    width: 100%;
    z-index: 99;
}
.sp-header-menu ul {
    list-style: none;
    margin: 0;
    margin-top: 100px;
    padding: 0;
    text-align: center;
    background-color: rgba(0, 122, 181, .9);
}
.sp-header-menu ul li {
    padding: 20px;
    border-bottom: 1px solid #c7c7c7;
}
.sp-header-menu ul li:first-child {
    margin-top: 0;
    border-top: 1px solid #FFFFFF;
}
.sp-header-menu ul li a {
    text-decoration: none;
    color: #FFFFFF;
}
.sp-header-menu.show {
    left: 0;
    transition: .4s ease-out;
}
@media screen and (max-width: 768px) {
    .sp-header-menu {
        display: block;
    }
    .humburger {
        display: block;
    }
    .sp-header-menu ul {
        margin-top: 100px;
    }
}
@media screen and (max-width:520px) {
    .sp-header-menu ul {
        margin-top: 77px;
    }
}



/* main-visual */
.main-visual img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    filter: grayscale(50%);
}

JavaScriptの内容

const MenuToggle = document.querySelector('.humburger');
const SpMenu = document.querySelector('.sp-header-menu');		
    MenuToggle.addEventListener('click', () => {
		MenuToggle.classList.toggle('active');
		SpMenu.classList.toggle('show');
	});

WordPressローカル環境準備

WordPress制作にはローカル環境が欠かせません。
WordPressのローカル環境に特化した「Local」をインストールしてWordpressローカル環境を構築しましょう。
ローカル環境構築の手順は以下の記事を参考にしてください。

あわせて読みたい
【WordPress自作テーマ開発①】開発環境構築編 この記事では、Wordpress自作テーマでオリジナルブログサイト制作を行うにあたっての環境構築を行いたいと思います。この自作テーマ開発では、初めて自作テーマを作成す…

_ｓ（underscores）インストール

今回ヘッダーのWordpress化を行うにあたって使用するWordpressテーマは「_s（UnderScores）」です。

「_s（UnderScores）」はスターターテーマとしてとても分かりやすく最低限のコードが書かれており自作テーマを作成したい方にはおすすめのテーマです。

_ｓ（underscores）のインストールからWordpressへの適用方法は以下の記事を参考にしてください。
（以下のリンク記事内の「_S(UnderScores）のインストール、適応」に適応方法が記載されています）

あわせて読みたい
【WordPress自作テーマ開発②】自作テーマ制作を効率的に行うための準備 WordPressで「自作テーマを作成しオリジナルのブログサイトを作成する」と言うことで前回の記事ではローカル環境を構築し、ローカル環境上でWordpressのサイト表示する…

【上記の記事を参考にする際の注意点】
CSS,JavaScriptファイルにつきまして、CSSはstyle.cssに、JavaScriptファイルはmain.jsというファイルをJSフォルダ内に設置しfuncitons.phpで読み込んでいます。

_s(UnderScores)のheader.phpの内容理解

事前準備が終わりヘッダーのWordpress化を始める前にまずは、_s(UnderScores)のheader.phpの内容を理解しておきましょう。
_s(UnderScores)のheader.phpの内容については、以下のコード内のコメントアウトをご覧ください。

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package header-create-vol1
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>><!-- 言語属性を表示 -->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">

	<?php wp_head(); ?><!-- 超必須の記述でhead内のに必要な記述を出力する（functions.phpで読み込んだCSSやJavaScriptファイルなどもこの記述で出力される） -->
</head>

<body <?php body_class(); ?>><!-- ページごとに違うクラスを付与する関数 -->
<?php wp_body_open(); ?><!-- header.php必須の関数で、functions.phpから記述をここに挿入したりプラグインなどを使う場合にも影響する関数 -->
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'header-create-vol1' ); ?></a><!-- main -->
	<header id="masthead" class="site-header">
		<div class="site-branding">
			<?php
			the_custom_logo(); //外観→カスタマイズから画像を指定しサイトロゴ画像を設置するための関数
			if ( is_front_page() && is_home() ) : //if文　トップページであれば
				?>
				<!-- トップページであれば、サイトタイトルをH1で表示 -->
				<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
				<?php
			else :
				?>
				<!-- 下層ページであれば、サイトタイトルをPタグで表示 -->
				<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
				<?php
			endif;
			$header_create_vol1_description = get_bloginfo( 'description', 'display' ); //サイトのディスクリプションを取得
			if ( $header_create_vol1_description || is_customize_preview() ) : //外観→カスタマイズからサイトのディスクリプションを設定している、もしくわサイトのプレビュー内であればディスクリプションを表示
				?>
				<!-- ディスクリプションをpタグで表示 -->
				<p class="site-description"><?php echo $header_create_vol1_description;?></p>
			<?php endif; ?>
		</div>

		<nav id="site-navigation" class="main-navigation">
			<!-- メニュー開閉ボタン -->
			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'header-create-vol1' ); ?></button>
			<?php
			wp_nav_menu( //メニューを出力(管理画面→外観→メニューで設定できる)
				array(
					'theme_location' => 'menu-1',//この場所に名前をつけてメニュー設定で指定したメニューを表示させる
					'menu_id'        => 'primary-menu',//メニューのUlタグにid（primary-menu）を付与する
				)
			);
			?>
		</nav>
	</header>

上記のコードからheader.phpに書かれている内容として、「サイトタイトル出力」「ヘッダーメニュー」の出力が主な内容です。

HTMLをheader.phpに移行

では、ここからヘッダーのWordpress化をしていきたいと思います。
まず初めに作成したHTMLをheader.phpに移行していく作業からです。

header.phpにHTMLをコピペする

まず、HTMLを移行するためにheader.phpの「headerタグ」の上の「aタグ」から下を全部削除します。

削除した箇所に事前に作成した以下のHTMLを貼り付けます。

\　貼り付けるコード　/

<header class="site-header">
    <div class="first-mess">
        <div class="first-mess-inner">
            <p>「もっと」を求める姿勢が未来を切り開く｜Nino-Blog</p>
        </div>
    </div>
    <div class="header-inner">
        <h1 class="header-logo">
            <a href="#"><img src="images/logo_transparent 3.png" alt=""></a>
        </h1>
        <nav class="header-menu">
            <ul>
                <li><a href="#">会社概要</a></li>
                <li><a href="#">サービス/料金</a></li>
                <li><a href="#">イベント</a></li>
                <li><a href="#">新着情報</a></li>
                <li><a href="#">HP制作実例</a></li>
                <li><a href="#">HP制作依頼</a></li>
            </ul>
        </nav>
        <div class="header-menu-2">
            <ul>
                <li><a href="#"><i class="fa-solid fa-book-open"></i>資料請求</a></li>
                <li><a href="#"><i class="fa-solid fa-question"></i>よくある質問</a></li>
                <li><a href="#"><i class="fa-regular fa-envelope"></i>お問い合わせ</a></li>
            </ul>
        </div>
        <div class="humburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <nav class="sp-header-menu">
            <ul>
                <li><a href="#">会社概要</a></li>
                <li><a href="#">サービス/料金</a></li>
                <li><a href="#">イベント</a></li>
                <li><a href="#">新着情報</a></li>
                <li><a href="#">HP制作実例</a></li>
                <li><a href="#">HP制作依頼</a></li>
            </ul>
        </nav>
    </div>
</header>

上記のHTMLコードを貼り付けるとheader.phpの内容は以下のようになります。

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package header-create-vol1
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>><!-- 言語属性を表示 -->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">

	<?php wp_head(); ?><!-- 超必須の記述でhead内のに必要な記述を出力する（functions.phpで読み込んだCSSやJavaScriptファイルなどもこの記述で出力される） -->
</head>

<body <?php body_class(); ?>><!-- ページごとに違うクラスを付与する関数 -->
<?php wp_body_open(); ?><!-- header.php必須の関数で、functions.phpから記述をここに挿入したりプラグインなどを使う場合にも影響する関数 -->
<div id="page" class="site">
<header class="site-header">
    <div class="first-mess">
        <div class="first-mess-inner">
            <p>「もっと」を求める姿勢が未来を切り開く｜Nino-Blog</p>
        </div>
    </div>
    <div class="header-inner">
        <h1 class="header-logo">
            <a href="#"><img src="images/logo_transparent 3.png" alt=""></a>
        </h1>
        <nav class="header-menu">
            <ul>
                <li><a href="#">会社概要</a></li>
                <li><a href="#">サービス/料金</a></li>
                <li><a href="#">イベント</a></li>
                <li><a href="#">新着情報</a></li>
                <li><a href="#">HP制作実例</a></li>
                <li><a href="#">HP制作依頼</a></li>
            </ul>
        </nav>
        <div class="header-menu-2">
            <ul>
                <li><a href="#"><i class="fa-solid fa-book-open"></i>資料請求</a></li>
                <li><a href="#"><i class="fa-solid fa-question"></i>よくある質問</a></li>
                <li><a href="#"><i class="fa-regular fa-envelope"></i>お問い合わせ</a></li>
            </ul>
        </div>
        <div class="humburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <nav class="sp-header-menu">
            <ul>
                <li><a href="#">会社概要</a></li>
                <li><a href="#">サービス/料金</a></li>
                <li><a href="#">イベント</a></li>
                <li><a href="#">新着情報</a></li>
                <li><a href="#">HP制作実例</a></li>
                <li><a href="#">HP制作依頼</a></li>
            </ul>
        </nav>
    </div>
</header>

上記のコードでもCSSを適用すれば問題なく表示されますが、Wordpressの更新作業の際に毎回テーマエディターから更新をしなければならずとても手間になってしまいます。
WordPressの更新のしやすさを活かすために「ヘッダーロゴ」「メニュー」などのWordpress化をしたいと思います。

ヘッダー上の流れるキャッチフレーズのWordpress化

ここでは、ヘッダーの上に流れるサイトのキャッチフレーズを表示する部分のwordpress化をしたいと思います。
完成形としては、以下の画像になります。（画像なのでアニメーションはしませんが、、）

\　Wordpress化する前のHTMLコード　/

<div class="first-mess">
  <div class="first-mess-inner">
    <p>「もっと」を求める姿勢が未来を切り開く｜Nino-Blog</p>
  </div>
</div>

\　Wordpress化したコード　/

<div class="first-mess">
  <div class="first-mess-inner">
    <p><?php bloginfo( 'description' ); ?></p>
  </div>
</div>

bloginfo( ‘description’ );でサイトのキャッチフレーズを取得しています。

ヘッダーロゴをWordpress化

ここではヘッダー内のサイトロゴをWordpress化したいと思います。

wordpress化するコードの確認

WordPress化するコードはheader.php内の以下のHTMLコードです。

<h1 class="header-logo">
  <a href="#"><img src="images/logo_transparent 3.png" alt=""></a>
</h1>

上記のコードでは、サイトロゴ画像をH1タグでトップページのリンクをつけて表示しています。
（href属性には現時点では適当な文字列を入れています）

改修する際には、下層ページのヘッダーにもなることも考えて条件分岐で
「トップページではH1タグで表示して、仮想ページでは、Pタグで表示する」という形にします。

また、href属性については、サイトのトップページURLを出力するPHP関数を書きます。
画像のURL部分には管理画面→カスタマイズ→ヘッダー画像で指定した画像のURLを表示させたいと思います。

以下のようにコードを修正しました。

\　ヘッダーロゴの部分をWordpress化したコード　/

<?php if ( is_front_page() && is_home() ) : ?>
  <h1 class="header-logo"><?php the_custom_logo(); ?></h1>
<?php else : ?>
  <p class="header-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php the_custom_logo(); ?></a></p>
<?php endif; ?>

テーマカスタマイザーから画像を設定

上記のコードに変更したら管理画面→カスタマイズ→サイト基本情報からサイトロゴ画像を設定します。

これでヘッダーロゴの設定が完了です。
一度表示の確認をしてみましょう。

ヘッダーロゴがきちんと表示されているのでこれでOKです。
しかし、コンテンツ部分がヘッダーの下に重なって表示されているのでその修正と合わせてメインビジュアルの設定をしましょう。

メインビジュアルのWordpress化

今回はヘッダーのWordpress化がメインなのでメインビジュアルの設定はサッと流しながらしたいと思います。

トップページの固定ページを作成

まずはトップページの固定ページを作成します。
管理画面から「固定ページ」をクリックし新規追加から適当にタイトルをつけてメインビジュアル用に用意した以下のHTMLコードを貼り付けます。
（カスタムHTMLを使えば以下のコードをコピペでOKです。
そのほかにもブロックを作り画像を指定しclassを高度な設定で指定することもできます。）

<div class="main-visual">
　　<img src="ここに画像URLを直入れします" alt="">
</div>

imgタグのsrc属性に指定するURLは管理画面の「メディア」の新規追加から画像を追加しURLをコピーして貼り付けてください。すると以下のような感じになります。

作った固定ページをホームページに指定する

次に前項で作った固定ページ「トップページ」を管理画面の設定内の「表示設定」からトップページに指定します。

front-page.phpを作りトップページだけのデザインを作成する

次に先ほど作ったトップページだけのテンプレートファイル（front-page.php）をテーマファイル内に作成します。
エディターでファイル追加して「front-page.php」というファイルを作成してください。
（この際スペルミスに注意してください。）

次に作成した「front-page.php」内に以下のコードを記載します。

<?php get_header();?><!-- ヘッダーを出力 -->
    <main id="primary" class="site-main">
    <?php
		if ( have_posts() ) : while ( have_posts() ) : the_post(); //記事があれば
            the_content(); //コンテンツを出力(ブロックエディターの内容)
			endwhile; //ループ終了
		else : //記事がない場合
			get_template_part( 'template-parts/content', 'none' ); //template-partsフォルダ内のcontent.phpを出力
		endif;//if文終了
		?>
    </main>
<?php
get_footer();//フッター出力

改めて表示を確認してみると、以下のように表示されていればOKです。

PCメニューのWordpress化

次にヘッダーのメニューをWordpress化したいと思います。
ここでは、まずPCのメニューをWordpress化します。

\　Wordpress化前のHTMLコード　/

<nav class="header-menu">
  <ul>
     <li><a href="#">会社概要</a></li>
     <li><a href="#">サービス/料金</a></li>
     <li><a href="#">イベント</a></li>
     <li><a href="#">新着情報</a></li>
     <li><a href="#">HP制作実例</a></li>
  　　<li><a href="#">HP制作依頼</a></li>
  </ul>
</nav>

上記のコードでも問題なく表示はされますが管理画面のメニューから更新ができるようにコードを書き直したいとお思います。その際には、初めに削除したデフォルトのメニュー出力関数を使って実装します。以下のコードがWordpress化したコードです。

\　Wordpress化したコード　/

<nav class="header-menu">
  <?php
    wp_nav_menu(
      array(
		    'theme_location' => 'menu-1'
		  )
	  );
  ?>
</nav>

メニュー項目を追加して表示確認

まずはメニュー項目を追加するために「固定ページ」でメニュー項目となるページを作成します。
その際のタイトルなどは自由に決めてOKです。

メニューの追加方法は管理画面の外観内の「メニュー」で設定できます。

【メニューの位置について】
上記の画像には「メニューの位置」に「Primary」しかありませんが、表示箇所を変えたい場合はfunctions.phpにてメニュー位置の追加ができます。

メニューを保存できれば表示の確認をしましょう。以下のように問題なく表示されていればOKです。

SPヘッダーメニューのWordpress化

スマホメニューと全く同じ要領でWordpress化をしていきます。

\　Wordpress化する前のHTMLコード　/

<nav class="sp-header-menu">
  <ul>
    <li><a href="#">会社概要</a></li>
    <li><a href="#">サービス/料金</a></li>
    <li><a href="#">イベント</a></li>
    <li><a href="#">新着情報</a></li>
    <li><a href="#">HP制作実例</a></li>
    <li><a href="#">HP制作依頼</a></li>
  </ul>
</nav>

\　Wordpress化したコード　/

<nav class="sp-header-menu">
  <?php
    wp_nav_menu(
      array(
		    'theme_location' => 'menu-1'
		  )
	  );
  ?>
</nav>

main.jsにコードを書いて開閉メニューを作る

スマホ時にはメニューが閉じられボタンを押すとメニューが表示されるようにするには、JavaScriptでHTMLタグにクラスを着脱しなければなりません。

まず、テーマファイル内の「JSフォルダ」内に「main.jsファイル」に以下のコードを記述します。

const MenuToggle = document.querySelector('.humburger');
const SpMenu = document.querySelector('.sp-header-menu');		
    MenuToggle.addEventListener('click', () => {
		MenuToggle.classList.toggle('active');
		SpMenu.classList.toggle('show');
	});

上記のコードでは、「humburger」のクラスが付与されている箇所をクリックすると、「active」「show」とクラスが付与されもう一度クリックするとクラスが外れる仕組みになっています。

表示の確認をしてみましょう。
以下のように画面サイズが小さくなった時（768px以下）にハンバーガーメニューが表示されクリックすると右から左にメニューが表示されたら完成です。

訴求リンクのWordpress化

訴求リンクのwordpressかもヘッダーメニュー同様にメニューを使って作成したいと思います。

メニューのロケーションをfuncitons.phpから追加する

しかし、メニューの内容がヘッダーメニューとは内容や場所が異なるためfunctions.phpからメニューを追加します。
funcitons.phpの50行目付近に以下のコードが書かれていますのでその下にコードを追記します。

	// This theme uses wp_nav_menu() in one location.
	register_nav_menus(
		array(
			'menu-1' => esc_html__( 'Primary', 'header-create-vol1' ),
		)
	);
//以下のコードが追記したコードです。
	register_nav_menus(
		array(
			'sub-menu' => esc_html__( 'サブメニュー', 'header-create-vol1' ),
		)
	);

上記のコードを追記すると、
管理画面→メニュー内でメニューの位置に「サブメニュー」が追加されます。

サブメニューを作成する

新しいメニューの作り方としては、
メニューページの「新いメニューを作成しましょう。」をクリックします。
すると以下のように新しいメニューが作成されますので「メニュー名」を入力します。

WordPressメニューにアイコンをつける方法

今回のデザインでは、「資料請求」「よくある質問」「お問い合わせ」のリンクの左側に「FontAwesome」のアイコンをつけています。

FontAwesomeのCDNをfuncitons.phpで読み込む方法

このアイコンを設置するにあたってまず、CDNをfuncitons.phpで読み込みます。
読み込みコードは以下になります。
埋め込む場所はCSS、JavaScriptファイルを読み込んでいる箇所です。

/**
 * Enqueue scripts and styles.
 */
function header_create_vol1_scripts() {
	wp_enqueue_style( 'riset-style', get_template_directory_uri() . '/riset.css', array(), _S_VERSION );
	wp_enqueue_style( 'header-create-vol1-style', get_stylesheet_uri(), array(), _S_VERSION );

//FontAwesomeの追加コード↓↓↓↓↓↓↓↓↓↓
	wp_enqueue_script( 'fontawesome', 'https://kit.fontawesome.com/c8829ab63d.js' , array(), _S_VERSION);
//↑↑↑↑↑↑↑↑↑↑↑↑↑

	wp_style_add_data( 'header-create-vol1-style', 'rtl', 'replace' );
	wp_enqueue_script( 'header-create-vol1-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
	wp_enqueue_script( 'main-action', get_template_directory_uri() . '/js/main.js', array(), _S_VERSION, true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}

カスタムリンクから項目を追加

今回は普通のメニューの追加方法ではなく、ロゴをつけるためにメニュー追加で「カスタムリンク」を選択し今回の項目の「資料請求」「よくある質問」「お問い合わせ」を設置します。

項目を追加できれば、次にクラスを付与していきます。
クラス付与はメニューページ右上の「表示オプション」から「CSSクラス」をクリックします。

すると、以下のように各項目内に「CSS Class（オプション）」の欄が表示されます。

CSSクラスの欄が追加されたらクラスは今回FontAwesomeで使用していた、iタグ内のクラスをそのまま付与します。

<ul>
    <li><a href="#"><i class="fa-solid fa-book-open"></i>資料請求</a></li>
    <li><a href="#"><i class="fa-solid fa-question"></i>よくある質問</a></li>
    <li><a href="#"><i class="fa-regular fa-envelope"></i>お問い合わせ</a></li>
</ul>

上記のHTMLのiタグの「fa-solid fa-book-open」「fa-solid fa-question」「fa-regular fa-envelope」の部分です。
全てのクラスを設置できたら、サブメニューにチャックを入れて保存しましょう。

保存できたら表示の確認をしてみましょう。
以下のようにアイコンがきちんと表示されていればOKです。

まとめ

お疲れ様でした。
説明が長々となってしましすいません。。
この記事では、HTML、CSS、JavaScriptで作られたヘッダーをWordpress化してみました。
1番のポイントとしては、文字やURLなどを管理画面から誰でも簡単に更新できる点です。
WordPress1番の特徴は更新のしやすさだと私は思います。
今後も様々なカスタマイズ方法などご紹介できればと思いますので思いますのでぜひよろしくお願い致します。

Nino-BLOGのサービス紹介

実績100件以上！集客できるホームページ制作します SEO対策とデザインで集客力UP！更新可能なホームページを！
Wordpressの修正・カスタマイズを代行します 画像や文章の追加・修正・ページの追加・アップデートなど
wordpress テーマ作り
二宮 旬平
WEBデザイナー
はじめましてWEBデザイナーの二宮と申します。
このサイトでは、Wordpressについて実際に手を動かしながら学べるよう日々投稿を行なっております。
HP制作実績はこちらから
キーワード検索
人気記事
  • 【完全解説】WordPressでヘッダーを自作してみよう！（コーポレートサイト編）
    5387
  • 【コピペOK】ContactFrom7でお問い合わせフォームを設置する方法
    5071
  • 【超簡単】ContactForm7でお問い合わせ確認画面を設置してみよう
    4249
  • 【自作テーマ開発】_s(underscores)でオリジナルブログサイトを作ろう！
    2377
  • 【WordPress自作テーマ開発③】トップページを作ろう
    2291
カテゴリー
  • SEO対策
  • wordpress
    • テーマ作り
  • カスタマイズ
  • ニュース
  • ライティング
  • ライフハック
  • 副業
  • 未分類
  • 資格
アーカイブ
  • 2023年7月 (3)
  • 2023年2月 (3)
  • 2022年4月 (1)
  • 2022年2月 (1)
  • 2022年1月 (7)
  • 2021年10月 (1)
  • 2021年9月 (3)
  • 2021年8月 (8)
  • 2021年7月 (2)
  • 2021年2月 (9)
  • 2021年1月 (5)
↓Nino-blogのサービス紹介
実績100件以上！集客できるホームページ制作します SEO対策とデザインで集客力UP！更新可能なホームページを！
目次
  • HOME
  • プライバシーポリシー
  • 免責事項
  • お問い合わせ

© 2020 nino-blog

目次