wordpressテーマの作り方
DESCRIPTION
TRANSCRIPT
WordPressテーマのつくりかた-WordCamp Fukuoka 2011の場合-
山口 有由希
2011年2月20日日曜日
自己紹介山口 有由希
twitter : @yuki930
フロッグマンオフィスで
Webデザイナーをしています。
wordPress歴2年ぐらい
2011年2月20日日曜日
仕事以外でも作ってます
2011年2月20日日曜日
WordPressで作ってます
2011年2月20日日曜日
はじめに基本的なWebデザイン、コーディングは
できるが、WordPressテーマ化する方法が
わからない、という方を想定しています
テーマ化するにあたって、
多少PHPがでてきますが、
プログラムがわからない方でも
わかるように説明していきます
2011年2月20日日曜日
本日の流れテーマ決定からデザイン、コーディングまで
WordPressテーマ化する
WordPressのやっておきたい初期設定
WordPressをもっと便利にする
WordPressのおすすめプラグイン紹介
WordPressコミュニティーのすすめ
2011年2月20日日曜日
テーマ決定からデザイン・コーディングまで
2011年2月20日日曜日
デザイン決定までのプロセス
WordPressの使い方や、そもそもなにを使っ
てPublishするのかは十人十色。形にとらわれ
ず、いろんな方法で、自分なりに、あなたも
Publishしてみませんか？
WordCamp Fukuoka 2011の
テーマは『Publish』
2011年2月20日日曜日
テーマ化しやすくする
コーディングのポイント
2011年2月20日日曜日
ディレクトリ構成テーマ名を決めてディレクトリを作り、ファイルを配置していく
下図は、今回テーマを作成した際の構成
wc-fukuoka11
2011年2月20日日曜日
通常通り相対パスで記述
画像、jsの読み込み
2011年2月20日日曜日
CSSは、トップディレクトリのstyle.cssを読み込み、
その他のCSSファイルは@importで読み込むよう
style.cssに記述しておくと後の作業が楽になります。
CSSの読み込み
2011年2月20日日曜日
WordPressテーマ化する
2011年2月20日日曜日
テーマフォルダにコピー
ディレクトリごとコピーする
ただしこれだけでは
ファイルをアップロードしてもまだテーマとしては
認識されない
wp-content/themes/の中にコピー
2011年2月20日日曜日
テーマとして認識させるstyle.cssにコメント記述が必要
Theme Name テーマ名
Theme URI テーマのURL
Description テーマの説明
Author テーマの制作者
Author URI URI テーマ制作者のURL
Version テーマのバージョン
Template 親テーマの定義
Tags テーマのタグ
2011年2月20日日曜日
スクリーンショットを設定するscreenshot.pngを作る
画像のサイズは横300px × 縦255px
ファイル名はscreenshot.png
はじめにコピーしたテーマディレクトリの中に入れる
2011年2月20日日曜日
画像などへのパスの修正
<?php bloginfo(‘template_url’); ?>を使う
画像やjsなどへのパスは絶対パスで指定する。ただし、直接書くのではなく、変数を使う。
2011年2月20日日曜日
最低限必要なコードを埋めるこれがないとプラグインなどが正常に動作しない可能性がある
<head></head>内に
<?php wp_head(); ?>
</body>の直前あたりに
<?php wp_footer(); ?>
2011年2月20日日曜日
テンプレートタグを埋め込む
http://wpdocs.sourceforge.jp/テンプレートタグ
http://wpdocs.sourceforge.jp/テンプレートタグ入門
2011年2月20日日曜日
長過ぎる…
2011年2月20日日曜日
よく使うタグ一覧
bloginfo(‘url’) ブログのサイトURL
bloginfo(‘name’) 「一般設定」管理画面で指定したブログのタイトル
bloginfo(‘description’) 「一般設定」管理画面で指定したブログの説明文
bloginfo(‘template_url’) 使用中テンプレートディレクトリまでのURL
bloginfo(‘stylesheet_url’) 使用中のテンプレートのメインCSSのURL
<?php bloginfo('show'); ?>
使用中のWordPressブログに関するさまざまな情報を出力できます。
http://wpdocs.sourceforge.jp/テンプレートタグ/bloginfo
2011年2月20日日曜日
よく使うタグ一覧
the_title() 現在の投稿のタイトルを表示／取得
the_date() 現在の投稿の投稿日時を表示／取得
the_time() 現在の投稿の投稿日時を表示
the_content() 現在の投稿の本文を表示
the_permalink() 現在の投稿のURLを表示
post_custom('key') カスタムフィールドのkeyの値を表示
ループ内で使えます
2011年2月20日日曜日
ループ内って何？ループ内って？？
赤字の部分
記事やページの繰り返しの部分を囲む
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php the_title(); ?> ← ここで使える
<?php endwhile; endif; ?>
2011年2月20日日曜日
こんな感じで囲む
2011年2月20日日曜日
あれ？さっきのと違わない？ループは、「記事を取得してある分繰り返す」という
命令文
書き方や省略の仕方がテーマによって違ったりする
いろんなテーマを見て研究してみて
http://wpdocs.sourceforge.jp/The_Loopループについての公式ドキュメント
2011年2月20日日曜日
the_dateとthe_timeについて
2010.02.19金
the_dateは同じ日に複数件投稿があったら最初の一件目にだけ出る。the_timeは同じ日に複数件投稿があったらすべての投稿に出る
2011年2月20日日曜日
WordPressに適用する管理画面からテーマの存在を確認し有効化します。
2011年2月20日日曜日
パーツに分解します
index.php
header.php
footer.php
(sidebar.php)
2011年2月20日日曜日
分解したパーツの読み込み方
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
index.php
2011年2月20日日曜日
それぞれのページを作ります
category.phpカテゴリー用のページ
tag.phpタグ用のページ
date.php日付・時間用のページ
search.php検索結果表示用のページ
archive.phpアーカイブ用のページ
404.php404エラー用のページ
single.php投稿記事用ページ
page.phpページ用ページ
2011年2月20日日曜日
WordCampFukuoka2011の
テーマファイル構成
必要最低限のみ準備
2011年2月20日日曜日
やっておきたい初期設定
2011年2月20日日曜日
WP Multibyte Patchを有効化
WordPress のマルチバイト文字の取り扱いに関する
不具合の累積的修正と強化を行うプラグイン
2011年2月20日日曜日
パーマリンクの設定デフォルトだとhttp://fw.v-colors.com/?p=123
いろいろ設定できます。
http://fw.v-colors.com/2011/02/18/sample-post/
http://fw.v-colors.com/2011/02/sample-post/
2011年2月20日日曜日
WordPressをもっと便利に
2011年2月20日日曜日
アイキャッチ画像を使う
テーマのディレクトリ内にfunctions.phpという
ファイルを作成し、上記の一文を入れて保存して
アップロード。アイキャッチ画像が利用可能に。
表示させるには<?php the_post_thumbnail(); ?>2011年2月20日日曜日
活用法いろいろ。便利！
2011年2月20日日曜日
WordCampFukuoka2011サイト内で使用しているプラグイン紹介
2011年2月20日日曜日
Contact Form 7フォームやメールを柔軟にデザインでき、複数のフォームを作ることが可能
さらに、AJAX を使った送信、CAPTCHA、Akismet によるスパムフィルタリング、ファイルのアップロード、などなど、豊富な機能をサポート
ウィジェットにも追加できる
2011年2月20日日曜日
Really Simple CAPTCHA
スパムコメント対策
図のような仕組みが
簡単に導入できる
Contact Form 7と
連携させて使用
2011年2月20日日曜日
HeadSpace2メタタグ、タイトルタグの設定などSEOに重要な設定を
各ページ、各カテゴリーごと…などで設定できるプラグイン
2011年2月20日日曜日
気に入っているプラグイン
2011年2月20日日曜日
関連エントリーを表示さ
せるプラグイン
Post-Plugin Library
と共に利用
Similar Posts
2011年2月20日日曜日
人気エントリーを表示さ
せるプラグイン
Post-Plugin Library
と共に利用
Popular Posts
2011年2月20日日曜日
File Gallery意外と面倒な複数画像の張り込み作業を
楽にしてくれるプラグイン
2011年2月20日日曜日
Download Counter
ファイルのダウンロー
ド数をカウントしてく
れるプラグイン
2011年2月20日日曜日
WordPressコミュニティーのすすめ
2011年2月20日日曜日
プログラマーもディレクターも
デザイナーもブロガーも。
2011年2月20日日曜日
みんなで集まってなにかやるって
楽しいですよ！
2011年2月20日日曜日
次回はぜひあなたも
スタッフ参加してみませんか？
2011年2月20日日曜日
まとめ
テーマの自作は壁さえ超えれば以外と簡単
簡単なカスタマイズから徐々に試していこう
機能が充実し過ぎなのでまずは必要最低限のもの
を厳選して習得しよう
コミュニティーに参加してもっと楽しもう！
2011年2月20日日曜日
ご清聴ありがとうございましたご質問・フィードバックはこちらまで
@yuki930http://blog.v-colors.com/
ジーニアスバー（小教室）へもどうぞ！
CS-Cartのブースにも
ぜひお立ち寄りください♪
2011年2月20日日曜日