Downloaded 41 times
![/＼＿＿_／ヽ ヽ
／ ::::::::::::::::＼ つ
. | ,,--- ---､ .:::| わ
| ､_(o)_,: _(o)_, :::|ぁぁ
. | ::< .::|あぁ
＼ /( [三] )ヽ ::／ああ
／｀ー-----―´＼ぁあ](https://image.slidesharecdn.com/wordcamptokyo2015v4-151103145843-lva1-app6892/75/WP-CLI-WordPress-10-99-2048.jpg)
Uploaded byタカシ キタジマ
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WordCamp Tokto 2015で登壇したセッションのスライドです。
More Related Content
Similar to WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
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.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. とりあえずコレだけは 覚えたほうが良いコマンド • SSH でサーバーにログイン ssh[email protected] • ディレクトリの移動 cd /var/www/html • 現在のディレクトリのパスを表示 pwd • 現在のディレクトリの中身を表示 ls -al
- 20.
- 21.
- 22.
- 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.
- 33. WordPress インストール・初期設定 • WordPressのインストールや初期設定は 意外にやることが多く時間がかかります。 • 画面を行ったり来たりするのは時間がかかる ので、一気にコマンドで処理するのが効率的 です。
- 34. これを wordpress.org から zipをダウンロード ログインしてパーマリンクの設定 メディアサイズの設定 サンプルページを削除 ホームとブログ用の固定ページを作成 してページの割り当て設定 必要なプラグインのインストール 展開して FTP でサーバーにアップロード サイト説明文の設定 データベースの情報などを入力
- 35. こうする • サーバーに SSH( 黒い画面 ) でログイン • WordPress のディレクトリに移動 ( cd ) • コマンドをコピペして実行
- 36.
- 37. WP-CLI • サーバー（もしくはローカル）にインストールして 使用します。 • よく使うコマンドをメモ帳などに書いておけば、コピペ して実行するだけでOK。だから全てを覚える必要はあ りません。 •一度用意しておけば、次にサイトを作るときもほとんど そのまま流用することができます。
- 38. WP-CLI • WP-CLI はWordPress が設置された ディレクトリでしか実行できません。 • サーバーにログインし ( ssh [email protected] ) 、 WordPress のディレクトリに移動 ( cd /var/www/html ) してから使います。
- 39. WP-CLI の基本的な構成 wp optionupdate posts_per_page 10 wp plugin install mw-wp-form --activate オプションを 更新！ 表示件数を 10件に プラグインを インストール！ オプションMW WP Form を
- 40.
- 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=パスワード -- [email protected] • テーマのインストール・有効化 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.
- 49. WP-CLI のインストール • WP-CLIはレンタルサーバーにもインストール することができます。 • が、コマンドを実行するツールなので、SSH が使えるサーバーでないといけません。
- 50. WP-CLI のインストール • レンタルサーバに『WP-CLI』をサクっと入れる シェルスクリプト作ってみたよ http://www.tecking.org/archives/4169 •もちろんお使いのパソコンにインストールもできる ので、ローカルで開発してアップしてもOK http://wp-cli.org/
- 51.
- 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.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63. よくあるテーマ制作の流れ Photoshop などでページカンプを作成 style.css、index.php、front-page.php、home.php、 archive.php、single.php、page.php、functions.php … ページカンプをもとにコーディング コーディングしたデータをもとにWordPress のテーマを作成 WordPress に必須の関数や CSS を定義
- 64.
- 65.
- 66.
- 67. WordPress 公式テーマディレクトリ • レビュワーの厳しいチェックを受け、承認され たテーマのみが掲載、配布されています。 •プラグインテリトリー。テーマはプラグインの テリトリーを犯してはいけないというルール。 • つまり、余計なことをしないシンプルな仕組み のテーマが多くベースとして使いやすい。
- 68.
- 69.
- 70. Habakiri • デモをするのに慣れているテーマのほうが失敗確率 が減るので、今回は自分のテーマでご説明します。 • Habakiriは子テーマをストレス無く作りたいという 趣旨で開発したテーマです。 • 単体ではそれほどデザイン性は高くありませんが子 テーマからデザインがカスタマイズしやすい設計に なっています。
- 71.
- 72. カスタマイザー • CSS やテンプレートを編集せずに色の変更やレイアウ トの変更ができるWordPress の機能のこと。 • そのテーマがカスタマイザーに対応している場合は 「外観 > カスタマイザー」というメニューが表示され ます。 • WordPress 4.3 からは管理バーからもアクセス可能に！
- 76.
- 77. ページテンプレート • 固定ページのレイアウトを選択できる機能のこと。 • Habakiriには初めから7つのページテンプレートが 用意されています。 • 用意されたテンプレートに適当なものがあれば わざわざレイアウトの変更のためだけに子テーマを 作ったり CSS を変更する必要がなくなります。
- 79.
- 80. フックとは • 特定の文字列を書き換えたり、特定の位置に任意の 処理やHTMLを挿入したりできる仕組みのこと。 • 任意の場所にHTML を追加したい場合、フックを使 えばテンプレートを上書き・編集しなくても HTML を追加できます。 • Habakiri にはたくさんのフックが用意されています。
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99. /＼＿＿_／ヽ ヽ ／ ::::::::::::::::＼ つ . | ,,--- ---､ .:::| わ | ､_(o)_,: _(o)_, :::|ぁぁ . | ::< .::|あぁ ＼ /( [三] )ヽ ::／ああ ／｀ー-----―´＼ぁあ
- 100. ここまでのまとめ • 予算が少ない、納期が短いなどの理由で とにかく早くサイトを立ち上げる必要があるときに デザイン・コーディング・テーマ化を1からやる 余裕はありません。 • 既にある程度できあがっている+ デザインを カスタマイズしたり機能を拡張しやすいテーマを 有効活用しましょう。
- 101.
- 103.
- 104.
- 105. • デフォルトのスタイルを書いて • それぞれのパーツのスタイルを書いて •様々なデバイスでちゃんと表示されるように ^ω^ ^_^ ˙_˙ ;
- 106. • デフォルトのスタイルを書いて • それぞれのパーツのスタイルを書いて •様々なデバイスでちゃんと表示されるように • 全てを一からコツコツと ^ω^ ^_^ ˙_˙ ; -_-
- 107. • デフォルトのスタイルを書いて • それぞれのパーツのスタイルを書いて •様々なデバイスでちゃんと表示されるように • 全てを一からコツコツと • そして突如発生する の不具合… ^ω^ ^_^ ˙_˙ ; -_- > < ロ
- 108. • デフォルトのスタイルを書いて • それぞれのパーツのスタイルを書いて •様々なデバイスでちゃんと表示されるように • 全てを一からコツコツと • そして突如発生する の不具合… • 応急処置的な修正で更なる闇へ… ^ω^ ^_^ ˙_˙ ; -_- > < ロ ˙-˙
- 109.
- 110.
- 111.
- 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サイズ以上のとき に * 列のグリッド幅を使うか
- 116.
- 117. Bootstrap に関するよくある勘違い • Bootstrapはデザインができないプログラマー が使うツールだよねー
- 118. Bootstrap に関するよくある勘違い • Bootstrapはデザインができないプログラマー が使うツールだよねー 間違いです。 あくまで工数を減らすためのツールという認識。 CSS が苦手というデザイナーさんにおいても 便利なツールだと思います。
- 119.
- 120.
- 121. ここまでのまとめ • CSS フレームワークを使えば、自分で1から CSSを書かなくても、ルールにそって HTML を書いていくだけでおおまかなレイアウトが 完成する。 • あとは調整する CSS を書き足していけばOK
- 122.
- 123. こんなサイト 作りたい。 • カフェのサイトを 想定 • サイト構成： -トップページ - ブログ - お問い合わせ • 写真は PAKUTASO さんか らお借りしました。
- 124. 前提条件、作業内容 • 原稿、写真素材は用意しておいたものを使用。 • WordPressのダウンロード、インストールから行う。 • パーマリンク、メディアサイズ、固定フロントページの設定などの初期 設定を行う。 • トップページのコーディング、ブログ、お問い合わせフォームの設置。 • これを10分でやりたい。 • ( ネット上で一発勝負は危険なので、今回はローカルでやります… )
- 125.
- 126.
- 127.
- 128.
- 129. 実際のところ • 実運用するには、OGP の設定、TwitterCard の設定、Analytics の設定とかも必要なので、 実際にはもう少し時間がかかります。 • そのあたりもプラグインでちゃちゃっとやる と楽です。
- 130.