WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
23 likes25,814 views
WordCamp Tokto 2015で登壇したセッションのスライドです。
![/＼＿＿_／ヽ ヽ
／ ::::::::::::::::＼ つ
. | ,,--- ---､ .:::| わ
| ､_(o)_,: _(o)_, :::|ぁぁ
. | ::< .::|あぁ
＼ /( [三] )ヽ ::／ああ
／｀ー-----―´＼ぁあ](https://image.slidesharecdn.com/wordcamptokyo2015v4-151103145843-lva1-app6892/85/WP-CLI-WordPress-10-99-320.jpg)
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
- 1. WordCamp Tokyo 2015 WP-CLIとWordPress公式ディレクトリ を活用した爆速サイト構築術 ー インストールからデザイン、ページ作成までを10分で！ー
- 2. キタジマタカシ inc2734 フリーランス Web デザイナー / プログラマー モンキーレンチ - http://2inc.org WordBench 長崎 モデレーター
- 3. WordCamp Kansai 2015 実行委員、スピーカー WordPress で行う継続的インテグレーション のススメ
- 6. このセッションの内容 • 予算が少ない、納期が短いなどの理由で、 とにかく早くサイトを立ち上げる必要が あるときに、どういう方法があるのかを知る • 黒い画面はこわくない • 公式ディレクトリのテーマ・プラグインは便利
- 7. WordCamp Tokyo 2015 WP-CLIとWordPress公式ディレクトリ を活用した爆速サイト構築術 ー インストールからデザイン、ページ作成までを10分で！ー
- 8. こんなサイト 作りたい。 • カフェのサイトを 想定 • サイト構成： - トップページ - ブログ - お問い合わせ • 写真は PAKUTASO さんか らお借りしました。
- 9. 前提条件、作業内容 • 原稿、写真素材は用意しておいたものを使用。 • WordPress のダウンロード、インストールから行う。 • パーマリンク、メディアサイズ、固定フロントページの設定 などの初期設定を行う。 • トップページのコーディング、ブログ、お問い合わせフォーム の設置。 • これを10分でやりたい。
- 10. 00 爆速構築術の説明に入る前に
- 13. いわゆる、黒い画面
- 15. 黒い画面、苦手ですか？
- 19. とりあえずコレだけは 覚えたほうが良いコマンド • SSH でサーバーにログイン ssh user@example.com • ディレクトリの移動 cd /var/www/html • 現在のディレクトリのパスを表示 pwd • 現在のディレクトリの中身を表示 ls -al
- 20. では本題
- 23. よくある WordPress 環境の構築 wordpress.org から zip をダウンロード
- 24. よくある WordPress 環境の構築 wordpress.org から zip をダウンロード 展開して FTP でサーバーにアップロード
- 25. よくある WordPress 環境の構築 wordpress.org から zip をダウンロード 展開して FTP でサーバーにアップロード データベースの情報などを入力
- 26. よくある WordPress 環境の構築 wordpress.org から zip をダウンロード ログインしてパーマリンクの設定 展開して FTP でサーバーにアップロード データベースの情報などを入力
- 27. よくある WordPress 環境の構築 wordpress.org から zip をダウンロード ログインしてパーマリンクの設定 展開して FTP でサーバーにアップロード サイト説明文の設定 データベースの情報などを入力
- 28. よくある WordPress 環境の構築 wordpress.org から zip をダウンロード ログインしてパーマリンクの設定 サンプルページを削除 展開して FTP でサーバーにアップロード サイト説明文の設定 データベースの情報などを入力
- 29. よくある WordPress 環境の構築 wordpress.org から zip をダウンロード ログインしてパーマリンクの設定 サンプルページを削除 ホームとブログ用の固定ページを作成 してページの割り当て設定 展開して FTP でサーバーにアップロード サイト説明文の設定 データベースの情報などを入力
- 30. よくある WordPress 環境の構築 wordpress.org から zip をダウンロード ログインしてパーマリンクの設定 メディアサイズの設定 サンプルページを削除 ホームとブログ用の固定ページを作成 してページの割り当て設定 展開して FTP でサーバーにアップロード サイト説明文の設定 データベースの情報などを入力
- 31. よくある WordPress 環境の構築 wordpress.org から zip をダウンロード ログインしてパーマリンクの設定 メディアサイズの設定 サンプルページを削除 ホームとブログ用の固定ページを作成 してページの割り当て設定 必要なプラグインのインストール 展開して FTP でサーバーにアップロード サイト説明文の設定 データベースの情報などを入力
- 32. はい、10分超えました
- 33. WordPress インストール・初期設定 • WordPress のインストールや初期設定は 意外にやることが多く時間がかかります。 • 画面を行ったり来たりするのは時間がかかる ので、一気にコマンドで処理するのが効率的 です。
- 34. これを wordpress.org から zip をダウンロード ログインしてパーマリンクの設定 メディアサイズの設定 サンプルページを削除 ホームとブログ用の固定ページを作成 してページの割り当て設定 必要なプラグインのインストール 展開して FTP でサーバーにアップロード サイト説明文の設定 データベースの情報などを入力
- 35. こうする • サーバーに SSH ( 黒い画面 ) でログイン • WordPress のディレクトリに移動 ( cd ) • コマンドをコピペして実行
- 37. WP-CLI • サーバー（もしくはローカル）にインストールして 使用します。 • よく使うコマンドをメモ帳などに書いておけば、コピペ して実行するだけでOK。だから全てを覚える必要はあ りません。 • 一度用意しておけば、次にサイトを作るときもほとんど そのまま流用することができます。
- 38. WP-CLI • WP-CLI は WordPress が設置された ディレクトリでしか実行できません。 • サーバーにログインし ( ssh user@example.com ) 、 WordPress のディレクトリに移動 ( cd /var/www/html ) してから使います。
- 39. WP-CLI の基本的な構成 wp option update posts_per_page 10 wp plugin install mw-wp-form --activate オプションを 更新！ 表示件数を 10件に プラグインを インストール！ オプションMW WP Form を
- 41. よく使う WP-CLI のコマンド • WordPress のダウンロード wp core download --locale=ja • wp-config.php を作成 wp core config --dbname=wordpress --dbuser=wordpress --dbpass=password --dbhost=localhost --skip-check • wp-config.php をもとにデータベースを作成 wp db create このあたりを必要に 応じて変更
- 42. よく使う WP-CLI のコマンド • WordPress のダウンロード wp core download --locale=ja • wp-config.php を作成 wp core config --dbname=wordpress --dbuser=wordpress --dbpass=password --dbhost=localhost --skip-check • wp-config.php をもとにデータベースを作成 wp db create このあたりを必要に 応じて変更 いろいろハマりやすいのでデータベースは 事前に作っておくことをオススメします。
- 43. よく使う WP-CLI のコマンド • WordPress のインストール wp core install --url=http://example.com/ --title=サイト名 -- admin_user=admin --admin_password=パスワード -- admin_email=admin@example.com • テーマのインストール・有効化 wp theme install twentyfifteen --activate • プラグインのインストール有効化 wp plugin install smart-custom-fields mw-wp-form --activate このあたりを必要に 応じて変更
- 44. よく使う WP-CLI のコマンド • 投稿数の設定 wp option update posts_per_page 8 • キャッチフレーズの設定 wp option update blogdescription 'キャッチフレーズ' • パーマリンクの設定 wp rewrite structure '/blog/%year%/%monthnum%/ %day%/%post_id%/' このあたりを必要に 応じて変更
- 45. よく使う WP-CLI のコマンド WordPress で Web サイトを制作する場合、 フロントページの設定が必要です。
- 46. よく使う WP-CLI のコマンド • 固定フロントページの設定 wp option update show_on_front 'page' • トップページ用ページの作成 wp option update page_on_front $(wp post create -- post_type=page --post_title=Home —post_status=publish -- porcelain) • ブログ用ページの作成 wp option update page_for_posts $(wp post create -- post_type=page --post_title=Blog --post_status=publish --porcelain)
- 47. よく使う WP-CLI のコマンド • はじめに言いましたが、これらのコマンドは いちいち覚える必要はありません。 • メモ帳などに保存しておいて、必要なときに コピペで実行すれば大丈夫です。 • でも覚えちゃうともっと楽になります^^
- 48. WP-CLI のインストール
- 49. WP-CLI のインストール • WP-CLI はレンタルサーバーにもインストール することができます。 • が、コマンドを実行するツールなので、SSH が使えるサーバーでないといけません。
- 50. WP-CLI のインストール • レンタルサーバに『WP-CLI』をサクっと入れる シェルスクリプト作ってみたよ http://www.tecking.org/archives/4169 • もちろんお使いのパソコンにインストールもできる ので、ローカルで開発してアップしてもOK http://wp-cli.org/
- 52. その他の便利な WP-CLI のコマンド • データベースのエクスポート wp db export • データベースのインポート wp db import ファイル名
- 53. その他の便利な WP-CLI のコマンド • データベースの置換 ( シリアライズ対応！) wp search-replace http://example.local http://example.com • メディアライブラリの画像の再生成 wp media regenerate
- 54. その他の便利な WP-CLI のコマンド • コアのアップデート wp core update • テーマのアップデート wp theme update --all • プラグインのアップデート wp plugin update --all
- 55. 注意事項 • 今回は WP-CLI でできることをお伝えしたかっ たのでサーバーで直接作業する想定でお話し ています。 • これだとデータがサーバー上にしかなく、も しものときに超こわいので、本来はローカル で作業してアップロードすることをオススメ します。
- 56. ここまでのまとめ • WordPress の立ち上げからどんどん自動化。 • WP-CLI のよく使うコマンドはメモ帳などに保 存してくとコピペですぐ実行することができ て便利です。
- 57. 02 テーマ制作編
- 58. よくあるテーマ制作の流れ
- 62. よくあるテーマ制作の流れ Photoshop などでページカンプを作成 style.css、index.php、front-page.php、home.php、 archive.php、single.php、page.php、functions.php … ページカンプをもとにコーディング コーディングしたデータをもとに WordPress のテーマを作成
- 63. よくあるテーマ制作の流れ Photoshop などでページカンプを作成 style.css、index.php、front-page.php、home.php、 archive.php、single.php、page.php、functions.php … ページカンプをもとにコーディング コーディングしたデータをもとに WordPress のテーマを作成 WordPress に必須の関数や CSS を定義
- 64. 10分、無理。
- 67. WordPress 公式テーマディレクトリ • レビュワーの厳しいチェックを受け、承認され たテーマのみが掲載、配布されています。 • プラグインテリトリー。テーマはプラグインの テリトリーを犯してはいけないというルール。 • つまり、余計なことをしないシンプルな仕組み のテーマが多くベースとして使いやすい。
- 68. 例えば、Habakiri
- 70. Habakiri • デモをするのに慣れているテーマのほうが失敗確率 が減るので、今回は自分のテーマでご説明します。 • Habakiri は子テーマをストレス無く作りたいという 趣旨で開発したテーマです。 • 単体ではそれほどデザイン性は高くありませんが子 テーマからデザインがカスタマイズしやすい設計に なっています。
- 72. カスタマイザー • CSS やテンプレートを編集せずに色の変更やレイアウ トの変更ができる WordPress の機能のこと。 • そのテーマがカスタマイザーに対応している場合は 「外観 > カスタマイザー」というメニューが表示され ます。 • WordPress 4.3 からは管理バーからもアクセス可能に！
- 77. ページテンプレート • 固定ページのレイアウトを選択できる機能のこと。 • Habakiri には初めから7つのページテンプレートが 用意されています。 • 用意されたテンプレートに適当なものがあれば わざわざレイアウトの変更のためだけに子テーマを 作ったり CSS を変更する必要がなくなります。
- 80. フックとは • 特定の文字列を書き換えたり、特定の位置に任意の 処理やHTMLを挿入したりできる仕組みのこと。 • 任意の場所に HTML を追加したい場合、フックを使 えばテンプレートを上書き・編集しなくても HTML を追加できます。 • Habakiri にはたくさんのフックが用意されています。
- 99. /＼＿＿_／ヽ ヽ ／ ::::::::::::::::＼ つ . | ,,--- ---､ .:::| わ | ､_(o)_,: _(o)_, :::|ぁぁ . | ::< .::|あぁ ＼ /( [三] )ヽ ::／ああ ／｀ー-----―´＼ぁあ
- 100. ここまでのまとめ • 予算が少ない、納期が短いなどの理由で とにかく早くサイトを立ち上げる必要があるときに デザイン・コーディング・テーマ化を1からやる 余裕はありません。 • 既にある程度できあがっている + デザインを カスタマイズしたり機能を拡張しやすいテーマを 有効活用しましょう。
- 101. 03 コンテンツコーディング編
- 103. • デフォルトのスタイルを書いて^ω^
- 105. • デフォルトのスタイルを書いて • それぞれのパーツのスタイルを書いて • 様々なデバイスでちゃんと表示されるように ^ω^ ^_^ ˙_˙ ;
- 106. • デフォルトのスタイルを書いて • それぞれのパーツのスタイルを書いて • 様々なデバイスでちゃんと表示されるように • 全てを一からコツコツと ^ω^ ^_^ ˙_˙ ; -_-
- 107. • デフォルトのスタイルを書いて • それぞれのパーツのスタイルを書いて • 様々なデバイスでちゃんと表示されるように • 全てを一からコツコツと • そして突如発生する の不具合… ^ω^ ^_^ ˙_˙ ; -_- > < ロ
- 108. • デフォルトのスタイルを書いて • それぞれのパーツのスタイルを書いて • 様々なデバイスでちゃんと表示されるように • 全てを一からコツコツと • そして突如発生する の不具合… • 応急処置的な修正で更なる闇へ… ^ω^ ^_^ ˙_˙ ; -_- > < ロ ˙-˙
- 110. CSS フレームワーク
- 111. 例えば、Bootstrap
- 112. Bootstrap • Twitter が開発している CSS フレームワーク。 • 世界中で使われているのでオレオレ CSS より 情報が手に入りやすくメンテナンス性も高い。 • デフォルトのスタイリング、ボタンなどの 基本的なパーツのスタイルなどが っている。
- 113. Bootstrap • マルチデバイスに対応したカラム分けを行う グリッドシステムが超便利。 • ベースを Bootstrap で作れば、あとはスタイルを調整 したり、不足しているスタイルを加えていけば OK。 • Habakiri は Bootstrap ベースなので、何も意識せずに Bootstrap を使用することができます。
- 115. <div class= container > <div class= row > <div class= col-md-4 > 1カラム目 </div> <div class= col-md-4 > 2カラム目 </div> <div class= col-md-4 > 3カラム目 </div> </div> </div> Bootstrap col-xs-* スマホサイズ以上のとき col-sm-* タブレットサイズ以上のとき col-md-* PCサイズ以上のとき col-lg-* ワイドPCサイズ以上のとき に * 列のグリッド幅を使うか
- 117. Bootstrap に関するよくある勘違い • Bootstrap はデザインができないプログラマー が使うツールだよねー
- 118. Bootstrap に関するよくある勘違い • Bootstrap はデザインができないプログラマー が使うツールだよねー 間違いです。 あくまで工数を減らすためのツールという認識。 CSS が苦手というデザイナーさんにおいても 便利なツールだと思います。
- 121. ここまでのまとめ • CSS フレームワークを使えば、自分で1から CSS を書かなくても、ルールにそって HTML を書いていくだけでおおまかなレイアウトが 完成する。 • あとは調整する CSS を書き足していけばOK
- 122. 04 やってみます
- 123. こんなサイト 作りたい。 • カフェのサイトを 想定 • サイト構成： - トップページ - ブログ - お問い合わせ • 写真は PAKUTASO さんか らお借りしました。
- 124. 前提条件、作業内容 • 原稿、写真素材は用意しておいたものを使用。 • WordPress のダウンロード、インストールから行う。 • パーマリンク、メディアサイズ、固定フロントページの設定などの初期 設定を行う。 • トップページのコーディング、ブログ、お問い合わせフォームの設置。 • これを10分でやりたい。 • ( ネット上で一発勝負は危険なので、今回はローカルでやります… )
- 126. 10分、無理。
- 127. では、やってみます
- 129. 実際のところ • 実運用するには、OGP の設定、Twitter Card の設定、Analytics の設定とかも必要なので、 実際にはもう少し時間がかかります。 • そのあたりもプラグインでちゃちゃっとやる と楽です。
- 130. さいごのまとめ • 何度も繰り返す作業、面倒な作業はとにかく 自動化してもっと有意義なことに時間を使い ましょう！ • コマンドは覚えきれなくても、コピペ実行す れば大丈夫。覚えればもっと早くなります。 • プラグインだけなく、テーマも使ってみてね！