光速テーマ開発のコツWordCamp KOBE 2011

Designer’s Cafe 13:00-13:20

Takuro Hishikawa(@HissyNC)

2011年9月11日日曜日

菱川拓郎

神戸・大阪を拠点に活動するフリーランスのWebエンジニア。お仕事は主にWordPressのカスタマイズ・アドバイザー。オープンソースCMS「WordPress」「concrete5」の地域コミュニティに所属し、普及活動を行っている。

Twitter: @HissyNC

2011年9月11日日曜日

光速テーマ開発とは何か

光の速さでWordPressテーマを作成することである！

ターゲット：コーポレートサイト制作のためのテーマWordPressテーマを作ったことがある方

2011年9月11日日曜日

テーマ作成のどこに時間がかかっているのか？

2011年9月11日日曜日

ループを書くのが面倒

ループとは…

WordPressテーマの超基本ですが…中のテンプレートタグも含め覚えにくいできれば書きたくない

if ( have_posts() ) : while ( have_posts() ) : the_post();～ endwhile; endif;

2011年9月11日日曜日

分岐でミスる

分岐とは…

デザインを細かくカスタマイズするには必要ですが…分岐が増えると見にくいしエラー発生

if ( is_home() || is_front_page() ):

if ( is_category(‘5’) ):

2011年9月11日日曜日

カスタマイズした場所がよく分からなくなる

特に既存のテーマをカスタマイズする場合…

自分でどこをカスタマイズしたのか、あとで見ても分かりにくい。エラーが出ても戻せない。

2011年9月11日日曜日

解決策は…

子テーマを活用して、どこをカスタマイズしたか分かりやすく！

ループと分岐は、できるだけ書かない！

光速テーマ開発ライフを実現！

2011年9月11日日曜日

「子テーマ」を活用すべし

2011年9月11日日曜日

子テーマとは…

すでにあるテーマを「親」として、新しくテーマを作る仕組み

親テーマにあるファイルは、変更しない限り子テーマでは用意しなくてよい

「子テーマ」機能は、CSSに似ている

2011年9月11日日曜日

簡単！子テーマの作り方子テーマのstyle.cssに、読み込む親テーマのディレクトリ名を書くだけでOK

/*Theme Name: KidTheme URI: http: //example.com/Description: 子テーマの説明Author: DemetrisAuthor URI: http: //example.com/about/Template: twentytenVersion: 0.1.0*/

2011年9月11日日曜日

簡単！子テーマの作り方スタイルシートも親テーマのものを読み込ませたい場合は、@importを使う

以上で、親テーマと全く同じ見た目の子テーマが完成。

@import url('../twentyten/style.css');

2011年9月11日日曜日

ヘッダの見た目を整えよう

子テーマのCSSに少し付け加えてみる

どこをカスタマイズしたのか分かりやすい。

時間短縮のポイント！

2011年9月11日日曜日

サイドバーを変更しよう

子テーマにsidebar.phpを設置する

子テーマにファイルがあれば、それが優先される

どこをカスタマイズしたのか分かりやすい。

時間短縮のポイント！

2011年9月11日日曜日

テンプレート階層を理解すべし

2011年9月11日日曜日

テンプレート階層とは…

ルールにしたがってPHPファイルを作成することで、プログラムを書かなくても細かい条件に従ったデザインカスタマイズができるしくみ

…つまりどういうこと？

http://wpdocs.sourceforge.jp/テンプレート階層

2011年9月11日日曜日

カテゴリーアーカイブの階層archive.php広い条件

狭い条件

category.php

category-news.php

カテゴリー、タグなど、全てのアーカイブ

カテゴリーアーカイブ

newsカテゴリーのアーカイブ

2011年9月11日日曜日

テンプレート階層は子テーマで真価を発揮

子テーマでは狭い条件のテンプレートファイルだけ作成

広い条件のテンプレートファイルは親テーマにおまかせ！

2011年9月11日日曜日

ニュースカテゴリ一覧の見た目を変更しよう（１）子テーマのディレクトリにcategory-news.php を作成する

query_posts( $query_string . "&{追加条件}" );

query_posts() を使うと、さらに表示条件をカスタマイズできる

2011年9月11日日曜日

ニュースカテゴリ一覧の見た目を変更しよう（１）

<?php// query_postsで表示条件を上書きするquery_posts( $query_string . "&posts_per_page=12" );// あとはループを読みこめばOK

get_template_part( 'loop', 'list' );?>

2011年9月11日日曜日

get_template_part()を活用すべし

2011年9月11日日曜日

get_template_part()

WordPress3.0までも、ヘッダー・フッター・サイドバーが読み込めた

get_template_part() を使うと、ループのような使いまわせる部分を別ファイルに分けて、読みこませることができるようになった

2011年9月11日日曜日

get_template_part()の使い方

{slug}-{name}.phpを読み込む

<?php get_template_part( $slug, $name ) ?>

{slug}-{name}.phpが無かったら、{slug}.phpを読み込む

2011年9月11日日曜日

ニュースカテゴリ一覧の見た目を変更しよう（２）

loop-list.php があれば使う。なければ loop.php を使う。

get_template_part( 'loop', 'list' );

現在は親テーマの loop.php が使われている。

2011年9月11日日曜日

ニュースカテゴリ一覧の見た目を変更しよう（２）

親テーマの loop.php をコピーしてきてファイル名を loop-list.php に変更

要らない部分をコメントアウト

CSSを調整して完成！

2011年9月11日日曜日

トップページに新着ニュースを表示しよう

子テーマのディレクトリに、front-page.php を作成する。

front-page.php は、トップページが固定ページの時に使われます。

2011年9月11日日曜日

トップページに新着ニュースを表示しよう

新着情報の表示部分を追加

さっき作成したニュース一覧のソースが使いまわせて、あら便利！

query_posts( "cat=1&posts_per_page=5" );get_template_part( 'loop', 'list' );wp_reset_query();

2011年9月11日日曜日

親テーマとして使うのにおすすめのテーマ

TwentyTen、TwentyElevenはちょっと使いにくい…

2011年9月11日日曜日

Toolbox

TwentyElevenをシンプル化したようなテーマ。ソースもキレイでおすすめ

http://wordpress.org/extend/themes/toolbox

2011年9月11日日曜日

HTML5Reset

スタイルシートを含まない、まっさらなテーマ。PHPのコードも最低限。イチから構築するにはおすすめ

https://github.com/murtaugh/HTML5-Reset-Wordpress-Theme

2011年9月11日日曜日

NCWhite

TwentyTenのようなloop.php読み込み機構を残しながら、極限までソースを削った最低限のテーマ57いいね！もらってます(^^

http://notnil-creative.com/blog/archives/760

2011年9月11日日曜日

光速テーマ開発、そして

2011年9月11日日曜日

テーマ作成時間を短縮してどうする？

スマートフォンでの見た目を考える色彩設計まで気を配るなにより、更新する人が快適に効率良く、適切な情報発信ができるよう、運用をしっかり考えること

2011年9月11日日曜日

光速テーマ開発のコツWordCamp KOBE 2011

Designer’s Cafe 13:00-13:20

Takuro Hishikawa(@HissyNC)

ご清聴ありがとうございました。

2011年9月11日日曜日