HTML→WordPress - PHPファイルに分割して読み込む

WordPressのテンプレートファイル化する

テーマフォルダー「samplecafe」を作成
「index.php」「style.css」をテーマフォルダー内に作成

style.cssにコメントを記述

/*
Theme Name: SampleCafe
Description: HTMLからWordPressのThemeを作る
*/

「screenshot.jpg」を作成する

テーマを有効化

「index.html」のソースコードを「index.php」に移す

WordPressテンプレートタグの記述

get_template_directory_uri … テンプレートのあるディレクトリ URI を取得します。つまりテーマディレクトリです。
get_stylesheet_uri … style.css の URI を取得します。

<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="style.css" media="screen">

以下のように変更する

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">

CSSが適用されたプレビュー

WordPressの構造に合わせて分割する

ヘッダー部分を分割

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Home | Sample Cafe</title>
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
</head>
<body>
<header class="header">
  
<div class="container">
<div class="siteinfo">
<h1 class="logo">
<a href="#"><span>Sample Cafe</span></a>
</h1>
<p class="description">ケーキとコーヒーのおいしいお店を紹介するブログ</p>
</div><!-- /.alignleft -->

<div class="searchblock">
<form action="#" method="get" class="searchform">
<input type="text" placeholder="検索" name="search" class="search"><i class="fa fa-search" aria-hidden="true"></i>
</form>
</div><!-- /.alignright -->
</div><!-- /.container -->

<nav class="gnav">
<div class="container">
<ul class="menu">
<li class="current_page_item"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a>
  <ul class="sub-menu">
    <li><a href="#">CHILD#1</a></li>
    <li><a href="#">CHILD#2</a></li>
    <li><a href="#">CHILD#3</a></li>
  </ul>
</li>
</ul>
</div><!-- /.container -->
</nav>
</header><!-- /.header —>

index.phpのヘッダー部分

get_header … header.php を読み込む

<?php get_header(); ?>

サイドバー部分を分割

sidebar.php

<div class="sidebar">
<div class="widget">
<h2>Category</h2>
<ul>
<li><a href="#">ケーキ</a></li>
<li><a href="#">コーヒー</a></li>
</ul>
</div><!-- /.widget -->
<div class="widget">
<h2>Recent Posts</h2>
<ul>
<li><a href="#">ミル・クレープ</a></li>
<li><a href="#">いちごショート</a></li>
<li><a href="#">カプチーノ</a></li>
<li><a href="#">生チョコレートケーキ</a></li>
<li><a href="#">フルーツタルト</a></li>
</ul>
</div><!-- /.widget -->
<div class="widget">
<h2>Archive</h2>
<ul>
<li><a href="#">2018年9月</a></li>
<li><a href="#">2018年8月</a></li>
</ul>
</div><!-- /.widget -->
</div><!-- /.sidebar -->

index.phpのサイドバー部分

get_sidebar … sidebar.php を読み込む

<?php get_sidebar(); ?>

フッター部分を分割

footer.php

</div><!-- /.container -->

<div class="footer">
<p class="copyright">&copy; Sample Cafe</p>
</div><!-- /.footer -->
</body>
</html>

index.phpのフッター部分

get_footer … footer.php を読み込む

<?php get_footer(); ?>

テーマフォルダー内のファイル構成

header.php を編集しよう

サイト名と紹介文の部分

bloginfo('name') … サイト名を表示する
bloginfo('description') … 紹介文を表示する
home_url() … トップページの URL を取得する

<h1 class="logo">
<a href="<?php echo home_url('/'); ?>"><span><?php bloginfo('name'); ?></span></a>
</h1>
<p id="description"><?php bloginfo('description'); ?></p>

検索フォーム

「searchform.php 」といファイル名で保存し、読み込む

get_search_form()

<form action="<?php echo home_url('/'); ?>" method="get" class="searchform">
<input type="text" placeholder="検索" name="search" class="search"><i class="fa fa-search" aria-hidden="true"></i>
</form>