Download as PDF, PPTX
More Related Content
Similar to Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
- 1.
- 2. 北島 卓 @inc2734 浦川 公伸 @uratti5 隈本中通 @mayoibi@t__kuma 主催 13年9月14日土曜日
- 3. テーマの作成に入る前に… 1.ダッシュボード > プラグイン WPMultibyte Patch を有効化 2.ダッシュボード > 設定 > パーマリンク設定 カスタム構造：/blog/%year%/%monthnum%/%day%/%post_id%/ 3.ダッシュボード > 固定ページ トップページ用ページ作成（タイトル：ホーム、スラッグ：home） ブログトップページ用ページ作成（タイトル：ブログ、スラッグ：blog） 4.ダッシュボード > 設定 > 表示設定 > フロントページの設定 フロントページ：ホーム 投稿ページ：ブログ 5.ダッシュボード > 設定 > メディア設定 中サイズ：幅の上限 300px（任意） 高さの上限 9999px 大サイズ：幅の上限 （ページ幅） 高さの上限 9999px 6.ダッシュボード > プラグイン > 新規追加 PS Disable Auto Formatting をインストール、有効化 13年9月14日土曜日
- 4. テーマとは ・ サイトデザインの「着せ替え」を行うもの。 ・ 複数のテンプレートファイルから構成されてる。 ・自分でオリジナルのテーマを作ることもできるし、 WordPressの管理画面やテーマディレクトリからダウンロードする こともできる。 http://wordpress.org/themes/ ・ /PATH/TO/wp-content/themes/テーマ名 としてディレクトリを作 ることでテーマとして利用できるようになります。 13年9月14日土曜日
- 5. テーマの最小構成 ・ WordPressのテンプレートは「階層」をもっている。 (例えばカテゴリーページの場合はcategory.phpが使用されるが、 無い場合はarchive.php、それも無い場合はindex.phpが使われる） ・ 最小構成は下記の2ファイル style.css - テーマを定義する index.php - メインテンプレート。 各テンプレートが無い場合に最終的に使用される。 13年9月14日土曜日
- 6. style.cssによるテーマ定義 ・ style.cssのはじめに下記のコメント形式でコメントを書くとテーマ として認識されるようになる。 /* Theme Name:Twenty Ten Theme URI: http://wordpress.org/ Description: The 2010 default theme for WordPress. Author: wordpressdotorg Author URI: http://wordpress.org/ Version: 1.0 Tags: black, editor-style License: GPL2 License URI: license.txt General comments (optional). */ 13年9月14日土曜日
- 7.
- 8. 今回のデモサイトのテンプレート構成 ・ 404.php - 404ページ ・archive-news.php - 新着情報の一覧ページ ・ comments.php - コメントテンプレート ・ editor-style.css - 記事入力欄用スタイルシート ・ footer.php - フッターテンプレート ・ front-page.php - トップページ ・ functions.php - 各種設定や関数定義 ・ header.php - ヘッダーテンプレート ・ index.php - メインテンプレート（今回はブログの一覧ページで使用） ・ license.txt - ライセンス情報 ・ page.php - 固定ページ ・ screenshot.png - 管理画面で表示するスクリーンショット ・ sidebar.php - サイドバーテンプレート ・ single-news.php - 新着情報の詳細ページ ・ single.php - ブログの詳細ページ ・ style.css - テーマ定義（/css/内のcssファイルをimport） 13年9月14日土曜日
- 9. 今回はこんな感じでファイルを分割 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" xmlns:og="http://ogp.me/ns#" " xmlns:fb="http://www.facebook.com/2008/fbml"> <head> ... </head> <body class="home"> <div id="container"> " <div id="header"> ... " <!-- end #header --></div> " <div id="contents"> " " <div class="content"> " " " <div id="main"> " " " " ... " " " " ... " " " " ... " " " " ... " " " " ... " " " " ... " " " <!-- end #main --></div> " " " <div id="sub"> " " " " ... " " " <!-- end #sub --></div> " " <!-- end .content --></div> " <!-- end #contents --></div> " <div id="footer"> " " ... " <!-- end #footer --></div> <!-- end #container --></div> </body> </html> header.php sidebar.php footer.php front-page.php とか page.php とか 13年9月14日土曜日
- 10. header.php を作ってみよう ・ wp_head(); -必須。主にプラグイン等が必要なjsや cssを出力するのに利用される ・ wp_title( '»', false, 'right' ); - ページタイトル + 区切り文字を返す ・ bloginfo( 'name' ); - サイト名を出力 ・ body_class(); - ページに応じてclassを出力。bodyタグに 記述する ・ get_stylesheet_uri(); - style.cssのhttpパスを返す ・ get_stylesheet_directory_uri(); - テーマディレクトリのhttpパスを返す ・ home_url(); - サイトURLを返す。引数に、後に続くパスを 指定可能（/news/とか） ・ is_front_page() - トップページの場合に true を返す ・ get_archive_title(); - アーカイブタイトル（ページが属するカテゴ リ、ページ名）を返す( functions.phpに定義） ・ bcn_display(); - パンくずリストを表示 （プラグインBread Crumb NavXT使用） ・ <?php global $template; echo basename( $template, '.php' ); ?>.php - 使用テンプレート名を返す 13年9月14日土曜日
- 11. header.php を作ってみよう ◎タイトル <title>新着情報 |Web Paradice Creative</title> ! <title><?php echo wp_title( '|', false, 'right' ); ?><?php bloginfo( 'name' ); ?></title> ◎JS・CSSへのパス <script type="text/javascript" src="../js/main.js"></script> ! <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/main.js"></ script> ※jQuery は functions.php で WordPress 組み込みの jQuery の読み込み指定がしてあるので、header.php に記述は不 要です。 ◎ロゴ <a href="./index.html”><img src=”./images/common/logo.gif" alt="Web Paradice Creative" /></a> ! <a href="<?php echo home_url(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/ images/common/logo.gif" alt="Web Paradice Creative" /></a> 13年9月14日土曜日
- 12. header.php を作ってみよう ◎メインビジュアル <div id="mainVisual"> "<?php if ( is_front_page() ) : ?> " <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/main.gif" alt="" /> " <?php else : ?> " <h2><?php echo get_archive_title(); ?></h2> " <div id="topicPath"> " " <p> " " " <?php bcn_display(); ?> " " </p> " <!-- end #topicPath --></div> " <div id="introduction"> " " <p> " " " このページの投稿タイプは <?php echo get_post_type(); ?> です。<br /> " " " テンプレートファイルは <?php global $template; echo basename( $template, '.php' ); ?>.php を使用しています。 " " </p> " <!-- end #introduction --></div> " <?php endif; ?> <!-- end #mainVisual --></div> ※1つの header.php でトップページとそれ以外のページの2種類の mainVisual を表示させるため、is_front_page() でト ップページかどうかを判別させる。 13年9月14日土曜日
- 13. sidebar.php を作ってみよう ・ ブログ（投稿タイプpost）のときだけウィジェットを有効にして新 着記事とカテゴリー一覧を表示させる。 ※今回はfunctions.phpで sidebar-widget-area というウィジェットエ リアを定義済みです。 ・ get_post_type() - 現在の投稿タイプ名を返す ・ is_active_sidebar( 'sidebar-widget-area' ) - ウィジェットが有効ならtrue（引数はウィジェットエリア名） ・ dynamic_sidebar( 'sidebar-widget-area' ); - ウィジェットを表示（引数はウィジェットリエア名） 13年9月14日土曜日
- 14. sidebar.php を作ってみよう ◎ウィジェット <div class="widget-container"> "<dl> " " <dt class="widget-title">LATEST ENTRIES</dt> " " <dd class="widget-content"> " " " <ul> " " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li> " " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li> " " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li> " " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li> " " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li> " " " </ul> " " </dd> <!-- end .widget-container --></div> ! <?php if ( get_post_type() == 'post' ) { " if ( is_active_sidebar( 'sidebar-widget-area' ) ) " " dynamic_sidebar( 'sidebar-widget-area' ); } ?> ※ブログの LATEST ENTRIES と CATEGORIES はウィジェットで設置する。ブログ以外ではウィジェットは不要なので、 get_post_type() == ‘post’ で 投稿タイプが post ( = ブログ ) のときだけウィジェットを表示させる。 13年9月14日土曜日
- 15.
- 16. トップページ（front-page.php） を作ってみよう ・ トップページには新着情報 と ブログ の新着記事を表示させる。 新着情報は「カスタム投稿タイプ」機能を使って作成する。 ・ とりあえず、これは後回しにしてhtmlを表示できるところまで…。 ・ get_header(); - header.php をインクルード ・ get_sidebar(); - sidebar.php をインクルード ・ get_footer(); - footer.php をインクルード ・ post_class(); - 投稿情報に応じてclassを出力。エントリー全体をz 囲むdivに記述する。 13年9月14日土曜日
- 17. page.php（固定ページ） を作ってみよう ・ 「固定ページ」はブログや新着情報などのようにフロー型の コンテンツではない静的なコンテンツのこと。 【例】「会社概要」「お問い合わせ」 ・post_class() - ページに応じてclassを出力。エントリー全体を囲むタグに記述する。 ・ the_content() - 管理画面で入力した記事本文を出力する。 13年9月14日土曜日
- 18. page.php（固定ページ） を作ってみよう <?php get_header();?> <?php while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> " <div class="entry-content"> " " <?php the_content(); ?> " <!-- end .entry-content --></div> <!-- .hentry --></div> <?php endwhile; ?> <?php get_sidebar(); ?> <?php get_footer(); ?> 投稿情報がある間、ループ ※固定ページの場合、投稿情報は1つだけなので、実際はループさせなくても良いのですが、 archive系のテンプレートと記述を統一させたほうがわかりやすいのでループさせています。 ※投稿情報が1つなので、the_post() で投稿情報を更新する必要も実際は無いです。 投稿情報をグローバル変数にセット 管理画面で入力した本文を出力 13年9月14日土曜日
- 19. ブログ（index.php） を作ってみよう ・ has_post_thumbnail() -アイキャッチ画像が設定されている場合 true を返す。 ・ the_post_thumbnail( 'サイズ名' ); - アイキャッチ画像を出力。引数に サイズ名を指定可能。 サイズは functions.php で追加可能。今回は 「blogThumbnail」というサイズ名を使用。 ・ the_time( ‘フォーマット’ ) - 投稿日時を表示。引数は php の date関数と 同じフォーマット。 ・ the_permalink(); - 記事へのパーマリンクを表示。 ・ the_title(); - 記事タイトルを表示。 ・ the_category( '区切り文字' ); - 記事に設定されたカテゴリーを 区切り文字で区切って表示 ・ comments_link(); - 詳細ページコメントエリアへのURLを表示 （http://hoge.com/xxx/#comments） ・ comments_number( '0', '1', '%' ); - コメント数を表示 （引数は、0のとき、1のとき、2以上のとき） ・ the_excerpt(); - 抜粋を表示 13年9月14日土曜日
- 20. ブログ詳細ページ（single.php） を作ってみよう ・ comments_template('', true ); - comments.php を読み込む ・ ほとんど一覧ページ（index.php）と同じなので上手く流用して 作成！ 13年9月14日土曜日
- 21. 新着情報を作ってみよう ・ 新着情報はカスタム投稿タイプ「news」を作成して使用。 ・ カスタム投稿タイプはプラグイン「CustomPost Type UI」で作成 できる。 ・ テンプレートは下記の2つ。 archive-news.php - 一覧ページ single-news.php - 詳細ページ ・ 上記ファイルが無い場合は index.php、single.php が使用されます。 ・ ブログのときとほとんど同じなので上手く流用して作成！ 13年9月14日土曜日
- 22. トップページに新着情報を表示しよう <?php $posts_news = get_posts(array( 'post_type' => 'news', 'posts_per_page' => 3 ) ); ?> <div id="news"> " <h2><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/news/lbl.gif" alt="News" /></h2> " <?php if ( !empty( $posts_news ) ) : ?> " <ul> " " <?php foreach ( $posts_news as $post ) : setup_postdata( $post ); ?> " " <li> " " " <dl> " " " " <dt><?php the_time( 'Y.m.d' ); ?></dt> " " " " <dd><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dd> " " " </dl> " " </li> " " <?php endforeach; wp_reset_postdata(); ?> " </ul> " <p class="more"> " " <a href="<?php echo home_url( '/news/' ); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/common/more.gif" alt="more" /></a> " </p> " <?php else : ?> " <p> " " 現在、新着情報はありません。 " </p> " <?php endif; ?> <!-- end #news --></div> 13年9月14日土曜日
- 23. トップページにブログを表示しよう <?php $posts_blog = get_posts(array( " 'post_type' => 'post', " 'posts_per_page' => 5 ) ); ?> <div id="blog"> " <h2><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/blog/lbl.gif" alt="Blog" /></h2> " <?php if ( !empty( $posts_blog ) ) : ?> " <ul> " " <?php foreach ( $posts_blog as $post ) : setup_postdata( $post ); ?> " " <li> " " " <a href="<?php the_permalink(); ?>"> " " " " <span class="thumbnail"> " " " " " <?php if ( has_post_thumbnail() ) : ?> " " " " " <?php the_post_thumbnail(); ?> " " " " " <?php else : ?> " " " " " <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/blog/no-photo.gif" alt="" /> " " " " " <?php endif; ?> " " " " " <span class="title"><?php the_title(); ?></span> " " " " </span> " " " " <span class="date"><?php the_time( 'Y.m.d' ); ?></span> " " " </a> " " </li> " " <li> " " " <a href="<?php echo home_url( '/blog/' ); ?>"> " " " " <span class="thumbnail"> " " " " " <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/blog/more.gif" alt="more" /> " " " " </span> " " " </a> " " </li> " " <?php endforeach; wp_reset_postdata(); ?> " </ul> " <?php else : ?> " <p> " " 現在、表示できるブログ記事はありません。 " </p> " <?php endif; ?> <!-- end #blog --></div> 13年9月14日土曜日
- 24. お問い合わせページを作ろう ・ 多機能フォームプラグイン「MW WPForm」を使います！ ✓ ショートコードを使用したフォーム生成 ✓ 確認画面が表示可能 ✓ 同一URL・個別URLでの画面変遷が可能 ✓ 豊富なバリデーションルール ・ マニュアル ⇒ http://2inc.org/manual-mw-wp-form/ ・ 見たほうが早いと思うのでデモります！ 13年9月14日土曜日
- 25. その他 ・ パンくずリストの表示 ⇒ BreadCrumb NavXT ・ カスタム投稿タイプのパーマリンク設定 ⇒ Custom Post Type Permalinks ・ JSの読み込みは wp_enqueue_script が便利 ⇒ wp_enqueue_script( ‘名前’, httpパス, array( 必要jsの名前 ), バージョン, フッター出力するか ); 13年9月14日土曜日
- 26. 今回の使用プラグインまとめ ・ パンくずリストの表示 ⇒ BreadCrumb NavXT ・ カスタム投稿タイプのパーマリンク設定 ⇒ Custom Post Type Permalinks ・ カスタム投稿タイプを作成 ⇒ Custom Post Type UI ・ フォーム作成 ⇒ MW WP Form ・ HTMLモード利用時のオートフォーマッティング回避 ⇒ PS Disable Auto Formatting ・ 日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化 ⇒ WP Multibyte Patch 13年9月14日土曜日
- 27. 参考リンク ・ まず最初に学ぶべきWordPressの本質 http://hijiriworld.com/web/wp-essence/ ・ query_postsを捨てよ、pre_get_postsを使おう http://notnil-creative.com/blog/archives/1688 ・テンプレート階層ハイパーリンク http://wpdocs.sourceforge.jp/テンプレート階層 ・ Plugin API/Action Reference http://codex.wordpress.org/Plugin_API/Action_Reference ・ Filter Reference http://codex.wordpress.org/Plugin_API/Filter_Reference 13年9月14日土曜日