ブログやコーポレートサイトなどをつくる際にWordPressを採用する方が増えていますね、
「昔つくったWEBサイトをWordPressにしたい…」と思ってもHTMLファイルをWordPressに適した形にする方法がわからず諦める方も多いです。
そこで、今回はHTMLファイルをWordPressに適したテンプレートにする方法を解説します。
WordPressを使えば、更新作業も楽になるのでおすすめです。
WordPress化にするための下準備を整える
HTMLファイルをWordPress化するために、まずは環境構築をしましょう。
「環境構築」と聞くと難しくて時間がかかるイメージを持つ方もいると思います。
WordPressの環境構築は、初心者でも簡単にできるのが特徴です。
アプリケーションのインストール
環境構築の第一歩としては、「MAMP」もしくは「XAMPP」をインストールします。
Windowsのパソコンを使っている方はXMAPP、Macのパソコンを使っている方はMAMPになります。
Windowsの方はコチラからXAMPPをインストールしてください。
XAMPP公式サイトダウンロードページ：https://www.apachefriends.org/jp/download.html
Macの方はコチラからMAMPをインストールしてください。
MAMP公式サイトダウンロードページ：https://www.mamp.info/en/
また、MAMPにはPRO版がリリースされています。
PRO版の方が機能性は高いですが、初心者の方は無料で使えるMAMPで十分です。
初期設定
MAMPもしくはXAMPPをインストールしたら初期設定をおこないましょう。
ここではMAMPを使った初期設定の方法を説明します。
先ほどダウンロードしたMAMPを起動させます。
すると、このような画面が立ち上がるのを確認してください。
このような画面が表示されたら、一番左に表示されている「設定」をクリックします。
「設定」をクリックすると、このように4つのタブが表示されます。
・スタート/ストップ
・ポート
・PHP
・Webサーバー
この4つのタブの設定を順番に説明します。
スタート/ストップ
この部分の設定は「どのタイミングでMAMPを起動させ、終了させるか」を決めます。
基本的にはこの3つにチェックが入っていれば問題ありません。
・サーバーを始動
・オープンWebStart
・サーバーを停止
ポート
ApacheやMySQLに番号を設定します。
基本的にはデフォルトもままでOKです。
・Apacheポート：8888
・Nginポート：7888
・MySQLポート：8889
・MAMPをポートをデフォルトに設定
・WebとMySQLを80と306に設定
PHP
ここではバージョンを指定します。
基本的には最新バージョンでOKです。
Webサーバー
これはホームページのデータを保存する場所です。
これも基本的には、デフォルトのままでOKです。
データベースの作成
ここまでできたら次はデータベースの作成です。
トップ画面の真ん中のアイコンである「オープンWebStartの」をクリックします。
公式ページに移動するので、「phpMyAdmin」をクリックします。
ここで、データベースを作成したら完了です。
HTMLファイルをWordPress化する
これで下準備は完了です。
ここからは、実際にHTMLファイルをWordPressのテンプレート化するための方法を解説します。
実際にこのようなサイトを制作します。
HTMLのコードはこのようになります。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header"><!-- ヘッダーHTML -->
<div class="logo">
サンプルサイトです
<!-- <img src="img/logo.png" alt="">-->
</div>
<nav class="gNavi">
<ul class="gNavi-ul">
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
</ul>
</nav>
</header><!-- ヘッダーHTML終了 -->
<div class="mainImage">
<img src="img/sm2.jpg" alt="">
</div>
<div class="wraper"><!-- ラッパー部分のHTML -->
<main class="main"><!-- メイン部分のHTML -->
<article class="article">
<div class="article-img">
<img src="img/sm1.jpg" alt="">
</div>
<div class="article-box">
<time class="time">
2018年8月31日
</time>
<div class="category">
<span class="category-cont">
デザイン
</span>
<span class="category-cont">
コーディング
</span>
</div>
<h2 class="article-ttl">
タイトル
</h2>
<div class="article-cont">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="more">
<a href="#">＞続きを読む</a>
</div>
</div>
</article>
<article class="article">
<div class="article-img">
<img src="img/sm1.jpg" alt="">
</div>
<div class="article-box">
<time class="time">
2018年8月31日
</time>
<div class="category-wrap">
<span class="category-cont">
デザイン
</span>
<span class="category-cont">
コーディング
</span>
</div>
<h2 class="article-ttl">
タイトル
</h2>
<div class="article-cont">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="more">
<a href="#">＞続きを読む</a>
</div>
</div>
</article>
<article class="article">
<div class="article-img">
<img src="img/sm1.jpg" alt="">
</div>
<div class="article-box">
<time class="time">
2018年8月31日
</time>
<div class="category-wrap">
<span class="category-cont">
デザイン
</span>
<span class="category-cont">
コーディング
</span>
</div>
<h2 class="article-ttl">
タイトル
</h2>
<div class="article-cont">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="more">
<a href="#">＞続きを読む</a>
</div>
</div>
</article>
</main><!-- メイン部分のHTML終了 -->
<div class="idebar"><!-- サイドバー部分のHTML -->
<h2 class="new-ttl">
最新記事
</h2>
<article class="mew-article">
<div class="new-article-img">
<img src="img/sm1.jpg" alt="">
</div>
<div class="new-article-cont">
テキストテキストテキストテキスト
</div>
</article>
<article class="mew-article">
<div class="new-article-img">
<img src="img/sm1.jpg" alt="">
</div>
<div class="new-article-cont">
テキストテキストテキストテキスト
</div>
</article>
<article class="mew-article">
<div class="new-article-img">
<img src="img/sm1.jpg" alt="">
</div>
<div class="new-article-cont">
テキストテキストテキストテキスト
</div>
</article>
<article class="mew-article">
<div class="new-article-img">
<img src="img/sm1.jpg" alt="">
</div>
<div class="new-article-cont">
テキストテキストテキストテキスト
</div>
</article>
</div><!-- サイドバー部分のHTML終了 -->
</div><!-- ラッパー部分のHTML終了 -->
<nav class="pageNation"><!-- ページネーションHTML -->
<ul class="pageNation-ul">
<li class="pageNation-li"><a href="#">1</a></li>
<li class="pageNation-li"><a href="#">2</a></li>
<li class="pageNation-li"><a href="#">3</a></li>
<li class="pageNation-li"><a href="#">></a></li>
</ul>
</nav><!-- ページネーションHTML終了 -->
<footer class="footer"><!-- フッターHTML -->
<div class="footer-wrapper">
<div class="footer-ttl">
ウィジェット
</div>
<div class="footer-ttl">
ウィジェット
</div>
<div class="footer-ttl">
ウィジェット
</div>
</div>
</footer><!-- フッターHTML終了 -->
</body>
</html>
WordPressに適したコードはこのようになります。
index.php
<?php get_header();?>
<div class="mainImage">
<img src="<?php echo get_template_directory_uri(); ?>/img/sm2.jpg" class="service-img" alt="">
</div>
<?php if (have_posts()): ?>
<div class="wraper"><!-- ラッパー部分のHTML -->
<main class="main"><!-- メイン部分のHTML -->
<?php while (have_posts()): ?>
<?php the_post(); ?>
<article class="article">
<div class="article-img">
<?php if(has_post_thumbnail()) : ?>
<!-- アイキャッチのコード -->
<?php the_post_thumbnail('kadai02-thumbnails'); ?>
<?php endif; ?>
</div>
<div class="article-box">
<time class="time" datetime="<?php echo get_the_date(DATE_W3C); ?>">
<?php echo get_the_date(); ?>
</time>
<div class="category">
<?php if(has_tag()==true) : ?>
<span class="category-cont">
<?php the_tags('');?>
</span>
<?php else : ?>
<?php endif; ?>
</div>
<h2 class="article-ttl">
<a href="<?php the_permalink(); ?>"><?php echo wp_trim_words( get_the_title(), 10 , '…' ); ?></a>
</h2>
<div class="article-cont">
<p><?php echo my_excerpt(20); ?>
</p>
</div>
</div>
</article>
<?php endwhile; ?>
<?php else: ?>
<p>投稿はありません</p>
<?php endif; ?>
</main><!-- メイン部分のHTML終了 -->
<?php get_sidebar(); ?>
</div><!-- ラッパー部分のHTML終了 -->
<nav class="pageNation"><!-- ページネーションHTML -->
<!--
<ul class="pageNation-ul">
<li class="pageNation-li"><a href="#">1</a></li>
<li class="pageNation-li"><a href="#">2</a></li>
<li class="pageNation-li"><a href="#">3</a></li>
<li class="pageNation-li"><a href="#">></a></li>
</ul>
-->
<!-- functionでのページネーション -->
<!--
<?php
echo online_the_posts_pagination(
array(
'next_text' => __( '>', 'textdomain' ),
'prev_text' => __( '<', 'textdomain' ),
'type' => 'list',
)
);
?>
-->
<!-- wp pagenaviでのページネーション -->
<?php
if ( function_exists( 'wp_pagenavi' ) ):
wp_pagenavi();
endif;
?>
</nav><!-- ページネーションHTML終了 -->
<?php get_footer(); ?>
特に大きく変化するのが以下の5つの項目です。
・スタイルシートの内容
・スタイルシートの読み込み
・ファイル分割
・画像のパス変更
・ループの記述
今回はこの5つの特徴について説明します。
スタイルシートの内容
スタイルシートの内容を説明する前に、スタイルシートを格納する場所について説明します。
WordPressでは、テーマの直下にスタイルシート(style.css)を置くことが必要です。
テーマの直下にスタイルシート(style.css)がなければ、テーマを認識することができません。
また、スタイルシートには最低限以下の内容を記述することが必要です。
Theme Name: テーマの名前
Description: テーマの説明
Author: 製作者の名前
スタイルシートの読み込み
CSSファイルの読み込みやJSファイルの読み込みはfunction.phpに記述します。
function.phpを使ってCSSやJSを読み込むためには、head内に「」を記述します。
次にfunction.phpにこのように記述すると、CSSやJSファイルを読み込むことが可能です。
function sample_scripts() {
wp_enqueue_style( ‘sample_style’, get_template_directory_uri().’/css/style.css’, array(), null, ‘all’ );
wp_enqueue_style( ‘sample_js’, get_template_directory_uri().’/js/main.js’, array(), null, ‘all’ );
}
add_action( ‘wp_enqueue_scripts’, ‘sample_scripts’ );
パスやファイル名は適宜変更してください。
ファイル分割
WordPressではヘッダー、サイドバー、フッターなどファイル分割するのが一般的です。
ファイルを分割しなくても問題ありませんが、分割していた方が見やすいので、保守性が高くなります。
ファイル分割するためには、header.phpやfooter.phpやsidebar.phpなどのファイルを作成します。
作成したファイルに、該当するコードをコピペしましょう。
例えば、header.phpの場合index.phpから以下のコードの部分をコピペします。
header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<?php wp_head();?>
</head>
<body>
<header class="header"><!-- ヘッダーHTML -->
<div class="logo">
Sample
<!-- <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" class="service-img" alt="">-->
</div>
<nav class="gNavi">
<ul class="gNavi-ul">
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
</ul>
</nav>
</header><!-- ヘッダーHTML終了 -->
同じように、footer.phpも該当する内容をコピペします。
<footer class="footer"><!-- フッターHTML -->
<div class="footer-wrapper">
<div class="footer-ttl">
ウィジェット
</div>
<div class="footer-ttl">
ウィジェット
</div>
<div class="footer-ttl">
ウィジェット
</div>
</div>
</footer><!-- フッターHTML終了 -->
<?php wp_footer();?>
</body>
</html>
その次に、各ファイルを読み込む記述を入力します。
例えば、ヘッダーを読み込ませたい場所に以下のコードを記述します。
<?php get_header();?>
同じようにサイドバーやフッターも読み込ませます。
<?php get_sidebar(); ?> <?php get_footer(); ?>
これでファイル分割は完了です。
画像のパス変更
画像のパスも変更しなければ表示されません。
例えば、HTMLファイルではこのようにimgタグをこのように記述していました。
<img src="img/sm2.jpg" alt="">
しかし、このままの表示ではWordPressでは表示されません。
このように記述すれば、WordPressで表示されます。
<img src="<?php echo get_template_directory_uri(); ?>/img/sm2.jpg" alt="">
今まで指定していたパスの前にこのコードを追記するだけでOKです。
<?php echo get_template_directory_uri(); ?>
ループの記述
記事の投稿など定期的に更新する部分はループを記述して表示させます。
具体的にはこのようなコードです。
index.php
<?php if (have_posts()): ?>
<div class="wraper"><!-- ラッパー部分のHTML -->
<main class="main"><!-- メイン部分のHTML -->
<?php while (have_posts()): ?>
<?php the_post(); ?>
<article class="article">
<div class="article-img">
<?php if(has_post_thumbnail()) : ?>
<!-- アイキャッチのコード -->
<?php the_post_thumbnail('kadai02-thumbnails'); ?>
<?php endif; ?>
</div>
<div class="article-box">
<time class="time" datetime="<?php echo get_the_date(DATE_W3C); ?>">
<?php echo get_the_date(); ?>
</time>
<div class="category">
<?php if(has_tag()==true) : ?>
<span class="category-cont">
<?php the_tags('');?>
</span>
<?php else : ?>
<?php endif; ?>
</div>
<h2 class="article-ttl">
<a href="<?php the_permalink(); ?>"><?php echo wp_trim_words( get_the_title(), 10 , '…' ); ?></a>
</h2>
<div class="article-cont">
<p><?php echo my_excerpt(20); ?>
</p>
</div>
</div>
</article>
<?php endwhile; ?>
<?php else: ?>
<p>投稿はありません</p>
<?php endif; ?>
</main><!-- メイン部分のHTML終了 -->
このコードで投稿があるか否かをチェックしています。
<?php if (have_posts()): ?>
「while」文で繰り返しの処理をおこないます。
<?php while (have_posts()): ?>
投稿がなかった場合、以下の内容を表示させます。
<?php else: ?> <p>投稿はありません</p> <?php endif; ?>
まとめ
いかがでしたか？
HTMLファイルをWordPressのテンプレートにする方法を説明しました。
みなさんもぜひ試してみてください。