新デフォルトテーマTwentyTen を理解しよう
Upcoming SlideShare
Loading in...5
×
 

新デフォルトテーマ TwentyTen を理解しよう

on

  • 134,667 views

WordBench埼玉の勉強会で、Twentytenについてプレゼンしました。

WordBench埼玉の勉強会で、Twentytenについてプレゼンしました。

開催日:2010年7月17日(土)
会場: 越谷中央市民会館

Statistics

Views

Total Views
134,667
Slideshare-icon Views on SlideShare
134,607
Embed Views
60

Actions

Likes
10
Downloads
63
Comments
0

2 Embeds 60

http://s.deeeki.com 59
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    新デフォルトテーマTwentyTen を理解しよう 新デフォルトテーマ TwentyTen を理解しよう Presentation Transcript

    • 新デフォルトテーマTwentyTen を理解しよう
      加藤 芳威
      2010年7月17日(土)
      越谷市中央市民会館
    • 名前:加藤芳威(かとうよしたか)
      ハンドル:かとちゃん、よろず屋
      所属:株式会社デジコム
      最近のお仕事 (WordPress関連)
      WordPressテーマコーディング
      個別オーダー向けプラグイン製作
      ユーザーサポート
      職能:ネットワークエンジニア、ヘルプデスク、シスアド、システムコンサル、etc...
      趣味:カメラ(Nikon D90所有)他にも沢山あるけど、今は実質これだけ。 WordBench写真部が結構盛り上がっている
      簡単な自己紹介
    • 仕事上で知ったことが中心なので、内容に偏りがあります。
      割り込み質問大歓迎! 途中でもバンバン質問しちゃってください。
      即答できないご質問でも調べれば分かりそうなものは、すぐに調べてしまうので少々お待ちください。
      プレゼンにあたって
    • TwentyTenonWordPress 3.0
    • TwentyTen(文字通り2010年版テーマ)がデフォルトテーマになった
      これまでのテーマ「Default」「Classic」は新規インストールからは無くなった
      WordPress3.0で追加された関数などの影響で、ファイル構成が若干変更になった
      WordPress3.0から実装された関数がふんだんに使われているので、3.0未満のWordPressでは動かない
      WP3.0でデフォルトテーマが変わった
    • TwentyTen のファイル構成
    • images/
      languages/
      editor-style.css
      editor-style-rtl.css
      rtl.css
      style.css
      404.php
      archive.php
      attachment.php
      author.php
      category.php
      comments.php
      ファイル構成
      • footer.php
      • functions.php
      • header.php
      • index.php
      • loop.php
      • onecolumn-page.php
      • page.php
      • search.php
      • sidebar.php
      • sidebar-footer.php
      • single.php
      • tag.php
      • screenshot.png
      • license.txt
    • テンプレート階層図
      http://wpdocs.sourceforge.jp/テンプレート階層
      http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
    • ファイル構成の比較
      images/
      languages/
      editor-style.css
      editor-style-rtl.css
      rtl.css
      style.css
      404.php
      archive.php
      attachment.php
      author.php
      category.php
      comments.php
      footer.php
      functions.php
      header.php
      index.php
      loop.php
      onecolumn-page.php
      page.php
      search.php
      sidebar.php
      sidebar-footer.php
      single.php
      tag.php
      screenshot.png
      license.txt
      images/
      ja.po
      ja.mo
      kubrick.pot
      rtl.css
      style.css
      404.php
      archive.php
      archives.php
      comments.php
      comments-popup.php
      footer.php
      functions.php
      header.php
      image.php
      index.php
      links.php
      page.php
      search.php
      sidebar.php
      single.php
      screenshot.png
      TwentyTen
      Default
    • ファイル構成の比較
      images/
      languages/
      editor-style.css
      editor-style-rtl.css
      rtl.css
      style.css
      404.php
      archive.php
      attachment.php
      author.php
      category.php
      comments.php
      footer.php
      functions.php
      header.php
      index.php
      loop.php
      onecolumn-page.php
      page.php
      search.php
      sidebar.php
      sidebar-footer.php
      single.php
      tag.php
      screenshot.png
      license.txt
      images/
      ja.po
      ja.mo
      kubrick.pot
      rtl.css
      style.css
      404.php
      archive.php
      archives.php
      comments.php
      comments-popup.php
      footer.php
      functions.php
      header.php
      image.php
      index.php
      links.php
      page.php
      search.php
      sidebar.php
      single.php
      screenshot.png
      TwentyTen
      Default
    • デフォルトの2カラム(メインのカラム+サイドバー)ではなく、サイドバーなしのテンプレートが予め用意された。
      onecolumn-page.php
      ※ 本文枠のサイズは自動では広がらなかった
        サイドバーが無くなるだけ。
      ※ 投稿では選択できない。ページのみ対応。
    • 横幅を調整したい場合は、style.cssを直接編集して調整することになる
      デフォルトは 640px
      onecolumn-page.php
    • これまで、投稿のビジュアルエディタと実際の表示の乖離が激しかったので、画像1つ入れただけでもプレビュー等を多用する必要があった
      このCSSによって差分を埋めてくれるので、いちいちプレビューしなくても結構表示が一致するようになった
      editor-style.css
    • 矢印の部分など、改行位置がきっちりあっている。
      文字の大きさ等でずれることはあるが、それでも1~2文字程度。
      完璧ではないが、今までが酷過ぎたのでこれで十分満足
      editor-style.css
      編集画面
      実際の公開ページの表示
    • 2箇所で横幅をあわせるのが、1つのポイント
      デフォルトは、640px
      editor-style.css
      editor-style.css
      function.php
    • loop.php(get_template_part)が最高!
    • loop.php の中身
      旧Defaultテーマの index.php のループ部分がごっそり切り出された感じ
      single.php や page.php 等の単一ページは考慮されていない感じで、index.php, category.php 等アーカイブページ向けのコードが書かれている
      切り出された結果、index.php, category.phpが軽量化された
    • index.php や category.phpはどうなった?
      index.php
      category.php
      <?php get_header(); ?>
      <div id="container">
      <div id="content" role="main">
      <?php
      get_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"><?php
      printf( __( '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(); ?>
    • index.php や category.phpはどうなった?
      index.php
      category.php
      <?php get_header(); ?>
      <div id="container">
      <div id="content" role="main">
      <?php
      get_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"><?php
      printf( __( '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(); ?>
    • 指定した名前のテンプレートファイル(php)を、その関数の位置に読み込む
      引数に従って、以下の順にファイルを探し、見つかったらそのファイルを読み込む
      子テーマの A-B.php
      子テーマの A.php
      親テーマの A-B.php
      親テーマの A.php
      ファイルが見つからなければ、スルーする
      get_template_part( A [, B] )
    • include ( TEMPLATEPATH . ‘ファイル名’ ) だと、Framework化したときに親テーマを見に行ってしまう -> 代わりに STYLESHEETPATH を使えば大丈夫ファイルが存在しないとエラーになる
      sidebar(‘B’) だと、sidebar-B.php がない場合、sidebar.php を読み込んでしまう
      「sidebar-footer.php」はウィジェットエリアなので、サイドバー扱いでよい模様
      get_template_partと他法の違い
    • WP3.0+TwentyTenでFrameworkが作りやすくなった
    • Framework(フレームワーク)?
    • テーマを作るための土台になるテーマ
      似たレイアウトや同じ機能をたくさん流用したいときにすごく有用
      3.0が出る前は、Thematic などが有名
      Frameworkとは
      参考:
      http://www.slideshare.net/odysseygate/themantic-a-wordpress-theme-framework
    • 3.0の新テンプレートタグ get_template_part がすごく便利
      TwentyTen 独自関数で、いろいろなものがパーツ化されている
      Frameworkをつくりやすい
    • wp-content/themes 内にフォルダを新規作成
      themes/style.css を新フォルダーにコピー
      コピー先の style.css を編集
      テーマ名等を変更
      テンプレート情報の最後に以下の1行を追加template: twentyten
      管理画面からテーマを選ぶ
      では、子テーマを作ってみましょう
    • /*
      Theme Name: Twenty Ten の子テーマ
      Theme URI: http://curious-everything.com/
      Description: 簡単に子テーマが作れます。
      Author: KATO Yoshitaka
      Version: 1.0
      Template: twentyten
      */
      子テーマ用style.css追加修正箇所
    • <h1>はどこへ行った?
    • <?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 (抜粋)
    • 各ページのタイトルが<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( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
      <div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', '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"><?php
      printf( __( '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(); ?>
    • twentyten_posted_on()その記事の投稿日と投稿者を表示する
      twentyten_posted_in()その記事がカテゴライズされているタグやカテゴリーを表示する
      twentyten_continue_reading_link()抜粋(excerpt)時の「もっと読む」等の文章を挿入するためのフック
      TwentyTen独自関数 (一部)
    • get_template_part() が便利すぎる
      単純にhtml(php)コーディングすればいいだけなので、非プログラマな人でも(フックを覚えなくても)テンプレートの差し替え等が簡単に出来る。
      自動的に子->親とファイルを探しに行ってくれる上、無ければ無視するだけなので、将来のためにダミーで挿入しておくことが出来る
      結果的にファイルが分散するので、複数人での平行作業でもファイル更新のコンフリクトが起こりにくい
      WordPress3.0から追加されてた新機能が分かりやすく組み込まれているので、独自テーマを作成するときの教材としても良い
      まとめ
    • TwentyTen本体を直接編集してはいけません。WordPress本体バージョンアップ時に一緒にバージョンアップ(全部上書き)されてしまいます。せっかく簡単に子テーマが作れるのですから、子テーマを作ってそちらで改造しましょう。同じファイル名を子テーマ側で作成すれば、親ファイルは無視されます(function.phpを除く)
      <h1>タグの出し方を変更したい場合は(h1は1ページ内に1つだけというルールに則るなら)、全テンプレートファイルをチェックしてください。<h1>がページ内で重複する恐れがあります。
      注意事項
    • email: kato@djcom.jp
      email: jcuriouser@gmail.com
      Twitter: @yorozu
      Flickr: http://www.flickr.com/photos/yorozu2009
      Contact us?
    • ありがとうございました。
      WordPressユーザーコミュニティー
       WordBench 埼玉
      http://wordbench.org/
      http://saitama.wordbench.org/