デザインは
かっこいいとかじゃなくてストーリーのあるやつを
静的な状態で一度こしらえて、そのファイルはとっておいて、
(wordpressで)
動的なのをこしらえる（<?phpをはめこむ）といいらしい
ちなみに静的なのはファイル名にstaticをつけておけばいい
yatさんのブログに沿ってやってみる
独力でやる練習でもある
1.サンプルをDL。展開。(サンプルファイルは途中にある)
2.展開したフォルダを
C:\xampp\htdocs\wordpress\wp-content\themes\に
wpbegフォルダとしてほうりこむ（フォルダ名のstaticは取っても取らなくてもよい）
3.現状はこう
wpbegフォルダ
[css]/wpbeg.css
[images]
/index.html
/page.html
/single.html
すなわち自分が実際こしらえた静的デザインもこういう形で用意するわけだな。
4.index.html を index.php にリネームする
index.html 同様、single.html、page.htmlも拡張子をphpにリネーム
style.cssを作成して必要な記述を行う
なおこれらのファイルはテーマディレクトリの直下に置く必要がある(\wpbegのこと)
5.style.cssを制作して直下(index.phpとかが入っているところ)に保存
内容はこの通り
--->
/*
Theme Name: WPBEG
Description: テーマ開発練習用テーマ
Version: 1.0.0
Theme URI: https://github.com/yat8823jp/wpbeg
Author: YAT
Author URI: https://wp.yat-net.net.com
Tags: right-sidebar, blog
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: wpbeg
*/
意味は以下のとおり
--->
/*
Theme Name: //テーマの名前
Description: //テーマの説明
Version: //バージョン
Theme URI: //テーマの URL
Author: //作った人の名前
Author URI: //作った人の URL
Tags: //テーマのタイプ
License: //ライセンス（WordPressのテーマやプラグインを公開して配布する場合、ライセンスはGPLになります。）
License URI: //ライセンスの URL
Text Domain: //テキストドメイン（翻訳させたい箇所を指示する際に使います。テーマディレクトリ名を入れます。）
*/
これらはWordPressがテーマを認識するのに必要。
5.1200✕900ピクセルで画像を作り、 screenshot.png という名前でテーマディレクトリに作った wpbeg フォルダの直下に保存
これもブログの途中にファイルがあるので保存してフォルダに入れればいい
6.ファビコンも用意
独自のアイコンのこと。中身は画像ファイルだが拡張子はico。
>サンプルの場合、faviconは images/common/ico/favicon.ico に入っています。
7.この時点でスタイルが当たっていない
いまから必要なのは、
style.css
rtl.css(言語によってはテキストを右から左へ記述するものが有で必要)
index.php
comments.php(コメント部分を表示)
front-page.php
home.php(管理画面にある 設定 ＞ 表示設定 の最新の投稿を表示する為)
single.php(投稿を表示)
single-.php
page.php
もろもろ。
8.header部分をセパレートする
index.phpの冒頭から</header>まで。
切り取ったのをheader.php という名前で テーマディレクトリの wpbeg 直下へ保存。(いわゆるwpbegフォルダのこと)
index.php からヘッダー部分がなくなってしまったので、なくなってしまった箇所に <?php get_header(); ?> と記述。
<?php get_header(); ?> //header.phpを読み込むテンプレートタグ（インクルードタグ）
>詳しく知りたい方は Codex を読みましょう
9.同様にフッター部分をindex.phpから切り取る
>footer.php として保存し、index.php には <?php get_footer(); ?> と記述して、フッターを読み込みます。
10.サイドバーの部分を抜き出す
<div class="p-sidebar">から
<li><a href="#">2017年9月</a></li>
</ul>
</div>
</div>
ここまで
> sidebar.php として保存し、index.php では <?php get_sidebar(); ?> と記述してサイドバーを読み込みます
10.ここまででテーマディレクトリの中は下記の通り
wpbegフォルダ
[css]/wpbeg.css
/footer.php
/header.php
[images]
/index.php
/page.php
/screenshot.png
/sidebar.php
/single.php
/style.css
11.wordpress特有のパーツをはめこむ
以下のことをさせたい:
サイトの名前を取得を取得して表示
サイトの情報を取得を取得して表示
トップページのURLを取得して表示
index.phpを変更。phpをうめこむ
<h1 class="header__ttl">
<a href="./">WPBEG<span class="header__ttl__sub">static</span></a>
</h1>
<p class="header__descrition">Just another WordPress site</p>
↓
<h1 class="header__ttl">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?><span class="header__ttl__sub">static</span></a>
</h1>
<p class="header__descrition"><?php bloginfo( 'description' ); ?></p>
>
bloginfo( 'name') //管理画面の設定 ＞ 一般 にある「サイトのタイトル」を取得して表示
home_url( '/' ); //現在のブログのホームURLを取得します。そのままですると '/' (スラッシュ)が付かないで、 `/` を付けて出力
bloginfo( 'description' ); //管理画面の設定 ＞ 一般 にある「キャッチフレーズ」を取得して表示
12.bodyタグにもphpをはめこむ
たぶんこう。
<body <?php body_class(); ?>>
今日はここまで！
