wordpress で構築する企業サイト 〜静的ページからcmsへ〜
DESCRIPTION
2012年9月15日 WordCamp Tokyo 2012のスライドTRANSCRIPT
![Page 1: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/1.jpg)
鳥 山
WordPressで構築~ 静的ページから
優 子
構築する企業サイトからCMSへ ~
![Page 2: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/2.jpg)
プロフィール• 株式会社ベクター
企画デザイン部• WordPress歴 4年• 公式テーマ 配布• WP-Furigana
ふりがなを自動入力するプラグイン•いままでに食べたお菓子
/40
年
ふりがなを自動入力するプラグイン
2096種
2
いままでに食べたお菓子
![Page 3: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/3.jpg)
アジェンダ1. CMSとしてのWordPress2. 構成を決める3. テーマ作成4. 投稿の工夫5. 多言語対応6. スマートフォン対応7. WordPressにしてよかったこと
/40
WordPress
スマートフォン対応にしてよかったこと
3
![Page 4: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/4.jpg)
1. CMSとしてのしてのWordPress
![Page 5: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/5.jpg)
IR・会社情報サイト
http://ir.vector.co.jp
/40
・会社情報サイト
今日の事例
5
http://ir.vector.co.jp
![Page 6: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/6.jpg)
静的ページにおける
原稿、画像表示確認承認
管理部管理部
6 /40
における更新
ページ作成修正公開
デザイン部
![Page 7: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/7.jpg)
• 部署間のやりとりが多い担当が不在の場合に更新が遅れ
• 1回の更新箇所が多い該当のページトップページ一覧アページ
7 /40
部署間のやりとりが多い担当が不在の場合に更新が遅れ
回の更新箇所が多い
修正ミス更新し忘れ
![Page 8: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/8.jpg)
CMS化を検討いまなら、
/408
商用無料
![Page 9: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/9.jpg)
2. 構成をを決める
![Page 10: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/10.jpg)
IRサイトの構成要素 /40
構成要素
企業について経営方針
財務ハイライト
株式についてIRライブラリ
10
![Page 11: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/11.jpg)
企業について
プレスリリース
投稿カテゴリを階層化11 /40
プレスリリース
PR関連
IR関連
投稿カテゴリを階層化
![Page 12: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/12.jpg)
IRライブラリIRカレンダー決算短信・決算発表資料
有価証券報告書・内部統制報告書
株主総会資料
12 /40
カレンダー決算短信・決算発表資料
有価証券報告書・内部統制報告書
株主総会資料
![Page 13: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/13.jpg)
3. テーマ作成テーマ作成
![Page 14: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/14.jpg)
既存のHTML
テーマを
14 /40
HTMLページ
を作成
![Page 15: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/15.jpg)
トップページ
サイドメニュー
/40
最新10件
最新資料
15
![Page 16: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/16.jpg)
基本のテンプレート
• index.php• header.php• footer.php
• sidebar• sidebar-
16 /40
基本のテンプレート
index.phpheader.phpfooter.php
sidebar-left.php-right.php
![Page 17: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/17.jpg)
詳細ページ/4017
![Page 18: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/18.jpg)
詳細ページのテンプレート
• single.php• page.php
18 /40
詳細ページのテンプレート
single.phppage.php
![Page 19: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/19.jpg)
投稿一覧(1)
ページ送り
/4019
![Page 20: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/20.jpg)
投稿一覧(2)
PDF一覧
/4020
![Page 21: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/21.jpg)
投稿一覧(3)
1年に4件
/4021
![Page 22: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/22.jpg)
一覧のテンプレート
• 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へ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/23.jpg)
4. 投稿投稿の工夫
![Page 24: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/24.jpg)
資料(PDF)の添付 /40
添付24
表示
資料名とファイルサイズを入力して…
![Page 25: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/25.jpg)
予定表
予定予約投稿
年単位で表示
/4025
予定は予約投稿で
![Page 26: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/26.jpg)
サイドバー
動的なようで静的
/4026
![Page 27: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/27.jpg)
投稿の公開
HTMLファイルを生成テンプレートで
アクションフックpublish_post
sidebar.html
27 /4027
投稿の公開
ファイルを生成
テンプレートでinclude
アクションフックpublish_post
sidebar.html
![Page 28: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/28.jpg)
HTMLからデータ移行• 旧コンテンツをエクセルで
(投稿タイトル、内容、カテゴリ、日付• エクスポート型XML• インポート
移行時にデータが多い場合に有効
/40
データ移行をエクセルで整理
投稿タイトル、内容、カテゴリ、日付)XMLに成形
28
移行時にデータが多い場合に有効
![Page 29: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/29.jpg)
4. 多言語多言語対応
![Page 30: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/30.jpg)
言語
英語
中国語
投稿カテゴリに30 /40
英語
中国語
投稿カテゴリ
に言語を追加
![Page 31: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/31.jpg)
トップページ・一覧ページ
URLに言語パラメータを追加langlang
31 /40
トップページ・一覧ページ
に言語パラメータを追加lang=enlang=cn
31
![Page 32: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/32.jpg)
言語を判断
• ループ条件に言語を追加• 検索フォームにカテゴリを指定
• テンプレート分岐
32 /40
判断しながら32
ループ条件に言語を追加検索フォームにカテゴリを指定
テンプレート分岐
![Page 33: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/33.jpg)
実現はしたものの
•qTranslate•WPML(有料)
33 /40
実現はしたものの…
プラグイン使いましょう
![Page 34: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/34.jpg)
6. スマートフォン対応スマートフォン対応
![Page 35: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/35.jpg)
クリック範囲を広く
余白
/40
クリック範囲を広く
矢印
35
![Page 36: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/36.jpg)
サイドメニューの切/40
サイドメニューの切り替え
プルダウン
36
![Page 37: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/37.jpg)
表の見せ方
1行を
1列に
/4037
![Page 38: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/38.jpg)
7. WordPressにしてよかったことWordPressにしてよかったこと
![Page 39: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/39.jpg)
•担当部署で更新•資料のひもづけ•予約投稿•検索機能•フィード配信
39 /40
担当部署で更新づけ
![Page 40: WordPress で構築する企業サイト 〜静的ページからCMSへ〜](https://reader034.vdocuments.mx/reader034/viewer/2022052618/554bbf3db4c90594278b5063/html5/thumbnails/40.jpg)
ありがとうございました!ありがとうございました!