
HTMLサイトテンプレートをWordpressテーマ化・変更する方法【基本編】
HTMLサイトテンプレートさえあれば、いつでもWordpressテーマ化する事ができます。今回は基本編をご紹介。
様々なデザインのHTMLテンプレートをWordpressサイトへ導入する事ができると同時に、Wordpressテーマの構成・仕組みを理解する事ができます。
新規でWordpressサイトを制作するだけでなくWordpressへリニューアルする場合も活用できますよ。
HTMLサイトテンプレートをWordpressテーマ化する
本記事は、静的なHTMLサイトおよびテンプレートをWordpress化する具体的な手順を紹介しています。
特にWEB系のフリーランスであれば、Wordpressサイト制作は必須ですよね。
今はHTMLサイト制作案件よりもWodpressサイトの制作案件の方が多いはずです。
手元にHTMLのデザインテンプレートがあってこの基本方法をマスターすれば、HTMLテンプレートをそのままWordpressテーマとして変換・流用する事ができます。
Wordressテーマ化ができるとメリットばかり
Wordpressテーマはベースとなるテンプレートテーマからカスタマイズするのが普通です。
一からフルスクラッチで作っている人はあまりいないと思います。
HTMLサイトをWordpress化するメリット
・デザインカスタマイズの時間を大幅に短縮できる
・先にデザインありきで自在にテンプレートを選ぶ事ができる。
・テーマテンプレートの購入費用を抑える事ができる
さらにWordpressテーマを自作・カスタマイズする技術の向上にもつながります。まさに一石四鳥です。
是非この基本をマスターしていただき、さらなるスキルアップを目指して下さい。
それでは早速やっていきましょう。
1.Wordpressテーマフォルダの作成
まずはパソコン内に今回構成するテーマフォルダを新規に作成しましょう。普通に作るだけです。
その際テーマフォルダ名をそのまま「テーマ名」にします。
ここでは名前を「lpeg」という名前にしていますが、名前には「-」ハイフンは使わずにつけて下さい。
「-」ハイフンを使うと子テーマの扱いになったりしますので、今回はハイフンは使わずに作りましょう。
2.「index.php」「style.css」「functions.php」ファイルの作成
作ったテーマフォルダの中に以下のファイルを作成します。中身は空でOKです。
・index.php
・style.css
・functions.php
phpおよびcssファイルの作り方は以下の手順です。
元々別のphpファイルを持っている場合
別にphpファイルを持っているのであれば複製し(リネームが必要であればしましょう)、中身を全て消してindex.phpとしていればOKです。
同様にfunctions.phpも作ってください。
CSSファイルも同様です。別のCSSファイルを複製して中身を空してstyle.cssとします。
手元にphpやcssファイルが無い場合
手元にない場合はメモ帳などのテキストファイルを用意して、拡張子を表示させます。
拡張子(ドットの後ろにある.txt)を.phpや.cssに変更すれば、それぞれphpファイルやcssファイルに変わってくれます。
※ファイルの文字コードは全てutf8にして下さいね。
参考にして欲しい
utf8への変更方法は→【文字コードの変更方法】をご覧ください。
拡張子の変更方法は→【ホームページを作る際に必要なソフト(拡張子の変更の仕方部分)】をご覧ください。
3.HTMLテンプレート構成ファイル一式をコピー
HTMLテンプレートに入っているcssやjs、font、imagesファイルなどの全てをコピペしてテーマフォルダ内に入れます。
テーマのサムネイルを表示する
880x660pxの「screenshot.png」という画像を作成してテーマフォルダに入れましょう。
この画像がテーマ選択画面で表示されるサムネイル画像になります。
構成フォルダおよびスクリーンショット画像を入れた状態
4.テーマ名を定義します
複数のcssファイルの入ったcssフォルダを、手順3でテーマフォルダの中に入れたと思います。
Wordpressテーマはテーマフォルダの一番上(トップディレクトリ)に、必ず「style.css」を置いておかなければなりません。覚えておきましょう。
デザインコントロールはcssフォルダ内のものを使いますので、トップディレクトリのstyle.cssは置いておくだけで使わなくても良いです。
このstyle.css(中身は空)に下記の記述を書きます。
/* Theme Name : lpeg */
lpegの部分がテーマ名です。日本語でも構いませんのでテーマ名を記入しておきましょう。
この時Theme Nameに「-」ハイフンは使わないようにしましょう。テーマが壊れているというガイダンスが出る場合があります。
このテーマ名がWordpress管理画面の外観テーマの欄で表示される事になりますね。
このファイル内にはもちろんcssを記述しても大丈夫です。一番上に上記の記述があればOKです。
5.index.htmlの中身をindex.phpへ丸ごと移す
中身が空のindex.phpファイルに対し、HTMLテンプレートのindex.html(トップページ)の全内容を丸ごとコピーして貼り付けしましょう。
後から内容をheader.phpやfooter.phpへ分割しますが、まずはまるごとでOKです。
まずはこの状態で一度、Wordpressのテーマが表示されるかどうかを確認します。
6.テーマフォルダをwp-content/themes内へ全てUP
FFFTPなどでサーバーに接続してアップする箇所を確認しましょう。
テーマをUPする区画は決まっています。wp-content/themes/の中ですね。
普通にWordpressのインストールがされていれば、元から入っているtwenty系のテーマフォルダもあるはずです。
この位置にテーマフォルダを丸ごとUPしてしまいましょう。
Wordpress管理画面でアップしたテーマを選択
管理画面で外観~テーマを選択します。アップしたテーマが表示されているのでを有効化しましょう。
テーマが上手く表示されない場合
場合によって「テーマが壊れている」或いは「足りないファイルがあります」「親テーマを選択してください。」のようなガイダンスが出る場合があります。
その時はテーマ名やテーマディレクトリに「-」ハイフンが入っていないか確認しましょう。
テーマディレクトリの名前はアップ後にFTPソフトの「名前変更」で変更できます。
cssファイルも修正して上書きすれば、F5で更新後はテーマが反映されるはずです。
7.Wordpressサイトの表示確認
上手く有効化できたら、一度WEBサイトの状態を確認してみましょう。
おそらくテキストはあるものの画像が表示されず、CSSも反映されていないはずです。
あえて一度UPをしただけですので、次の手順で画像パスやCSSパスを変更しましょう。
8.ファイルパス変更・リンクは絶対パスへ変更
index.phpファイルを開いて下さい。これから下で紹介するそれぞれの該当箇所に下記コードを追記します。
<?php echo get_template_directory_uri(); ?>/ ※スラッシュが必要であれば「/」まで
phpコード挿入直後の「/」に注意
phpコードの直後は「/」で始まる様にして下さい。
CSSファイルの部分
ヘッダーに下の様にcssの読込部分があると思います。
<link rel="stylesheet" href="css/styles.css">
下記の位置に追記しましょう。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/mystyle.css">
画像ファイルの場合
<img src="images/logo.png" alt="">
下記の位置に追記します。
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="">
JSファイルの場合
<script src="../js/magnific-popup.min.js"></script>
これも同様に、ヘッダーもしくはフッターに上記のような記述があったとすれば
<script src="<?php echo get_template_directory_uri(); ?>/js/magnific-popup.min.js"></script>
と追記します。
上の画像はphpコードの直後に「/」が入っていませんが、きちんと/image、/css、/jsで始まる様にして下さい。
aタグにはコードを入れずに絶対リンクに変更
aタグには今回のphpコードを入れてはいけません。
aタグにはそれぞれWEBサイトの絶対パスを入れるようにしましょう。
例えば、<a href="https://lpeg.info/aaa/">の様に、絶対パスを入れましょう。
変更するコードについて
<?php echo get_template_directory_uri(); ?>
これが今回UPした「テーマフォルダの位置」を示してくれるWordpress独自コードです。
テーマフォルダの中にCSSやJS・画像ファイルを入れたのですから、全ての部分に上記パスを付けておけば表示がされるようになります。
追記の仕方は一括変更が便利です。
cssやJS・画像などのパス上に全て上記の独自コードが入る訳ですから、一括変更ソフトやgrep機能ソフトなどで一括変更した方が早いですよね。
「/」まで入れて一括してOKです。この辺りはお任せします。
パスを変更したらもう一度index.phpをアップし直しましょう。
再度アップして確認します
今度はきちんとTOPページが表示されるはずです。
上手く表示されていない場合は、どこかにパスの間違いがあるはずですので修正をして再度アップしてみましょう。
上手くいけばHTMLサイトテンプレートのTOPと全く同じページが表示されるはずです。
9.ヘッダーとフッター部分を分割
今はindex.phpに元のindex.htmlの内容を丸ごとペーストしている状態です。
しかし本来はヘッダー部分・サイド部分(TOPにあれば)・フッター部分に分割しなければなりません。
・ヘッダー部分:header.php
・サイド部分:sidebar.php
・フッター部分:footer.php
という具合です。
header.php・sidebar.php・footer.phpを作る
header.php・sidebar.php・footer.php3つのファイルを、index.phpを複製・コピペして作りましょう。その際それぞれの中身は空にしておいて下さい。
index.htmlの「ヘッダー部分」は、全ページ共通で表示させる部分を指します。
HTMLテンプレートによりますが、普通はソース最上段の<!DOCTYPE html>から上部の横並びメニューのところまでは共通のはずです。
ですのでその部分までを分割対象にします。
同様にフッター部分は大体の場合、<footer>から最後の</html>までが対象範囲になります。
分割します
index.htmlから上記のヘッダー部分を切り取って、header.phpへ貼り付けます。
index.htmlからサイドコンテンツ部分を切り取って、sidebar.phpへ貼り付けます。
index.htmlから上記のフッター部分を切り取って、footer.phpへ貼り付けます。
10.header.phpとfooter.phpへ読込コードを追記
header.phpに対して
ヘッダー部分を貼り付けたheader.phpには</head>の直前に
<?php wp_head(); ?> を記述します。
footer.phpに対して
フッター部分を貼り付けたfooter.phpには</body>の直前に
<?php wp_footer(); ?> を記述します。
上記は追記必須のコードです。
<?php wp_head(); ?>や<?php wp_footer(); ?>は、ワードプレスの基本的な機能やプラグインのコードが出力されるようになるために大切なコードです。
基本的機能やプラグインは必須の関数ですので、上記のコードは忘れずに挿入しておきましょう。
11.index.php内に読込コードを記述
ヘッダーファイルの読み込み
index.php上部の切り取りした部分に<?php get_header(); ?>を追記します。
これで分割したheader.phpがこの箇所に読み込まれるようになるのですね。
フッターファイルの読み込み
同様にindex.php下部の切り取りした部分に<?php get_footer(); ?>を追記します。
ここに分割したfooter.phpが読み込まれます。
sidebarの箇所があればそれも同じです。<?php get_sidebar(); ?>を切り取った個所に入れましょう。
このindex.phpが他ファイル(page.php、single.phpなど)の複製元になります
このindex.phpはテーマのベースファイルになります。
今後複製・リネームされ、固定ページpage.phpや投稿ページsingle.phpなどに使われます。
結果全てのテーマファイルに対しheader.phpやfooter.phpなどを読み込む設定が継承されていくのです。
12.全てUPをして確認
作成した各phpファイルおよび、分割元のindex.phpを再度UPして表示を確認してみましょう。
今回は前回に加えてWordpressの管理画面ヘッダーも表示されているはずです。
上手く表示されていれば、とりあえず基本的なWordpress化は完了です。
13.固定ページ作成
これまでWordpressテーマサイトのTOPを表示させるところまで進みました。
ここで他のページを表示しても全てTOPページが表示される状態になっています。これはまだ固定ページ用のファイルを準備していないためです。
HTMLサイトテンプレートはサブコンテンツページもそろっているはずですから、サブ用の固定ページ用ファイルを作っていきましょう。
固定ページ用ファイル
page.phpが固定ページのファイルです。
index.phpを複製してリネームするなどして、page.phpを準備してください。
【ご注意】固定ページへのコピペについて
本記事では記載されているコードをそのままコピペして、一旦各ページを構成してもらいます。
掲載したコードはsingle.phpにも流用できる、あくまで基本的なものです。
実際には各HTMLテンプレートのサブページのコードをコピペしてもらうので、下で紹介するphpコード等は含まれないと思います。
慣れてきたらいろいろ他の技術サイトなどを調べてもらえば、phpコードを絡めたより複雑かつ多彩な表現ができるようになります。
固定ページの作り方
下記コードをpage.php内に記述します。
<?php get_header(); ?> <section id="content"> <div class="container"> <div class="col-sm-9"> ##ここからが重要なphpコード <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h3><?php the_title(); ?></h3> <section> <?php the_content(); ?> </section> <?php endwhile; endif; ?> ##ここまで </div> <div class="col-sm-3"> <?php get_sidebar(); ?> </div> </div> </section> <?php get_footer(); ?>
上記にはヘッダーおよびフッターの読込コードまで含まれているので重複しない様にしましょう。
※上記をpage.php内に記述しないと固定ページは表示されません。
これによりWordpress管理画面で固定ページを1つ作成したら、そのページがこのpage.phpをベースに表示される事になります。
固定ページ内に自動でpタグが入るのを防ぐ
固定ページの作成時に、HTMLの時と比べて何となく表示がずれる事があります。
多くの場合、固定ページで段落が「pタグ」で自動で囲われてしまう事が影響しています。
直接入力をすればその始まりと終わりに入り、タグをコピペしてもその最初の段と最期の段に自動でpタグが入ります。
固定ページでは自動でpタグが入らない様、以下のコードを設置しましょう。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> //ここから入れる <?php remove_filter('the_content', 'wpautop'); ?> <?php the_content(); ?> <?php endwhile; endif; ?>
こうする事で固定ページに入れたHTMLソースのみとなり、表示のズレは無くなるはずです。
複数の固定ページレイアウトを実現する
通常HTMLサイトテンプレートには複数のサブページが存在するはずです。
それを固定ページで実現するためには複数固定ページを用意して紐づけさせる必要がありますね。
ここでは2通りの種類別固定ページの作り方を紹介します。
専用固定ページ(スラッグ名付き)
page-【スラッグ名】.phpでphpファイルを作ります。
固定ページを作った時の「スラッグ名:aaa」と固定ページのpage-aaa.phpの「aaa」部分を揃えます。
するとそのスラッグ名が「aaa」と付いた固定ページを表示する際に、自動でpage-aaa.phpが読み込まれる様になります。
固定ページの選択方式
固定ページの内容によって、前もって準備しておいた複数の固定ページパターンの中から一つ選べる方法です。
page.phpを複製リネームして3つ準備します。
・page-pattern1.php
・page-pattern2.php
・page-pattern3.php
それぞれのphpファイルの中身を対象のレイアウト構造に変更(レイアウト元のHTMLページからコピペ)しましょう。
レイアウト変更が完了したらそれぞれの上部に下記の様にいれます。
/**
* Template Name: パターン1
* Description: パターン1用のテンプレート
*/
?>
同様にパターン2・パターン3としておきます。Descriptionは覚書として使えます。
管理画面で固定ページレイアウトをチョイス
固定ページを作ったらテーマフォルダにUPします。次に管理画面を開き、固定ページの編集ページへ行きましょう。
ページ右袖にあるページ属性の「テンプレート」欄にある下向き▼から選択をします。
下向き▼の中に先ほどTemplateの名前として記述した3種のパターンの名前が表示されているはずです。
ここで選んだパターンの固定ページが反映されるという訳です。
404エラーページ作成
次に必要なのが、エラー時に表示ページ「404ページ」です。
リンク切れページや存在しないページに来た時に、ユーザーにわかりやすく知らせる必要があります。
具体的には「ページが存在しません」などと表示する事になります。
404エラーページの作り方
テーマ上のファイル名は、404.phpになります。
ここまでで作っていたsingle.phpやpage.phpを複製してOKです。
header.phpやfooter.phpは同じものを使い回せますから簡単ですね。
404.php内のコード例
<div class="row clearfix page-404"> <div class="col col-sm-12"> <h2>ページが見つかりませんでした</h2> <p>指定された以下のページは存在しないか、または移動した可能性があります。</p> <p class="error_url">URL :<span><?php echo get_pagenum_link(); ?></span></p> <p>現在表示する記事がありません。よろしければ、検索ボックスにお探しのコンテンツに該当するキーワードを入力して下さい。</p> <?php get_template_part("searchform"); ?> //検索ボックス </div> </div>
上記サンプルでは下に検索ボックスを設けていますが、本記事では検索ページを用意していません。検索ページについては、また次の機会に解説したいと思います。
これ以外に、TOPページに戻るリンクがあっても良いかも知れません。
上記ファイルを作ったら、theme内のテーマファイルフォルダ内にUPしましょう。
これで存在しないページに来た場合、このエラーページが表示されるはずです。
404エラーページが無いとどうなる?
この404エラーページは、単に存在しないページへ来た場合の受け皿です。
ですがこの404エラーページが存在しないと、受け皿として「TOPページ」が表示される事になります。
つまり404エラーの場合、いきなりTOPページをユーザーに見せる事になる訳です。
ページが存在しない事をユーザーが認識できない
ユーザーはTOPページを見せられても、存在しないページだったとは認識できません。
「あれ?なんでTOPページに戻ったの?」と疑問に思う事でしょう。
この様に上部のタイトル上では「ページが見つかりませんでした」と表示されているのですが、外観はTOPページそのままです。
きちんと404エラーページを設けないと、ユーザーを迷わせてしまいます。
自作テーマを用意する場合は、必ず準備するようにしましょう。
まとめ
以上、本記事はHTMLサイトテンプレートのWordpressテーマへの基本的な落とし込みまでをご紹介しました。
この後は新着情報やブログ記事投稿ページ作成のところへ進んでいきます。
HTMLテンプレートにもBlogページのテンプレートが入っている事が多いのでそこの落とし込みになりますね。
投稿ページの作成
ちなみに投稿ページは固定ページで作成したpage.phpを流用します。
page.phpをコピーしてsingle.phpにリネームする形ですね。
page.phpに書いてあるコードがあれば、single.phpにリネームした時にそのまま投稿記事を表示してくれるようになります。
この辺りは次のWordpressテーマ化【応用編】にてご紹介したいと思います。
Wordpress制作への自信を持ってもらいたい
これで、HTMLテンプレートさえあればいつでもWordpressのテーマに使えるようになりますね。
今までWordpressベーステーマの選定には苦労した人もいらっしゃると思いますが、これで多少Wordpress制作に対する自信がつくのではないでしょうか。
もちろんWordpressで覚えなければならない事はまだまだあります。これでわかったつもりになってはいけません。
今回紹介した基本編はまだまだ序の口ですが、これを足掛かりにWordpressサイト構築の世界へ第一歩を踏み出して頂ければ嬉しいです。