第18回奥辞谤诲叠别苍肠丑大阪【2013年6月23日】
- 2. 瀬口理恵（せぐちりえ）＠rie05 1983年大阪うまれ大阪そだち 5DGの屋号でフリーランスデザイナーしてます Web全般たまにDTPとかUI/デジハリ講師業 @rie05 /rie.seguchi WordCamp大阪 2012 実行委員長 WordBench大阪 2012年度管理人 WordCamp神戸 2011実行委員?デザイン?スピーカー 自己紹介
- 5. テーマ構成 全てのテーマファイルは、ここ Twenty Eleven 公式テーマ レスポンシブウェブデザインに対応 Twenty Ten 公式テーマ Elevenに比べて構成はシンプル STEP1
- 9. TOPページ構造サンプル front-page.php header.php footer.php 最新記事ループ表示 sidebar.php ナビゲーション メインビジュアル ロゴ STEP1
- 10. front-page.phpのサンプル <?php get_header(); ?> コンテンツ <?php get_sidebar(); ?> <?php get_footer(); ?> STEP1
- 19. STEP1 category.php/archive.php 記事ページのカテゴリー一覧、アーカイブ一覧で 使用するテンプレートファイルです 例えばカテゴリー「news」の記事一覧とか php php
- 26. STEP2 とあるWordPressサイトのpage.phpのソースです <?php get_header(); ?> <section id="main"> <?php if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile; endif; ?> </section> <?php get_sidebar(); ?> <?php get_footer(); ?>
- 27. STEP2 ?PHPのプログラムは<?php から?>の中に書きましょう。 ?各行の最後にセミコロン（；）を付けましょう。 ?<?php ?>の外側に書いた文字はHTMLとして扱われます。 <?php echo "Hello World!"; ?> まずPHPの大前提
- 28. STEP2 とあるWordPressサイトのpage.phpのソースです <?php get_header(); ?> <section id="main"> <?php if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile; endif; ?> </section> <?php get_sidebar(); ?> <?php get_footer(); ?>
- 30. STEP2 とあるWordPressサイトのpage.phpのソースです <?php get_header(); ?> <section id="main"> <?php if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile; endif; ?> </section> <?php get_sidebar(); ?> <?php get_footer(); ?> 条件分岐ここから 条件分岐ここまで
- 32. STEP2 とあるWordPressサイトのpage.phpのソースです <?php get_header(); ?> <section id="main"> <?php if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile; endif; ?> </section> <?php get_sidebar(); ?> <?php get_footer(); ?> ループ
- 33. STEP2 とあるWordPressサイトのpage.phpのソースです <?php get_header(); ?> <section id="main"> <?php if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile; endif; ?> </section> <?php get_sidebar(); ?> <?php get_footer(); ?> ★WordPressループ テーマ作成で絶対でてきます！
- 34. STEP2 WordPressテンプレートタグ <?php get_header(); ?> コンテンツ <?php get_sidebar(); ?> <?php get_footer(); ?> get_header()…header.phpを読み込む get_sidebar()…sidebar.phpを読み込む get_footer()…footer.phpを読み込む
- 35. STEP2 WordPressテンプレートタグ <?php while ( have_posts() ) : the_post(); ?> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <?php the_content(); ?> <?php endwhile; ?> the_title()… 記事のタイトルを出力 the_permalink()… 記事のリンクを出力 the_content()… 記事の内容を出力 たくさんあるので続きはCodexで！ テンプレートタグ入門 - WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テンプレートタグ入門
- 39. WordPressインストール テーマフォルダ作成 インストールは割愛（ググったらすぐ） STEP3 ここ コーディングしたデータをthemesフォルダにまとめていれます フォルダ名がテーマ名になるよ
- 40. style.cssの記述 @charset "utf-8"; /* Theme Name:rie05 Theme URI:http://5dg.biz/ Description:勉強用テーマ Author:rie05 Author URI:http://5dg.biz/ Version:1.0 */ cssファイルはstyle.cssとして下記を記述 STEP3
- 44. 最初にみんなつまずくやつ ★注意★ WordPressテーマ内の各ファイルへのパスに、相対パスは使用できません ※CSSの中は除く テーマとして認識してるのにcssも画像パスも死んでる STEP3
- 45. cssリンクパスや画像パス書き換え <link rel="stylesheet" href="style.css" media="screen"> STEP3 <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen"> <img src=/slideshow/18wordbench2013623/23354900/"images/icon.gif"> <img src="<?php echo get_template_directory_uri(); ?>/images/ icon.gif"> cssリンクパス 画像パス
- 47. STEP3 各テンプレートファイルに 必要なWPタグを入れていきます front- page single page header footer 続きはCodexで！ WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/
- 48. STEP3 各テンプレートファイルに 必要なWPタグを入れていきます front- page single page header footer 続きはCodexで！ WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/ 基礎編としてはここまでで終わりです 次のセッションでもっと具体的に見れるはず