SaCSS WordPress Special              WordPressの              実践的な活用法12年6月11日月曜日
Profile                  Web Designer                  高橋 朋代                  ニックネーム:コモモ12年6月11日月曜日
今日の内容        ・本格的なサイト制作における         テーマカスタマイズの基本        ・カスタム投稿タイプ・         カスタムタクソノミーについて12年6月11日月曜日
サンプルサイト       http://www.ninocrepe.info/       上記サイトの制作行程と使ったテクニックの一部を紹       介しています。       実際のサイトは、スライドの内容よりもう少し複雑な      ...
WordPressのテーマ12年6月11日月曜日
テーマフォルダ              テーマフォルダ              デフォルトテーマ12年6月11日月曜日
twentyeleven                   デフォルトテーマの                   twentyelevenなどは、                   充実したWordPressの機能            ...
オリジナルテーマのフォルダ              オリジナルテーマを作る場合、              任意の名前のフォルダを追加する12年6月11日月曜日
テーマの必須ファイル構成              たった2つのファイル                style.css                index.php12年6月11日月曜日
テーマの作り方  ブログの個別ページとして             HTMLファイルをそのままテーマフォル  普通にHTMLコーディングし           ダにいれ、index.htmlをリネーム  たファイルを用意する          ...
style.cssのヘッダに追記       @charset "utf-8";       /*       Theme Name: nino       Theme URI: http://www.ninocrepe.info/      ...
style.cssのヘッダに追記       @charset "utf-8";       /*       Theme Name: nino       Theme URI: http://www.ninocrepe.info/      ...
style.cssのヘッダに追記       @charset "utf-8";       /*       Theme Name: nino       Theme URI: http://www.ninocrepe.info/   テーマ...
screenshot.png              themes                sample                  style.css                                   300×...
screenshot.png                              なくても大丈夫だけど、              themes                              管理画面で他のテーマと      ...
管理画面:外観>テーマ12年6月11日月曜日
管理画面:外観>テーマ12年6月11日月曜日
管理画面:外観>テーマ              style.css              コメント12年6月11日月曜日
管理画面:外観>テーマ screenshot.png              style.css              コメント12年6月11日月曜日
テンプレートタグ12年6月11日月曜日
index.php <head>部分     <!DOCTYPE html>     <html dir="ltr" lang="ja">     <head>         <title>nino | 14&amp;15日のスペシャルクレー...
bloginfo(‘name’)12年6月11日月曜日
bloginfo(‘name’)12年6月11日月曜日
bloginfo(‘name’)12年6月11日月曜日
bloginfo(‘stylesheet_url’)                    style.css ←CSSの絶対パスを出力する    http://www.example.com/wp-content/themes/sample/...
wp_head , wp_footer    WordPressやプラグインから    設定情報が読み込まれます。    必ず記述しましょう。     <?php wp_head(); ?> <head>内     <?php wp_foote...
ループ12年6月11日月曜日
index.php 投稿出力部分     <div class="entry">         <h1><a href="#">タイトル</a></h1>          <p class="date">日付</p>          本文...
WordPressのループ基本構文(条件分岐)     <?php if(have_posts()) : ?>       <?php while(have_posts()) : the_post(); ?>         <div clas...
リンクを生成する              テンプレートタグ12年6月11日月曜日
グローバルナビ部分(固定ページリストを出力)     <div id="navGloval">          <ul>              <li><a href="#">HOME</a></li>              <li>...
カテゴリリストを出力する部分     <div class="sideNav">         <h2>カテゴリ</h2>          <ul>              <li class="#"><a href="#">お客様</a...
ページ種類    WordPressは、今アクセスしているURLをみて    何のページ(ページ種類)かを判断し、    適切な記事を抽出してくれるため、    ここまでの作業のindex.phpだけで、投稿一覧、カ    テゴリ一覧、 固定ペ...
テンプレート階層12年6月11日月曜日
page.phpを追加              sample                page.php ←index.phpを複製                index.php                style.css   ...
index.phpのうち、暗転個所はpage.phpでは不要     <h1 class="pageTitle">BLOG</h1>     <div id="content">     <?php if(have_posts()) : ?> ...
固定ページ(page.php)で必要な記述     <?php while(have_posts()) : the_post(); ?>        <h1 class="pageTitle"><?php the_title(); ?></h...
代表的なテンプレートファイル    記事の個別ページ   single.php    カテゴリーページ   category.php    日付アーカイブページ date.php    タグアーカイブページ tag.php    検索結果   ...
テンプレート階層の例    カテゴリーページ              category-{slug}.php              category-{id}.php              category.php          ...
インクルード12年6月11日月曜日
12年6月11日月曜日
12年6月11日月曜日
header.php12年6月11日月曜日
header.php12年6月11日月曜日
header.php              footer.php12年6月11日月曜日
header.php              footer.php12年6月11日月曜日
header.php              sidebar.php              footer.php12年6月11日月曜日
page.php     <?php get_header(); ?>     <div id="main">     <?php while(have_posts()) : the_post(); ?>          <h1 class=...
条件分岐12年6月11日月曜日
index.php     <div id="main">     <h1 class="pageTitle">BLOG</h1>     <?php if(is_category()): ?>        <h2 class="pageTi...
index.php     <div id="main">     <h1 class="pageTitle">BLOG</h1>     <?php if(is_month()): ?>        <h2 class="pageTitle...
フロントページ設定       管理画面->設定->表示設定より、フロン       トページの表示を「最新の投稿」から       「固定ページ」に変更し、フロントペー       ジ・投稿ページを割り当てる。       テンプレートファイ...
一般的なサイトのファイル構成例              style.css        header.php              index.php        footer.php              single.php ...
パーマリンク設定でURLをわかりやすく       管理画面->設定->パーマリンク設定       http:/www.example.com/?123       http://www.example.com/blog/{slug}    ...
マルチループ12年6月11日月曜日
front-page.php     <?php while (have_posts()) : the_post(); ?>     <div id="topBlog">         <h2>新着ブログ</h2>          <?ph...
front-page.php     <?php while (have_posts()) : the_post(); ?>     <div id="topBlog">         <h2>新着ブログ</h2>          <?ph...
カスタム投稿タイプ               カスタムタクソノミー              (カスタム分類タイプ)12年6月11日月曜日
カスタム投稿タイプ・タクソノミーを利用できるように   するには、functions.phpを作成     function add_custom() {          register_post_type(post_menu, array...
カスタム投稿タイプ・タクソノミーを利用できるように   するには、functions.phpを作成     function add_custom() {          register_post_type(post_menu, array...
カスタム投稿タイプ・タクソノミーを利用できるように   するには、functions.phpを作成     function add_custom() {          register_post_type(post_menu, array...
カスタム投稿タイプ・タクソノミーを利用できるように   するには、functions.phpを作成     function add_custom() {          register_post_type(post_menu, array...
カスタム投稿タイプ・タクソノミーを利用できるように   するには、functions.phpを作成     function add_custom() {          register_post_type(post_menu, array...
URL    functions.phpでカスタム投稿・タクソノミー追加・修正    したら、記事を表示する前に、必ずパーマリンク設定を    更新します。    カスタム投稿タイプ記事のURL    http://www.example.co...
URL    functions.phpでカスタム投稿・タクソノミー追加・修正    したら、記事を表示する前に、必ずパーマリンク設定を    更新します。    カスタム投稿タイプ記事のURL    http://www.example.co...
URL    functions.phpでカスタム投稿・タクソノミー追加・修正    したら、記事を表示する前に、必ずパーマリンク設定を    更新します。    カスタム投稿タイプ記事のURL    http://www.example.co...
URL    管理画面のパーマリンク設定 /blog/%postname%/    カスタム投稿タイプ記事のURL    http://www.example.com/blog/post_menu/{記事slug}/    タクソノミーページの...
URL    希望のURLは下記のような場合、どうしたらよいか?    カスタム投稿タイプ記事のURL    http://www.example.com/menu/{記事slug}/    タクソノミーページのURL    http://ww...
functions.php     function add_custom() {          register_post_type(post_menu, array(              label => メニュー,       ...
functions.php     function add_custom() {          register_post_type(post_menu, array(              label => メニュー,       ...
functions.php     function add_custom() {          register_post_type(post_menu, array(              label => メニュー,       ...
functions.php     function add_custom() {          register_post_type(post_menu, array(              label => メニュー,       ...
functions.php     function add_custom() {          register_post_type(post_menu, array(              label => メニュー,       ...
でも、投稿タイプと、タクソノミーの登録順序を逆にしたら、希望通りのURLで動作   しました!     function add_custom() {          register_taxonomy(cat_menu,          ...
functions.php     function add_custom() {         register_taxonomy(cat_menu,             array(post_menu),             ar...
functions.php     function add_custom() {         register_taxonomy(cat_menu,             array(post_menu),             ar...
テンプレート階層    タクソノミーページ    http://www.example.com/menu/category/{タクソノミーslug}/         taxonomy-{taxonomy}-{term}.php        ...
テンプレート階層    カスタム投稿タイプ・シングルページ    http://www.example.com/menu/{記事slug}/         single-{posttype}.php                投稿タイプ名...
リンクリストを生成    タクソノミーページのリンクリストを    出力するテンプレートタグ     <ul>        <?php wp_list_categories(taxonomy=cat_menu); ?>     </ul>12...
カスタムメニュー12年6月11日月曜日
カスタムメニュー    管理画面に表示する   functions.php     add_theme_support(menus);12年6月11日月曜日
カスタムメニュー   テンプレートファイル   グローバルナビ     <?php wp_nav_menu(menu=glovalnav); ?>   メニューカテゴリ     <?php wp_nav_menu(menu=menuCatego...
カスタムメニュー   テンプレートファイル   グローバルナビ <div id=”navGloval”>   <?php wp_nav_menu(menu=glovalnav&container_id=navGloval); ?>   メニュー...
まとめ12年6月11日月曜日
前半部分まとめ    ・テンプレートタグ    ・ループ    ・ページ種類とテンプレート階層    ・条件分岐     WordPress Codex     http://wpdocs.sourceforge.jp/12年6月11日月曜日
後半部分まとめ    カスタム投稿タイプ・カスタムタクソノ    ミー、カスタムメニューなど、    functions.phpに記述して、    WordPressのオプション機能を利用する    と、サイト設計の幅が広がる12年6月11日月曜日
おわり12年6月11日月曜日
Upcoming SlideShare
Loading in …5
×

SaCSS WordPress Special WordPressの実践的な活用法

5,196 views
5,119 views

Published on

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
  • wordpressのテーマを作るにあたって、必要最低限のところから少しずつ肉付けしていく流れを、とても丁寧にまとめてくれてます。SaCSS+のハンズオンのときにも、この流れをベースに丁寧に教えてくれました。
    それまでは、既存のテーマをカスタマイズするのが近道だと思ってたけど、最低限のところから必要な所だけ肉付けしていけば無駄も無いし、全体を自分で把握する分、後から追加・変更しやすいんじゃないかな。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,196
On SlideShare
0
From Embeds
0
Number of Embeds
3,636
Actions
Shares
0
Downloads
7
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

SaCSS WordPress Special WordPressの実践的な活用法

  1. 1. SaCSS WordPress Special WordPressの 実践的な活用法12年6月11日月曜日
  2. 2. Profile Web Designer 高橋 朋代 ニックネーム:コモモ12年6月11日月曜日
  3. 3. 今日の内容 ・本格的なサイト制作における  テーマカスタマイズの基本 ・カスタム投稿タイプ・  カスタムタクソノミーについて12年6月11日月曜日
  4. 4. サンプルサイト http://www.ninocrepe.info/ 上記サイトの制作行程と使ったテクニックの一部を紹 介しています。 実際のサイトは、スライドの内容よりもう少し複雑な こともしているので、参考程度に見てください。12年6月11日月曜日
  5. 5. WordPressのテーマ12年6月11日月曜日
  6. 6. テーマフォルダ テーマフォルダ デフォルトテーマ12年6月11日月曜日
  7. 7. twentyeleven デフォルトテーマの twentyelevenなどは、 充実したWordPressの機能 がまんべんなく実装されて いるので最初からすべてを 理解するのは難しい12年6月11日月曜日
  8. 8. オリジナルテーマのフォルダ オリジナルテーマを作る場合、 任意の名前のフォルダを追加する12年6月11日月曜日
  9. 9. テーマの必須ファイル構成 たった2つのファイル style.css index.php12年6月11日月曜日
  10. 10. テーマの作り方 ブログの個別ページとして HTMLファイルをそのままテーマフォル 普通にHTMLコーディングし ダにいれ、index.htmlをリネーム たファイルを用意する themes HTML sample style.css style.css index.html index.php images images12年6月11日月曜日
  11. 11. style.cssのヘッダに追記 @charset "utf-8"; /* Theme Name: nino Theme URI: http://www.ninocrepe.info/ Author: komomo Author URI: http://cat-speak.net/ Description: ninoのサンプルテーマです。 Version: 1.0 */ body { background:url(images/bg.png); font-family: sans-serif; }12年6月11日月曜日
  12. 12. style.cssのヘッダに追記 @charset "utf-8"; /* Theme Name: nino Theme URI: http://www.ninocrepe.info/ Author: komomo Author URI: http://cat-speak.net/ Description: ninoのサンプルテーマです。 Version: 1.0 */ body { background:url(images/bg.png); font-family: sans-serif; }12年6月11日月曜日
  13. 13. style.cssのヘッダに追記 @charset "utf-8"; /* Theme Name: nino Theme URI: http://www.ninocrepe.info/ テーマとして Author: komomo Author URI: http://cat-speak.net/ 認識するための Description: ninoのサンプルテーマです。 Version: 1.0 コメント */ body { background:url(images/bg.png); font-family: sans-serif; }12年6月11日月曜日
  14. 14. screenshot.png themes sample style.css 300×225px index.php screenshot.png images12年6月11日月曜日
  15. 15. screenshot.png なくても大丈夫だけど、 themes 管理画面で他のテーマと 区別しやすくするために sample 追加する style.css 300×225px index.php screenshot.png images12年6月11日月曜日
  16. 16. 管理画面:外観>テーマ12年6月11日月曜日
  17. 17. 管理画面:外観>テーマ12年6月11日月曜日
  18. 18. 管理画面:外観>テーマ style.css コメント12年6月11日月曜日
  19. 19. 管理画面:外観>テーマ screenshot.png style.css コメント12年6月11日月曜日
  20. 20. テンプレートタグ12年6月11日月曜日
  21. 21. index.php <head>部分 <!DOCTYPE html> <html dir="ltr" lang="ja"> <head> <title>nino | 14&amp;15日のスペシャルクレープは!</title> <link rel="stylesheet" type="text/css" media="all" href="style.css" /> <meta charset="UTF-8" /> </head> <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <title> <?php bloginfo(name); wp_title(|, true, left); ?></title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo(stylesheet_url); ?>" /> <meta charset="<?php bloginfo(charset); ?>" /> <?php wp_head(); ?> </head>12年6月11日月曜日
  22. 22. bloginfo(‘name’)12年6月11日月曜日
  23. 23. bloginfo(‘name’)12年6月11日月曜日
  24. 24. bloginfo(‘name’)12年6月11日月曜日
  25. 25. bloginfo(‘stylesheet_url’) style.css ←CSSの絶対パスを出力する http://www.example.com/wp-content/themes/sample/style.css12年6月11日月曜日
  26. 26. wp_head , wp_footer WordPressやプラグインから 設定情報が読み込まれます。 必ず記述しましょう。 <?php wp_head(); ?> <head>内 <?php wp_footer(); ?> </body>の直前12年6月11日月曜日
  27. 27. ループ12年6月11日月曜日
  28. 28. index.php 投稿出力部分 <div class="entry"> <h1><a href="#">タイトル</a></h1> <p class="date">日付</p> 本文 <div class="utility">カテゴリ:<a href="#">カテゴリ1</a></div> </div><!--end of .entry--> ループ基本構文 <?php while(have_posts()) : the_post(); ?> <div class="entry"> <h1><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h1> <p class="date"> <?php the_time(Y.m.d); ?> </p> <?php the_content(); ?> <div class="utility">カテゴリ: <?php the_category( , ); ?></div> </div><!--end of .entry--> <?php endwhile; ?>12年6月11日月曜日
  29. 29. WordPressのループ基本構文(条件分岐) <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> <div class="entry"> <h1><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h1> <p class="date"> <?php the_time(Y.m.d); ?> </p> <?php the_content(); ?> <div class="utility">カテゴリ: <?php the_category( , ); ?></div> </div><!--end of .entry--> <?php endwhile; ?> <?php else: ?> <p>現在表示する記事がありません。</p> <?php endif; ?> 投稿一覧を出力するには、 投稿が1件もないパターンを 想定して、 if文で条件分岐する必要がある12年6月11日月曜日
  30. 30. リンクを生成する テンプレートタグ12年6月11日月曜日
  31. 31. グローバルナビ部分(固定ページリストを出力) <div id="navGloval"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">CONCEPT</a></li> <li><a href="#">MENU</a></li> <li><a href="#">ACCESS</a></li> <li><a href="#">LINKS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">BLOG</a></li> </ul> </div> <div id="navGloval"> <ul> <?php wp_list_pages(title_li=); ?> </ul> </div>12年6月11日月曜日
  32. 32. カテゴリリストを出力する部分 <div class="sideNav"> <h2>カテゴリ</h2> <ul> <li class="#"><a href="#">お客様</a></li> <li class="#"><a href="#">スペシャルクレープ!</a></li> <li class="#"><a href="#">定休日のお知らせ</a></li> <li class="#"><a href="#">日記</a></li> </ul> </div><!--end of .sideNav--> <div class="sideNav"> <h2>カテゴリ</h2> <ul> <?php wp_list_categories(title_li=); ?> </ul> </div>12年6月11日月曜日
  33. 33. ページ種類 WordPressは、今アクセスしているURLをみて 何のページ(ページ種類)かを判断し、 適切な記事を抽出してくれるため、 ここまでの作業のindex.phpだけで、投稿一覧、カ テゴリ一覧、 固定ページなど、ひととおりのペー ジが出力される。12年6月11日月曜日
  34. 34. テンプレート階層12年6月11日月曜日
  35. 35. page.phpを追加 sample page.php ←index.phpを複製 index.php style.css screenshot.png images12年6月11日月曜日
  36. 36. index.phpのうち、暗転個所はpage.phpでは不要 <h1 class="pageTitle">BLOG</h1> <div id="content"> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> <div class="entry"> <h1><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h1> <p class="date"> <?php the_time(Y.m.d); ?> </p> <?php the_content(); ?> <div class="utility">カテゴリ: <?php the_category( , ); ?></div> </div><!--end of .entry--> <?php endwhile; ?> <?php else: ?> <p>現在表示する記事がありません。</p> <?php endif; ?> </div>12年6月11日月曜日
  37. 37. 固定ページ(page.php)で必要な記述 <?php while(have_posts()) : the_post(); ?> <h1 class="pageTitle"><?php the_title(); ?></h1> <div id="content"> <div class="entry"> <?php the_content(); ?> </div><!--end of .entry--> </div><!--end of #content--> <?php endwhile; ?> 固定ページや個別の投稿記事ページでは、記事が存在し ないパターンはない(記事があるからURLが出力され る)ため、ifの条件分岐は不要。12年6月11日月曜日
  38. 38. 代表的なテンプレートファイル 記事の個別ページ   single.php カテゴリーページ   category.php 日付アーカイブページ date.php タグアーカイブページ tag.php 検索結果       search.php12年6月11日月曜日
  39. 39. テンプレート階層の例 カテゴリーページ category-{slug}.php category-{id}.php category.php archive.php index.php12年6月11日月曜日
  40. 40. インクルード12年6月11日月曜日
  41. 41. 12年6月11日月曜日
  42. 42. 12年6月11日月曜日
  43. 43. header.php12年6月11日月曜日
  44. 44. header.php12年6月11日月曜日
  45. 45. header.php footer.php12年6月11日月曜日
  46. 46. header.php footer.php12年6月11日月曜日
  47. 47. header.php sidebar.php footer.php12年6月11日月曜日
  48. 48. page.php <?php get_header(); ?> <div id="main"> <?php while(have_posts()) : the_post(); ?> <h1 class="pageTitle"><?php the_title(); ?></h1> <div id="content"> <div class="entry"> <?php the_content(); ?> </div><!--end of .entry--> </div><!--end of #content--> <?php endwhile; ?> </div><!--end of #main--> <?php get_sidebar(); ?> <?php get_footer(); ?> index.phpとpage.phpで共通の部分は別ファイルにして、 管理しやすくする12年6月11日月曜日
  49. 49. 条件分岐12年6月11日月曜日
  50. 50. index.php <div id="main"> <h1 class="pageTitle">BLOG</h1> <?php if(is_category()): ?> <h2 class="pageTitle">カテゴリ:<?php echo single_cat_title(); ?></h2> <?php endif; ?> <div id="content"> <?php if(have_posts()) : ?> テンプレート階層により、カテゴリページでは category.php等が利用できるが、ページ構成がほとんど 一緒の場合は条件分岐タグを利用し、ファイル管理をし やすくする。12年6月11日月曜日
  51. 51. index.php <div id="main"> <h1 class="pageTitle">BLOG</h1> <?php if(is_month()): ?> <h2 class="pageTitle"><?php echo single_month_title(); ?></h2> <?php elseif(is_category()): ?> <h2 class="pageTitle">カテゴリ:<?php echo single_cat_title(); ?></h2> <?php else: ?> <h2 class="pageTitle">それ以外のページ</h2> <?php endif; ?> <div id="content"> <?php if(have_posts()) : ?>12年6月11日月曜日
  52. 52. フロントページ設定 管理画面->設定->表示設定より、フロン トページの表示を「最新の投稿」から 「固定ページ」に変更し、フロントペー ジ・投稿ページを割り当てる。 テンプレートファイル front-page.php12年6月11日月曜日
  53. 53. 一般的なサイトのファイル構成例 style.css header.php index.php footer.php single.php sidebar.php page.php screenshot.png front-page.php images 404.php12年6月11日月曜日
  54. 54. パーマリンク設定でURLをわかりやすく 管理画面->設定->パーマリンク設定 http:/www.example.com/?123 http://www.example.com/blog/{slug} シングルページのURLを上記のようにするには、 カスタム構造:/blog/%postname%/12年6月11日月曜日
  55. 55. マルチループ12年6月11日月曜日
  56. 56. front-page.php <?php while (have_posts()) : the_post(); ?> <div id="topBlog"> <h2>新着ブログ</h2> <?php query_posts(posts_per_page =3); ?> <?php if(have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class="entry"> <p class="date"> <?php the_time(Y.m.d); ?></p> <h3><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h3> </div><!--end of .entry--> <?php endwhile;?> <?php else : ?> 普通のループ <p>現在表示する記事がありません。</p> <?php endif; ?> <?php wp_reset_query(); ?> </div><!--end of #topBlog--> <?php endwhile;?>12年6月11日月曜日
  57. 57. front-page.php <?php while (have_posts()) : the_post(); ?> <div id="topBlog"> <h2>新着ブログ</h2> <?php query_posts(posts_per_page =3); ?> <?php if(have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class="entry"> <p class="date"> <?php the_time(Y.m.d); ?></p> <h3><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h3> </div><!--end of .entry--> <?php endwhile;?> <?php else : ?> 普通のループ <p>現在表示する記事がありません。</p> <?php endif; ?> <?php wp_reset_query(); ?> </div><!--end of #topBlog--> <?php endwhile;?>12年6月11日月曜日
  58. 58. カスタム投稿タイプ カスタムタクソノミー (カスタム分類タイプ)12年6月11日月曜日
  59. 59. カスタム投稿タイプ・タクソノミーを利用できるように するには、functions.phpを作成 function add_custom() { register_post_type(post_menu, array( label => メニュー, menu_position => 5, public => true )); register_taxonomy(cat_menu, array(post_menu), array( label => メニューカテゴリ, show_ui => true, hierarchical => true 階層構造をもつか(true) )); もたないか(false)を } 指定する add_action(init, add_custom);12年6月11日月曜日
  60. 60. カスタム投稿タイプ・タクソノミーを利用できるように するには、functions.phpを作成 function add_custom() { register_post_type(post_menu, array( label => メニュー, menu_position => 5, public => true )); register_taxonomy(cat_menu, array(post_menu), array( label => メニューカテゴリ, show_ui => true, hierarchical => true 階層構造をもつか(true) )); もたないか(false)を } 指定する add_action(init, add_custom);12年6月11日月曜日
  61. 61. カスタム投稿タイプ・タクソノミーを利用できるように するには、functions.phpを作成 function add_custom() { register_post_type(post_menu, array( label => メニュー, menu_position => 5, カスタム投稿を追加 public => true )); register_taxonomy(cat_menu, array(post_menu), array( label => メニューカテゴリ, show_ui => true, hierarchical => true 階層構造をもつか(true) )); もたないか(false)を } 指定する add_action(init, add_custom);12年6月11日月曜日
  62. 62. カスタム投稿タイプ・タクソノミーを利用できるように するには、functions.phpを作成 function add_custom() { register_post_type(post_menu, array( label => メニュー, menu_position => 5, カスタム投稿を追加 public => true )); register_taxonomy(cat_menu, array(post_menu), array( label => メニューカテゴリ, show_ui => true, hierarchical => true 階層構造をもつか(true) )); もたないか(false)を } 指定する add_action(init, add_custom);12年6月11日月曜日
  63. 63. カスタム投稿タイプ・タクソノミーを利用できるように するには、functions.phpを作成 function add_custom() { register_post_type(post_menu, array( label => メニュー, menu_position => 5, カスタム投稿を追加 public => true )); register_taxonomy(cat_menu, array(post_menu), カスタムタクソノミー array( label => メニューカテゴリ, を追加 show_ui => true, hierarchical => true 階層構造をもつか(true) )); もたないか(false)を } 指定する add_action(init, add_custom);12年6月11日月曜日
  64. 64. URL functions.phpでカスタム投稿・タクソノミー追加・修正 したら、記事を表示する前に、必ずパーマリンク設定を 更新します。 カスタム投稿タイプ記事のURL http://www.example.com/post_menu/{記事slug}/ タクソノミーページのURL http://www.example.com/cat_menu/{タクソノミーslug}/12年6月11日月曜日
  65. 65. URL functions.phpでカスタム投稿・タクソノミー追加・修正 したら、記事を表示する前に、必ずパーマリンク設定を 更新します。 カスタム投稿タイプ記事のURL http://www.example.com/post_menu/{記事slug}/ 投稿タイプ名 タクソノミーページのURL http://www.example.com/cat_menu/{タクソノミーslug}/12年6月11日月曜日
  66. 66. URL functions.phpでカスタム投稿・タクソノミー追加・修正 したら、記事を表示する前に、必ずパーマリンク設定を 更新します。 カスタム投稿タイプ記事のURL http://www.example.com/post_menu/{記事slug}/ 投稿タイプ名 タクソノミーページのURL http://www.example.com/cat_menu/{タクソノミーslug}/ タクソノミー名12年6月11日月曜日
  67. 67. URL 管理画面のパーマリンク設定 /blog/%postname%/ カスタム投稿タイプ記事のURL http://www.example.com/blog/post_menu/{記事slug}/ タクソノミーページのURL http://www.example.com/blog/cat_menu/{タクソノミーslug}/12年6月11日月曜日
  68. 68. URL 希望のURLは下記のような場合、どうしたらよいか? カスタム投稿タイプ記事のURL http://www.example.com/menu/{記事slug}/ タクソノミーページのURL http://www.example.com/menu/category/{タクソノミーslug}/ 次のページ12年6月11日月曜日
  69. 69. functions.php function add_custom() { register_post_type(post_menu, array( label => メニュー, menu_position => 5, public => true, rewrite => array( slug => menu, with_front => false) )); register_taxonomy(cat_menu, array(post_menu), array( label => メニューカテゴリ, show_ui => true, hierarchical => true, rewrite => array(slug => menu/category, with_front => false) )); } add_action(init, add_custom); slugに「/」はあまりよくないのか、 これで動いてほしかったのですが動きませんで した。12年6月11日月曜日
  70. 70. functions.php function add_custom() { register_post_type(post_menu, array( label => メニュー, menu_position => 5, public => true, rewrite => array( slug => menu, with_front => false) )); 投稿タイプslug register_taxonomy(cat_menu, array(post_menu), array( label => メニューカテゴリ, show_ui => true, hierarchical => true, rewrite => array(slug => menu/category, with_front => false) )); } add_action(init, add_custom); slugに「/」はあまりよくないのか、 これで動いてほしかったのですが動きませんで した。12年6月11日月曜日
  71. 71. functions.php function add_custom() { register_post_type(post_menu, array( label => メニュー, menu_position => 5, public => true, rewrite => array( slug => menu, with_front => false) )); 投稿タイプslug register_taxonomy(cat_menu, array(post_menu), array( label => メニューカテゴリ, show_ui => true, hierarchical => true, rewrite => array(slug => menu/category, with_front => false) )); タクソノミータイプslug } add_action(init, add_custom); slugに「/」はあまりよくないのか、 これで動いてほしかったのですが動きませんで した。12年6月11日月曜日
  72. 72. functions.php function add_custom() { register_post_type(post_menu, array( label => メニュー, menu_position => 5, public => true, rewrite => array( slug => menu, with_front => false) )); 投稿タイプslug 管理画面の設定無視 register_taxonomy(cat_menu, array(post_menu), array( label => メニューカテゴリ, show_ui => true, hierarchical => true, rewrite => array(slug => menu/category, with_front => false) )); タクソノミータイプslug } add_action(init, add_custom); slugに「/」はあまりよくないのか、 これで動いてほしかったのですが動きませんで した。12年6月11日月曜日
  73. 73. functions.php function add_custom() { register_post_type(post_menu, array( label => メニュー, menu_position => 5, public => true, rewrite => array( slug => menu, with_front => false) )); 投稿タイプslug 管理画面の設定無視 register_taxonomy(cat_menu, array(post_menu), array( label => メニューカテゴリ, show_ui => true, hierarchical => true, rewrite => array(slug => menu/category, with_front => false) )); タクソノミータイプslug 管理画面の設定無視 } add_action(init, add_custom); slugに「/」はあまりよくないのか、 これで動いてほしかったのですが動きませんで した。12年6月11日月曜日
  74. 74. でも、投稿タイプと、タクソノミーの登録順序を逆にしたら、希望通りのURLで動作 しました! function add_custom() { register_taxonomy(cat_menu, array(post_menu), array( label => メニューカテゴリ, show_ui => true, hierarchical => true, rewrite => array(slug => menu/category, with_front => false) )); register_post_type(post_menu, array( label => メニュー, menu_position => 5, public => true, rewrite => array( slug => menu, with_front => false) )); } add_action(init, add_custom);12年6月11日月曜日
  75. 75. functions.php function add_custom() { register_taxonomy(cat_menu, array(post_menu), array( label => メニューカテゴリ, show_ui => true, hierarchical => true, rewrite => array(slug => menu/category, with_front => false) )); register_post_type(post_menu, array( label => メニュー, menu_position => 5, public => true, rewrite => array( slug => menu, with_front => false), has_archive => true )); } add_action(init, add_custom);12年6月11日月曜日
  76. 76. functions.php function add_custom() { register_taxonomy(cat_menu, array(post_menu), array( label => メニューカテゴリ, show_ui => true, hierarchical => true, rewrite => array(slug => menu/category, with_front => false) )); register_post_type(post_menu, array( label => メニュー, menu_position => 5, public => true, rewrite => array( slug => menu, with_front => false), has_archive => true 投稿タイプのアーカイブページをもつ )); } add_action(init, add_custom);12年6月11日月曜日
  77. 77. テンプレート階層 タクソノミーページ http://www.example.com/menu/category/{タクソノミーslug}/ taxonomy-{taxonomy}-{term}.php タクソノミー名 タクソノミーslug taxonomy-{taxonomy}.php taxonomy.php archive.php index.php12年6月11日月曜日
  78. 78. テンプレート階層 カスタム投稿タイプ・シングルページ http://www.example.com/menu/{記事slug}/ single-{posttype}.php 投稿タイプ名 single.php index.php12年6月11日月曜日
  79. 79. リンクリストを生成 タクソノミーページのリンクリストを 出力するテンプレートタグ <ul> <?php wp_list_categories(taxonomy=cat_menu); ?> </ul>12年6月11日月曜日
  80. 80. カスタムメニュー12年6月11日月曜日
  81. 81. カスタムメニュー 管理画面に表示する functions.php add_theme_support(menus);12年6月11日月曜日
  82. 82. カスタムメニュー テンプレートファイル グローバルナビ <?php wp_nav_menu(menu=glovalnav); ?> メニューカテゴリ <?php wp_nav_menu(menu=menuCategory); ?>12年6月11日月曜日
  83. 83. カスタムメニュー テンプレートファイル グローバルナビ <div id=”navGloval”> <?php wp_nav_menu(menu=glovalnav&container_id=navGloval); ?> メニューカテゴリ <ul class=”menuCategory”> <?php wp_nav_menu(menu=menunav&menu_class=menuCategory); ?>12年6月11日月曜日
  84. 84. まとめ12年6月11日月曜日
  85. 85. 前半部分まとめ ・テンプレートタグ ・ループ ・ページ種類とテンプレート階層 ・条件分岐 WordPress Codex http://wpdocs.sourceforge.jp/12年6月11日月曜日
  86. 86. 後半部分まとめ カスタム投稿タイプ・カスタムタクソノ ミー、カスタムメニューなど、 functions.phpに記述して、 WordPressのオプション機能を利用する と、サイト設計の幅が広がる12年6月11日月曜日
  87. 87. おわり12年6月11日月曜日

×