W ctokyo2012 timing

WordCamp TOKYO 2012 2012.09.15

bデザイナー・
We
プログラマの
ノン
てのテーマ
はじめ
TIMING デザイン事務所

作り
12年9月15日土曜日
北村崇
http://timing.jp


1.一応自己紹介ジナル
2.オリ
テーマの
種類は?

3.必要な
もの
を確認
する!
4.テンプレ
ートファ
を理解イル
する!

5 . PH P は

ない !
怖く


1.一応自己紹介

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

:
Twitter

tah_ timing
北村崇
（Kitamura
Takashi）

プログラムとかわかりません。では
012
印刷、告、ゴやキャラクター、
広ロ Y O2 りの
グッズ制作等グラフィックデザイン。 TO
K
刷周
Cam
p
・印
現在はWEB制作をメインに活動。
ord イン当
アパレルブランド、アーティストグッズ、 W デザを担
企業ブランディング等わぷー管理
インコイツ。
デザ


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

・HTML
es sの
・CSS
o rd Pr
とW て
W EB ておい
・投稿
は知
っ
・固定ページ基本。。
いしてね
さ勉強
・ウィジェットくだ
・カスタムメニュー

・カスタムヘッダー
・アイキャッチ
・テーマカスタマイザーなどなど


2.

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


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

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

ちゃんと理解してないと結構難しい。
ML とCS Sから
2。独自HT
その
マ化する!
テー
必要な要素をPHPに置き換えてWordPressのテーマに
する方法
意外にもこっちの方が初心者向け


3.

必要なもの
を確認する!


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

なにが必要なのかを事前に確認
トップページ記事ページ

ロゴロゴ
グローバルナビグローバルナビ
記事一覧（最新 5 記事）記事タイトル

ササ投稿日時
イイ
ドサービスカテゴリー一覧ド
ババ記事本文
ーー

会社概要会社概要


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

なにが必要なのかを事前に確認
・トップページ
ゴリーは
最新記事5件を表示する
会社概要へのリンクを表示する
カテか？
サービスカテゴリー一覧を表示する
増えるの
・会社概要等を載せるページ
ページは
タイトルと本文のみ
事の一覧
記
か？
・最新記事を載せるページ
投稿日時とタイトルと本文。必要

ビスは増
・サービスを載せるページ
サー
タイトルと画像、サービス本文。
るのか？
え


能や構成を
機ないと
決て
めおか
い !
進めな
先には


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/テンプレート階層



最低限必要なもの

です。
トップページ等（index.php）
スタイルシート（style.css）
だけ
しかも
style.c
/*
Theme Name: テーマ名
ss
Theme URI: http://サイトURL/ に書
Description: テーマ解説
けば
Version: テーマのバージョン
Author: 作者名 OK
Author URI: http://作者のサイトURL/
*/



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

WordPressの場所/wp-content/themes/

テーマ
ここに
ルダを
フォれる！
っと入
まる


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


こっからが本題!



5.

PHP は

怖くない!


5.PHPは怖くない!

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

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

記事ページで表示しよう
single.php
変換！
基本はHTMLを
12年9月15日土曜日 PHP に変えるだけ



テンプレートタグというものがある
ほぼ
一行で実行出
一例ありがたい
来る
。タグが用意
されている
!!
ブログタイトル出力<?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="http://サイトのURL/" />

普通にURL打ってもリンクできない
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

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

普通にURL打ってもリンクできない
<img src="<?php bloginfo('template_url'); ?>/images/photo.png" />

最低限ルールをの

守れば OK!



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



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

何が違うの？



ループ外で使える
ブログタイトル出力<?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(); ?>

ループ内で使える



の記事やページに
個別力は
依存する情報の出
ループの中に

書かないと
ダメ



…で。
ループって何？



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




ループだけはわかっておこう!
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php endwhile; endif; ?>

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

出力項目をしたい

繰り返し表示する



ループだけはわかっておこう!
出力内容

コレあるかどうかによって

表示する記事が

判断繰り返し
し
ている



例

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

HTMLはこう
なる
<h2><a href=”ページリンク”>ページタイトル</a></h2>
記事内容



今日
残念ながら

はここまで!


あくまで基礎の基礎

まずはチャレンジ!
絶対できます!

私ができて
いる!
（ノンプログラマー）



bデザイナー・
We
プログラマの
ノン http://timing.jp
ご清聴ありがとうございました
スライド
てのテーマ
はじめ
作り
TIMING デザイン事務所
北村崇

W ctokyo2012 timing

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à W ctokyo2012 timing

Similaire à W ctokyo2012 timing (20)

Plus de Takashi Kitamura

Plus de Takashi Kitamura (10)

W ctokyo2012 timing