2019/04/13開催した SBCamp. CMS をつかってみよう WordPressハンズオン！の資料です。
WordPressハンズオン話す⼈: ⼋⽊恵⼀
View Slide
お品書き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.comWordPress.com
神⼾芸術⼯科⼤学神⼾芸術⼯科⼤学 | 神⼾芸術⼯科⼤学はデザインとアートの総合⼤学です。質の⾼い芸術の感性を育てることを⽬標に全国トップクラスの環境を整えています。
TechCrunch JapanTechCrunch Japan - 最新のテクノロジーとスタートアップ・Webに関するニュースを配信するブログメディア
機能概要記事の投稿固定ページブログプラグインやテーマによるカスタマイズユーザ管理ユーザの追加・削除権限の設定
実際に使うにはWordPress.com を使うアカウントを作るだけで利⽤できるカスタマイズの⾃由度はやや下がるWordPressをサーバーにインストールするカスタマイズの⾃由度が⾼いレンタルサーバなどを⽤意する必要があるさくらのレンタルサーバ、ロリポップ︕レンタルサーバー、XREAなど
実践: WordPressの簡単な導⼊と設定今回は実験⽤にパソコン上にWordPressが動く環境を作るWebサイトとしては公開できない点に注意
インストール1. サイトからダウンロード2. ファイルを展開する3. 展開したフォルダの中にあるファイルを開くWindows: Start-InstantWP.batmacOS: Start-InstantWP2019/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の利⽤を検討しよう強⼒で便利な道具だけど、使い⽅には気を付けよう
cityagentsbc
mot_techtalk
cyberagentdevelopers
mode86
weblyzard
okazuki
okuzawats
oracle4engineer
globis_gdp
nabedge
line_developers
.png){kind=icon}
pharma_x_tech
gotok365
ufuk
lara
malarkey
brianwarren
lynnandtonic
sferik
tammielis
chrislema
kneath
swwweet
colly
deanohume