【15：1-1 Architects 】オリジナルWordpressテーマ

f:id:seintoseiya:20150611205704p:plain
プロジェクトNo.15：1-1 Architects

知り合いの建築家に頼まれて、オリジナルWordpressテーマを作りました。
勉強しながらの初めての仕事だったので、特別価格の晩飯代だけで手を打ちました。
オーダーメイドで作るのって大変。これはたしかに仕事にできるかも。（まだまだ細い配慮が足りないと思いますが。。。）

HTMLでデモサイトを作成

まずはデモサイトを作って、クライアントに確認。

今回の要望は以下のとおり：

TOP画面

シンプルにメインビジュアル（スライド画像）のみ。
ヘッダーにはタイトルとグローバルメニュー、フッターにはSNSリンクとcopyrightを配置。

about画面

２カラムで日本語と英語を記載したい。

works画面

画像を横並びで表示させたい。
画像の下にキャプションを表示させたい。

blog

別ブログへのリンク。

contact

シンプルなコンタクトフォーム。

スライド画像の実装

jQueryを使って簡単に実現できる方法があったので以下を参考に実装させてもらいました。
http://raining.bear-life.com/jquery/jquery%E3%81%A7%E8%A4%87%E6%95%B0%E3%81%AE%E7%94%BB%E5%83%8F%E3%82%92%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%81%97%E3%81%A6%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B

スマホ対応

スマホで見たときにスタイルが崩れない様にmax-widthなどで整えて、
メニューはスマホの場合に下部に移動させることで、押しやすい様に対応しました。

Wordpress用に訂正及びファイルを分割

さて、ここからが本題。
作成したHTML+CSSを元にWordpressテーマ用に作成していきます。

用意するファイルは以下の通り。

style.css：スタイルシート
index.php：TOP画面
header.php：ヘッダー
footer.php：フッター
single.php：投稿ページ
page.php：固定ページ
functions.php：各種機能の設定
screenshot.png：テーマ選択画面でのサムネイル

CSS

まずはCSSの冒頭に以下の文を追加。

style.css

/*
Theme Name: 1-1arch
Theme URI: http://1-1arch.com/
Description: １カラムのシンプルなデザイン。固定ページのみに対応しています。メニューボタンはレスポンシブデザインに対応しており、さまざまなデバイス上で表示できます。
Author: Seiya Tanaka
Version: 1.0
*/

: 以降は適宜変更します。
これでWordpressの管理画面からオリジナルテーマを選べる様になります。

index.php, header.php, footer.php, single.php, page.php

headerとfooterはそれぞれのファイルで読み込ませれば良いのですが、
Wordpressの管理画面から編集した内容をどう反映するかは、
テンプレートタグというのを使います。

例えば、固定ページの内容を表示したいのであったら以下の様にします。

page.php

<?php
if (have_posts()) :
	while (have_posts()) :
		the_post();
?>
<div class="post-header">
	<h2>
		<?php  the_title(); ?>
	</h2>
</div>
<div class="post-content">
	<?php the_content(); ?>
</div>

<?php 
	endwhile;
else:
?>

<p>ページはありません</p>

<?php
endif;
?>

メニューを管理画面から変更できる様にする

まずは表示させたい部分に以下のテンプレートタグを追加。

header.php

<?php wp_nav_menu(); ?>

functions.phpに以下の文を追加。

add_theme_support('menus');

これで管理画面に”メニュー”という項目が増えて編集できるはずです。

ヘッダー画像を管理画面から変更できる様にする

これはカスタムヘッダーという機能を使います。
まずは表示させたい部分に以下のテンプレートタグを追加

index.php

<div id="viewer">
	<?php
		$header_images = get_uploaded_header_images();
		if ($header_images) {
			foreach ($header_images as $key => $value)
				echo '<img src="'.$value['url'].'" />';
		}else{
			echo '<img src="'.get_template_directory_uri().'/images/shiga3.jpg" />';
			echo '<img src="'.get_template_directory_uri().'/images/kasamatsu1.jpg" />';
		}
	?>
</div>

functions.phpに以下の文を追加。

functions.php

// カスタムヘッダー画像を設置する
$custom_header_defaults = array(
	'default-image'          => get_bloginfo('template_url').'/images/step.png',
	'width'                  => 1280,
	'height'                 => 563,
	'header-text'            => false,	//ヘッダー画像上にテキストをかぶせる
);
add_theme_support( 'custom-header', $custom_header_defaults );

これで管理画面に”ヘッダー”という項目が増えて編集できるはずです。

固定ページや投稿ページを２カラム（複数カラム）にする

HTML+CSSだけの時はfloatを使って表現できましたが、
Wordpressとなると、編集画面を想像していただけるとわかる通り、２カラムの編集が通常不可能です。
ここはだいぶ悩んだ部分ですが、結果的に一番楽な方法で解決しました。
Page Builder By SiteOriginというプラグインを入れる事で、直感的に編集できるようなインタフェースを提供できます。
直感操作でページ作成！WordPressプラグインページビルダー(Page Builder)

これはかなり便利ですね！