Download free for 30 days
Sign in
Upload
Language (EN)
Support
Business
Mobile
Social Media
Marketing
Technology
Art & Photos
Career
Design
Education
Presentations & Public Speaking
Government & Nonprofit
Healthcare
Internet
Law
Leadership & Management
Automotive
Engineering
Software
Recruiting & HR
Retail
Sales
Services
Science
Small Business & Entrepreneurship
Food
Environment
Economy & Finance
Data & Analytics
Investor Relations
Sports
Spiritual
News & Politics
Travel
Self Improvement
Real Estate
Entertainment & Humor
Health & Medicine
Devices & Hardware
Lifestyle
Change Language
Language
English
Español
Português
Français
Deutsche
Cancel
Save
Submit search
EN
Uploaded by
Yoshitaka KATO
PPTX, PDF
134,113 views
新デフォルトテーマTwentyTen を理解しよう
WordBench埼玉の勉強会で、Twentytenについてプレゼンしました。 開催日:2010年7月17日(土) 会場: 越谷中央市民会館
Education
◦
Read more
10
Save
Share
Embed
Embed presentation
Download
Downloaded 65 times
1
/ 35
2
/ 35
3
/ 35
4
/ 35
5
/ 35
6
/ 35
7
/ 35
8
/ 35
9
/ 35
10
/ 35
11
/ 35
12
/ 35
13
/ 35
14
/ 35
15
/ 35
16
/ 35
17
/ 35
18
/ 35
19
/ 35
20
/ 35
21
/ 35
22
/ 35
23
/ 35
24
/ 35
25
/ 35
26
/ 35
27
/ 35
28
/ 35
29
/ 35
30
/ 35
31
/ 35
32
/ 35
33
/ 35
34
/ 35
35
/ 35
More Related Content
PDF
WordPressテーマ作成
by
Takami Kazuya
PDF
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
by
Takashi Uemura
PDF
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
by
Keisuke Imura
PDF
PHPでのSWF編集とその応用
by
Yo Ya
PDF
Mizuno buddypress-plugin
by
Ikuko Kanada
PDF
MTDDC Tokyo テーマ編 プレゼン資料
by
Toshihito Gamo
PDF
Wp プラグインapiから理解するword press.share
by
Yuji Nojima
PDF
PHPでセキュリティを真面目に考える
by
Takuya Sato
WordPressテーマ作成
by
Takami Kazuya
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
by
Takashi Uemura
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
by
Keisuke Imura
PHPでのSWF編集とその応用
by
Yo Ya
Mizuno buddypress-plugin
by
Ikuko Kanada
MTDDC Tokyo テーマ編 プレゼン資料
by
Toshihito Gamo
Wp プラグインapiから理解するword press.share
by
Yuji Nojima
PHPでセキュリティを真面目に考える
by
Takuya Sato
Similar to 新デフォルトテーマTwentyTen を理解しよう
PDF
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
by
rie05
PDF
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
by
hokori matu
PDF
リリース直前WordPress3.5をみてみよう
by
Seto Takahiro
PDF
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
by
Takashi Uemura
PDF
TwentyTwelveの子テーマつくったらハマった話
by
Cherry Pie Web
PDF
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
by
Takashi Uemura
PDF
テーマ作成のアプローチ
by
Seto Takahiro
PDF
第18回WordBench大阪【2013年6月23日】
by
rie05
PDF
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
by
hokori matu
KEY
WordPress 3.4 〜新機能や変更点〜
by
Toru Miki
PDF
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
by
switch3000
PDF
WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識
by
kenji goto
PDF
WordBench福井 第2回勉強会 発表スライド - WordPress 3.0 でできるあんなコト、こんなコト。
by
tecking
PDF
中級者のためのWordPress講座[第6回]WordPressをマルチサイト化(複数ブログ化)してみよう!
by
switch3000
PDF
WordBeachDeathMarchWorkshop
by
takashi ono
PDF
Duotone の子テーマを作ろう、そうしよう - Wordcamp Fukuoka 2010
by
Odyssey Eightbit
PDF
小川流!わかりやすいテーマの作り方
by
Kasumi Ogawa
PDF
一歩踏み込むWordPress
by
正樹 平野
PDF
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
by
Takashi Uemura
PDF
世界標準ブログツール WordPressの最新版3.0と豊富なプラグイン
by
tamotsu toyoda
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
by
rie05
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
by
hokori matu
リリース直前WordPress3.5をみてみよう
by
Seto Takahiro
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
by
Takashi Uemura
TwentyTwelveの子テーマつくったらハマった話
by
Cherry Pie Web
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
by
Takashi Uemura
テーマ作成のアプローチ
by
Seto Takahiro
第18回WordBench大阪【2013年6月23日】
by
rie05
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
by
hokori matu
WordPress 3.4 〜新機能や変更点〜
by
Toru Miki
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
by
switch3000
WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識
by
kenji goto
WordBench福井 第2回勉強会 発表スライド - WordPress 3.0 でできるあんなコト、こんなコト。
by
tecking
中級者のためのWordPress講座[第6回]WordPressをマルチサイト化(複数ブログ化)してみよう!
by
switch3000
WordBeachDeathMarchWorkshop
by
takashi ono
Duotone の子テーマを作ろう、そうしよう - Wordcamp Fukuoka 2010
by
Odyssey Eightbit
小川流!わかりやすいテーマの作り方
by
Kasumi Ogawa
一歩踏み込むWordPress
by
正樹 平野
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
by
Takashi Uemura
世界標準ブログツール WordPressの最新版3.0と豊富なプラグイン
by
tamotsu toyoda
新デフォルトテーマTwentyTen を理解しよう
1.
新デフォルトテーマTwentyTen を理解しよう加藤 芳威2010年7月17日(土)越谷市中央市民会館
2.
名前:加藤芳威(かとうよしたか)ハンドル:かとちゃん、よろず屋所属:株式会社デジコム最近のお仕事 (WordPress関連)WordPressテーマコーディング個別オーダー向けプラグイン製作ユーザーサポート職能:ネットワークエンジニア、ヘルプデスク、シスアド、システムコンサル、etc...趣味:カメラ(Nikon D90所有)他にも沢山あるけど、今は実質これだけ。 WordBench写真部が結構盛り上がっている簡単な自己紹介
3.
仕事上で知ったことが中心なので、内容に偏りがあります。割り込み質問大歓迎! 途中でもバンバン質問しちゃってください。即答できないご質問でも調べれば分かりそうなものは、すぐに調べてしまうので少々お待ちください。プレゼンにあたって
4.
TwentyTenonWordPress 3.0
5.
TwentyTen(文字通り2010年版テーマ)がデフォルトテーマになったこれまでのテーマ「Default」「Classic」は新規インストールからは無くなったWordPress3.0で追加された関数などの影響で、ファイル構成が若干変更になったWordPress3.0から実装された関数がふんだんに使われているので、3.0未満のWordPressでは動かないWP3.0でデフォルトテーマが変わった
6.
TwentyTen のファイル構成
7.
images/languages/editor-style.csseditor-style-rtl.cssrtl.cssstyle.css404.phparchive.phpattachment.phpauthor.phpcategory.phpcomments.phpファイル構成footer.php
8.
functions.php
9.
header.php
10.
index.php
11.
loop.php
12.
onecolumn-page.php
13.
page.php
14.
search.php
15.
sidebar.php
16.
sidebar-footer.php
17.
single.php
18.
tag.php
19.
screenshot.png
20.
license.txtテンプレート階層図http://wpdocs.sourceforge.jp/テンプレート階層http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
21.
ファイル構成の比較images/languages/editor-style.csseditor-style-rtl.cssrtl.cssstyle.css404.phparchive.phpattachment.phpauthor.phpcategory.phpcomments.phpfooter.phpfunctions.phpheader.phpindex.phploop.phponecolumn-page.phppage.phpsearch.phpsidebar.phpsidebar-footer.phpsingle.phptag.phpscreenshot.pnglicense.txtimages/ja.poja.mokubrick.potrtl.cssstyle.css404.phparchive.phparchives.phpcomments.phpcomments-popup.phpfooter.phpfunctions.phpheader.phpimage.phpindex.phplinks.phppage.phpsearch.phpsidebar.phpsingle.phpscreenshot.pngTwentyTenDefault
22.
ファイル構成の比較images/languages/editor-style.csseditor-style-rtl.cssrtl.cssstyle.css404.phparchive.phpattachment.phpauthor.phpcategory.phpcomments.phpfooter.phpfunctions.phpheader.phpindex.phploop.phponecolumn-page.phppage.phpsearch.phpsidebar.phpsidebar-footer.phpsingle.phptag.phpscreenshot.pnglicense.txtimages/ja.poja.mokubrick.potrtl.cssstyle.css404.phparchive.phparchives.phpcomments.phpcomments-popup.phpfooter.phpfunctions.phpheader.phpimage.phpindex.phplinks.phppage.phpsearch.phpsidebar.phpsingle.phpscreenshot.pngTwentyTenDefault
23.
デフォルトの2カラム(メインのカラム+サイドバー)ではなく、サイドバーなしのテンプレートが予め用意された。onecolumn-page.php※ 本文枠のサイズは自動では広がらなかった サイドバーが無くなるだけ。※ 投稿では選択できない。ページのみ対応。
24.
横幅を調整したい場合は、style.cssを直接編集して調整することになるデフォルトは 640px onecolumn-page.php
25.
これまで、投稿のビジュアルエディタと実際の表示の乖離が激しかったので、画像1つ入れただけでもプレビュー等を多用する必要があったこのCSSによって差分を埋めてくれるので、いちいちプレビューしなくても結構表示が一致するようになったeditor-style.css
26.
矢印の部分など、改行位置がきっちりあっている。文字の大きさ等でずれることはあるが、それでも1~2文字程度。完璧ではないが、今までが酷過ぎたのでこれで十分満足editor-style.css編集画面実際の公開ページの表示
27.
2箇所で横幅をあわせるのが、1つのポイントデフォルトは、640pxeditor-style.csseditor-style.cssfunction.php
28.
loop.php(get_template_part)が最高!
29.
loop.php の中身旧Defaultテーマの index.php
のループ部分がごっそり切り出された感じsingle.php や page.php 等の単一ページは考慮されていない感じで、index.php, category.php 等アーカイブページ向けのコードが書かれている切り出された結果、index.php, category.phpが軽量化された
30.
index.php や category.phpはどうなった?index.phpcategory.php<?php
get_header(); ?><div id="container"><div id="content" role="main"><?phpget_template_part( 'loop', 'index' );?></div><!-- #content --></div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?><?php get_header(); ?><div id="container"><div id="content" role="main"><h1 class="page-title"><?phpprintf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1><?php $category_description = category_description(); if ( ! empty( $category_description ) ) echo '<div class="archive-meta">' . $category_description . '</div>';get_template_part( 'loop', 'category' );?></div><!-- #content --></div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?>
31.
index.php や category.phpはどうなった?index.phpcategory.php<?php
get_header(); ?><div id="container"><div id="content" role="main"><?phpget_template_part( 'loop', 'index' );?></div><!-- #content --></div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?><?php get_header(); ?><div id="container"><div id="content" role="main"><h1 class="page-title"><?phpprintf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1><?php $category_description = category_description(); if ( ! empty( $category_description ) ) echo '<div class="archive-meta">' . $category_description . '</div>';get_template_part( 'loop', 'category' );?></div><!-- #content --></div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?>
32.
指定した名前のテンプレートファイル(php)を、その関数の位置に読み込む引数に従って、以下の順にファイルを探し、見つかったらそのファイルを読み込む子テーマの A-B.php子テーマの A.php親テーマの A-B.php親テーマの A.phpファイルが見つからなければ、スルーするget_template_part( A [,
B] )
33.
include ( TEMPLATEPATH
. ‘ファイル名’ ) だと、Framework化したときに親テーマを見に行ってしまう -> 代わりに STYLESHEETPATH を使えば大丈夫ファイルが存在しないとエラーになるsidebar(‘B’) だと、sidebar-B.php がない場合、sidebar.php を読み込んでしまう「sidebar-footer.php」はウィジェットエリアなので、サイドバー扱いでよい模様get_template_partと他法の違い
34.
WP3.0+TwentyTenでFrameworkが作りやすくなった
35.
Framework(フレームワーク)?
36.
テーマを作るための土台になるテーマ似たレイアウトや同じ機能をたくさん流用したいときにすごく有用3.0が出る前は、Thematic などが有名Frameworkとは参考:http://www.slideshare.net/odysseygate/themantic-a-wordpress-theme-framework
37.
3.0の新テンプレートタグ get_template_part がすごく便利TwentyTen
独自関数で、いろいろなものがパーツ化されているFrameworkをつくりやすい
38.
wp-content/themes 内にフォルダを新規作成themes/style.css を新フォルダーにコピーコピー先の
style.css を編集テーマ名等を変更テンプレート情報の最後に以下の1行を追加template: twentyten管理画面からテーマを選ぶでは、子テーマを作ってみましょう
39.
/*Theme Name: Twenty
Ten の子テーマTheme URI: http://curious-everything.com/Description: 簡単に子テーマが作れます。Author: KATO YoshitakaVersion: 1.0Template: twentyten*/子テーマ用style.css追加修正箇所
40.
<h1>はどこへ行った?
41.
<?php $heading_tag= (
is_home() || is_front_page() ) ? 'h1' : 'div'; ?><<?php echo $heading_tag; ?> id="site-title"> <span> <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a> </span></<?php echo $heading_tag; ?>>表示コンテンツの種類によって<h1>の位置が変わるようになったheader.php (抜粋)
42.
各ページのタイトルが<h1>になるsingle.php(抜粋)category.php<?php get_header(); ?><div
id="container"><div id="content" role="main"><?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?><div id="nav-above" class="navigation"><div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div><div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'twentyten' ) . '</span>' ); ?></div></div><!-- #nav-above --><div id="post-<?php the_ID(); ?>" <?php post_class(); ?>><h1 class="entry-title"><?php the_title(); ?></h1><div class="entry-meta"><?php twentyten_posted_on(); ?></div><!-- .entry-meta --><?php get_header(); ?><div id="container"><div id="content" role="main"><h1 class="page-title"><?phpprintf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1><?php $category_description = category_description(); if ( ! empty( $category_description ) ) echo '<div class="archive-meta">' . $category_description . '</div>';get_template_part( 'loop', 'category' );?></div><!-- #content --></div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?>
43.
twentyten_posted_on()その記事の投稿日と投稿者を表示するtwentyten_posted_in()その記事がカテゴライズされているタグやカテゴリーを表示するtwentyten_continue_reading_link()抜粋(excerpt)時の「もっと読む」等の文章を挿入するためのフックTwentyTen独自関数 (一部)
44.
get_template_part() が便利すぎる単純にhtml(php)コーディングすればいいだけなので、非プログラマな人でも(フックを覚えなくても)テンプレートの差し替え等が簡単に出来る。自動的に子->親とファイルを探しに行ってくれる上、無ければ無視するだけなので、将来のためにダミーで挿入しておくことが出来る結果的にファイルが分散するので、複数人での平行作業でもファイル更新のコンフリクトが起こりにくいWordPress3.0から追加されてた新機能が分かりやすく組み込まれているので、独自テーマを作成するときの教材としても良いまとめ
45.
TwentyTen本体を直接編集してはいけません。WordPress本体バージョンアップ時に一緒にバージョンアップ(全部上書き)されてしまいます。せっかく簡単に子テーマが作れるのですから、子テーマを作ってそちらで改造しましょう。同じファイル名を子テーマ側で作成すれば、親ファイルは無視されます(function.phpを除く)<h1>タグの出し方を変更したい場合は(h1は1ページ内に1つだけというルールに則るなら)、全テンプレートファイルをチェックしてください。<h1>がページ内で重複する恐れがあります。注意事項
46.
email: kato@djcom.jpemail: jcuriouser@gmail.comTwitter:
@yorozuFlickr: http://www.flickr.com/photos/yorozu2009Contact us?
47.
ありがとうございました。WordPressユーザーコミュニティー WordBench 埼玉http://wordbench.org/http://saitama.wordbench.org/
Download