Your SlideShare is downloading. ×
WordPressで企業サイトのテーマを作る
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

7,082

Published on

ゆるふわ勉強会 第6回の資料です …

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

Published in: Self Improvement
2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,082
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
36
Comments
2
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WordPressで企業サイトを 作ってみる Vol.02 ∼ 作ったサイトを ∼ オリジナルテーマ化する12年11月21日水曜日
  • 2. 自己紹介 名前 藤田 無憂 所属 Web制作ユニットCherryPie 職種 ディレクター・エンジニア tw @anticyborg FB muyuu Blog http://stackstock.net/ Mail anticyborg@gmail.com12年11月21日水曜日
  • 3. 今日のお話12年11月21日水曜日
  • 4. 今日のお話 • WordPressで作る際のポイント • ありがちな企業サイトのページ構成 • ありがちな企業サイトの画面構成 • ありがちな企業サイトの実装12年11月21日水曜日
  • 5. ありがちで良い! まずは作ってみれ! 話はそれからだ!12年11月21日水曜日
  • 6. ありがちな企業サイトを作ろう12年11月21日水曜日
  • 7. 完成イメージ12年11月21日水曜日
  • 8. ありがちポイント!!12年11月21日水曜日
  • 9. 完成イメージ 情緒あふれる グローバルナビ12年11月21日水曜日
  • 10. 完成イメージ さりげない ユーティリティリンク12年11月21日水曜日
  • 11. 完成イメージ 惜しみなくあたえる メインビジュアル (※企業のメイン商 材を上手にアピール できるメインビジュ アル)12年11月21日水曜日
  • 12. 完成イメージ サイドナビゲーショ ンにはプッシュした いコンテンツをまと めて管理12年11月21日水曜日
  • 13. 大体こんな感じじゃ ないでしょうか12年11月21日水曜日
  • 14. 12年11月21日水曜日
  • 15. さて、12年11月21日水曜日
  • 16. このサイトですが、12年11月21日水曜日
  • 17. 一般的なブログの レイアウトとは ずいぶん違いますね12年11月21日水曜日
  • 18. 12年11月21日水曜日
  • 19. 一般的な12年11月21日水曜日
  • 20. 一般的なブログのレイアウト12年11月21日水曜日
  • 21. 一般的なブログのレイアウト とは12年11月21日水曜日
  • 22. 一般的なブログのレイアウト とは なんぞや12年11月21日水曜日
  • 23. 一般的なブログ12年11月21日水曜日
  • 24. 一般的なブログ グローバルナビ? なにそれ美味しいの?12年11月21日水曜日
  • 25. 一般的なブログ 書いた記事が最新から 何件か表示されてる12年11月21日水曜日
  • 26. 一般的なブログ 最新記事一覧 カテゴリー一覧 月別一覧 固定ページ一覧 とにかく一覧 (/□)/12年11月21日水曜日
  • 27. 全然違うねー(★´∀`)人(´∀`★)ネェー12年11月21日水曜日
  • 28. WordPressで作る際のポイント • サイトの構成を考える • その構成を満たす仕様を考える • 各ページの構成を考える • その構成を満たす仕様を考える12年11月21日水曜日
  • 29. WordPressで作る際のポイント • サイトの構成を考える • その構成を満たす仕様を考える • 各ページの構成を考える • その構成を満たす仕様を考える12年11月21日水曜日
  • 30. WordPressで作る際のポイント • サイトの構成を考える • その構成を満たす仕様を考える • 各ページの構成を考える 頭に すさ を念 しや • その構成を満たす仕様を考える 運 営の 類を 決定 !! 投稿 の種12年11月21日水曜日
  • 31. WordPressで作る際のポイント • サイトの構成を考える • その構成を満たす仕様を考える • 各ページの構成を考える • その構成を満たす仕様を考える12年11月21日水曜日
  • 32. WordPressで作る際のポイント • サイトの構成を考える を踏ま え、 分け 部分 、出 し く発 揮! 共通 部分 を遺 憾な • rdPressの 機能 その構成を満たす仕様を考える Wo • 各ページの構成を考える • その構成を満たす仕様を考える12年11月21日水曜日
  • 33. そうやって 作りましょうね12年11月21日水曜日
  • 34. ありがちな企業サイトのページ構成12年11月21日水曜日
  • 35. ありがちなサイトマップ12年11月21日水曜日
  • 36. ありがちなサイトマップ index.php12年11月21日水曜日
  • 37. ありがちなサイトマップ 固定ページ12年11月21日水曜日
  • 38. ありがちなサイトマップ 固定ページ12年11月21日水曜日
  • 39. ありがちなサイトマップ 投稿記事12年11月21日水曜日
  • 40. ありがちなサイトマップ カテゴリー 「ニュース」12年11月21日水曜日
  • 41. ありがちなサイトマップ カテゴリー 「プレスリリース」12年11月21日水曜日
  • 42. ありがちなサイトマップ 全部固定ページ (/□)/12年11月21日水曜日
  • 43. ほとんど固定ページ じゃねーかΣ(゚д゚lll)12年11月21日水曜日
  • 44. はい12年11月21日水曜日
  • 45. 文句ある?12年11月21日水曜日
  • 46. だって企業サイトって12年11月21日水曜日
  • 47. 一度作ったら 変えないページ 多いでしょ?12年11月21日水曜日
  • 48. 投稿記事を使うケース • 新着情報などのドンドン情報が増える箇所 • 製品情報などドンドン情報が更新する箇所 • 社員ブログなど12年11月21日水曜日
  • 49. 投稿記事を使わない方が良いケース • 会社情報など、あまり追加が発生しない箇所 • 単一のページ12年11月21日水曜日
  • 50. 企業サイトはその目的上、 ほぼ固定ページで済ませら れるケースが多い12年11月21日水曜日
  • 51. なので12年11月21日水曜日
  • 52. そこっ!! 「えー、WordPressなのに 記事投稿使わないの?」とか 言わない!!12年11月21日水曜日
  • 53. ありがちな企業サイトの画面構成12年11月21日水曜日
  • 54. ありがちなページ構成 TOPページ ロゴ その他ページ グローバルナビゲーション 商品を紹介する かっちょいいメインビジュアル 製品 新着情報 バナー 製品 バナー プレスリリース フッター12年11月21日水曜日
  • 55. ありがちなページ構成 TOPページ ロゴ その他ページ • ロゴ グローバルナビゲーション • グローバルナビゲーション 商品を紹介する • メインビジュアル かっちょいいメインビジュアル • 新着情報を10件表示 • プレスリリースもね 製品 新着情報 バナー • サイドナビには特集とか 製品 • 上部にユーティリティ系 バナー プレスリリース フッター12年11月21日水曜日
  • 56. ありがちなページ構成 TOPページ ロゴ その他ページ グローバルナビゲーション 各コンテンツへスムーズかつ 商品を紹介する リズミカルなステップでアク かっちょいいメインビジュアル セス可能なエレガントなナビ 製品 ゲーション 新着情報 バナー 製品 バナー プレスリリース フッター12年11月21日水曜日
  • 57. ありがちなページ構成 TOPページ ロゴ その他ページ グローバルナビゲーション あふれんばかりの愛社精神 商品を紹介する が乗り移ったかのような高 かっちょいいメインビジュアル い訴求力を誇るトップペー 製品 新着情報 ジのビジュアル要素 バナー 製品 バナー プレスリリース フッター12年11月21日水曜日
  • 58. ありがちなページ構成 TOPページ ロゴ その他ページ グローバルナビゲーション 商品を紹介する かっちょいいメインビジュアル 製品 新着情報等の情報は投稿記事 新着情報 バナー のループを表示させる 製品 バナー プレスリリース フッター12年11月21日水曜日
  • 59. ありがちなページ構成 TOPページ ロゴ その他ページ グローバルナビゲーション 商品を紹介する かっちょいいメインビジュアル 製品 サイドバーは 新着情報 バナー ・共通部分 製品 バナー ・特定のページにのみ表示 プレスリリース を分けてウィジェットで管理 フッター12年11月21日水曜日
  • 60. ありがちなページ構成 下層ページ ロゴ その他ページ グローバルナビゲーション このページのイメージを 表示するビジュアル タイトル ローカル ナビゲーション 製品 バナー 本文 製品 バナー フッター12年11月21日水曜日
  • 61. ありがちなページ構成 下層ページ ロゴ その他ページ • コンテンツ事のイメージ グローバルナビゲーション • ローカルナビゲーション このページのイメージを 表示するビジュアル • タイトル タイトル ローカル • 本文 ナビゲーション 製品 バナー 本文 製品 バナー フッター12年11月21日水曜日
  • 62. ありがちなページ構成 下層ページ ロゴ その他ページ グローバルナビゲーション このページのイメージを コンテンツによって画像 表示するビジュアル を出し分けます タイトル ローカル ナビゲーション 製品 バナー 本文 製品 バナー フッター12年11月21日水曜日
  • 63. ありがちなページ構成 下層ページ ロゴ その他ページ グローバルナビゲーション このページのイメージを 表示するビジュアル タイトル ローカル タイトルと本文を表示させ ナビゲーション ます 製品 バナー 本文 製品 バナー フッター12年11月21日水曜日
  • 64. ありがちなページ構成 下層ページ ロゴ その他ページ グローバルナビゲーション このページのイメージを 表示するビジュアル コンテンツ別に表示するべき タイトル ローカル ナビゲーション ものがある場合は表示 製品 バナー 本文 製品 ・会社概要 バナー ・事業概要 フッター ローカルナビを表示12年11月21日水曜日
  • 65. ありがちな企業サイトの実装12年11月21日水曜日
  • 66. ありがちな企業サイトの実装 目次 • URLを決める • 固定ページの投稿 • html作成 • カテゴリーの作成 • テーマ化 • ウィジェット • メインビジュアル • 下層イメージ12年11月21日水曜日
  • 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. まずは管理画面から コンテンツの投下12年11月21日水曜日
  • 69. 固定ページの投稿12年11月21日水曜日
  • 70. 固定ページの投稿 事業概要、会社概要は階層化しましょう12年11月21日水曜日
  • 71. 固定ページのURL 「パーマリンク」を編集して、 お好きなURLにしましょうね12年11月21日水曜日
  • 72. 固定ページの階層化 子ページとなるページには ここで親ページを選択しましょう12年11月21日水曜日
  • 73. カテゴリーを追加 「名前」にはカテゴリー名 (ここでは「ニュース」と「プレスリリース」) 「スラッグ」にはURLのディレクトリ名 (ここでは「news」と「press」)12年11月21日水曜日
  • 74. 準備完了(/□)/12年11月21日水曜日
  • 75. 次!!html→WPテーマ(/□)/12年11月21日水曜日
  • 76. 普通にマークアップした htmlファイルに WordPressの関数を 追加していきます12年11月21日水曜日
  • 77. まずは ファイルの分割12年11月21日水曜日
  • 78. ファイルを分割 index.html style.css header.php index.php sidebar.php footer.php12年11月21日水曜日
  • 79. ファイル分割について • 本来WordPressはindex.phpと style.cssがあればテーマとして動作する • 通例はheader と footer と sidebar • 独自に関数を使う場合は functions.php12年11月21日水曜日
  • 80. ファイルの分割 • header.php → サイトヘッダーくらい • sidebar.php → サイドナビ部分 • footer.php → フッター以降12年11月21日水曜日
  • 81. ファイルを分割 functions.php style.css header.php index.php sidebar.php footer.php12年11月21日水曜日
  • 82. header.php htmlの最初からこの部 分までを表示します12年11月21日水曜日
  • 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. 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. 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. 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. head部分 <?php wp_head();?> プラグインとかが吐き出すコードをこの関数で表示させ ます12年11月21日水曜日
  • 88. ヘッダー部分 まずはこの部分12年11月21日水曜日
  • 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. ヘッダー部分 <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. ヘッダー部分 <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. ヘッダー部分 <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. ヘッダー部分 <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. ヘッダー部分 <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. 至って普通やんかー12年11月21日水曜日
  • 96. ですよねー(★´∀`)人(´∀`★)ネェー12年11月21日水曜日
  • 97. なので、1点だけ 工夫しましょうか12年11月21日水曜日
  • 98. ちょっと一工夫 っ !! これ 今どのページにいるか、俗に言う カレントの場合に変化をつけましょう12年11月21日水曜日
  • 99. ちょっと一工夫 っ !! これ 今どのページにいるか、俗に言う カレントの場合に変化をつけましょう li に class=‘current’ を追加 cssに .current を記述12年11月21日水曜日
  • 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. ちょっと一工夫<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. ちょっと一工夫<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. ちょっと一工夫<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. ちょっと一工夫<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. ちょっと一工夫<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. ちょっと一工夫<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. ちょっと一工夫<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. ん?12年11月21日水曜日
  • 109. in_page(); とかなくね?12年11月21日水曜日
  • 110. ちょっと一工夫 • 特定の固定ページ(会社概要)である • もしくはその子ページである12年11月21日水曜日
  • 111. ちょっと一工夫 • 特定の固定ページ(会社概要)である • もしくはその子ページであるこんな条件分岐がほしいので、12年11月21日水曜日
  • 112. ちょっと一工夫 • 特定の固定ページ(会社概要)である • もしくはその子ページであるこんな条件分岐がほしいので、 独自で関数を作りましょう12年11月21日水曜日
  • 113. functions.phpに 足しちゃえ☆12年11月21日水曜日
  • 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. 新しい関数を作成 /* * 指定された固定ページの親子関係か否か 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. 次っ!! メインビジュアル!12年11月21日水曜日
  • 117. メインビジュアル ! ! れ っ こ ! ね ! 事 よ 大12年11月21日水曜日
  • 118. メインビジュアルの役割 • 一番推したい商品を掲載 • 多分複数掲載したい • 多分更新頻度高い12年11月21日水曜日
  • 119. 結構重要12年11月21日水曜日
  • 120. なので、 ここはプラグインで 効果的な運用を!!12年11月21日水曜日
  • 121. つまり、12年11月21日水曜日
  • 122. つまり、 次回!!12年11月21日水曜日
  • 123. つまり、 次回!! 乞うご期待(/□)/12年11月21日水曜日
  • 124. まぁ一応カスタム投稿タイプとカスタムフィールドとアイキャッ チを使えば割と良い感じに管理できるんだけど今回は正直JSの 実装が間に合わなかったっていうかそうすれば良いなぁって思っ たのもこのスライドを書いてる11月16日現在に思った事だしい くらなんでもまだ7割くらいしかスライドできてない状況でスラ イド作るよりサイト作る方が楽しいからって現実逃避みたいな制 作は何かいろんな人に失礼な気がするしでもせっかくだったら作 りたいなぁよしこの発表が終わったら頑張ってみようかなぁ。 あ、現段階の「こうすればできるよ」で良ければ後でいくらでも 聞いて下さいね。ゆるっとふわっと答えますよー12年11月21日水曜日
  • 125. まぁ一応カスタム投稿タイプとカスタムフィールドとアイキャッ チを使えば割と良い感じに管理できるんだけど今回は正直JSの 実装が間に合わなかったっていうかそうすれば良いなぁって思っ たのもこのスライドを書いてる11月16日現在に思った事だしい 言い訳すんなっ!! くらなんでもまだ7割くらいしかスライドできてない状況でスラ イド作るよりサイト作る方が楽しいからって現実逃避みたいな制(りたいなぁよしこの発表が終わったら頑張ってみようかなぁ。 ‘д‘⊂彡☆))Д´) パーン 作は何かいろんな人に失礼な気がするしでもせっかくだったら作 あ、現段階の「こうすればできるよ」で良ければ後でいくらでも 聞いて下さいね。ゆるっとふわっと答えますよー12年11月21日水曜日
  • 126. 次っ!! パンくずリスト12年11月21日水曜日
  • 127. パンくずリスト ここね!! ・現在地を表す ・ナビゲーション 色んな意味で大切な機能 ですよね12年11月21日水曜日
  • 128. ここも関数を作成しましょうか ■header.php <?php breadcrumb(); // パンくずの表示 ?> 会社概要近辺なら 今のページに合わせた リンクを表示します ニュース近辺なら 事業概要近辺なら12年11月21日水曜日
  • 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. パンくずリスト // パンくずリストを表示するよー 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. パンくずリスト // パンくずリストを表示するよー 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. パンくずリスト // パンくずリストを表示するよー 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. パンくずリスト • 個別記事だったらカテゴリーが上位階層 • 沿革だったら会社概要が上位階層 • 制作事業だったら事業概要が上位階層 例えばこんな感じ12年11月21日水曜日
  • 134. …えーっと、12年11月21日水曜日
  • 135. スライドでの説明 ムツカシス( ´△`)12年11月21日水曜日
  • 136. パンくずリスト みんな大好き WebDesignRecipesさんが すげー詳しく解説されてます パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるか もしれない(コード 付き) http://webdesignrecipes.com/wordpress-breadcrumb-list-tips/12年11月21日水曜日
  • 137. ごめんっ!12年11月21日水曜日
  • 138. 次っ!! 下階層の画像!!12年11月21日水曜日
  • 139. 下層ページの画像 ここね!! 一応、コンテンツ毎に違う 画像を表示させますよ。 本来であれば「事業概要ぽ い画像」とかにすれば良い んでしょうね12年11月21日水曜日
  • 140. 考え方 • 画像を必要分用意して画像フォルダに置く • 今いるページに表示させたい画像を指定 • ページ毎に表示する画像のパスを変更12年11月21日水曜日
  • 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. 画像の用意 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. 画像の用意 ファイル名は 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. 関数の作成 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. 下層ページの画像 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. 下層ページの画像 ■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. 下層ページの画像 ■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. 次っ!! 右メニュー12年11月21日水曜日
  • 149. 右側のメニュー この部分!!12年11月21日水曜日
  • 150. 考え方 • 共通して全ページで表示するものがある • 会社概要ではローカルナビ表示 • 事業概要でもローカルナビを表示 • ニュースは年別一覧のリンクを表示12年11月21日水曜日
  • 151. やること • ウィジェット使用の記述を追加 • 管理画面でカスタムメニューの追加 • カスタムメニューをウィジェットに登録12年11月21日水曜日
  • 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. ウィジェット使用の記述を追加 // ウィジェットを利用する $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. ウィジェット使用の記述を追加 // ウィジェットを利用する これは共通で表示する $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. ウィジェット使用の記述を追加 // ウィジェットを利用する $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. ウィジェット使用の記述を追加 // ウィジェットを利用する $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. ウィジェット使用の記述を追加 // ウィジェットを利用する $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. ちなみに // ウィジェットの作成 if ( function_exist(register_sidebar) ) {     register_sidebar(); } // 複数のウィジェットの作成 if ( function_exists(register_sidebar) ) {     register_sidebar($args1);     register_sidebar($args2); } ウィジェットを作成する場合、一つ作成する時と複数 作成する時で表記が違います12年11月21日水曜日
  • 159. 管理画面に表示 ほら見てほらっ!! できたっ(/□)/12年11月21日水曜日
  • 160. カスタムメニューを作る 「外観→メニュー」でカスタムメニューを作ります 1. 名前を入力12年11月21日水曜日
  • 161. カスタムメニューを作る 「外観→メニュー」でカスタムメニューを作ります 2.「メニューを保存」12年11月21日水曜日
  • 162. カスタムメニューを作る 「外観→メニュー」でカスタムメニューを作ります 3.ページを選択12年11月21日水曜日
  • 163. カスタムメニューを作る 「外観→メニュー」でカスタムメニューを作ります 4.「メニューに追加」12年11月21日水曜日
  • 164. カスタムメニューを作る 「外観→メニュー」でカスタムメニューを作ります 5.「メニューを保存」12年11月21日水曜日
  • 165. 管理画面に項目を追加 こいつを12年11月21日水曜日
  • 166. 管理画面に項目を追加 ドラッグ!12年11月21日水曜日
  • 167. 管理画面に項目を追加 「会社概要」を選択12年11月21日水曜日
  • 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. 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. 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. 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. 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. 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. 次っ!! やっと本番(?)! コンテンツ部分(/□)/12年11月21日水曜日
  • 175. 作ったファイル • index.php • single.php • page.php • archive.php • category.php12年11月21日水曜日
  • 176. トップページ (index.php)12年11月21日水曜日
  • 177. トップページ このサイトでは、一般的なブログのトップページに 表示する「投稿記事を最新から∼件表示」という内 容を表示したい訳ではない12年11月21日水曜日
  • 178. トップページ このサイトでは、一般的なブログのトップページに 表示する「投稿記事を最新から∼件表示」という内 容を表示したい訳ではない ほしい記事の内容を指定して取得・表示12年11月21日水曜日
  • 179. トップページ この2種類の記事を 取得します12年11月21日水曜日
  • 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. トップページ       <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. トップページ       <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. トップページ       <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. トップページ       <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. 固定ページ(single.php) 記事投稿ページ(page.php)12年11月21日水曜日
  • 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. コンテンツ部分でやること 投稿を繰り返して表示する! <!-- メインコンテンツ部分 -->   <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. コンテンツ部分でやること 投稿を繰り返して表示する! <!-- メインコンテンツ部分 -->   <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. カテゴリー一覧ページ (category.php)12年11月21日水曜日
  • 190. カテゴリー一覧 ニュース、プレスリリースの一覧ページで使用12年11月21日水曜日
  • 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. カテゴリー一覧ページ       <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日水曜日
  • 193. カテゴリー一覧ページ       <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日水曜日
  • 194. カテゴリー一覧ページ       <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> ・タイトルがアンカーリンク ・パーマリンクがリンク先URL12年11月21日水曜日
  • 195. footer.php この部分12年11月21日水曜日
  • 196. 特記すべき 項目なし!!12年11月21日水曜日
  • 197. 強いて言うと、12年11月21日水曜日
  • 198. カテゴリー一覧ページ <?php wp_footer();?> </body> </html> これだけ入れましょうね。 wp_header(); と一緒です。12年11月21日水曜日
  • 199. できたっ(/□)/12年11月21日水曜日
  • 200. さいごに12年11月21日水曜日
  • 201. 今回、できる限り簡易に、 かつ運用が楽になるように デモを作成しました12年11月21日水曜日
  • 202. しかも、プラグインに関す る内容は次回なので、ほと んど独自で実装してます12年11月21日水曜日
  • 203. なので、もしかしたら難しい と感じられる箇所もあったか もしれないっすー12年11月21日水曜日
  • 204. でも大丈夫です。 WordPressは質問したら 答えてくれる強い味方が多 いし、勉強会も多いです12年11月21日水曜日
  • 205. 真摯に、積極的に制作して 積極的に質問する12年11月21日水曜日
  • 206. それだけで理解が深まってい きます、きっと、多分。12年11月21日水曜日
  • 207. 僕もWordPressで制作をし 出してから、まだ1年です。12年11月21日水曜日
  • 208. 優しい先輩WPerに支えられ てここまでやってこれました12年11月21日水曜日
  • 209. みなさんも、今後 WordPressで制作をやって いこうと考えられているので あれば、12年11月21日水曜日
  • 210. コミュニティへの参加を考え てみては如何でしょうか12年11月21日水曜日
  • 211. WordBench http://wordbench.org/12年11月21日水曜日
  • 212. がんばっていこーぜ (/□)/12年11月21日水曜日
  • 213. あ(りがとうございま)した!!12年11月21日水曜日

×