doshirouto @uemera
@uemera uemura
このプレゼンでは WordPressのテーマのしくみを 初心者にも分かるように解説します テーマを理解すればどういうメリットがあるの? WordPressの仕様を理解すると 自分でやれることが広がります WordPressへの苦手意識が無くなります WordPressを自分の好きなデザインにすることができます
次期バージョンWordPress3.6に同梱される新デフォルトテーマ TwentyThirteen とぅえんてぃさーてぃーん
次期バージョンWordPress3.6に同梱される新デフォルトテーマ TwentyThirteen とぅえんてぃさーてぃーん TwentyThirteenの特徴: レスポンシブデザインを採用しています (パソコン スマホ両対応) Webフォントの採用で 絵文字のような小さいアイコンが表示されます 下にスクロールするとヘッダ領域がコンパクト化され記事領域が大きくなります サイドブロックがフッタ部分に移動しました WordPress3.6の新投稿フォーマットに対応しています
しかし バージョンアップにともなって WordPressはどんどん難しくなってきています 例: スタイルシートファイルへのリンクがどこに書いてあるか分からない テーマのヘッダ部分にあたるheader.phpには当然下のようなcssファイル へのリンクがあるものと思ったけど... header.php <head> <link rel="stylesheet" type="text/css" href="http://.../style.css"> </head> header.phpには見つかりません functions.php header.phpではなく php処理ばかりが書かれているfunctions.phpと いうファイルに 関数呼び出しの形で書かれています wp_enqueue_style( 'twentythirteen- style', get_stylesheet_uri() ); これでは初心者はcssファイルを探したり 編集することもままならない
doshirouto
TwentyThirteen doshirouto
doshirouto
content.php content- image.php content- gallery.php content- link.php content- video.php content- audio.php content- chat.php content- status.php content- quote.php content- aside.php
投稿フォーマット 画像 content- image.php 画像ファイルを掲載する ときに使います
投稿フォーマット ギャラリー content- gallery.php 複数の画像ファイルを掲載する ときに使います
content- link.php
投稿フォーマット Video content- video.php YouTube等から動画ファイルを埋 め込むことができます YouTubeのURLを投稿するだけ で埋め込み記事になります
content- audio.php
content- chat.php
投稿フォーマット ステータス content- status.php Twitterのツイートのようなもの
投稿フォーマット 引用 content- quote.php 引用記事と引用元URLを投稿 すると自動的に引用記事に なります
content- aside.php
doshirouto content- ***.php 1 index.php
記事を表示する方法はいろいろあります (TwentyThirteenの例) 最新の投稿順表示 特定年月に投稿された記事の 一覧表示 (例: 2013年4月の投稿一覧) 特定カテゴリの一覧表示 (例: カテゴリA の一覧) 特定タグの一覧表示 (例: グルメ タグの一覧)
TwentyThirteen index.php category.php archive.php tag.php single.php
archive.php category.php index.php single.php tag.php
doshirouto TwentyThirteen doshirouto 404(not found) index.php
なぜindex.phpだけでも動くのか? WordPressの仕様では 以下のように動作します 年月毎(アーカイブ)ページの表示のとき archive.phpがなければindex.phpを使います カテゴリ毎ページの表示のとき category.phpが無ければindex.phpを使います タグ毎ページ表示のとき tag.phpが無ければindex.phpを使います カテゴリ毎ページ category.php アーカイブページ archive.php タグ毎ページ tag.php index.php 専用のテンプレートファイルがなければ index.phpを使用する仕様になっ ています この優先順位を持った階層をテンプレート階層と言います
次に ページのパーツ構成を理解しましょう
TwentyThirteen index.php header.php sidebar- main.php footer.php
doshirouto index.php header.php sidebar- main.php footer.php
doshirouto doshirouto http://toyao.net/doshirouto.zip
doshirouto wordpress > wp- content > themes
doshirouto footer.php functions.php header.php index.php sidebar- main.php style.css
doshirouto
doshirouto
日本語がいっぱいの超親切設計 中を簡単に解説します
doshirouto/index.php <?php get_header();?> <div id="primary" class="content- area"> <div id="content" class="site- content" role="main"> <?php if ( have_posts() ) :?> <?php while ( have_posts() ) : the_post();?> <article id="post- <?php the_id();?>" <?php post_class();?>> <header class="entry- header"> <h1 class="entry- title"><?php the_title();?></h1> <div class="entry- meta"> <?php twentythirteen_entry_meta();?> <?php edit_post_link( ' ' );?> </div> </header> <div class="entry- content"> <?php the_content( '...' );?> <?php wp_link_pages();?> </div> <footer class="entry- meta"> <div class="comments- link"> <?php comments_popup_link();?> </div> </footer> </article> <?php endwhile;?> <?php twentythirteen_paging_nav();?> <?php endif;?> </div> </div> <?php get_footer();?>
<!DOCTYPE html> <html lang="ja"> doshirouto/header.php <head> <meta charset="utf- 8" /> <meta name="viewport" content="width=device- width" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url');?>"/> <title>wordpress </title> <?php wp_head();?> </head> <body <?php body_class();?>> <div id="page" class="hfeed site"> <header id="masthead" class="site- header" role="banner"> <a href="<?php echo home_url()?>"> <hgroup> <h1 class="site- title">wordbench 0506</h1> <h2 class="site- description">wordpress doshirouto</h2> </hgroup> </a> <div id="navbar" class="navbar"> <nav id="site- navigation" class="navigation main- navigation" role="navigation"> </div> </header> <?php wp_nav_menu() );?> <?php get_search_form();?> </nav> <div id="main" class="site- main">
doshirouto/footer.php </div><!- - #main - - > <footer id="colophon" class="site- footer" role="contentinfo"> <?php get_sidebar( 'main' );?> <div class="site- info"> doshirouto </div> </footer> </div><!- - #page - - > <?php wp_footer();?> </body> </html>
@uemera uemura