w ctokyo2012 timing

Webデザイナー・

ノンプログラマの

はじめてのテーマ

作り

WordCamp TOKYO 2012 　2012.09.15

TIMING デザイン事務所北村崇http://timing.jp

12年9月15日土曜日

http://timing.jp

http://timing.jp

1.一応自己紹介2.オリジナル

　テーマの

　　　種類は?

4.テンプレートファイル　を理解する!

5.PHPは

怖くない!


3.必要なものを確認する!


1.一応自己紹介


北村崇（Kitamura Takashi）

デザイン事務所 TIMING（タイミング）代表

Twitter:

tah_timing

印刷、広告、ロゴやキャラクター、グッズ制作等グラフィックデザイン。現在はWEB制作をメインに活動。アパレルブランド、アーティストグッズ、企業ブランディング等

WordCam

p TOKYO

2012では

わぷーデザイ

ン・印刷周り

の

デザイン管理

を担当

プログラムとかわかりません。

コイツ。


2.オリジナルテーマの種類は?…の前に。


・HTML・CSS

・投稿・固定ページ・ウィジェット・カスタムメニュー・カスタムヘッダー・アイキャッチ・テーマカスタマイザーなどなど

WEBとWordPress

の

基本は知っておいて

ください。

　　　　　　　　　　　　勉強してね。



オリジナルテーマの種類は?

2.


2.オリジナルテーマの種類は?


その1。子テーマ親テーマ（TwentyEleven 等）の基本機能を受け継いで、必要な部分をカスタマイズ（追記）する方法

その2。独自HTMLとCSSから

　　　　テーマ化する!必要な要素をPHPに置き換えてWordPressのテーマにする方法

ちゃんと理解してないと結構難しい。

意外にもこっちの方が初心者向け12年9月15日土曜日


必要なものを確認する!

3.




なにが必要なのかを事前に確認

ロゴグローバルナビ

サイドバー

記事一覧（最新5記事）

サービスカテゴリー一覧

ロゴグローバルナビ

サイドバー

記事タイトル

投稿日時

記事本文

トップページ記事ページ

会社概要会社概要




・トップページ　　最新記事5件を表示する　　会社概要へのリンクを表示する　　サービスカテゴリー一覧を表示する

・会社概要等を載せるページ　　タイトルと本文のみ

・最新記事を載せるページ　　投稿日時とタイトルと本文。

・サービスを載せるページ　　タイトルと画像、サービス本文。

カテゴリーは

増えるのか？

サービスは増

えるのか？

記事の一覧ページは

必要か？

なにが必要なのかを事前に確認



機能や構成を

決めておかないと

先には進めない!12年9月15日土曜日


テンプレート

ファイルを　　　　

理解する!

4.


4.テンプレートファイルを理解する!


テンプレートファイル例トップページ等　　（index.php）テーマのための関数（functions.php）スタイルシート　　（style.css）

トップページ　　　（front-page.php）固定ページ　　　　（page.php）投稿　　　　　　　（single.php）

フッター　　　　　（footer.php）ヘッダー　　　　　（header.php）サイドバー　　　　（sidebar.php）

優先順位が

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


http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4



最低限必要なものトップページ等　　（index.php）スタイルシート　　（style.css）だけです。

/*Theme Name: テーマ名Theme URI: http://サイトURL/Description: テーマ解説Version: テーマのバージョンAuthor: 作者名Author URI: http://作者のサイトURL/*/

style.cssに書けば

OK

しかも




テンプレートファイルのある場所

WordPressの場所/wp-content/themes/

ここにテーマ

フォルダを

まるっと入れる！



…え。その後どうするの？



こっからが本題!



PHPは

怖くない!

5.


5.PHPは怖くない!


必要なPHPファイルを用意する会社概要.html

変換！固定ページで表示しようpage.php

single.php

ニュース.html

記事ページで表示しよう変換！

基本はHTMLを

PHPに変えるだけ12年9月15日土曜日



テンプレートタグというものがある

ブログタイトル出力<?php bloginfo('name'); ?>ブログURL出力<?php bloginfo('url'); ?>スタイルシートへのリンク<?php bloginfo('stylesheet_url'); ?>記事のパーマリンク出力<?php the_permalink() ?>記事のタイトル出力<?php the_title(); ?>記事のコンテンツ出力<?php the_content(); ?>アイキャッチ出力<?php the_post_thumbnail(); ?>時間情報出力<?php the_time() ?> 記事内のタグ出力<?php the_tags(); ?>

何が出力できるか

事前に調べてみよう

一行で実行出来るタグが用意されている!!

ありがたい。一例

ほぼ




使い方も結構簡単

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<link rel="stylesheet" href="http://サイトのURL/" />

普通にURL打ってもリンクできない

<img src="<?php bloginfo('template_url'); ?>/images/photo.png" />

<img src="http://サイトのURL/images/photo.png" />

普通にURL打ってもリンクできない

最低限のルールを

守ればOK!12年9月15日土曜日



…で。最低限のルールって何？




WordPressにはループ内で使うテンプレートタグと

ループ外で使うタグがある

何が違うの？12年9月15日土曜日



ブログタイトル出力<?php bloginfo('name'); ?>ブログURL出力<?php bloginfo('url'); ?>スタイルシートへのリンク<?php bloginfo('stylesheet_url'); ?>

記事のパーマリンク出力<?php the_permalink() ?>記事のタイトル出力<?php the_title(); ?>記事のコンテンツ出力<?php the_content(); ?>アイキャッチ出力<?php the_post_thumbnail(); ?>時間情報出力<?php the_time() ?> 記事内のタグ出力<?php the_tags(); ?>

ループ内で使える

ループ外で使える




個別の記事やページに

依存する情報の出力は

ループの中に

書かないとダメ12年9月15日土曜日



…で。ループって何？




ループだけは理解しておこう！




ループだけはわかっておこう!<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><?php endwhile; endif; ?>

出力したい項目を

繰り返し表示する

?<?php if(have_posts()) : while(have_posts()) : the_post(); ?><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><?php endwhile; endif; ?>




ループだけはわかっておこう!

コレによって

表示する記事があるかどうか

判断し繰り返している

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

出力内容<?php endwhile; endif; ?>




例<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?>

</a></h2><?php the_content(); ?>

<?php endwhile; endif; ?>

<h2><a href=”ページリンク”>ページタイトル</a></h2>記事内容

HTMLはこうなる




残念ながら今日はここまで!



あくまで基礎の基礎

まずはチャレンジ!

絶対できます!

私ができている!

（ノンプログラマー）


Webデザイナー・

ノンプログラマの

はじめてのテーマ

作り


TIMING デザイン事務所北村崇

ご清聴ありがとうございましたスライド http://timing.jp


http://timing.jp

http://timing.jp

w ctokyo2012 timing

Documents