translation-1.md

http://wp.tutsplus.com/tutorials/theme-development/creating-a-wordpress-theme-from-static-html-preparing-the-markup/

#What You’ll Need -必要なもの-

• 好きなエディタ
• ブラウザ

#1. Why Prepare Your HTML? 省略します

#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の追加-

次のステップでは、マークアップを介して動作するように、完成したテーマが吐き出す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を追加する方法を説明します。