Embed Size (px)
DESCRIPTION
Citation preview
オリジナルテーマで学ぶWordPressの基本
2013.9.14
WordBench長崎 勉強会01
Thanks @Studio_Neco
13年9月14日土曜日
北島 卓
@inc2734
浦川 公伸
@uratti5
隈本 中通
@mayoibi@t__kuma
主催
13年9月14日土曜日
テーマの作成に入る前に…
1.ダッシュボード > プラグイン WP Multibyte Patch を有効化2.ダッシュボード > 設定 > パーマリンク設定 カスタム構造：/blog/%year%/%monthnum%/%day%/%post_id%/
3.ダッシュボード > 固定ページ トップページ用ページ作成（タイトル：ホーム、スラッグ：home） ブログトップページ用ページ作成（タイトル：ブログ、スラッグ：blog）4.ダッシュボード > 設定 > 表示設定 > フロントページの設定 フロントページ：ホーム 投稿ページ：ブログ5.ダッシュボード > 設定 > メディア設定 中サイズ：幅の上限 300px（任意） 高さの上限 9999px
大サイズ：幅の上限 （ページ幅） 高さの上限 9999px
6.ダッシュボード > プラグイン > 新規追加 PS Disable Auto Formatting をインストール、有効化
13年9月14日土曜日
テーマとは
・サイトデザインの「着せ替え」を行うもの。
・複数のテンプレートファイルから構成されてる。
・自分でオリジナルのテーマを作ることもできるし、WordPressの管理画面やテーマディレクトリからダウンロードすることもできる。http://wordpress.org/themes/
・ /PATH/TO/wp-content/themes/テーマ名 としてディレクトリを作ることでテーマとして利用できるようになります。
13年9月14日土曜日
テーマの最小構成
・WordPressのテンプレートは「階層」をもっている。(例えばカテゴリーページの場合はcategory.phpが使用されるが、無い場合はarchive.php、それも無い場合はindex.phpが使われる）
・最小構成は下記の2ファイルstyle.css - テーマを定義するindex.php - メインテンプレート。
各テンプレートが無い場合に最終的に使用される。
13年9月14日土曜日
style.cssによるテーマ定義
・ style.cssのはじめに下記のコメント形式でコメントを書くとテーマとして認識されるようになる。
/*Theme Name: Twenty TenTheme URI: http://wordpress.org/Description: The 2010 default theme for WordPress.Author: wordpressdotorgAuthor URI: http://wordpress.org/Version: 1.0Tags: black, editor-styleLicense: GPL2License URI: license.txt General comments (optional).*/
13年9月14日土曜日
テンプレート階層について
・http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
13年9月14日土曜日
今回のデモサイトのテンプレート構成
・ 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日土曜日
今回はこんな感じでファイルを分割<!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日土曜日
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日土曜日
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日土曜日
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日土曜日
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日土曜日
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> !<?phpif ( 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日土曜日
footer.php を作ってみよう
13年9月14日土曜日
トップページ（front-page.php） を作ってみよう
・トップページには 新着情報 と ブログ の新着記事を表示させる。新着情報は「カスタム投稿タイプ」機能を使って作成する。
・とりあえず、これは後回しにしてhtmlを表示できるところまで…。
・ get_header();- header.php をインクルード
・ get_sidebar();- sidebar.php をインクルード
・ get_footer();- footer.php をインクルード
・ post_class();- 投稿情報に応じてclassを出力。エントリー全体をz
囲むdivに記述する。
13年9月14日土曜日
page.php（固定ページ） を作ってみよう
・「固定ページ」はブログや新着情報などのようにフロー型の コンテンツではない静的なコンテンツのこと。【例】「会社概要」「お問い合わせ」
・ post_class()- ページに応じてclassを出力。エントリー全体を囲むタグに記述する。
・ the_content()- 管理画面で入力した記事本文を出力する。
13年9月14日土曜日
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日土曜日
ブログ（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日土曜日
ブログ詳細ページ（single.php） を作ってみよう
・ comments_template( '', true );- comments.php を読み込む
・ ほとんど一覧ページ（index.php）と同じなので上手く流用して作成！
13年9月14日土曜日
新着情報を作ってみよう
・新着情報はカスタム投稿タイプ「news」を作成して使用。
・カスタム投稿タイプはプラグイン「Custom Post Type UI」で作成できる。
・テンプレートは下記の2つ。archive-news.php - 一覧ページsingle-news.php - 詳細ページ
・上記ファイルが無い場合は index.php、single.php が使用されます。
・ブログのときとほとんど同じなので上手く流用して作成！13年9月14日土曜日
トップページに新着情報を表示しよう
<?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日土曜日
トップページにブログを表示しよう
<?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日土曜日
お問い合わせページを作ろう
・多機能フォームプラグイン「MW WP Form」を使います！✓ ショートコードを使用したフォーム生成✓ 確認画面が表示可能✓ 同一URL・個別URLでの画面変遷が可能✓ 豊富なバリデーションルール
・マニュアル⇒ http://2inc.org/manual-mw-wp-form/
・見たほうが早いと思うのでデモります！
13年9月14日土曜日
その他
・パンくずリストの表示⇒ Bread Crumb NavXT
・カスタム投稿タイプのパーマリンク設定⇒ Custom Post Type Permalinks
・ JSの読み込みは wp_enqueue_script が便利⇒ wp_enqueue_script( ‘名前’, httpパス, array( 必要jsの名前 ), バージョン, フッター出力するか );
13年9月14日土曜日
今回の使用プラグインまとめ
・ パンくずリストの表示⇒ Bread Crumb NavXT
・ カスタム投稿タイプのパーマリンク設定⇒ Custom Post Type Permalinks
・ カスタム投稿タイプを作成⇒ Custom Post Type UI
・ フォーム作成⇒ MW WP Form
・ HTMLモード利用時のオートフォーマッティング回避⇒ PS Disable Auto Formatting
・ 日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化⇒ WP Multibyte Patch
13年9月14日土曜日
参考リンク
・ まず最初に学ぶべき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 Referencehttp://codex.wordpress.org/Plugin_API/Action_Reference
・ Filter Referencehttp://codex.wordpress.org/Plugin_API/Filter_Reference
13年9月14日土曜日
