Your SlideShare is downloading. ×
0
Ver. 1.1
自己紹介名前:石川栄和(@kurudrive)あま市(名古屋の西隣です!)でベクトル という会社を細々とやっています。WordPressを使ってウェブサイト制作をしながら生きています。
本日のお題
カスタムフィールドとは              タイトル              本文              カテゴリー              投稿タグ              抜粋
カスタムフィールドの利用例(1)
カスタムフィールドの利用例1-1             税理士やコンサルタントなど、専門家を登録・閲覧出来るサイト             専門家1人につき個別の詳細ページを持つ                            詳細ページ
カスタムフィールドの利用例1-2                   これだけすべてのソースを本文欄に                   入力しなくてはならない。                   HTMLの知識が少ない人には       ...
カスタムフィールドの利用例1-3                        管理画面に入力欄を追加  カスタムフィールドを追加して、項目だけ入力すれば、整形されて表示されるようにする。
カスタムフィールドの設定方法
カスタムフィールドの設定方法_1①プラグイン 『Custom Field Template』 をインストールして有効化②カスタムフィールドの設定                    「投稿」で使うのか「固定ページ」で使うのか、        ...
カスタムフィールドの設定方法_2③テンプレートファイルで呼び出す 詳細ページのテンプレートであるsingle.phpなどに下記のコードで呼び出します。 <?php if ( have_posts() ) while ( have_posts()...
カスタムフィールドの設定方法_3<?php echo post_custom(‘ex-companyname’) ?> だけでも呼び出せるが・・・                                                 ...
カスタムフィールドの設定方法_4 カスタムフォールドが空じゃない場合のみ表示する <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <?php $exCompan...
カスタムフィールドの利用例(2)
カスタムフィールドの利用例2-1「投稿」を「新着情報」コンテンツとして活用する場合、詳細ページへリンクする場合もあれば、サイト内の別のページにリンクしたり、外部サイトへリンクさせるなど、状況に応じて使い分けたい。                ...
カスタムフィールドの利用例2-2                   ページの扱いをラジオボタンで選択                   リンクさせる場合のURL入力欄
カスタムフィールドの利用例2 ブラグイン(カスタムフィールドテンプレート)の設定 [詳細ページの使用] type = radio value = 詳細ページを使用する # 詳細ページを使用しない(文字のみ) # サイト内のページに直接リンクする...
カスタム投稿タイプとは
カスタム投稿タイプを使う理由(1)          Aのカテゴリで使うカスタムフィールドセット          Bのカテゴリで使うカスタムフィールドセット
カスタム投稿タイプを使う理由(1)    「お知らせ」の投稿画面なら「お知らせ」に    関係のある入力項目だけが最初から表示されている。
カスタム投稿タイプを使う理由(1)      「制作実績」の投稿画面なら「制作実績」に      関係のある入力項目だけが最初から表示されている。
カスタム投稿タイプを使う理由(2) 投稿         2011年8月のお知らせ記事を表示させたい  カテゴリー  ・お知らせ            カテゴリーIDなどをテンプレートファイルに直書きして絞り込み  ・制作実績         ...
カスタム投稿タイプの実装方法
カスタム投稿タイプが使えるように設定// ▼▼カスタム投稿タイプ/カスタム分類の追加add_action( init, create_post_type, 0 );function create_post_type() {// ▼お知らせ  r...
お知らせをサイトのトップページに表示する               投稿タイプの値
お知らせ一覧(お知らせトップ)ページの作成 新しく追加した投稿タイプのトップページは「固定ページ」で作ります。 【1】 「お知らせ」トップ用のテンプレートファイルを用意する。       page-info.php   「お知らせ」トップ用のテ...
お知らせのアーカイブを使えるように設定【1】 functions.phpに下記のソースを貼り付け   // ▼カスタム投稿タイプのアーカイブ出力   global $my_archives_post_type;   add_filter( ge...
お知らせのアーカイブテンプレートを作成【2】 「お知らせ」のアーカイブテンプレートを作成する。             archive-info.php             「お知らせ」アーカイブ用のテンプレートファイル          ...
お知らせの詳細ページ / ローカルメニューの作成 「お知らせ」詳細ページ用のテンプレートファイルを作成する。         single-info.php    「お知らせ」詳細ページ用のテンプレートファイル                 ...
カスタム分類とは?
カスタム分類の概要追加した投稿タイプに“カテゴリー”が管理出来るようにしたり、更にカテゴリーとは別の軸のカテゴリーを作ったり出来ます。        「お知らせ」もカテゴリー分け出来るようにカスタム分類を追加        “投稿タグ”機能を追...
カスタム分類の利用例             カテゴリー毎や地域毎などで投稿データを呼び出す事が出来る
カスタム分類の実装方法
カスタム分類が使えるように設定// ▼▼カスタム投稿タイプ/カスタム分類の追加add_action( init, create_post_type, 0 );function create_post_type() {// ▼お知らせ  regi...
カテゴリー(カスタム分類)ページの作成 【1】 カスタム分類用のテンプレートファイルを用意する。              taxonomy-info-cate.php                      「お知らせ」カテゴリー(カスタム...
カテゴリー(カスタム分類)のローカルメニュー <h3><a href=“/info/>お知らせ</a></h3> <h4>お知らせカテゴリー</h4> <ul> <?php wp_list_categories(taxonomy=info-ca...
カテゴリー(カスタム分類)の表示順制御カスタム分類の表示順をコントロールする為にプラグイン「PS Taxonomy Expander」を使用します。                                      ドラッグ&ドロップで...
カスタム分類のパーマリンクを調整する HOME > おしらせ > キャンペーン         理想:http://ドメイン名/info/campaign/         現実:http://ドメイン名/info-cate/campaign/...
構築サイト例  http://senmonnet.com/   http://www.vektor-inc.co.jp/   http://www.delasal.com/
最後に
http://www.vektor-inc.co.jp
WordBeach @kurudrive
WordBeach @kurudrive
WordBeach @kurudrive
Upcoming SlideShare
Loading in...5
×

WordBeach @kurudrive

3,095

Published on

タイトルの文字数制限が厳しくて短縮できませんでしたが、WordBeach2011でお話しした
「カスタムフィールド / カスタム投稿タイプ カスタム分類を活用したサイト構築」のスライドです。
★録画はこちら!
http://www.ustream.tv/recorded/16901294

Published in: Business, Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,095
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
36
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "WordBeach @kurudrive"

  1. 1. Ver. 1.1
  2. 2. 自己紹介名前:石川栄和(@kurudrive)あま市(名古屋の西隣です!)でベクトル という会社を細々とやっています。WordPressを使ってウェブサイト制作をしながら生きています。
  3. 3. 本日のお題
  4. 4. カスタムフィールドとは タイトル 本文 カテゴリー 投稿タグ 抜粋
  5. 5. カスタムフィールドの利用例(1)
  6. 6. カスタムフィールドの利用例1-1 税理士やコンサルタントなど、専門家を登録・閲覧出来るサイト 専門家1人につき個別の詳細ページを持つ 詳細ページ
  7. 7. カスタムフィールドの利用例1-2 これだけすべてのソースを本文欄に 入力しなくてはならない。 HTMLの知識が少ない人には わかりにくい。 ・修正しにくい ・一度崩れると収集がつかない
  8. 8. カスタムフィールドの利用例1-3 管理画面に入力欄を追加 カスタムフィールドを追加して、項目だけ入力すれば、整形されて表示されるようにする。
  9. 9. カスタムフィールドの設定方法
  10. 10. カスタムフィールドの設定方法_1①プラグイン 『Custom Field Template』 をインストールして有効化②カスタムフィールドの設定 「投稿」で使うのか「固定ページ」で使うのか、 それとも指定のカスタム投稿タイプで使うの かを指定。 フィールドの名前 フィールドのタイプ ラベルの名前 インストールするとサンプルコードが入力されているので なんとなくわかると思います。
  11. 11. カスタムフィールドの設定方法_2③テンプレートファイルで呼び出す 詳細ページのテンプレートであるsingle.phpなどに下記のコードで呼び出します。 <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <?php echo post_custom(‘ex-companyname’) ?> フィールドの名前 <?php endwhile; // end of the loop. ?> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <?php echo post_custom(‘ex-companyname’) ?> <?php endwhile; // end of the loop. ?>
  12. 12. カスタムフィールドの設定方法_3<?php echo post_custom(‘ex-companyname’) ?> だけでも呼び出せるが・・・ 値が空の場合 歯抜けになる。
  13. 13. カスタムフィールドの設定方法_4 カスタムフォールドが空じゃない場合のみ表示する <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <?php $exCompanyname = post_custom(ex-companyname); if ( ! empty( $exCompanyname ) ) { ?> <tr> <th>会社・事務所・事業者名</th> <td><?php echo $exCompanyname ?></td> </tr> <?php } ?> <?php endwhile; // end of the loop. ?> 入力されていなかったら行ごと表示しない
  14. 14. カスタムフィールドの利用例(2)
  15. 15. カスタムフィールドの利用例2-1「投稿」を「新着情報」コンテンツとして活用する場合、詳細ページへリンクする場合もあれば、サイト内の別のページにリンクしたり、外部サイトへリンクさせるなど、状況に応じて使い分けたい。 新着情報詳細ページへ サイト内の別のページへ 外部のサイトへリンク
  16. 16. カスタムフィールドの利用例2-2 ページの扱いをラジオボタンで選択 リンクさせる場合のURL入力欄
  17. 17. カスタムフィールドの利用例2 ブラグイン(カスタムフィールドテンプレート)の設定 [詳細ページの使用] type = radio value = 詳細ページを使用する # 詳細ページを使用しない(文字のみ) # サイト内のページに直接リンクする # 外部サイトへ直接リンクする default = 詳細ページを使用する [リンク先URL] type = text size = 35 label = リンクさせるURLを記入してください。 新着情報一覧のソース <ul> <?php while ( $loop->have_posts() ) : $loop->the_post();?><li> <span class="infoDate"><?php the_time(Y.m.d); ?></span> <?php // 文言がプラグインの設定と連動してるので変更の際は要注意 ?> <?php if (post_custom(詳細ページの使用) == 詳細ページを使用しない(文字のみ) ) { ?> <?php the_title(); ?> <?php } else if (post_custom(詳細ページの使用) == サイト内のページに直接リンクする ) { ?> <a href="<?php echo post_custom(リンク先URL)?>"><?php the_title(); ?></a> <?php } else if (post_custom(詳細ページの使用) == 外部サイトへ直接リンクする ) { ?> <a href="<?php echo post_custom(リンク先URL)?>" target="_blank"><?php the_title(); ?></a> <?php } else { ?> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <?php } ?> </li> <?php endwhile; ?> </ul> ※た、たぶんフィールド名が日本語ってあまり良くないと思います・・・。
  18. 18. カスタム投稿タイプとは
  19. 19. カスタム投稿タイプを使う理由(1) Aのカテゴリで使うカスタムフィールドセット Bのカテゴリで使うカスタムフィールドセット
  20. 20. カスタム投稿タイプを使う理由(1) 「お知らせ」の投稿画面なら「お知らせ」に 関係のある入力項目だけが最初から表示されている。
  21. 21. カスタム投稿タイプを使う理由(1) 「制作実績」の投稿画面なら「制作実績」に 関係のある入力項目だけが最初から表示されている。
  22. 22. カスタム投稿タイプを使う理由(2) 投稿 2011年8月のお知らせ記事を表示させたい カテゴリー ・お知らせ カテゴリーIDなどをテンプレートファイルに直書きして絞り込み ・制作実績 →ちょっと面倒だし制御しにくい。 投稿(お知らせ) 2011年8月のお知らせ記事アーカイブ 制作実績 2011年8月の制作実績記事アーカイブ カテゴリー ・企業サイト ・ECサイト ・ブログ アーカイブが制御しやすい。
  23. 23. カスタム投稿タイプの実装方法
  24. 24. カスタム投稿タイプが使えるように設定// ▼▼カスタム投稿タイプ/カスタム分類の追加add_action( init, create_post_type, 0 );function create_post_type() {// ▼お知らせ register_post_type( info, /* post-type */ array( labels => array( name => __( お知らせ ), singular_name => __( お知らせ ) ), public => true, menu_position =>5, has_archive => info/archive/ ) );// ▲お知らせ} ※他の変数は 関数リファレンスを参照
  25. 25. お知らせをサイトのトップページに表示する 投稿タイプの値
  26. 26. お知らせ一覧(お知らせトップ)ページの作成 新しく追加した投稿タイプのトップページは「固定ページ」で作ります。 【1】 「お知らせ」トップ用のテンプレートファイルを用意する。 page-info.php 「お知らせ」トップ用のテンプレートファイル 【2】 page-info.phpが「お知らせ」の投稿を表示するようにカスタマイズ <ul class="entryList"> <?php /* カスタム投稿タイプを表示する */ $loop = new WP_Query( array( post_type => info ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <li> <span class="infoDate"><?php the_time(Y.m.d); ?></span> <?php // 文言がプラグインの設定と連動してるので変更の際は要注意 ?> <?php if (post_custom(詳細ページの使用) == 詳細ページを使用しない(文字のみ) ) { ?> <?php the_title(); ?> <?php } else if (post_custom(詳細ページの使用) == サイト内のページに直接リンクする ) { ?> <a href="<?php echo post_custom(リンク先URL)?>"><?php the_title(); ?></a> <?php } else if (post_custom(詳細ページの使用) == 外部サイトへ直接リンクする ) { ?> <a href="<?php echo post_custom(リンク先URL)?>" target="_blank"><?php the_title(); ?></a> <?php } else { ?> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <?php } ?> </li><?php endwhile; ?> </ul> 【3】 「お知らせ」の固定ページを投稿する。 page-info.phpが適用されるようにスラッグ名を info にして投稿。
  27. 27. お知らせのアーカイブを使えるように設定【1】 functions.phpに下記のソースを貼り付け // ▼カスタム投稿タイプのアーカイブ出力 global $my_archives_post_type; add_filter( getarchives_where, my_getarchives_where, 10, 2 ); function my_getarchives_where( $where, $r ) { global $my_archives_post_type; if ( isset($r[post_type]) ) { $my_archives_post_type = $r[post_type]; $where = str_replace( ¥post¥, ¥ . $r[post_type] . ¥, $where ); } else { $my_archives_post_type = ; } return $where; } add_filter( get_archives_link, my_get_archives_link ); function my_get_archives_link( $link_html ) { global $my_archives_post_type; if ( != $my_archives_post_type ) $add_link .= ?post_type= . $my_archives_post_type; $link_html = preg_replace("/href=¥(.+)¥¥s/","href=$1".$add_link."",$link_html); return $link_html; } // ▲カスタム投稿タイプのアーカイブ出力
  28. 28. お知らせのアーカイブテンプレートを作成【2】 「お知らせ」のアーカイブテンプレートを作成する。 archive-info.php 「お知らせ」アーカイブ用のテンプレートファイル 投稿タイプの値 <h2><?php printf( get_the_date(Y) ); ?>年のお知らせ</h2> <div class="infoList" class="sectionBox"> <ul class="entryList"> <?php while ( have_posts() ) : the_post(); ?> <li> <span class="infoDate"><?php the_time(Y.m.d); ?></span> <?php // 文言がプラグインの設定と連動してるので変更の際は要注意 ?> <?php if (post_custom(詳細ページの使用) == 詳細ページを使用しない(文字のみ) ) { ?> <?php the_title(); ?> <?php } else if (post_custom(詳細ページの使用) == サイト内のページに直接リンクする ) { ?> <a href="<?php echo post_custom(リンク先URL)?>"><?php the_title(); ?></a> <?php } else if (post_custom(詳細ページの使用) == 外部サイトへ直接リンクする ) { ?> <a href="<?php echo post_custom(リンク先URL)?>" target="_blank"><?php the_title(); ?></a> <?php } else { ?> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <?php } ?> </li><?php endwhile; ?> </ul>
  29. 29. お知らせの詳細ページ / ローカルメニューの作成 「お知らせ」詳細ページ用のテンプレートファイルを作成する。 single-info.php 「お知らせ」詳細ページ用のテンプレートファイル 投稿タイプの値 「お知らせ」用ローカルメニュー page-info.php archive-info.php single-info.php <ul> <?php wp_get_archives(type=yearly&post_type=info); ?> </ul>
  30. 30. カスタム分類とは?
  31. 31. カスタム分類の概要追加した投稿タイプに“カテゴリー”が管理出来るようにしたり、更にカテゴリーとは別の軸のカテゴリーを作ったり出来ます。 「お知らせ」もカテゴリー分け出来るようにカスタム分類を追加 “投稿タグ”機能を追加設定する事も可能 「制作実績」もカテゴリー分け出来るようにカスタム分類を追加 「制作実績」をカテゴリーとは別で、地域で分類出来るように カスタム分類を追加 投稿をカテゴリーやタグで分類する為の機能を追加する事が出来ます。
  32. 32. カスタム分類の利用例 カテゴリー毎や地域毎などで投稿データを呼び出す事が出来る
  33. 33. カスタム分類の実装方法
  34. 34. カスタム分類が使えるように設定// ▼▼カスタム投稿タイプ/カスタム分類の追加add_action( init, create_post_type, 0 );function create_post_type() {// ▼お知らせ register_post_type( info, /* post-type */ array( labels => array( name => __( お知らせ ), singular_name => __( お知らせ ) ), public => true, menu_position =>5, has_archive => info/archive/ ) );// ▲お知らせ// ▼お知らせのカテゴリー register_taxonomy( info-cat, /* タクソノミーの名前 */ info, /* お知らせで設定する */ array( hierarchical => true, /* 親子関係が必要なければ false */ update_count_callback => _update_post_term_count, label => お知らせカテゴリー, singular_label => お知らせカテゴリー, public => true, show_ui => true, menu-order => true, ) );// ▲お知らせのカテゴリー}※他の変数は こちらの記事等を参照
  35. 35. カテゴリー(カスタム分類)ページの作成 【1】 カスタム分類用のテンプレートファイルを用意する。 taxonomy-info-cate.php 「お知らせ」カテゴリー(カスタム分類)用のテンプレートファイル 【2】 taxonomy-info-cate.phpが「お知らせ」のカテゴリーに投稿された記事を表示するように作成 <?php $catinfo = get_term_by(slug,$term,$taxonomy); ?> <h2><?php echo esc_html($catinfo->name); ?></h2> 表示しているページのカスタム分類名 <?php query_posts($query_string ); ?> <?php while (have_posts()) : the_post(); ?> 投稿が属するカスタム分類名 <ul class="entryList"> <li> <span class="infoDate"><?php the_time(Y.m.d); ?></span> <?php $taxo_list = get_the_term_list( $post->ID, ‘info-cat, , , , ); if ( $taxo_list ): ?> <span class="infoCate">[ <?php echo $taxo_list; ?> ] </span> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </li> <?php endwhile; ?> </ul>
  36. 36. カテゴリー(カスタム分類)のローカルメニュー <h3><a href=“/info/>お知らせ</a></h3> <h4>お知らせカテゴリー</h4> <ul> <?php wp_list_categories(taxonomy=info-cat&title_li=&orderby=order); ?> </ul> <h4>年別アーカイブ</h4> <ul> <?php wp_get_archives(type=yearly&post_type=info); ?> </ul>
  37. 37. カテゴリー(カスタム分類)の表示順制御カスタム分類の表示順をコントロールする為にプラグイン「PS Taxonomy Expander」を使用します。 ドラッグ&ドロップで順番を入れ替え!いろいろと凄く便利で詳しい使い方は下記で紹介されています。http://www.warna.info/archives/451/
  38. 38. カスタム分類のパーマリンクを調整する HOME > おしらせ > キャンペーン 理想:http://ドメイン名/info/campaign/ 現実:http://ドメイン名/info-cate/campaign/function.phpに追加 // ▼カスタム分類のパーマリンクを”/カスタム投稿名/カスタム分類名/項目”にする。 add_filter( term_link, my_term_link ,10,3); function my_term_link( $termlink, $term, $taxonomy){ $t=get_taxonomy($taxonomy); $wp_home = get_option("home"); $post_type = $t->object_type[0]; if(!isset($t->object_type[1])) { $termlink = str_replace($wp_home,$wp_home."/".$post_type,$termlink); } return $termlink; } // ▲カスタム分類のパーマリンクを”/カスタム投稿名/カスタム分類名/項目”にする。 http://ドメイン名/info/info-cate/campaign/
  39. 39. 構築サイト例 http://senmonnet.com/ http://www.vektor-inc.co.jp/ http://www.delasal.com/
  40. 40. 最後に
  41. 41. http://www.vektor-inc.co.jp
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×