WordPressで企業サイトのテーマを作る

7,931 views

Published on

ゆるふわ勉強会 第6回の資料です
後で色々直します。。。

Published in: Self Improvement
2 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total views
7,931
On SlideShare
0
From Embeds
0
Number of Embeds
1,412
Actions
Shares
0
Downloads
38
Comments
2
Likes
9
Embeds 0
No embeds

No notes for slide

WordPressで企業サイトのテーマを作る

  1. 1. WordPressで企業サイトを 作ってみる Vol.02 ∼ 作ったサイトを ∼ オリジナルテーマ化する12年11月21日水曜日
  2. 2. 自己紹介 名前 藤田 無憂 所属 Web制作ユニットCherryPie 職種 ディレクター・エンジニア tw @anticyborg FB muyuu Blog http://stackstock.net/ Mail anticyborg@gmail.com12年11月21日水曜日
  3. 3. 今日のお話12年11月21日水曜日
  4. 4. 今日のお話 • WordPressで作る際のポイント • ありがちな企業サイトのページ構成 • ありがちな企業サイトの画面構成 • ありがちな企業サイトの実装12年11月21日水曜日
  5. 5. ありがちで良い! まずは作ってみれ! 話はそれからだ!12年11月21日水曜日
  6. 6. ありがちな企業サイトを作ろう12年11月21日水曜日
  7. 7. 完成イメージ12年11月21日水曜日
  8. 8. ありがちポイント!!12年11月21日水曜日
  9. 9. 完成イメージ 情緒あふれる グローバルナビ12年11月21日水曜日
  10. 10. 完成イメージ さりげない ユーティリティリンク12年11月21日水曜日
  11. 11. 完成イメージ 惜しみなくあたえる メインビジュアル (※企業のメイン商 材を上手にアピール できるメインビジュ アル)12年11月21日水曜日
  12. 12. 完成イメージ サイドナビゲーショ ンにはプッシュした いコンテンツをまと めて管理12年11月21日水曜日
  13. 13. 大体こんな感じじゃ ないでしょうか12年11月21日水曜日
  14. 14. 12年11月21日水曜日
  15. 15. さて、12年11月21日水曜日
  16. 16. このサイトですが、12年11月21日水曜日
  17. 17. 一般的なブログの レイアウトとは ずいぶん違いますね12年11月21日水曜日
  18. 18. 12年11月21日水曜日
  19. 19. 一般的な12年11月21日水曜日
  20. 20. 一般的なブログのレイアウト12年11月21日水曜日
  21. 21. 一般的なブログのレイアウト とは12年11月21日水曜日
  22. 22. 一般的なブログのレイアウト とは なんぞや12年11月21日水曜日
  23. 23. 一般的なブログ12年11月21日水曜日
  24. 24. 一般的なブログ グローバルナビ? なにそれ美味しいの?12年11月21日水曜日
  25. 25. 一般的なブログ 書いた記事が最新から 何件か表示されてる12年11月21日水曜日
  26. 26. 一般的なブログ 最新記事一覧 カテゴリー一覧 月別一覧 固定ページ一覧 とにかく一覧 (/□)/12年11月21日水曜日
  27. 27. 全然違うねー(★´∀`)人(´∀`★)ネェー12年11月21日水曜日
  28. 28. WordPressで作る際のポイント • サイトの構成を考える • その構成を満たす仕様を考える • 各ページの構成を考える • その構成を満たす仕様を考える12年11月21日水曜日
  29. 29. WordPressで作る際のポイント • サイトの構成を考える • その構成を満たす仕様を考える • 各ページの構成を考える • その構成を満たす仕様を考える12年11月21日水曜日
  30. 30. WordPressで作る際のポイント • サイトの構成を考える • その構成を満たす仕様を考える • 各ページの構成を考える 頭に すさ を念 しや • その構成を満たす仕様を考える 運 営の 類を 決定 !! 投稿 の種12年11月21日水曜日
  31. 31. WordPressで作る際のポイント • サイトの構成を考える • その構成を満たす仕様を考える • 各ページの構成を考える • その構成を満たす仕様を考える12年11月21日水曜日
  32. 32. WordPressで作る際のポイント • サイトの構成を考える を踏ま え、 分け 部分 、出 し く発 揮! 共通 部分 を遺 憾な • rdPressの 機能 その構成を満たす仕様を考える Wo • 各ページの構成を考える • その構成を満たす仕様を考える12年11月21日水曜日
  33. 33. そうやって 作りましょうね12年11月21日水曜日
  34. 34. ありがちな企業サイトのページ構成12年11月21日水曜日
  35. 35. ありがちなサイトマップ12年11月21日水曜日
  36. 36. ありがちなサイトマップ index.php12年11月21日水曜日
  37. 37. ありがちなサイトマップ 固定ページ12年11月21日水曜日
  38. 38. ありがちなサイトマップ 固定ページ12年11月21日水曜日
  39. 39. ありがちなサイトマップ 投稿記事12年11月21日水曜日
  40. 40. ありがちなサイトマップ カテゴリー 「ニュース」12年11月21日水曜日
  41. 41. ありがちなサイトマップ カテゴリー 「プレスリリース」12年11月21日水曜日
  42. 42. ありがちなサイトマップ 全部固定ページ (/□)/12年11月21日水曜日
  43. 43. ほとんど固定ページ じゃねーかΣ(゚д゚lll)12年11月21日水曜日
  44. 44. はい12年11月21日水曜日
  45. 45. 文句ある?12年11月21日水曜日
  46. 46. だって企業サイトって12年11月21日水曜日
  47. 47. 一度作ったら 変えないページ 多いでしょ?12年11月21日水曜日
  48. 48. 投稿記事を使うケース • 新着情報などのドンドン情報が増える箇所 • 製品情報などドンドン情報が更新する箇所 • 社員ブログなど12年11月21日水曜日
  49. 49. 投稿記事を使わない方が良いケース • 会社情報など、あまり追加が発生しない箇所 • 単一のページ12年11月21日水曜日
  50. 50. 企業サイトはその目的上、 ほぼ固定ページで済ませら れるケースが多い12年11月21日水曜日
  51. 51. なので12年11月21日水曜日
  52. 52. そこっ!! 「えー、WordPressなのに 記事投稿使わないの?」とか 言わない!!12年11月21日水曜日
  53. 53. ありがちな企業サイトの画面構成12年11月21日水曜日
  54. 54. ありがちなページ構成 TOPページ ロゴ その他ページ グローバルナビゲーション 商品を紹介する かっちょいいメインビジュアル 製品 新着情報 バナー 製品 バナー プレスリリース フッター12年11月21日水曜日
  55. 55. ありがちなページ構成 TOPページ ロゴ その他ページ • ロゴ グローバルナビゲーション • グローバルナビゲーション 商品を紹介する • メインビジュアル かっちょいいメインビジュアル • 新着情報を10件表示 • プレスリリースもね 製品 新着情報 バナー • サイドナビには特集とか 製品 • 上部にユーティリティ系 バナー プレスリリース フッター12年11月21日水曜日
  56. 56. ありがちなページ構成 TOPページ ロゴ その他ページ グローバルナビゲーション 各コンテンツへスムーズかつ 商品を紹介する リズミカルなステップでアク かっちょいいメインビジュアル セス可能なエレガントなナビ 製品 ゲーション 新着情報 バナー 製品 バナー プレスリリース フッター12年11月21日水曜日
  57. 57. ありがちなページ構成 TOPページ ロゴ その他ページ グローバルナビゲーション あふれんばかりの愛社精神 商品を紹介する が乗り移ったかのような高 かっちょいいメインビジュアル い訴求力を誇るトップペー 製品 新着情報 ジのビジュアル要素 バナー 製品 バナー プレスリリース フッター12年11月21日水曜日
  58. 58. ありがちなページ構成 TOPページ ロゴ その他ページ グローバルナビゲーション 商品を紹介する かっちょいいメインビジュアル 製品 新着情報等の情報は投稿記事 新着情報 バナー のループを表示させる 製品 バナー プレスリリース フッター12年11月21日水曜日
  59. 59. ありがちなページ構成 TOPページ ロゴ その他ページ グローバルナビゲーション 商品を紹介する かっちょいいメインビジュアル 製品 サイドバーは 新着情報 バナー ・共通部分 製品 バナー ・特定のページにのみ表示 プレスリリース を分けてウィジェットで管理 フッター12年11月21日水曜日
  60. 60. ありがちなページ構成 下層ページ ロゴ その他ページ グローバルナビゲーション このページのイメージを 表示するビジュアル タイトル ローカル ナビゲーション 製品 バナー 本文 製品 バナー フッター12年11月21日水曜日
  61. 61. ありがちなページ構成 下層ページ ロゴ その他ページ • コンテンツ事のイメージ グローバルナビゲーション • ローカルナビゲーション このページのイメージを 表示するビジュアル • タイトル タイトル ローカル • 本文 ナビゲーション 製品 バナー 本文 製品 バナー フッター12年11月21日水曜日
  62. 62. ありがちなページ構成 下層ページ ロゴ その他ページ グローバルナビゲーション このページのイメージを コンテンツによって画像 表示するビジュアル を出し分けます タイトル ローカル ナビゲーション 製品 バナー 本文 製品 バナー フッター12年11月21日水曜日
  63. 63. ありがちなページ構成 下層ページ ロゴ その他ページ グローバルナビゲーション このページのイメージを 表示するビジュアル タイトル ローカル タイトルと本文を表示させ ナビゲーション ます 製品 バナー 本文 製品 バナー フッター12年11月21日水曜日
  64. 64. ありがちなページ構成 下層ページ ロゴ その他ページ グローバルナビゲーション このページのイメージを 表示するビジュアル コンテンツ別に表示するべき タイトル ローカル ナビゲーション ものがある場合は表示 製品 バナー 本文 製品 ・会社概要 バナー ・事業概要 フッター ローカルナビを表示12年11月21日水曜日
  65. 65. ありがちな企業サイトの実装12年11月21日水曜日
  66. 66. ありがちな企業サイトの実装 目次 • URLを決める • 固定ページの投稿 • html作成 • カテゴリーの作成 • テーマ化 • ウィジェット • メインビジュアル • 下層イメージ12年11月21日水曜日
  67. 67. URL一覧 # 一階層 二階層 URL 1 トップ http://biz.yuru-fuwa.com/ 2 事業概要 http://biz.yuru-fuwa.com/service/ 3 制作事業 http://biz.yuru-fuwa.com/service/product/ 4 講師事業 http://biz.yuru-fuwa.com/service/lecture/ 5 会社概要 http://biz.yuru-fuwa.com/company/ 6 沿革 http://biz.yuru-fuwa.com/company/history/ 7 アクセスマップ http://biz.yuru-fuwa.com/company/access/ 8 代表挨拶 http://biz.yuru-fuwa.com/company/message/ 9 ニュース http://biz.yuru-fuwa.com/news/ 10 個別ページ http://biz.yuru-fuwa.com/news/post-name/ 11 プレス http://biz.yuru-fuwa.com/press/ 12 個別ページ http://biz.yuru-fuwa.com/press/post-name/ 13 お問合せ http://biz.yuru-fuwa.com/inquiry/ 14 ブログ http://biz.yuru-fuwa.com/blog/ 15 採用情報 http://biz.yuru-fuwa.com/recruit/ 16 サイトマップ http://biz.yuru-fuwa.com/sitemap/12年11月21日水曜日
  68. 68. まずは管理画面から コンテンツの投下12年11月21日水曜日
  69. 69. 固定ページの投稿12年11月21日水曜日
  70. 70. 固定ページの投稿 事業概要、会社概要は階層化しましょう12年11月21日水曜日
  71. 71. 固定ページのURL 「パーマリンク」を編集して、 お好きなURLにしましょうね12年11月21日水曜日
  72. 72. 固定ページの階層化 子ページとなるページには ここで親ページを選択しましょう12年11月21日水曜日
  73. 73. カテゴリーを追加 「名前」にはカテゴリー名 (ここでは「ニュース」と「プレスリリース」) 「スラッグ」にはURLのディレクトリ名 (ここでは「news」と「press」)12年11月21日水曜日
  74. 74. 準備完了(/□)/12年11月21日水曜日
  75. 75. 次!!html→WPテーマ(/□)/12年11月21日水曜日
  76. 76. 普通にマークアップした htmlファイルに WordPressの関数を 追加していきます12年11月21日水曜日
  77. 77. まずは ファイルの分割12年11月21日水曜日
  78. 78. ファイルを分割 index.html style.css header.php index.php sidebar.php footer.php12年11月21日水曜日
  79. 79. ファイル分割について • 本来WordPressはindex.phpと style.cssがあればテーマとして動作する • 通例はheader と footer と sidebar • 独自に関数を使う場合は functions.php12年11月21日水曜日
  80. 80. ファイルの分割 • header.php → サイトヘッダーくらい • sidebar.php → サイドナビ部分 • footer.php → フッター以降12年11月21日水曜日
  81. 81. ファイルを分割 functions.php style.css header.php index.php sidebar.php footer.php12年11月21日水曜日
  82. 82. header.php htmlの最初からこの部 分までを表示します12年11月21日水曜日
  83. 83. head部分 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" /> <link rel="stylesheet" href="<?php bloginfo(stylesheet_url); ?>" type="text/css" /> <link rel="stylesheet" href="<?php bloginfo(template_directory); ?>/add.css" type="text/css" /> <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="<?php bloginfo(atom_url); ?>" /> <script type="text/javascript" src="<?php bloginfo(template_directory); ?>/js/main.js"></script> <!--[if lt IE 9]> <script type="text/javascript" src="<?php bloginfo(template_directory); ?>/js/libs/mootools.js"></script> <script type="text/javascript" src="<?php bloginfo(template_directory); ?>/js/libs/selectivizr-min.js"></ script> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <?php if ( is_page(blog) ) {?> <!-- Google Feed API --> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <!-- Google Feed API --> <?php } ?> <title><?php bloginfo(name); ?></title> <?php wp_head();?> </head>12年11月21日水曜日
  84. 84. head部分 <link rel="stylesheet" href="/css/style.css" type="text/css" /> <link rel="stylesheet" href="<?php bloginfo(stylesheet_url); ?>" type="text/css" /> スタイルシートファイルの記述を変更12年11月21日水曜日
  85. 85. head部分 <script type="text/javascript" src="/js/main.js"></script> <script type="text/javascript" src="<?php bloginfo(template_directory); ?>/js/main.js"></script> スクリプトファイルの呼び出し記述を変更12年11月21日水曜日
  86. 86. head部分 <?php if ( is_page(blog) ) {?> <!-- Google Feed API --> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <!-- Google Feed API --> <?php } ?> 特定のページ(ここでは社員ブログページ)でしか 表示させない場合に追加する12年11月21日水曜日
  87. 87. head部分 <?php wp_head();?> プラグインとかが吐き出すコードをこの関数で表示させ ます12年11月21日水曜日
  88. 88. ヘッダー部分 まずはこの部分12年11月21日水曜日
  89. 89. ヘッダー部分 <header id="siteHeader"> <div class="logo"> <h1><a href="/">株式会社ゆるふわ</a></h1> ←ロゴ部分 </div> <div class="other"> <div class="recruit"><a href="/recruit/"><span>採用情報</span></a></div> <div class="sitemap"><a href="/sitemap/"><span>サイトマップ</span></a></div> </div> </header> <nav id="globalNav"> <ul> <li class="current"><a href="/"><span>HOME</span></a></li> <li><a href="/service/"><span>事業概要</span></a></li> <li><a href="/company/"><span>会社概要</span></a></li> <li><a href="/news/"><span>ニュース</span></a></li> <li><a href="/inquiry/"><span>お問合せ</span></a></li> <li><a href="/blog/"><span>Blog</span></a></li> </ul> </nav>12年11月21日水曜日
  90. 90. ヘッダー部分 <header id="siteHeader"> <div class="logo"> <h1><a href="<?php bloginfo(url); ?>"><?php bloginfo(name); ?></a></h1> </div> <div class="other"> <div class="recruit"><a href="/recruit/"><span>採用情報</span></a></div> <div class="sitemap"><a href="/sitemap/"><span>サイトマップ</span></a></div> </div> </header> <nav id="globalNav"> <ul> <li class="current"><a href="/"><span>HOME</span></a></li> <li><a href="/service/"><span>事業概要</span></a></li> <li><a href="/company/"><span>会社概要</span></a></li> <li><a href="/news/"><span>ニュース</span></a></li> <li><a href="/inquiry/"><span>お問合せ</span></a></li> <li><a href="/blog/"><span>Blog</span></a></li> </ul> </nav>12年11月21日水曜日
  91. 91. ヘッダー部分 <header id="siteHeader"> <div class="logo"> <h1><a href="<?php bloginfo(url); ?>"><?php bloginfo(name); ?></a></h1> </div> <div class="other"> ↑サイトのURLを表示する <div class="recruit"><a href="/recruit/"><span>採用情報</span></a></div> <div class="sitemap"><a href="/sitemap/"><span>サイトマップ</span></a></div> </div> </header> <nav id="globalNav"> <ul> <li class="current"><a href="/"><span>HOME</span></a></li> <li><a href="/service/"><span>事業概要</span></a></li> <li><a href="/company/"><span>会社概要</span></a></li> <li><a href="/news/"><span>ニュース</span></a></li> <li><a href="/inquiry/"><span>お問合せ</span></a></li> <li><a href="/blog/"><span>Blog</span></a></li> </ul> </nav>12年11月21日水曜日
  92. 92. ヘッダー部分 <header id="siteHeader"> <div class="logo"> <h1><a href="<?php bloginfo(url); ?>"><?php bloginfo(name); ?></a></h1> </div> <div class="other"> ↑サイト名を表示する <div class="recruit"><a href="/recruit/"><span>採用情報</span></a></div> <div class="sitemap"><a href="/sitemap/"><span>サイトマップ</span></a></div> </div> </header> <nav id="globalNav"> <ul> <li class="current"><a href="/"><span>HOME</span></a></li> <li><a href="/service/"><span>事業概要</span></a></li> <li><a href="/company/"><span>会社概要</span></a></li> <li><a href="/news/"><span>ニュース</span></a></li> <li><a href="/inquiry/"><span>お問合せ</span></a></li> <li><a href="/blog/"><span>Blog</span></a></li> </ul> </nav>12年11月21日水曜日
  93. 93. ヘッダー部分 <header id="siteHeader"> <div class="logo"> <h1><a href="<?php bloginfo(url); ?>"><?php bloginfo(name); ?></a></h1> </div> ↓ユーティリティリンク <div class="other"> <div class="recruit"><a href="/recruit/"><span>採用情報</span></a></div> <div class="sitemap"><a href="/sitemap/"><span>サイトマップ</span></a></div> </div> </header> <nav id="globalNav"> <ul> <li class="current"><a href="/"><span>HOME</span></a></li> <li><a href="/service/"><span>事業概要</span></a></li> <li><a href="/company/"><span>会社概要</span></a></li> <li><a href="/news/"><span>ニュース</span></a></li> <li><a href="/inquiry/"><span>お問合せ</span></a></li> <li><a href="/blog/"><span>Blog</span></a></li> </ul> </nav>12年11月21日水曜日
  94. 94. ヘッダー部分 <header id="siteHeader"> <div class="logo"> <h1><a href="<?php bloginfo(url); ?>"><?php bloginfo(name); ?></a></h1> </div> <div class="other"> <div class="recruit"><a href="/recruit/"><span>採用情報</span></a></div> <div class="sitemap"><a href="/sitemap/"><span>サイトマップ</span></a></div> </div> </header> ↓グローバルナビ <nav id="globalNav"> <ul> <li class="current"><a href="/"><span>HOME</span></a></li> <li><a href="/service/"><span>事業概要</span></a></li> <li><a href="/company/"><span>会社概要</span></a></li> <li><a href="/news/"><span>ニュース</span></a></li> <li><a href="/inquiry/"><span>お問合せ</span></a></li> <li><a href="/blog/"><span>Blog</span></a></li> </ul> </nav>12年11月21日水曜日
  95. 95. 至って普通やんかー12年11月21日水曜日
  96. 96. ですよねー(★´∀`)人(´∀`★)ネェー12年11月21日水曜日
  97. 97. なので、1点だけ 工夫しましょうか12年11月21日水曜日
  98. 98. ちょっと一工夫 っ !! これ 今どのページにいるか、俗に言う カレントの場合に変化をつけましょう12年11月21日水曜日
  99. 99. ちょっと一工夫 っ !! これ 今どのページにいるか、俗に言う カレントの場合に変化をつけましょう li に class=‘current’ を追加 cssに .current を記述12年11月21日水曜日
  100. 100. ちょっと一工夫<nav id="globalNav"> <ul> <li><a href="/"><span>HOME</span></a></li> <li><a href="/service/"><span>事業概要</span></a></li> <li><a href="/company/"><span>会社概要</span></a></li> <li><a href="/news/"><span>ニュース</span></a></li> <li><a href="/inquiry/"><span>お問合せ</span></a></li> <li><a href="/blog/"><span>Blog</span></a></li> </ul></nav> ここにコードを追加していきます12年11月21日水曜日
  101. 101. ちょっと一工夫<nav id="globalNav"> <ul> <li<?php if(is_home()){?> class="current"<?php } ?>><a href="/"><span>HOME</span></a></li> <li<?php if(in_page(56)){?> class="current"<?php } ?>><a href="/service/"><span>事業概要</span></a></li> <li<?php if(in_page(4)){?> class="current"<?php } ?>><a href="/company/"><span>会社概要</span></a></li> <li<?php if(in_category(news)){?> class="current"<?php } ?>><a href="/news/"><span>ニュース</span></a></li> <li<?php if(in_page(24)){?> class="current"<?php } ?>><a href="/inquiry/"><span>お問合せ</span></a></li> <li<?php if(is_page(12)){?> class="current"<?php } ?>><a href="/blog/"><span>Blog</span></a></li> </ul></nav> こんなんを追加しました12年11月21日水曜日
  102. 102. ちょっと一工夫<nav id="globalNav"> <ul> <li<?php if(is_home()){?> class="current"<?php } ?>><a href="/"><span>HOME</span></a></li> <li<?php if(in_page(56)){?> class="current"<?php } ?>><a href="/service/"><span>事業概要</span></a></li> <li<?php if(in_page(4)){?> class="current"<?php } ?>><a href="/company/"><span>会社概要</span></a></li> <li<?php if(in_category(news)){?> class="current"<?php } ?>><a href="/news/"><span>ニュース</span></a></li> <li<?php if(in_page(24)){?> class="current"<?php } ?>><a href="/inquiry/"><span>お問合せ</span></a></li> <li<?php if(is_page(12)){?> class="current"<?php } ?>><a href="/blog/"><span>Blog</span></a></li> </ul></nav> こんなんを追加しました <li<?php if(is_home()){?> class="current"<?php } ?>> もしホームだったら、 class=”current”を表示します12年11月21日水曜日
  103. 103. ちょっと一工夫<nav id="globalNav"> <ul> <li<?php if(is_home()){?> class="current"<?php } ?>><a href="/"><span>HOME</span></a></li> <li<?php if(in_page(56)){?> class="current"<?php } ?>><a href="/service/"><span>事業概要</span></a></li> <li<?php if(in_page(4)){?> class="current"<?php } ?>><a href="/company/"><span>会社概要</span></a></li> <li<?php if(in_category(news)){?> class="current"<?php } ?>><a href="/news/"><span>ニュース</span></a></li> <li<?php if(in_page(24)){?> class="current"<?php } ?>><a href="/inquiry/"><span>お問合せ</span></a></li> <li<?php if(is_page(12)){?> class="current"<?php } ?>><a href="/blog/"><span>Blog</span></a></li> </ul></nav> こんなんを追加しました <li<?php if(in_page(56)){?> class="current"<?php } ?>> もしID56の固定ページかその子ページだったら、 class=”current”を表示します12年11月21日水曜日
  104. 104. ちょっと一工夫<nav id="globalNav"> <ul> <li<?php if(is_home()){?> class="current"<?php } ?>><a href="/"><span>HOME</span></a></li> <li<?php if(in_page(56)){?> class="current"<?php } ?>><a href="/service/"><span>事業概要</span></a></li> <li<?php if(in_page(4)){?> class="current"<?php } ?>><a href="/company/"><span>会社概要</span></a></li> <li<?php if(in_category(news)){?> class="current"<?php } ?>><a href="/news/"><span>ニュース</span></a></li> <li<?php if(in_page(24)){?> class="current"<?php } ?>><a href="/inquiry/"><span>お問合せ</span></a></li> <li<?php if(is_page(12)){?> class="current"<?php } ?>><a href="/blog/"><span>Blog</span></a></li> </ul></nav> こんなんを追加しました <li<?php if(in_page(4)){?> class="current"<?php } ?>> もしID4の固定ページかその子ページだったら、 class=”current”を表示します12年11月21日水曜日
  105. 105. ちょっと一工夫<nav id="globalNav"> <ul> <li<?php if(is_home()){?> class="current"<?php } ?>><a href="/"><span>HOME</span></a></li> <li<?php if(in_page(56)){?> class="current"<?php } ?>><a href="/service/"><span>事業概要</span></a></li> <li<?php if(in_page(4)){?> class="current"<?php } ?>><a href="/company/"><span>会社概要</span></a></li> <li<?php if(in_category(news)){?> class="current"<?php } ?>><a href="/news/"><span>ニュース</span></a></li> <li<?php if(in_page(24)){?> class="current"<?php } ?>><a href="/inquiry/"><span>お問合せ</span></a></li> <li<?php if(is_page(12)){?> class="current"<?php } ?>><a href="/blog/"><span>Blog</span></a></li> </ul></nav> こんなんを追加しました <li<?php if(in_category(‘news’)){?> class="current"<?php } ?>> もしカテゴリーが「news」だったら、 class=”current”を表示します12年11月21日水曜日
  106. 106. ちょっと一工夫<nav id="globalNav"> <ul> <li<?php if(is_home()){?> class="current"<?php } ?>><a href="/"><span>HOME</span></a></li> <li<?php if(in_page(56)){?> class="current"<?php } ?>><a href="/service/"><span>事業概要</span></a></li> <li<?php if(in_page(4)){?> class="current"<?php } ?>><a href="/company/"><span>会社概要</span></a></li> <li<?php if(in_category(news)){?> class="current"<?php } ?>><a href="/news/"><span>ニュース</span></a></li> <li<?php if(in_page(24)){?> class="current"<?php } ?>><a href="/inquiry/"><span>お問合せ</span></a></li> <li<?php if(is_page(12)){?> class="current"<?php } ?>><a href="/blog/"><span>Blog</span></a></li> </ul></nav> こんなんを追加しました <li<?php if(in_page(24)){?> class="current"<?php } ?>> もしID24の固定ページかその子ページだったら、 class=”current”を表示します12年11月21日水曜日
  107. 107. ちょっと一工夫<nav id="globalNav"> <ul> <li<?php if(is_home()){?> class="current"<?php } ?>><a href="/"><span>HOME</span></a></li> <li<?php if(in_page(56)){?> class="current"<?php } ?>><a href="/service/"><span>事業概要</span></a></li> <li<?php if(in_page(4)){?> class="current"<?php } ?>><a href="/company/"><span>会社概要</span></a></li> <li<?php if(in_category(news)){?> class="current"<?php } ?>><a href="/news/"><span>ニュース</span></a></li> <li<?php if(in_page(24)){?> class="current"<?php } ?>><a href="/inquiry/"><span>お問合せ</span></a></li> <li<?php if(is_page(12)){?> class="current"<?php } ?>><a href="/blog/"><span>Blog</span></a></li> </ul></nav> こんなんを追加しました <li<?php if(in_page(12)){?> class="current"<?php } ?>> もしID12の固定ページかその子ページだったら、 class=”current”を表示します12年11月21日水曜日
  108. 108. ん?12年11月21日水曜日
  109. 109. in_page(); とかなくね?12年11月21日水曜日
  110. 110. ちょっと一工夫 • 特定の固定ページ(会社概要)である • もしくはその子ページである12年11月21日水曜日
  111. 111. ちょっと一工夫 • 特定の固定ページ(会社概要)である • もしくはその子ページであるこんな条件分岐がほしいので、12年11月21日水曜日
  112. 112. ちょっと一工夫 • 特定の固定ページ(会社概要)である • もしくはその子ページであるこんな条件分岐がほしいので、 独自で関数を作りましょう12年11月21日水曜日
  113. 113. functions.phpに 足しちゃえ☆12年11月21日水曜日
  114. 114. 新しい関数を作成 /* * 指定された固定ページの親子関係か否か in_page() 関数の作成 */ function in_page ( $val = "" ) {     // ↓ ループの外の場合用     global $post; 引数にページIDかスラッグを     // IDに変換     $pid = slug_to_id($val); 入れると、     // ↓現在のページが固定ページだったらOK     if ( is_page( $pid ) ) { ・そのページである         return true;     } ・そのページの子ページである     // ↓現在のページの祖先ページIDを取得(配列)     $anc = get_post_ancestors( $post -> ID ); この条件に当てはまるか否かの     // ↓指定された$pidと正しい祖先ページIDがあればOK     foreach ( $anc as $ancestor ) { 条件分岐が使えますよ         if( is_page() && $ancestor == $pid ) {             return true;         }     }     return false; }12年11月21日水曜日
  115. 115. 新しい関数を作成 /* * 指定された固定ページの親子関係か否か in_page() 関数の作成 */ function in_page ( $val = "" ) {     // ↓ ループの外の場合用 functions.phpに     global $post; 引数にページIDかスラッグを     // IDに変換     $pid = slug_to_id($val); 入れると、     // ↓現在のページが固定ページだったらOK     if ( is_page( $pid ) ) { ・そのページである         return true;     } ・そのページの子ページである 足しましょう     // ↓現在のページの祖先ページIDを取得(配列)     $anc = get_post_ancestors( $post -> ID );     // ↓指定された$pidと正しい祖先ページIDがあればOK この条件に当てはまるか否かの     foreach ( $anc as $ancestor ) { 条件分岐が使えますよ         if( is_page() && $ancestor == $pid ) {             return true;         }     }     return false; }12年11月21日水曜日
  116. 116. 次っ!! メインビジュアル!12年11月21日水曜日
  117. 117. メインビジュアル ! ! れ っ こ ! ね ! 事 よ 大12年11月21日水曜日
  118. 118. メインビジュアルの役割 • 一番推したい商品を掲載 • 多分複数掲載したい • 多分更新頻度高い12年11月21日水曜日
  119. 119. 結構重要12年11月21日水曜日
  120. 120. なので、 ここはプラグインで 効果的な運用を!!12年11月21日水曜日
  121. 121. つまり、12年11月21日水曜日
  122. 122. つまり、 次回!!12年11月21日水曜日
  123. 123. つまり、 次回!! 乞うご期待(/□)/12年11月21日水曜日
  124. 124. まぁ一応カスタム投稿タイプとカスタムフィールドとアイキャッ チを使えば割と良い感じに管理できるんだけど今回は正直JSの 実装が間に合わなかったっていうかそうすれば良いなぁって思っ たのもこのスライドを書いてる11月16日現在に思った事だしい くらなんでもまだ7割くらいしかスライドできてない状況でスラ イド作るよりサイト作る方が楽しいからって現実逃避みたいな制 作は何かいろんな人に失礼な気がするしでもせっかくだったら作 りたいなぁよしこの発表が終わったら頑張ってみようかなぁ。 あ、現段階の「こうすればできるよ」で良ければ後でいくらでも 聞いて下さいね。ゆるっとふわっと答えますよー12年11月21日水曜日
  125. 125. まぁ一応カスタム投稿タイプとカスタムフィールドとアイキャッ チを使えば割と良い感じに管理できるんだけど今回は正直JSの 実装が間に合わなかったっていうかそうすれば良いなぁって思っ たのもこのスライドを書いてる11月16日現在に思った事だしい 言い訳すんなっ!! くらなんでもまだ7割くらいしかスライドできてない状況でスラ イド作るよりサイト作る方が楽しいからって現実逃避みたいな制(りたいなぁよしこの発表が終わったら頑張ってみようかなぁ。 ‘д‘⊂彡☆))Д´) パーン 作は何かいろんな人に失礼な気がするしでもせっかくだったら作 あ、現段階の「こうすればできるよ」で良ければ後でいくらでも 聞いて下さいね。ゆるっとふわっと答えますよー12年11月21日水曜日
  126. 126. 次っ!! パンくずリスト12年11月21日水曜日
  127. 127. パンくずリスト ここね!! ・現在地を表す ・ナビゲーション 色んな意味で大切な機能 ですよね12年11月21日水曜日
  128. 128. ここも関数を作成しましょうか ■header.php <?php breadcrumb(); // パンくずの表示 ?> 会社概要近辺なら 今のページに合わせた リンクを表示します ニュース近辺なら 事業概要近辺なら12年11月21日水曜日
  129. 129. パンくずリスト // パンくずリストを表示するよー function breadcrumb ( ) { ホームと管理画面には必要 if(!is_home()&&!is_admin()){   $str =; ないから条件分岐を   $li = <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">;   $span = <span itemprop="title">;    // ホーム、管理ページ以外に nav と ul でパンくずを作成    $str.= <nav class="breadCrumb">."n";     $str.= <ul>."n"; // 第一階層 ホームのli作成 $str.= $li.<a href=". home_url() ./" itemprop="url">.$span.HOME</span></a></li>."n";          // 404の場合は「404」のみ     if(is_404()){        $str.=<li>そんなページはございませんことよ</li>."n"; } elseif(is_category()) { // カテゴリーアーカイブの場合はカテゴリー名をliで区切る } elseif(is_page()){ // 固定ページの場合は階層に従って liを生成 } elseif(is_single()){ // 個別ページの場合はカテゴリーをliとする } } }12年11月21日水曜日
  130. 130. パンくずリスト // パンくずリストを表示するよー function breadcrumb ( ) { if(!is_home()&&!is_admin()){ ベースとなるタグ   $str =; <nav> と <ul> を作成   $li = <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">;   $span = <span itemprop="title">;    // ホーム、管理ページ以外に nav と ul でパンくずを作成    $str.= <nav class="breadCrumb">."n";     $str.= <ul>."n"; // 第一階層 ホームのli作成 $str.= $li.<a href=". home_url() ./" itemprop="url">.$span.HOME</span></a></li>."n";          // 404の場合は「404」のみ     if(is_404()){        $str.=<li>そんなページはございませんことよ</li>."n"; } elseif(is_category()) { // カテゴリーアーカイブの場合はカテゴリー名をliで区切る } elseif(is_page()){ // 固定ページの場合は階層に従って liを生成 } elseif(is_single()){ // 個別ページの場合はカテゴリーをliとする } } }12年11月21日水曜日
  131. 131. パンくずリスト // パンくずリストを表示するよー function breadcrumb ( ) { if(!is_home()&&!is_admin()){ トップページへのリンクを作成   $str =;   $li = <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">;   $span = <span itemprop="title">;    // ホーム、管理ページ以外に nav と ul でパンくずを作成    $str.= <nav class="breadCrumb">."n";     $str.= <ul>."n"; // 第一階層 ホームのli作成 $str.= $li.<a href=". home_url() ./" itemprop="url">.$span.HOME</span></a></li>."n";          // 404の場合は「404」のみ     if(is_404()){        $str.=<li>そんなページはございませんことよ</li>."n"; } elseif(is_category()) { // カテゴリーアーカイブの場合はカテゴリー名をliで区切る } elseif(is_page()){ // 固定ページの場合は階層に従って liを生成 } elseif(is_single()){ // 個別ページの場合はカテゴリーをliとする } } }12年11月21日水曜日
  132. 132. パンくずリスト // パンくずリストを表示するよー function breadcrumb ( ) { if(!is_home()&&!is_admin()){ 2階層目以降のリンクはページ   $str =; の種類によって表示内容を変更   $li = <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">;   $span = <span itemprop="title">;    // ホーム、管理ページ以外に nav と ul でパンくずを作成    $str.= <nav class="breadCrumb">."n";     $str.= <ul>."n"; // 第一階層 ホームのli作成 $str.= $li.<a href=". home_url() ./" itemprop="url">.$span.HOME</span></a></li>."n";          // 404の場合は「404」のみ     if(is_404()){        $str.=<li>そんなページはございませんことよ</li>."n"; } elseif(is_category()) { // カテゴリーアーカイブの場合はカテゴリー名をliで区切る } elseif(is_page()){ // 固定ページの場合は階層に従って liを生成 } elseif(is_single()){ // 個別ページの場合はカテゴリーをliとする } } }12年11月21日水曜日
  133. 133. パンくずリスト • 個別記事だったらカテゴリーが上位階層 • 沿革だったら会社概要が上位階層 • 制作事業だったら事業概要が上位階層 例えばこんな感じ12年11月21日水曜日
  134. 134. …えーっと、12年11月21日水曜日
  135. 135. スライドでの説明 ムツカシス( ´△`)12年11月21日水曜日
  136. 136. パンくずリスト みんな大好き WebDesignRecipesさんが すげー詳しく解説されてます パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるか もしれない(コード 付き) http://webdesignrecipes.com/wordpress-breadcrumb-list-tips/12年11月21日水曜日
  137. 137. ごめんっ!12年11月21日水曜日
  138. 138. 次っ!! 下階層の画像!!12年11月21日水曜日
  139. 139. 下層ページの画像 ここね!! 一応、コンテンツ毎に違う 画像を表示させますよ。 本来であれば「事業概要ぽ い画像」とかにすれば良い んでしょうね12年11月21日水曜日
  140. 140. 考え方 • 画像を必要分用意して画像フォルダに置く • 今いるページに表示させたい画像を指定 • ページ毎に表示する画像のパスを変更12年11月21日水曜日
  141. 141. 画像の用意 bnr-header-blog.jpg bnr-header-press.jpg bnr-header-company.jpg bnr-header-service.jpg bnr-header-inquiry.jpg bnr-header-recruit.jpg bnr-header-news.jpg bnr-header-sitemap.jpg12年11月21日水曜日
  142. 142. 画像の用意 bnr-header-blog.jpg bnr-header-press.jpg bnr-header-company.jpg bnr-header-service.jpg bnr-header-inquiry.jpg bnr-header-recruit.jpg bnr-header-news.jpg bnr-header-sitemap.jpg12年11月21日水曜日
  143. 143. 画像の用意 ファイル名は bnr-header-blog.jpg bnr-header-press.jpg そこだけ違うように bnr-header-company.jpg bnr-header-service.jpg しましょうね bnr-header-inquiry.jpg bnr-header-recruit.jpg bnr-header-news.jpg bnr-header-sitemap.jpg12年11月21日水曜日
  144. 144. 関数の作成 function get_header_img () {   if ( in_page("company") ) { グローバルナビゲーション     $text = "company"; // 会社概要ページ系 同様に、今いるページを判   } else if ( in_page("service") ) {     $text = "service"; // 事業概要ページ系   } else if ( in_category( news ) ){     $text = "news"; // ニュース系   } else if ( in_category( press ) ) { 定して、適用させたい画像     $text = "press"; // プレス系   } else if ( in_page("inquiry") ) {     $text = "inquiry"; // お問い合わせ系 のタイトルを記憶させる関   } else if ( in_page("blog") ) { // ブログ系 数を作成     $text = "blog";   } else if ( in_page("recruit") ) {     $text = "recruit"; // 採用情報系   } else if ( in_page("sitemap") ) {     $text = "sitemap"; // サイトマップ系   } else {     return false;   }   return $text; } function header_img() {   echo get_header_img(); }12年11月21日水曜日
  145. 145. 下層ページの画像 function get_header_img () {   if ( in_page("company") ) {     $text = "company"; // 会社概要ページ系   } else if ( in_page("service") ) {     $text = "service"; // 事業概要ページ系   } else if ( in_category( news ) ){     $text = "news"; // ニュース系   } else if ( in_category( press ) ) {     $text = "press"; // プレス系   } else if ( in_page("inquiry") ) {     $text = "inquiry"; // お問い合わせ系   } else if ( in_page("blog") ) {     $text = "blog"; // ブログ系   } else if ( in_page("recruit") ) {     $text = "recruit"; // 採用情報系   } else if ( in_page("sitemap") ) {     $text = "sitemap"; // サイトマップ系   } else {     return false;   }   return $text; } で、それらを出力する関数 function header_img() {   echo get_header_img(); } を作ります12年11月21日水曜日
  146. 146. 下層ページの画像 ■header.php <?php if ( get_header_img() ) {?> <img src="<?php bloginfo(template_directory);?>/img/bnr-header-<?php header_img();?>.jpg" /> <?php } ?> if ( get_header_img() ) { ↑ さっき作った関数でタイトルが何か書かれて   いる場合は画像を表示する12年11月21日水曜日
  147. 147. 下層ページの画像 ■header.php <?php if ( get_header_img() ) {?> <img src="<?php bloginfo(template_directory);?>/img/bnr-header-<?php header_img();?>.jpg" /> <?php } ?> bnr-header-<?php header_img();?>.jpg ↑ 画像の表示箇所に文字を追加します12年11月21日水曜日
  148. 148. 次っ!! 右メニュー12年11月21日水曜日
  149. 149. 右側のメニュー この部分!!12年11月21日水曜日
  150. 150. 考え方 • 共通して全ページで表示するものがある • 会社概要ではローカルナビ表示 • 事業概要でもローカルナビを表示 • ニュースは年別一覧のリンクを表示12年11月21日水曜日
  151. 151. やること • ウィジェット使用の記述を追加 • 管理画面でカスタムメニューの追加 • カスタムメニューをウィジェットに登録12年11月21日水曜日
  152. 152. ウィジェット使用の記述を追加 functions.phpにこれを // ウィジェットを利用する $args1 = array(         name => 共通サイドバー,         id => sidebar-1,         description         before_widget => => , <li id="%1$s" class="widget %2$s">, 記述して、ウィジェットを         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); 複数作成します $args2 = array(         name => 会社概要サイドバー,         id => sidebar-2,         description => ,         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); $args3 = array(         name => 事業概要サイドバー,         id => sidebar-3,         description => ,         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); if ( function_exists(register_sidebar) ) {     register_sidebar($args1);     register_sidebar($args2);     register_sidebar($args3); }12年11月21日水曜日
  153. 153. ウィジェット使用の記述を追加 // ウィジェットを利用する $args1 = array(         name => 共通サイドバー, 各ウィジェットの情報         id => sidebar-1,         description => , を記述します         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); $args2 = array(         name => 会社概要サイドバー,         id => sidebar-2,         description => ,         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); $args3 = array(         name => 事業概要サイドバー,         id => sidebar-3,         description => ,         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); if ( function_exists(register_sidebar) ) {     register_sidebar($args1);     register_sidebar($args2);     register_sidebar($args3); }12年11月21日水曜日
  154. 154. ウィジェット使用の記述を追加 // ウィジェットを利用する これは共通で表示する $args1 = array(         name => 共通サイドバー,         id => sidebar-1,         description => ,         before_widget         after_widget => => <li id="%1$s" class="widget %2$s">, </li>, ウィジェット         before_title => <h2 class="widgettitle">,         after_title => </h2> ); $args2 = array(         name => 会社概要サイドバー,         id => sidebar-2,         description => ,         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); $args3 = array(         name => 事業概要サイドバー,         id => sidebar-3,         description => ,         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); if ( function_exists(register_sidebar) ) {     register_sidebar($args1);     register_sidebar($args2);     register_sidebar($args3); }12年11月21日水曜日
  155. 155. ウィジェット使用の記述を追加 // ウィジェットを利用する $args1 = array(         name => 共通サイドバー,         id => sidebar-1,         description => ,         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); これは会社概要で表示 $args2 = array(         name => 会社概要サイドバー,         id => sidebar-2,         description => ,         before_widget         after_widget => => <li id="%1$s" class="widget %2$s">, </li>, するウィジェット         before_title => <h2 class="widgettitle">,         after_title => </h2> ); $args3 = array(         name => 事業概要サイドバー,         id => sidebar-3,         description => ,         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); if ( function_exists(register_sidebar) ) {     register_sidebar($args1);     register_sidebar($args2);     register_sidebar($args3); }12年11月21日水曜日
  156. 156. ウィジェット使用の記述を追加 // ウィジェットを利用する $args1 = array(         name => 共通サイドバー,         id => sidebar-1,         description => ,         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); $args2 = array(         name => 会社概要サイドバー,         id => sidebar-2,         description => ,         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); $args3 = array(         name => 事業概要サイドバー, これは事業概要で表示         id => sidebar-3,         description => ,         before_widget         after_widget => => <li id="%1$s" class="widget %2$s">, </li>, するウィジェット         before_title => <h2 class="widgettitle">,         after_title => </h2> ); if ( function_exists(register_sidebar) ) {     register_sidebar($args1);     register_sidebar($args2);     register_sidebar($args3); }12年11月21日水曜日
  157. 157. ウィジェット使用の記述を追加 // ウィジェットを利用する $args1 = array(         name => 共通サイドバー,         id => sidebar-1,         description => ,         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); $args2 = array(         name => 会社概要サイドバー,         id => sidebar-2,         description => ,         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); $args3 = array(         name => 事業概要サイドバー,         id => sidebar-3,         description => ,         before_widget => <li id="%1$s" class="widget %2$s">,         after_widget => </li>,         before_title => <h2 class="widgettitle">,         after_title => </h2> ); if ( function_exists(register_sidebar) ) {     register_sidebar($args1); さっき設定した複数のウィ     register_sidebar($args2);     register_sidebar($args3); ジェットをここで作成! }12年11月21日水曜日
  158. 158. ちなみに // ウィジェットの作成 if ( function_exist(register_sidebar) ) {     register_sidebar(); } // 複数のウィジェットの作成 if ( function_exists(register_sidebar) ) {     register_sidebar($args1);     register_sidebar($args2); } ウィジェットを作成する場合、一つ作成する時と複数 作成する時で表記が違います12年11月21日水曜日
  159. 159. 管理画面に表示 ほら見てほらっ!! できたっ(/□)/12年11月21日水曜日
  160. 160. カスタムメニューを作る 「外観→メニュー」でカスタムメニューを作ります 1. 名前を入力12年11月21日水曜日
  161. 161. カスタムメニューを作る 「外観→メニュー」でカスタムメニューを作ります 2.「メニューを保存」12年11月21日水曜日
  162. 162. カスタムメニューを作る 「外観→メニュー」でカスタムメニューを作ります 3.ページを選択12年11月21日水曜日
  163. 163. カスタムメニューを作る 「外観→メニュー」でカスタムメニューを作ります 4.「メニューに追加」12年11月21日水曜日
  164. 164. カスタムメニューを作る 「外観→メニュー」でカスタムメニューを作ります 5.「メニューを保存」12年11月21日水曜日
  165. 165. 管理画面に項目を追加 こいつを12年11月21日水曜日
  166. 166. 管理画面に項目を追加 ドラッグ!12年11月21日水曜日
  167. 167. 管理画面に項目を追加 「会社概要」を選択12年11月21日水曜日
  168. 168. sidebar.phpに記述     <ul class=""> <?php いつものようにページの // --------------------------------------- // 分岐の条件 // 会社概要系 ! サイドバー2 条件分岐で表示するウィ // 事業概要系 ! サイドバー3 // ニュース プレス ! 年別アーカイブ+サイドバー1 ジェットを出し分けます // 共通 ! サイドバー1 // --------------------------------------- if ( in_page(4) ) {   if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(2) ) { } } else if ( in_page(56) ) {   if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(3) ) { } } else if ( in_category(3) || in_category(4) ) {   if ( !is_home() ) { ?> <li> <ul class="year-archive"> <?php wp_get_archives(type=yearly&after=年);?> </ul> </li> <?php } } if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar() ) { } ?> </ul>12年11月21日水曜日
  169. 169. sidebar.phpに記述     <ul class=""> <?php 会社概要だったら // --------------------------------------- // 分岐の条件 // 会社概要系 ! サイドバー2 サイドバー2 // 事業概要系 ! サイドバー3 // ニュース プレス ! 年別アーカイブ+サイドバー1 // 共通 ! サイドバー1 // --------------------------------------- if ( in_page(4) ) {   if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(2) ) { } } else if ( in_page(56) ) {   if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(3) ) { } } else if ( in_category(3) || in_category(4) ) {   if ( !is_home() ) { ?> <li> <ul class="year-archive"> <?php wp_get_archives(type=yearly&after=年);?> </ul> </li> <?php } } if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar() ) { } ?> </ul>12年11月21日水曜日
  170. 170. sidebar.phpに記述     <ul class=""> <?php 事業概要だったら // --------------------------------------- // 分岐の条件 // 会社概要系 ! サイドバー2 サイドバー3 // 事業概要系 ! サイドバー3 // ニュース プレス ! 年別アーカイブ+サイドバー1 // 共通 ! サイドバー1 // --------------------------------------- if ( in_page(4) ) {   if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(2) ) { } } else if ( in_page(56) ) {   if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(3) ) { } } else if ( in_category(3) || in_category(4) ) {   if ( !is_home() ) { ?> <li> <ul class="year-archive"> <?php wp_get_archives(type=yearly&after=年);?> </ul> </li> <?php } } if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar() ) { } ?> </ul>12年11月21日水曜日
  171. 171. sidebar.phpに記述     <ul class=""> <?php ニュースかプレスリリース // --------------------------------------- // 分岐の条件 // 会社概要系 ! サイドバー2 だったら // 事業概要系 ! サイドバー3 // ニュース プレス ! 年別アーカイブ+サイドバー1 // 共通 ! サイドバー1 // --------------------------------------- if ( in_page(4) ) {   if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(2) ) { } } else if ( in_page(56) ) {   if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(3) ) { } } else if ( in_category(3) || in_category(4) ) {   if ( !is_home() ) { ?> <li> <ul class="year-archive"> <?php wp_get_archives(type=yearly&after=年);?> </ul> </li> <?php } } if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar() ) { } ?> </ul>12年11月21日水曜日
  172. 172. sidebar.phpに記述     <ul class=""> <?php 年別アーカイブリンクを表示 // --------------------------------------- // 分岐の条件 // 会社概要系 ! サイドバー2 // 事業概要系 ! サイドバー3 // ニュース プレス ! 年別アーカイブ+サイドバー1 // 共通 ! サイドバー1 // --------------------------------------- if ( in_page(4) ) {   if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(2) ) { } } else if ( in_page(56) ) {   if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(3) ) { } } else if ( in_category(3) || in_category(4) ) {   if ( !is_home() ) { ?> <li> <ul class="year-archive"> <?php wp_get_archives(type=yearly&after=年);?> </ul> </li> <?php } } if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar() ) { } ?> </ul>12年11月21日水曜日
  173. 173. sidebar.phpに記述     <ul class=""> <?php 最後に、共通で表示する // --------------------------------------- // 分岐の条件 // 会社概要系 ! サイドバー2 サイドバーを記述 // 事業概要系 ! サイドバー3 // ニュース プレス ! 年別アーカイブ+サイドバー1 // 共通 ! サイドバー1 // --------------------------------------- if ( in_page(4) ) {   if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(2) ) { } } else if ( in_page(56) ) {   if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(3) ) { } } else if ( in_category(3) || in_category(4) ) {   if ( !is_home() ) { ?> <li> <ul class="year-archive"> <?php wp_get_archives(type=yearly&after=年);?> </ul> </li> <?php } } if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar() ) { } ?> </ul>12年11月21日水曜日
  174. 174. 次っ!! やっと本番(?)! コンテンツ部分(/□)/12年11月21日水曜日
  175. 175. 作ったファイル • index.php • single.php • page.php • archive.php • category.php12年11月21日水曜日
  176. 176. トップページ (index.php)12年11月21日水曜日
  177. 177. トップページ このサイトでは、一般的なブログのトップページに 表示する「投稿記事を最新から∼件表示」という内 容を表示したい訳ではない12年11月21日水曜日
  178. 178. トップページ このサイトでは、一般的なブログのトップページに 表示する「投稿記事を最新から∼件表示」という内 容を表示したい訳ではない ほしい記事の内容を指定して取得・表示12年11月21日水曜日
  179. 179. トップページ この2種類の記事を 取得します12年11月21日水曜日
  180. 180. トップページ       <ul> <?php $args = array(   category_name => news, // カテゴリを指定   posts_per_page => 6, // 表示するページ数 ); $my_query = new WP_Query( $args ); ?> <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?> <li><a href="<?php the_permalink();?>"> <time datetime="<?php the_time(Y-m-d);?>"><?php the_time(Y 年Md日);?></time><?php the_title();?> </a></li> <?php endwhile; // ループ終了 ?> <?php wp_reset_postdata(); // ループのリセット ?>       </ul>12年11月21日水曜日
  181. 181. トップページ       <ul> <?php ■条件の指定 $args = array(   category_name => news, // カテゴリを指定 「news」カテゴリー   posts_per_page => 6, // 表示するページ数 ); $my_query = new WP_Query( $args ); の記事を6件取得 ?> <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?> <li><a href="<?php the_permalink();?>"> <time datetime="<?php the_time(Y-m-d);?>"><?php the_time(Y 年Md日);?></time><?php the_title();?> </a></li> <?php endwhile; // ループ終了 ?> <?php wp_reset_postdata(); // ループのリセット ?>       </ul>12年11月21日水曜日
  182. 182. トップページ       <ul> <?php $args = array(   category_name => news, // カテゴリを指定   posts_per_page => 6, // 表示するページ数 ); $my_query = new WP_Query( $args ); ?> 条件の記事を取得 <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?> <li><a href="<?php the_permalink();?>"> <time datetime="<?php the_time(Y-m-d);?>"><?php the_time(Y 年Md日);?></time><?php the_title();?> </a></li> <?php endwhile; // ループ終了 ?> <?php wp_reset_postdata(); // ループのリセット ?>       </ul>12年11月21日水曜日
  183. 183. トップページ       <ul> <?php $args = array(   category_name => news, // カテゴリを指定   posts_per_page => 6, // 表示するページ数 取得した記事をいつもの ); $my_query = new WP_Query( $args ); ?> ように繰り返して表示 <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?> <li><a href="<?php the_permalink();?>"> <time datetime="<?php the_time(Y-m-d);?>"><?php the_time(Y 年Md日);?></time><?php the_title();?> </a></li> <?php endwhile; // ループ終了 ?> <?php wp_reset_postdata(); // ループのリセット ?>       </ul>12年11月21日水曜日
  184. 184. トップページ       <ul> <?php $args = array(   category_name => news, // カテゴリを指定   posts_per_page => 6, // 表示するページ数 ); $my_query = new WP_Query( $args ); ?> <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?> <li><a href="<?php the_permalink();?>"> <time datetime="<?php the_time(Y-m-d);?>"><?php the_time(Y 年Md日);?></time><?php the_title();?> </a></li> <?php endwhile; // ループ終了 ?> <?php wp_reset_postdata(); // ループのリセット ?>       </ul> 別途記事を取得した場合は リセット処理も忘れずに12年11月21日水曜日
  185. 185. 固定ページ(single.php) 記事投稿ページ(page.php)12年11月21日水曜日
  186. 186. コンテンツ部分でやること 投稿を繰り返して表示する! <!-- メインコンテンツ部分 -->   <div id="contents"> <?php while (have_posts()) : the_post(); ?> <article class="post"> <header> <h1 class="page-title"><?php the_title(); ?></h1> </header> <?php the_content(); ?> </article> <?php endwhile;?> </div> <!-- メインコンテンツ部分 -->12年11月21日水曜日
  187. 187. コンテンツ部分でやること 投稿を繰り返して表示する! <!-- メインコンテンツ部分 -->   <div id="contents"> <?php while (have_posts()) : the_post(); ?> ここから <article class="post"> <header> <h1 class="page-title"><?php the_title(); ?></h1> </header> <?php the_content(); ?> </article> <?php endwhile;?> </div> <!-- メインコンテンツ部分 -->12年11月21日水曜日
  188. 188. コンテンツ部分でやること 投稿を繰り返して表示する! <!-- メインコンテンツ部分 -->   <div id="contents"> <?php while (have_posts()) : the_post(); ?> <article class="post"> <header> <h1 class="page-title"><?php the_title(); ?></h1> </header> <?php the_content(); ?> </article> <?php endwhile;?> ここまでを繰り返します </div> <!-- メインコンテンツ部分 -->12年11月21日水曜日
  189. 189. カテゴリー一覧ページ (category.php)12年11月21日水曜日
  190. 190. カテゴリー一覧 ニュース、プレスリリースの一覧ページで使用12年11月21日水曜日
  191. 191. カテゴリー一覧ページ       <h1 class="page-title"><?php echo ($category_name); ?></h1> <ul> <?php while (have_posts()) : the_post(); ?> <li> <a href="<?php the_permalink();?>"> <?php the_title(); ?> </a> </li> <?php endwhile;?> </ul>12年11月21日水曜日
  192. 192. カテゴリー一覧ページ       <h1 class="page-title"><?php echo ($category_name); ?></h1> <ul> <?php while (have_posts()) : the_post(); ?> <li> <a href="<?php the_permalink();?>"> <?php the_title(); ?> </a> </li> <?php endwhile;?> </ul> 同じように、繰り返したい箇所に同じ記述を書く12年11月21日水曜日

×