Top Banner
鳥山 WordPress~ 静的ペ優子 構築する企業サイト からCMS
40

WordPress で構築する企業サイト 〜静的ページからCMSへ〜

May 08, 2015

Download

Documents

Yuko Toriyama

2012年9月15日 WordCamp Tokyo 2012のスライド
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

鳥 山

WordPressで構築~ 静的ページから

優 子

構築する企業サイトからCMSへ ~

Page 2: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

プロフィール• 株式会社ベクター

企画デザイン部• WordPress歴 4年• 公式テーマ 配布• WP-Furigana

ふりがなを自動入力するプラグイン•いままでに食べたお菓子

/40

ふりがなを自動入力するプラグイン

2096種

2

いままでに食べたお菓子

Page 3: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

アジェンダ1. CMSとしてのWordPress2. 構成を決める3. テーマ作成4. 投稿の工夫5. 多言語対応6. スマートフォン対応7. WordPressにしてよかったこと

/40

WordPress

スマートフォン対応にしてよかったこと

3

Page 4: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

1. CMSとしてのしてのWordPress

Page 5: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

IR・会社情報サイト

http://ir.vector.co.jp

/40

・会社情報サイト

今日の事例

5

http://ir.vector.co.jp

Page 6: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

静的ページにおける

原稿、画像表示確認承認

管理部管理部

6 /40

における更新

ページ作成修正公開

デザイン部

Page 7: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

• 部署間のやりとりが多い担当が不在の場合に更新が遅れ

• 1回の更新箇所が多い該当のページトップページ一覧アページ

7 /40

部署間のやりとりが多い担当が不在の場合に更新が遅れ

回の更新箇所が多い

修正ミス更新し忘れ

Page 8: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

CMS化を検討いまなら、

/408

商用無料

Page 9: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

2. 構成をを決める

Page 10: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

IRサイトの構成要素 /40

構成要素

企業について経営方針

財務ハイライト

株式についてIRライブラリ

10

Page 11: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

企業について

プレスリリース

投稿カテゴリを階層化11 /40

プレスリリース

PR関連

IR関連

投稿カテゴリを階層化

Page 12: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

IRライブラリIRカレンダー決算短信・決算発表資料

有価証券報告書・内部統制報告書

株主総会資料

12 /40

カレンダー決算短信・決算発表資料

有価証券報告書・内部統制報告書

株主総会資料

Page 13: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

3. テーマ作成テーマ作成

Page 14: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

既存のHTML

テーマを

14 /40

HTMLページ

を作成

Page 15: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

トップページ

サイドメニュー

/40

最新10件

最新資料

15

Page 16: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

基本のテンプレート

• index.php• header.php• footer.php

• sidebar• sidebar-

16 /40

基本のテンプレート

index.phpheader.phpfooter.php

sidebar-left.php-right.php

Page 17: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

詳細ページ/4017

Page 18: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

詳細ページのテンプレート

• single.php• page.php

18 /40

詳細ページのテンプレート

single.phppage.php

Page 19: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

投稿一覧(1)

ページ送り

/4019

Page 20: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

投稿一覧(2)

PDF一覧

/4020

Page 21: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

投稿一覧(3)

1年に4件

/4021

Page 22: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

一覧のテンプレート

• category-calendar.php• category-holders.php• category-• category-release.php• category-カテゴリごとに異なる

22 /40

一覧のテンプレート

calendar.phpholders.php-report.php release.php-settle.php

カテゴリごとに異なる

Page 23: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

4. 投稿投稿の工夫

Page 24: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

資料(PDF)の添付 /40

添付24

表示

資料名とファイルサイズを入力して…

Page 25: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

予定表

予定予約投稿

年単位で表示

/4025

予定は予約投稿で

Page 26: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

サイドバー

動的なようで静的

/4026

Page 27: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

投稿の公開

HTMLファイルを生成テンプレートで

アクションフックpublish_post

sidebar.html

27 /4027

投稿の公開

ファイルを生成

テンプレートでinclude

アクションフックpublish_post

sidebar.html

Page 28: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

HTMLからデータ移行• 旧コンテンツをエクセルで

(投稿タイトル、内容、カテゴリ、日付• エクスポート型XML• インポート

移行時にデータが多い場合に有効

/40

データ移行をエクセルで整理

投稿タイトル、内容、カテゴリ、日付)XMLに成形

28

移行時にデータが多い場合に有効

Page 29: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

4. 多言語多言語対応

Page 30: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

言語

英語

中国語

投稿カテゴリに30 /40

英語

中国語

投稿カテゴリ

に言語を追加

Page 31: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

トップページ・一覧ページ

URLに言語パラメータを追加langlang

31 /40

トップページ・一覧ページ

に言語パラメータを追加lang=enlang=cn

31

Page 32: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

言語を判断

• ループ条件に言語を追加• 検索フォームにカテゴリを指定

• テンプレート分岐

32 /40

判断しながら32

ループ条件に言語を追加検索フォームにカテゴリを指定

テンプレート分岐

Page 33: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

実現はしたものの

•qTranslate•WPML(有料)

33 /40

実現はしたものの…

プラグイン使いましょう

Page 34: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

6. スマートフォン対応スマートフォン対応

Page 35: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

クリック範囲を広く

余白

/40

クリック範囲を広く

矢印

35

Page 36: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

サイドメニューの切/40

サイドメニューの切り替え

プルダウン

36

Page 37: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

表の見せ方

1行を

1列に

/4037

Page 38: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

7. WordPressにしてよかったことWordPressにしてよかったこと

Page 39: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

•担当部署で更新•資料のひもづけ•予約投稿•検索機能•フィード配信

39 /40

担当部署で更新づけ

Page 40: WordPress で構築する企業サイト 〜静的ページからCMSへ〜

ありがとうございました!ありがとうございました!