Enviar búsqueda
Cargar
WordPressで企業サイトのテーマを作る
•
9 recomendaciones
•
6,308 vistas
Muyuu Fujita
Seguir
ゆるふわ勉強会 第6回の資料です 後で色々直します。。。
Leer menos
Leer más
Desarrollo personal
Denunciar
Compartir
Denunciar
Compartir
1 de 213
Descargar ahora
Descargar para leer sin conexión
Recomendados
HTML5とは何か? - 芸大 Webデザイン演習B
HTML5とは何か? - 芸大 Webデザイン演習B
Atsushi Tadokoro
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
タカシ キタジマ
WordPress 多言語化プラグインqTranslateの紹介
WordPress 多言語化プラグインqTranslateの紹介
Takashi Uemura
ベジェ再入門
ベジェ再入門
swwwitch inc.
Oasis Interior Construction Profile current March 2016
Oasis Interior Construction Profile current March 2016
David Karim
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
Jun Nogata
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
Eigoro Yamamura
押さえておきたいサーバーセキュリティ
押さえておきたいサーバーセキュリティ
Takahisa Iwamoto
Recomendados
HTML5とは何か? - 芸大 Webデザイン演習B
HTML5とは何か? - 芸大 Webデザイン演習B
Atsushi Tadokoro
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
タカシ キタジマ
WordPress 多言語化プラグインqTranslateの紹介
WordPress 多言語化プラグインqTranslateの紹介
Takashi Uemura
ベジェ再入門
ベジェ再入門
swwwitch inc.
Oasis Interior Construction Profile current March 2016
Oasis Interior Construction Profile current March 2016
David Karim
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
Jun Nogata
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
Eigoro Yamamura
押さえておきたいサーバーセキュリティ
押さえておきたいサーバーセキュリティ
Takahisa Iwamoto
Hello npm
Hello npm
Muyuu Fujita
Learn ES2015
Learn ES2015
Muyuu Fujita
Start React with Browserify
Start React with Browserify
Muyuu Fujita
Objective Front-End JavaScript
Objective Front-End JavaScript
Muyuu Fujita
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
Muyuu Fujita
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Muyuu Fujita
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
非ガチ勢「よし、Coffee script使おう!」
非ガチ勢「よし、Coffee script使おう!」
Muyuu Fujita
あの時AngularJSと出会った僕らは
あの時AngularJSと出会った僕らは
Muyuu Fujita
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
Muyuu Fujita
Cssアニメーションとその制御
Cssアニメーションとその制御
Muyuu Fujita
WPerのWPerによるWPerのためのPHP入門
WPerのWPerによるWPerのためのPHP入門
Muyuu Fujita
ノンプログラマのGit入門
ノンプログラマのGit入門
Muyuu Fujita
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
Más contenido relacionado
Más de Muyuu Fujita
Hello npm
Hello npm
Muyuu Fujita
Learn ES2015
Learn ES2015
Muyuu Fujita
Start React with Browserify
Start React with Browserify
Muyuu Fujita
Objective Front-End JavaScript
Objective Front-End JavaScript
Muyuu Fujita
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
Muyuu Fujita
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Muyuu Fujita
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
非ガチ勢「よし、Coffee script使おう!」
非ガチ勢「よし、Coffee script使おう!」
Muyuu Fujita
あの時AngularJSと出会った僕らは
あの時AngularJSと出会った僕らは
Muyuu Fujita
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
Muyuu Fujita
Cssアニメーションとその制御
Cssアニメーションとその制御
Muyuu Fujita
WPerのWPerによるWPerのためのPHP入門
WPerのWPerによるWPerのためのPHP入門
Muyuu Fujita
ノンプログラマのGit入門
ノンプログラマのGit入門
Muyuu Fujita
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
Más de Muyuu Fujita
(14)
Hello npm
Hello npm
Learn ES2015
Learn ES2015
Start React with Browserify
Start React with Browserify
Objective Front-End JavaScript
Objective Front-End JavaScript
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
非ガチ勢「よし、Coffee script使おう!」
非ガチ勢「よし、Coffee script使おう!」
あの時AngularJSと出会った僕らは
あの時AngularJSと出会った僕らは
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
デザイナー向け 初めてのPhp ~サイト制作に役立つtips~
Cssアニメーションとその制御
Cssアニメーションとその制御
WPerのWPerによるWPerのためのPHP入門
WPerのWPerによるWPerのためのPHP入門
ノンプログラマのGit入門
ノンプログラマのGit入門
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
WordPressで企業サイトのテーマを作る
1.
WordPressで企業サイトを
作ってみる Vol.02 ∼ 作ったサイトを ∼ オリジナルテーマ化する 12年11月21日水曜日
2.
自己紹介
名前 藤田 無憂 所属 Web制作ユニットCherryPie 職種 ディレクター・エンジニア tw @anticyborg FB muyuu Blog http://stackstock.net/ Mail anticyborg@gmail.com 12年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.php 12年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.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日水曜日
81.
ファイルを分割 functions.php
style.css header.php index.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日水曜日
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.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日水曜日
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.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日水曜日
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> ・タイトルがアンカーリンク ・パーマリンクがリンク先URL 12年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日水曜日
Descargar ahora