Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SBCamp. CMS をつかってみよう WordPressハンズオン! 資料
Search
NPO法人 まちづくりエージェント SIDE BEACH CITY.
April 13, 2019
Technology
1
710
SBCamp. CMS をつかってみよう WordPressハンズオン! 資料
2019/04/13開催した SBCamp. CMS をつかってみよう WordPressハンズオン!の資料です。
NPO法人 まちづくりエージェント SIDE BEACH CITY.
April 13, 2019
Tweet
Share
More Decks by NPO法人 まちづくりエージェント SIDE BEACH CITY.
See All by NPO法人 まちづくりエージェント SIDE BEACH CITY.
政策デザインデザイン勉強会 vol.60(志田プレゼン資料)
cityagentsbc
1
270
SBC.オープンマイク #60 資料
cityagentsbc
0
51
まちづくりエージェント SIDE BEACH CITY.の活動紹介
cityagentsbc
1
270
Zoom学習会 ホスト開催編
cityagentsbc
0
350
SBC.オープンマイク #19 SBCast.の作業内容を展開します
cityagentsbc
0
53
SBC.オープンマイク #16 これからのSBC.活動紹介
cityagentsbc
0
98
ビオガーデン防災機能及びパーゴラ・プロジェクト
cityagentsbc
0
120
SBCamp. プログラミングの仕組みを学ぶ、オトナScratch講座
cityagentsbc
0
92
地域でのオンラインセミナー開催の可能性と課題
cityagentsbc
0
36
Other Decks in Technology
See All in Technology
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
160
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.4k
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
Azure AI ことはじめ
tsubakimoto_s
0
130
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
Classmethod Odyssey 登壇資料
yamahiro
0
390
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
The Pragmatic Product Professional
lauravandoore
29
6.1k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
A designer walks into a library…
pauljervisheath
201
24k
A Tale of Four Properties
chriscoyier
155
22k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Practical Orchestrator
shlominoach
185
10k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Teambox: Starting and Learning
jrom
130
8.6k
How STYLIGHT went responsive
nonsquared
93
5k
The Language of Interfaces
destraynor
151
23k
Transcript
WordPressハンズオン 話す⼈: ⼋⽊恵⼀
お品書き 1. 座学: CMSの解説 2. 座学: WordPressの導⼊事例や機能概要 3. 実践: WordPressの簡単な導⼊と設定
4. WordPressであった怖い話から学ぶカスタマイズ
今⽇やらないこと Web上からみられるWordPressの構築 テーマやプラグインの作成 おすすめのテーマやプラグインの紹介
座学: CMSの解説 概要 CMSとはContents Management Systemの略 ⽇本語ではコンテンツ管理システム ⽂章や写真、⾳楽などのコンテンツをWebサイトに掲載しやすくする仕組み
CMSを使わない場合 ⼿順 1. HTMLファイルを書き換え HTMLタグなどの知識が必要 2. ファイルアップロード FTPクライアントが必要
CMSがある場合 1. CMSにログイン 2. CMSの記事編集画⾯を開く 3. 書きたい記事を書く 画像はドラッグアンドドロップでOK
⽐較 CMSを使わない場合 ⻑所 ページの表⽰速度がはやい サーバーの選択肢が多い サーバーの費⽤が安い、あるいは無料 短所 ⼤量のファイルを変更する場合などに⼿間がかかる 複数⼈で管理する場合の仕組み作りが⼤変 ⽇記のように更新頻度の⾼いコンテンツだと、更新の⼿間が壁になる
CMSがある場合 ⻑所 記事を書く、プレビュー、投稿で作業が完了する 複数⼈で記事の投稿や投稿前のチェックが⾏える ブラウザとネットワークがあればどこからでも更新できる 短所 設置できるサーバーが限られる CMS⾃体の管理が必要になる CMS本体やプラグイン、テーマなどのアップデート ユーザの管理
セキュリティ⾯の対応
座学: WordPressの導⼊事例や機能概要 導⼊事例 WordPress.com WordPress.com
None
神⼾芸術⼯科⼤学 神⼾芸術⼯科⼤学 | 神⼾芸術⼯科⼤学はデザインとアートの総合⼤学です。質の ⾼い芸術の感性を育てることを⽬標に全国トップクラスの環境を整えています。
None
TechCrunch Japan TechCrunch Japan - 最新のテクノロジーとスタートアップ・Webに関するニュー スを配信するブログメディア
None
機能概要 記事の投稿 固定ページ ブログ プラグインやテーマによるカスタマイズ ユーザ管理 ユーザの追加・削除 権限の設定
実際に使うには WordPress.com を使う アカウントを作るだけで利⽤できる カスタマイズの⾃由度はやや下がる WordPressをサーバーにインストールする カスタマイズの⾃由度が⾼い レンタルサーバなどを⽤意する必要がある さくらのレンタルサーバ、ロリポップ︕レンタルサーバー、XREAなど
実践: WordPressの簡単な導⼊と設定 今回は実験⽤にパソコン上にWordPressが動く環境を作る Webサイトとしては公開できない点に注意
インストール 1. サイトからダウンロード 2. ファイルを展開する 3. 展開したフォルダの中にあるファイルを開く Windows: Start-InstantWP.bat macOS:
Start-InstantWP 2019/04/13時点の最新版5.3.6では正常に動作しない不具合がある。 5.3.4を利⽤する
ログインから⽇本語化まで 1. InstantWPの WordPress Admin を押す 2. ブラウザにWordPressのログイン画⾯が表⽰されたら、ID: admin、パスワード: passwordでログイン
3. Settings にある General を開く 4. Site Language を ⽇本語 にする 5. Timezone を Tokyo にする 6. 画⾯の下のほうにある Save Changes を押す 7. ダッシュボードが⽇本語で表⽰されたらOK
記事の投稿 1. ダッシュボードの左メニューの 投稿 にある 新規追加 を押す 2. 編集画⾯が表⽰されたら、タイトルと本⽂を⼊⼒する 3.
編集画⾯右上の プレビュー で⽂章やデザインが正しいかを確認する 4. 問題がなければ、編集画⾯右上の 公開する を押す
テーマの変更 1. ダッシュボードの左メニューにある 外観 を押す 2. テーマ⼀覧画⾯が表⽰される 3. 変更したいテーマにカーソルを乗せて、 テーマの詳細
と表⽰されたらそれを押す 4. ライブプレビュー を押すと⾒た⽬が確認できる 5. 確定だったら 有効化 を押す
テーマの追加 1. ダッシュボードの左メニューにある 外観 を押す 2. テーマ⼀覧画⾯の左上にある 新規追加 を押す 3.
WordPress.comで公開されているテーマが表⽰される 4. 好きなテーマにカーソルを乗せて、 テーマの詳細 と表⽰されたらそれを押す 5. 左上にある インストール を押すと、インストールがはじまる 6. インストールが完了すると インストール が 有効化 になる。 有効化 を押す 7. サイトを表⽰ リンクを押して、変わったかを確認する
プラグインの追加 1. ダッシュボードの左メニューにある プラグイン を押す 2. プラグイン⼀覧画⾯の左上にある 新規追加 を押す 3.
左上にある インストール を押すと、インストールがはじまる 4. インストールが完了すると インストール が 有効化 になる。 有効化 を押す
ユーザの追加 1. ダッシュボードの左メニューにある ユーザー を押す 2. ユーザー⼀覧画⾯の左上にある 新規追加 を押す 3.
新規ユーザーの追加画⾯で、ユーザー情報の⼊⼒をする 4. 画⾯下部の 新規ユーザーを追加 を押す
WordPressであった怖い話から学ぶカスタマイズ 事例1 突然、ページが真っ⽩に WordPress本体の更新通知 本体の更新を⾏う ページが真っ⽩に!
何が起きたのか︖ 原因: 表⽰を⾼速化するためのプラグインとWordPressの相性が悪くなった 対処: FTPクライアント経由で問題のプラグインを直接、削除した 予防策: データベース関係の⾼速化プラグインの導⼊を避ける
事例2 レイアウトが崩れる ファイルを圧縮・最適化し、サイトの表⽰を⾼速化するプラグインをインストー ル サイトのレイアウトが崩れた!
何が起きたのか︖ 原因: レイアウトに関連するファイルの読み込みタイミングがずれた 対処: プラグインの設定を変更した
カスタマイズのコツ テーマやプラグインはWordPress本体の機能を利⽤して成り⽴っている WordPress本体のアップデートに対応しているものを選ぶ 公式サイトのライブラリに更新⽇付と対応バージョンが書かれている
利⽤するプラグインやテーマの数は少なくする ⼤量に⼊れると動作の確認やトラブルが起きたときに絞り込みが⼤変なため
実験環境で試す 本番以外にWordPressが動く環境を⽤意して、そちらで試す Instant WP(今⽇使ったソフト) XAMPP 各種仮想マシン さくらのレンタルサーバのステージング環境
まとめ サイトの更新頻度が⾼い場合は、CMSの利⽤を検討しよう 強⼒で便利な道具だけど、使い⽅には気を付けよう