@uemera uemura

Size: px

Start display at page:

Download "@uemera uemura"

あゆみたかぎ
7 years ago
Views:

2 @uemera uemura

3 このプレゼンでは WordPressのテーマのしくみを初心者にも分かるように解説しますテーマを理解すればどういうメリットがあるの? WordPressの仕様を理解すると自分でやれることが広がります WordPressへの苦手意識が無くなります WordPressを自分の好きなデザインにすることができます

4 次期バージョンWordPress3.6に同梱される新デフォルトテーマ TwentyThirteen とぅえんてぃさーてぃーん

5 次期バージョンWordPress3.6に同梱される新デフォルトテーマ TwentyThirteen とぅえんてぃさーてぃーん TwentyThirteenの特徴: レスポンシブデザインを採用しています (パソコンスマホ両対応) Webフォントの採用で絵文字のような小さいアイコンが表示されます下にスクロールするとヘッダ領域がコンパクト化され記事領域が大きくなりますサイドブロックがフッタ部分に移動しました WordPress3.6の新投稿フォーマットに対応しています

6 しかしバージョンアップにともなって WordPressはどんどん難しくなってきています例: スタイルシートファイルへのリンクがどこに書いてあるか分からないテーマのヘッダ部分にあたるheader.phpには当然下のようなcssファイルへのリンクがあるものと思ったけど... header.php <head> <link rel="stylesheet" type="text/css" href=" </head> header.phpには見つかりません functions.php header.phpではなく php処理ばかりが書かれているfunctions.phpというファイルに関数呼び出しの形で書かれています wp_enqueue_style( 'twentythirteen- style', get_stylesheet_uri() ); これでは初心者はcssファイルを探したり編集することもままならない

8 doshirouto

11 TwentyThirteen doshirouto

13 doshirouto

15 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

16 投稿フォーマット画像 content- image.php 画像ファイルを掲載するときに使います

17 投稿フォーマットギャラリー content- gallery.php 複数の画像ファイルを掲載するときに使います

18 content- link.php

19 投稿フォーマット Video content- video.php YouTube等から動画ファイルを埋め込むことができます YouTubeのURLを投稿するだけで埋め込み記事になります

20 content- audio.php

21 content- chat.php

22 投稿フォーマットステータス content- status.php Twitterのツイートのようなもの

23 投稿フォーマット引用 content- quote.php 引用記事と引用元URLを投稿すると自動的に引用記事になります

24 content- aside.php

25 doshirouto content- ***.php 1 index.php

27 記事を表示する方法はいろいろあります (TwentyThirteenの例) 最新の投稿順表示特定年月に投稿された記事の一覧表示 (例: 2013年4月の投稿一覧) 特定カテゴリの一覧表示 (例: カテゴリA の一覧) 特定タグの一覧表示 (例: グルメタグの一覧)

28 TwentyThirteen index.php category.php archive.php tag.php single.php

29 archive.php category.php index.php single.php tag.php

30 doshirouto TwentyThirteen doshirouto 404(not found) index.php

31 なぜ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を使用する仕様になっていますこの優先順位を持った階層をテンプレート階層と言います

32 次にページのパーツ構成を理解しましょう

33 TwentyThirteen index.php header.php sidebar- main.php footer.php

34 doshirouto index.php header.php sidebar- main.php footer.php

35 doshirouto doshirouto

36 doshirouto wordpress > wp- content > themes

37 doshirouto footer.php functions.php header.php index.php sidebar- main.php style.css

39 doshirouto

40 doshirouto

41 日本語がいっぱいの超親切設計中を簡単に解説します

42 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();?>

43 <!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">

44 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>

46 @uemera uemura

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション WordPress 講習 (6) 株式会社コミュニティコム星野邦敏 115-0045 東京都北区赤羽 1-59-9 ネスト赤羽 201 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1 WordPress 講習はじめに対象者 WordPressをインストールしたことが無い人