AUTOCODINGを使って８ページのコーディングとWordPress化を４時間でやってみた-後編-

by Risa · 2015年4月28日

こんにちは、Risaです。

遂に後半、今回はAUTOCODINGを行ったhtmlからWordPress化を行う工程について説明させていただきます。

前編・中編をご覧になられていない方は、前編から順に見ていただくと
この後の話がわかりやすいかと思いますので、ぜひ。
AUTOCODINGを使って８ページのコーディングとWordPress化を４時間でやってみた-前編-
AUTOCODINGを使って８ページのコーディングとWordPress化を４時間でやってみた-中編-

WordPress化を行う　約3時間

まず、先ほどAUTOCODINGでコーディングしたTOPページのソースコードを開きます。
表示することだけを考えればp-top.phpなどとして、1ページの中にすべてhtmlを入れてしまっても良いのですが、
それではあまりにもアレなので、header/メインコンテンツ/footerでファイルを分けていきます。

まず、ソースコードでheaderタグで囲んだ部分を新規ファイルとして取り出します。

実際のコードだと、

<html>
 <head>
  <title><?php echo get_the_title(); ?></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="description" content="Your site's description should be here">
  <meta name="keywords" content="Your site's keywords should be here">
  <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css"> 
  <!--[if IE 6]>
	<style type="text/css">
		* html .group {
			height: 1%;
		}
	</style>
  <![endif]--> 
  <!--[if IE 7]>
	<style type="text/css">
		*:first-child+html .group {
			min-height: 1px;
		}
	</style>
  <![endif]--> 
  <!--[if lt IE 9]> 
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
  <![endif]--> 
  <?php wp_head(); ?>
 </head>
 <body id="top">

この部分ですね。

上のコードは既に置き換え済ですが、タイトルの部分を

<?php echo get_the_title(); ?>

に置き換え。
cssの呼び出しも

<?php echo get_template_directory_uri(); ?>

にしておきます。

というように、各要素にWordPress化するためのタグ付けをしていきます。
このあたりは手動コーディングと何も変わりません。

このファイルをheader.phpとするのですが、
今回のデザインではTOPと下層でheaderのコーディングがやや違うので下記のphpを書いておきます。

<?php if(is_page('ページID')): ?><!doctype html>

これで、先にTOPページのheaderだけ分岐させておきます。

次に下層のheaderをコピーしてendifの後にまた分岐をつくりそこに貼り付けます。構成としては

<?php if(is_page('ページID')): ?><!doctype html>
ここにTOPのheader
<?php endif; ?><?php if(!(is_page( array('ページID'))) ): ?><!doctype html>
ここに下層のheader
<?php endif; ?>

こうしておくことで、ひとつのheaderファイルでTOPと下層の表示の指示をすることが出来ます。
navの扱いですが、今回は更新時にファイルが多くて迷子にならないように別ファイルにせず、下層のheaderの続きにnavの中身もつけてしまいました。分ける場合には別ファイルで作ってincludeして下さい。

footerはひとつのものを使いまわすので、TOPで書きだしたものをfooter.phpとして保存しておきます。

これでheaderとfooterの設置が完了しました。ほぼコピペだけの作業ですね。

今回はメインコンテンツを固定ページに流し込みたいと思いますので、p-templateをを作ります。

<?php
/*
 Template Name: Template
 */
?>

<?php get_header(); ?>
  <?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<?php the_content(); ?>

<?php
endwhile;
endif;
?>

<?php get_footer(); ?>

これで完了です。シンプルですね。

次に、style.cssを作ります。
作業当時(2015/3 上旬)のAUTOCODINGではCSSの一元化が出来ていなかったため、ここの作業が少しミソになります。
CSSは、TOPと下層合わせて全8ファイルあります。
それぞれのファイルをcssフォルダにまとめてページ別にインクルードをして・・・というやり方でもいいのですが、今回はあえてstyle.cssにすべてのcssをまとめてみました。

この場合、psdで出力をする時に少し工夫が必要です。
ですが、2015年春のアップデートでこのCSSの件も解決する予定でいますので、それ以降に読まれている場合はこの手順は全て不要です！
css一元化以降にお読みの方はこの項目は飛ばしてくださいませ。

今回はheader,footerは1ファイルにすることを念頭に置いていたので、メインコンテンツになる部分のwrapフォルダに、ページごとに独自のclass名をつけておきました。
例えばメリットのページであれば、#header　#nav　#merit#article　#footerといった構成です。
articleでmeritという名前の上位ブロックですべてのメインコンテンツ要素が囲われているので、cssの頭にすべて.meritをつけてmeritページにしか効かないようにしていきます。

なぜこんなことをするのかと言うと、単体ページとして書きだしたcss同士では、全てのレイヤーに指示を入れていない場合、重複するclass名が出てくる可能性があるからです。
その場合、style.cssの中にlayer01が3つある(しかもすべて違う指定が入っている)という事にもなりかねません。
それを防ぐため上記のような一手間を加えています。

無事すべてのcssを一元化することが出来ました。

あとは、WordPressのtemplate化に必要なファイルを諸々用意して、wp-contents/themeに適当な名前のフォルダを作って入れていきます。

これでテーマファイルが完成しました！

最後に、各ページのhtmlファイルを固定ページへ流し込んでいきます。

この時、合わせてパーマリンク設定を個別で変えていきます。
メリットページなら/merit/になるように…headerのメニューを書き出すときにpsdで指定したURLと合うように、各ページのURLを指定していきます。
また、今回はimageフォルダの中でページごとにフォルダを分けましたので、画像のパスもWordPress独自タグ＋新しい階層になるよう、すべて変更しました。

 <img class="autocoding" src="<?php echo get_template_directory_uri(); ?>/image/merit/autocoding.png" alt="AUTOCODING">

すべてのページの流し込みが終わったら、最後にリンクの繋ぎがおかしくないか・CSSが効いていない箇所はないか等の納品前チェックを行い作業完了です。

TOPと下層のheader分岐と、cssの箇所以外は、普通のWordPress化の手順と同じことを行いました。
AUTOCODINGを使用してもその後のCMS化には影響がないという事がこの記事から伝われば嬉しいです。

AUTOCODINGでは、WordPressの自動実装も予定しておりますので、
将来的にはこの記事で紹介してきた作業は不要になると思います。

その際には「AUTOCODINGから自動でWordPress化してみた！」という記事を書ければと思いますので、楽しみにしていてくださいね！

では、全3回の連載、お付き合いいただきありがとうございました。

AUTOCODINGを使って８ページのコーディングとWordPress化を４時間でやってみた-前編-
AUTOCODINGを使って８ページのコーディングとWordPress化を４時間でやってみた-中編-