#Creating a WordPress Theme From Static HTML: Preparing the Markup -マークアップの準備：静的なHTMLからWordPressのテーマを作成する-
昨年、私は他のWordPressの開発者の間で小さな調査を行いました。 私が知りたいと思ったは、開発者たちが、最初のWordPressのテーマを構築した時、どのように行うのか？ということです。 既存のテーマをハックする方法だったのか、それとも、静的なHTMLから作り、それをテーマに変えたのか？
私は2番めのアプローチを使うために、多くの人々に話を聞きました。 彼らは、HTMLやCSSを使用してサイトを構築していた、経験豊富なフロントエンドの開発者であり、 彼らは、既存のHTMLファイルを取得し、テーマに変換するのが最も簡単だという事を発見していました。 さらに私は、講師や教師だったという人々から、「これは学生に対してのアプローチである」ということを教わりました。
そのため、このシリーズではその方法を紹介するつもりです。 あなたは、（スタイルシート付きの）単一のHTMLファイルから、複数のテンプレートファイルと、様々なフックにそれらをまわし、 関数、テンプレートタグ、ループを使用して、メニューやウェジェットなどにインクルードされます。
この最初のチュートリアルでは、後のシリーズで我々がカバーすることとなる、テーマ用のPHPに変換する前の、htmlファイルを準備する方法を説明します。
#What You’ll Need -必要なもの-
- 好きなエディタ
- ブラウザ
#1. Why Prepare Your HTML? -HTMLを準備する訳-
セオリーとして、正しいテンプレートタグとループを追加しテーマ内で回すことで有用なHTMLを取得することが出来ましたが、それよりももう少し徹底したもの推奨します。
その理由は、メニューやウィジェットなどの機能を追加し始めた時、WordPressはHTML要素やクラスを追加しますので、それらの要素やクラスを初期位置で操作することが理にかなっているからです。
前項のチュートリアルで、WordPressが生成するクラスやIDを概説していますので、読み進める前にそれらをよく理解することをおすすめします。
もう一つの理由は、あなたのマークアップがHTML5で書かれ、標準に準拠しているかを確認するためです。
もし古い静的サイトをWordPressに変換する場合、率直に言って、HTMLの以前のバージョンである古いコードを整理整頓する必要性が出てくるかもしれません。
あなたのマークアップを片付けるべきかを伝えることはできませんが、WordPressでHTML5を利用して、ドキュメントを構造化する上でのアドバイスを与える事ができます。
#2. HTML5 and WordPress – Structuring Your Markup -HTML5とワードプレス - マークアップの構造化-
html5には<article> や <aside> といった、ワードプレスのテーマで明らかに行き場を持っているような要素がいくつか存在します。 これらがどのように使用されるべきかという考えは、常に発展していますので、実際の利用においてはあなたの判断で活用して下さい。
htmlファイルでは、私はこのチュートリアルで作業を行うつもりですが、構造は以下のようになります。
ご覧のように、html5の要素の数だけでなく、html5に先行した、いくつかを使用しています。
このチュートリアルの次の部分では、どのようにテンプレートファイルにこの構造体を分割するか その方法を紹介しますが、今のただのindex.htmlと呼ばれる1ファイルに、すべて保管してください。
もし、あなたのマークアップがすでに構造化されており、それがhtml5で書かれていない場合は、関連する箇所の変更を行うのに時間がかかります。 重要なのは、ページの以下の領域が、明確に定義されていることです。
- the header
- the content
- the sidebar
- the footer
##3. Adding Classes and IDs Generated by WordPress -ワードプレスによって生成されるクラスとIDの追加-
-ワードプレスによって生成されるクラスとIDの追加-
次のステップでは、マークアップを介して動作するように、完成したテーマが吐き出すclassやIDを追加します。 classやIDは後で追加するPHPの関数によって自動的に追加されるため、この段階では、最終的なテーマには影響しません。 しかし、あなたが今classやIDを追加し、スタイルシートでそれらを使用すると、ワードプレスのテーマから変換されたHTMLには引き続き動作します。
順番にマークアップの各部分を介して動作します。
###The Header ワードプレスはサイト名や説明にclassやIDを自動的に追加しませんが、ワードプレスの用語と一致しているものを使用することは理にかなっています。 以下のようにヘッダの左側は、その中に、サイトの名前と説明を持つdiv要素が含まれています。
<div class="site-name half left"><!-- site name and description --></div>
<div class="site-name half left">
<h1 class="one-half-left" id="site-title"><a title="Creating a WordPress theme from static html - home" rel="home">WordPress Theme Building</a></h1>
<h2 id="site-description">Creating a WordPress theme from static html</h2>
</div>
私のデザインの右側には、住所や電話番号または検索ボックスのためのスペースがあります。 あなたは、あなたのテーマのユーザーに、ウィジェット領域として設定することで、完全な柔軟性を与えることができます。
後のシリーズで、どのようにウィジェット領域を作成するかを紹介しますが、今は関連するクラスを追加します。
<!-- an aside in the header - this will be populated via a widget area later -->
<aside class="header widget-area half right" role="complementary">
<div class="widget-container">This will be a widget area in the header - address details (or anything else you like) goes here</div><!-- .widget-container -->
</aside><!-- .half right -->
###Images コンテンツに追加する最も重要なことは、画像のためのクラスです。 ワードプレスでは、メディア・マネージャに追加する手段に基づき、画像のクラスが生成されます。 それらの全てがテーマに含まれていることを確認しなければなりません。
私のダミーのページのマークアップでは2つの画像があります。 一方が大きく、もう一方はミディアムで右側にフロートしています。
最初に追加為の
<img class="size-large" alt="" src="images/featured-image.jpg" />
2番に追加するための
<img class="alignright" alt="" src="images/another-image.jpg" />
（Note that in your final theme you’ll remove the code for these images as they’ll automatically be added by WordPress, but it helps to include them so that you can set up the styling correctly.） 最終的なテーマに関する注意 これらは自動的にWordPressによって追加されますが、同様にコードを削除する事ができますが 正しくスタイリングし、それを含めることも出来ます。
マークアップにクラスを追加したので、画像用のクラスをスタイルシートに対し、以下のとおり追記しなければなりません。
/* Images */
img {
max-width: 100%;
}
#content img {
margin: 0;
height: auto;
width: auto;
}
#content .alignleft,
#content img.alignleft {
float: left;
margin: 4px 4% 4px 0;
}
#content .alignright,
#content img.alignright {
float: right;
margin: 4px 0 4px 4%;
}
#content .aligncenter,
#content img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
#content img.alignleft,
#content img.alignright,
#content img.aligncenter {
margin-bottom: 12px;
}
デモのページを見ると、最初の画像はコンテンツ幅の100％であり、2番めの画像は右にフロートさせて余白をとっています。
###Sidebar and Footer
サイドバーとフッターもウィジェットエリアに含む必要があるので、関連するクラスをを使用するように、 マークアップとスタイルを追加し、スタイルシートにそれらを使用するように記述する。
サイドバーのマークアップは下記の通り
<!-- the sidebar - in WordPress this will be populated with widgets -->
<aside class="sidebar widget-area one-third right" role="complementary">
<div class="widget-container">
<h3 class="widget-title">A sidebar widget</h3>
<p>This is a sidebar widget - in your WordPress theme you can set these up to display across your site.</p>
</div><!-- .widget-container -->
<div class="widget-container">
<h3 class="widget-title">Another sidebar widget</h3>
<p>A second sidebar widget - maybe you could use a plugin to display a social media feed, or simply list your most recent posts.</p>
</div><!-- .widget-container -->
</aside>
（The markup for the footer contains four widget areas, each of which can hold more than one widget. As you can see below, I add a class to each which tells the browser which one it is, so I can target each of them for styling later on.） フッターのマークアップは、4つのウィジェットエリアを含んでおり、それぞれが複数のウィジェットを保持することが出来ます。 以下を参照してもらうと、
それぞれがブラウザに対して指示するクラスを追加しています。 その為、それぞれをターゲットにしたスタイリングを後から行えます。
###Summary テーマファイルに変換するhtmlファイルの準備が出来ました。 次のチュートリアルでは、それらを分割し、いくつかの基本的なPHPを追加する方法を説明します。 <<<<<<< HEAD
最初に追加為の
<img class="size-large" alt="" src="images/featured-image.jpg" />
2番に追加するための
<img class="alignright" alt="" src="images/another-image.jpg" />
（Note that in your final theme you’ll remove the code for these images as they’ll automatically be added by WordPress, but it helps to include them so that you can set up the styling correctly.） 最終的なテーマに関する注意 これらは自動的にWordPressによって追加されますが、同様にコードを削除する事ができますが 正しくスタイリングし、それを含めることも出来ます。
マークアップにクラスを追加したので、画像用のクラスをスタイルシートに対し、以下のとおり追記しなければなりません。
/* Images */
img {
max-width: 100%;
}
#content img {
margin: 0;
height: auto;
width: auto;
}
#content .alignleft,
#content img.alignleft {
float: left;
margin: 4px 4% 4px 0;
}
#content .alignright,
#content img.alignright {
float: right;
margin: 4px 0 4px 4%;
}
#content .aligncenter,
#content img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
#content img.alignleft,
#content img.alignright,
#content img.aligncenter {
margin-bottom: 12px;
}
デモのページを見ると、最初の画像はコンテンツ幅の100％であり、2番めの画像は右にフロートさせて余白をとっています。
##Sidebar and Footer
サイドバーとフッターもウィジェットエリアに含む必要があるので、関連するクラスをを使用するように、 マークアップとスタイルを追加し、スタイルシートにそれらを使用するように記述する。
サイドバーのマークアップは下記の通り
<!-- the sidebar - in WordPress this will be populated with widgets -->
<aside class="sidebar widget-area one-third right" role="complementary">
<div class="widget-container">
<h3 class="widget-title">A sidebar widget</h3>
<p>This is a sidebar widget - in your WordPress theme you can set these up to display across your site.</p>
</div><!-- .widget-container -->
<div class="widget-container">
<h3 class="widget-title">Another sidebar widget</h3>
<p>A second sidebar widget - maybe you could use a plugin to display a social media feed, or simply list your most recent posts.</p>
</div><!-- .widget-container -->
</aside>
（The markup for the footer contains four widget areas, each of which can hold more than one widget. As you can see below, I add a class to each which tells the browser which one it is, so I can target each of them for styling later on.） フッターのマークアップは、4つのウィジェットエリアを含んでおり、それぞれが複数のウィジェットを保持することが出来ます。 以下を参照してもらうと、
それぞれがブラウザに対して指示するクラスを追加しています。 その為、それぞれをターゲットにしたスタイリングを後から行えます。
##Summary テーマファイルに変換するhtmlファイルの準備が出来ました。 次のチュートリアルでは、それらを分割し、いくつかの基本的なPHPを追加する方法を説明します。