Mais conteúdo relacionado
Mais de Muyuu Fujita (14)
WordPressで企業サイトのテーマを作る
- 2. 自己紹介
名前 藤田 無憂
所属 Web制作ユニットCherryPie
職種 ディレクター・エンジニア
tw @anticyborg
FB muyuu
Blog http://stackstock.net/
Mail anticyborg@gmail.com
12年11月21日水曜日
- 4. 今日のお話
• WordPressで作る際のポイント
• ありがちな企業サイトのページ構成
• ありがちな企業サイトの画面構成
• ありがちな企業サイトの実装
12年11月21日水曜日
- 5. ありがちで良い!
まずは作ってみれ!
話はそれからだ!
12年11月21日水曜日
- 9. 完成イメージ
情緒あふれる
グローバルナビ
12年11月21日水曜日
- 10. 完成イメージ
さりげない
ユーティリティリンク
12年11月21日水曜日
- 11. 完成イメージ
惜しみなくあたえる
メインビジュアル
(※企業のメイン商
材を上手にアピール
できるメインビジュ
アル)
12年11月21日水曜日
- 12. 完成イメージ
サイドナビゲーショ
ンにはプッシュした
いコンテンツをまと
めて管理
12年11月21日水曜日
- 17. 一般的なブログの
レイアウトとは
ずいぶん違いますね
12年11月21日水曜日
- 24. 一般的なブログ
グローバルナビ?
なにそれ美味しいの?
12年11月21日水曜日
- 25. 一般的なブログ
書いた記事が最新から
何件か表示されてる
12年11月21日水曜日
- 26. 一般的なブログ
最新記事一覧
カテゴリー一覧
月別一覧
固定ページ一覧
とにかく一覧
(/'□')/
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日水曜日
- 47. 一度作ったら
変えないページ
多いでしょ?
12年11月21日水曜日
- 48. 投稿記事を使うケース
• 新着情報などのドンドン情報が増える箇所
• 製品情報などドンドン情報が更新する箇所
• 社員ブログなど
12年11月21日水曜日
- 52. そこっ!!
「えー、WordPressなのに
記事投稿使わないの?」とか
言わない!!
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日水曜日
- 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日水曜日
- 70. 固定ページの投稿
事業概要、会社概要は階層化しましょう
12年11月21日水曜日
- 71. 固定ページのURL
「パーマリンク」を編集して、
お好きなURLにしましょうね
12年11月21日水曜日
- 72. 固定ページの階層化
子ページとなるページには
ここで親ページを選択しましょう
12年11月21日水曜日
- 73. カテゴリーを追加
「名前」にはカテゴリー名
(ここでは「ニュース」と「プレスリリース」)
「スラッグ」にはURLのディレクトリ名
(ここでは「news」と「press」)
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.php
12年11月21日水曜日
- 79. ファイル分割について
• 本来WordPressはindex.phpと
style.cssがあればテーマとして動作する
• 通例はheader と footer と sidebar
• 独自に関数を使う場合は functions.php
12年11月21日水曜日
- 80. ファイルの分割
• header.php → サイトヘッダーくらい
• sidebar.php → サイドナビ部分
• footer.php → フッター以降
12年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日水曜日
- 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日水曜日
- 110. ちょっと一工夫
• 特定の固定ページ(会社概要)である
• もしくはその子ページである
12年11月21日水曜日
- 111. ちょっと一工夫
• 特定の固定ページ(会社概要)である
• もしくはその子ページである
こんな条件分岐がほしいので、
12年11月21日水曜日
- 112. ちょっと一工夫
• 特定の固定ページ(会社概要)である
• もしくはその子ページである
こんな条件分岐がほしいので、
独自で関数を作りましょう
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日水曜日
- 120. なので、
ここはプラグインで
効果的な運用を!!
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日水曜日
- 136. パンくずリスト
みんな大好き
WebDesignRecipesさんが
すげー詳しく解説されてます
パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるか
もしれない(コード 付き)
http://webdesignrecipes.com/wordpress-breadcrumb-list-tips/
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.jpg
12年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.jpg
12年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.jpg
12年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日水曜日
- 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日水曜日
- 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.php
12年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日水曜日
- 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日水曜日
- 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>
・タイトルがアンカーリンク
・パーマリンクがリンク先URL
12年11月21日水曜日
- 196. 特記すべき
項目なし!!
12年11月21日水曜日
- 198. カテゴリー一覧ページ
<?php wp_footer();?>
</body>
</html>
これだけ入れましょうね。
wp_header(); と一緒です。
12年11月21日水曜日
- 204. でも大丈夫です。
WordPressは質問したら
答えてくれる強い味方が多
いし、勉強会も多いです
12年11月21日水曜日
- 209. みなさんも、今後
WordPressで制作をやって
いこうと考えられているので
あれば、
12年11月21日水曜日
- 211. WordBench
http://wordbench.org/
12年11月21日水曜日