WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術ーインストールからデザイン、ページ作成までを10分でー

WordCamp Tokyo 2015

WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術

ーインストールからデザイン、ページ作成までを10分で！ー

キタジマタカシ

inc2734

フリーランス Web デザイナー / プログラマー

モンキーレンチ - http://2inc.org WordBench 長崎モデレーター

WordCamp Kansai 2015

実行委員、スピーカーWordPress で行う継続的インテグレーションのススメ

このセッションの内容

• 予算が少ない、納期が短いなどの理由で、

とにかく早くサイトを立ち上げる必要があるときに、どういう方法があるのかを知る

• 黒い画面はこわくない

• 公式ディレクトリのテーマ・プラグインは便利

WordCamp Tokyo 2015

WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術

ーインストールからデザイン、ページ作成までを10分で！ー

こんなサイト作りたい。• カフェのサイトを想定

• サイト構成：- トップページ- ブログ- お問い合わせ

• 写真は PAKUTASO さんからお借りしました。

前提条件、作業内容

• 原稿、写真素材は用意しておいたものを使用。

• WordPress のダウンロード、インストールから行う。

• パーマリンク、メディアサイズ、固定フロントページの設定などの初期設定を行う。

• トップページのコーディング、ブログ、お問い合わせフォームの設置。

• これを10分でやりたい。

00爆速構築術の説明に入る前に

10分でサイトを作るには自動化が必須です。

自動化するには黒い画面でコマンドを実行しなければ

なりません。

いわゆる、黒い画面

ローカル、サーバーの様々な操作をコマンドで実行するための画面

( コマンドプロンプト、ターミナル、Putty など )

黒い画面、苦手ですか？

今日お話することはぜんぜん難しくありません。

コマンドの良いところはコピペで実行できることです。

ぜひ黒い画面だからと引かずに軽い気持ちでお聞きください。

とりあえずコレだけは覚えたほうが良いコマンド• SSH でサーバーにログイン

ssh [email protected]

• ディレクトリの移動cd /var/www/html

• 現在のディレクトリのパスを表示 pwd

• 現在のディレクトリの中身を表示 ls -al

では本題

01WordPress インストール

初期設定編

よくある WordPress 環境の構築

よくある WordPress 環境の構築wordpress.org から zip をダウンロード


展開して FTP でサーバーにアップロード



データベースの情報などを入力


ログインしてパーマリンクの設定






サイト説明文の設定




サンプルページを削除






サンプルページを削除

ホームとブログ用の固定ページを作成してページの割り当て設定






メディアサイズの設定サンプルページを削除









必要なプラグインのインストール




はい、10分超えました

WordPress インストール・初期設定

• WordPress のインストールや初期設定は意外にやることが多く時間がかかります。

• 画面を行ったり来たりするのは時間がかかるので、一気にコマンドで処理するのが効率的です。

これをwordpress.org から zip をダウンロード




必要なプラグインのインストール




こうする

• サーバーに SSH ( 黒い画面 ) でログイン

• WordPress のディレクトリに移動 ( cd )

• コマンドをコピペして実行

WordPress をコマンドで簡単に操作するためのツール

WP-CLI

WP-CLI

• サーバー（もしくはローカル）にインストールして使用します。

• よく使うコマンドをメモ帳などに書いておけば、コピペして実行するだけでOK。だから全てを覚える必要はありません。

• 一度用意しておけば、次にサイトを作るときもほとんどそのまま流用することができます。

WP-CLI

• WP-CLI は WordPress が設置されたディレクトリでしか実行できません。

• サーバーにログインし( ssh [email protected] ) 、WordPress のディレクトリに移動 ( cd /var/www/html ) してから使います。

WP-CLI の基本的な構成

wp option update posts_per_page 10

wp plugin install mw-wp-form --activate

オプションを更新！表示件数を 10件に

プラグインをインストール！オプションMW WP Form を

よく使う 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

このあたりを必要に応じて変更


• 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


いろいろハマりやすいのでデータベースは事前に作っておくことをオススメします。


• 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



• 投稿数の設定wp option update posts_per_page 8

• キャッチフレーズの設定wp option update blogdescription 'キャッチフレーズ'

• パーマリンクの設定wp rewrite structure '/blog/%year%/%monthnum%/%day%/%post_id%/'


よく使う WP-CLI のコマンドWordPress で Web サイトを制作する場合、フロントページの設定が必要です。


• 固定フロントページの設定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)


• はじめに言いましたが、これらのコマンドはいちいち覚える必要はありません。

• メモ帳などに保存しておいて、必要なときにコピペで実行すれば大丈夫です。

• でも覚えちゃうともっと楽になります^^

WP-CLI のインストール


• WP-CLI はレンタルサーバーにもインストールすることができます。

• が、コマンドを実行するツールなので、SSH が使えるサーバーでないといけません。


• レンタルサーバに『WP-CLI』をサクっと入れるシェルスクリプト作ってみたよhttp://www.tecking.org/archives/4169

• もちろんお使いのパソコンにインストールもできる

ので、ローカルで開発してアップしてもOK

http://wp-cli.org/

http://www.tecking.org/archives/4169

http://wp-cli.org/

その他の便利なWP-CLI のコマンド

その他の便利な WP-CLI のコマンド

• データベースのエクスポートwp db export

• データベースのインポートwp db import ファイル名


• データベースの置換 ( シリアライズ対応！)

wp search-replace http://example.local http://example.com

• メディアライブラリの画像の再生成wp media regenerate


• コアのアップデート wp core update

• テーマのアップデート wp theme update --all

• プラグインのアップデートwp plugin update --all

注意事項

• 今回は WP-CLI でできることをお伝えしたかったのでサーバーで直接作業する想定でお話しています。

• これだとデータがサーバー上にしかなく、もしものときに超こわいので、本来はローカルで作業してアップロードすることをオススメします。

ここまでのまとめ

• WordPress の立ち上げからどんどん自動化。

• WP-CLI のよく使うコマンドはメモ帳などに保存してくとコピペですぐ実行することができて便利です。

02 テーマ制作編

よくあるテーマ制作の流れ

よくあるテーマ制作の流れPhotoshop などでページカンプを作成


ページカンプをもとにコーディング



コーディングしたデータをもとに WordPress のテーマを作成


style.css、index.php、front-page.php、home.php、

archive.php、single.php、page.php、functions.php …




style.css、index.php、front-page.php、home.php、

archive.php、single.php、page.php、functions.php …



WordPress に必須の関数や CSS を定義

10分、無理。

テーマ制作

• 「デザインカンプの作成」「デザインカンプをもとにしたコーディング」「コーディングしたデータをもとにしたテーマの作成」それら全てが10分を超えてしまうものです。

• テーマ制作を早く行うためには、ある程度できあがったテーマをインストールして使う必要があります。

WordPress 公式テーマディレクトリにはそんなテーマがいっぱい！

WordPress 公式テーマディレクトリ

• レビュワーの厳しいチェックを受け、承認されたテーマのみが掲載、配布されています。

• プラグインテリトリー。テーマはプラグインのテリトリーを犯してはいけないというルール。

• つまり、余計なことをしないシンプルな仕組みのテーマが多くベースとして使いやすい。

例えば、Habakiri

Habakiri by キタジマタカシ

http://habakiri.2inc.org

http://habakiri.2inc.org

Habakiri

• デモをするのに慣れているテーマのほうが失敗確率が減るので、今回は自分のテーマでご説明します。

• Habakiri は子テーマをストレス無く作りたいという趣旨で開発したテーマです。

• 単体ではそれほどデザイン性は高くありませんが子テーマからデザインがカスタマイズしやすい設計になっています。

Habakiri の特徴 01 カスタマイザー

カスタマイザー

• CSS やテンプレートを編集せずに色の変更やレイアウトの変更ができる WordPress の機能のこと。

• そのテーマがカスタマイザーに対応している場合は

「外観 > カスタマイザー」というメニューが表示されます。

• WordPress 4.3 からは管理バーからもアクセス可能に！

Habakiri の特徴 02 ページテンプレート

ページテンプレート

• 固定ページのレイアウトを選択できる機能のこと。

• Habakiri には初めから7つのページテンプレートが用意されています。

• 用意されたテンプレートに適当なものがあれば

わざわざレイアウトの変更のためだけに子テーマを

作ったり CSS を変更する必要がなくなります。

Habakiri の特徴 03 たくさんのフック

フックとは

• 特定の文字列を書き換えたり、特定の位置に任意の

処理やHTMLを挿入したりできる仕組みのこと。

• 任意の場所に HTML を追加したい場合、フックを使えばテンプレートを上書き・編集しなくても HTML を追加できます。

• Habakiri にはたくさんのフックが用意されています。

habakiri_before_container

habakiri_before_header_contenthabakiri_before_container

habakiri_before_header_content

habakiri_after_header_content

habakiri_before_container



habakiri_before_container habakiri_before_global_navigation



habakiri_before_container habakiri_before_global_navigationhabakiri_after_global_navigation

habakiri_before_contents_content








habakiri_before_sidebar_widget_area






habakiri_before_title

habakiri_before_entry_meta













habakiri_after_title



habakiri_after_entry_meta








habakiri_before_entry_content










habakiri_before_entry_contenthabakiri_after_sidebar_widget_area











habakiri_after_entry_content















habakiri_after_contents_content















habakiri_before_footer_content













habakiri_before_footer_content

habakiri_after_footer_content





　　　　/＼＿＿_／ヽ　　ヽ　　／　　　　::::::::::::::::＼　つ　 . | 　,,---　　---､ .:::|　わ　　|　､_(o)_,:　 _(o)_,　:::|ぁぁ . 　 |　　　　::<　　　　 .::|あぁ　　＼　 /( [三] )ヽ ::／ああ　　　／｀ー-----―´＼ぁあ


• 予算が少ない、納期が短いなどの理由で

とにかく早くサイトを立ち上げる必要があるときに

デザイン・コーディング・テーマ化を1からやる余裕はありません。

• 既にある程度できあがっている + デザインを

カスタマイズしたり機能を拡張しやすいテーマを有効活用しましょう。

03 コンテンツコーディング編

• デフォルトのスタイルを書いて^ω^

• デフォルトのスタイルを書いて

• それぞれのパーツのスタイルを書いて

^ω^

^_^



• 様々なデバイスでちゃんと表示されるように

^ω^

^_^

˙_˙ ;




• 全てを一からコツコツと

^ω^

^_^

˙_˙ ;

-_-





• そして突如発生する謎の不具合…

^ω^

^_^

˙_˙ ;

-_-

> <ロ





• そして突如発生する謎の不具合…

• 応急処置的な修正で更なる闇へ…

^ω^

^_^

˙_˙ ;

-_-

> <ロ

˙-˙

ちゃんとした CSS を書くのは結構大変

しかも時間がかかる

CSS フレームワーク

例えば、Bootstrap

Bootstrap

• Twitter が開発している CSS フレームワーク。

• 世界中で使われているのでオレオレ CSS より情報が手に入りやすくメンテナンス性も高い。

• デフォルトのスタイリング、ボタンなどの基本的なパーツのスタイルなどが揃っている。

Bootstrap

• マルチデバイスに対応したカラム分けを行うグリッドシステムが超便利。

• ベースを Bootstrap で作れば、あとはスタイルを調整したり、不足しているスタイルを加えていけば OK。

• Habakiri は Bootstrap ベースなので、何も意識せずに

Bootstrap を使用することができます。

<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サイズ以上のとき

に

* 列のグリッド幅を使うか

Bootstrap に関するよくある勘違い


• Bootstrap はデザインができないプログラマーが使うツールだよねー


• Bootstrap はデザインができないプログラマーが使うツールだよねー

間違いです。あくまで工数を減らすためのツールという認識。CSS が苦手というデザイナーさんにおいても便利なツールだと思います。


• 似たようなデザインになってしまうので使うべきではない


• 似たようなデザインになってしまうので使うべきではない

間違いです。デザイン性の高いサイトでもバリバリ使われています。参考：http://expo.getbootstrap.com/


• CSS フレームワークを使えば、自分で1から

CSS を書かなくても、ルールにそって HTML

を書いていくだけでおおまかなレイアウトが完成する。

• あとは調整する CSS を書き足していけばOK

04 やってみます

こんなサイト作りたい。• カフェのサイトを想定

• サイト構成：- トップページ- ブログ- お問い合わせ

• 写真は PAKUTASO さんからお借りしました。

前提条件、作業内容• 原稿、写真素材は用意しておいたものを使用。

• WordPress のダウンロード、インストールから行う。

• パーマリンク、メディアサイズ、固定フロントページの設定などの初期設定を行う。

• トップページのコーディング、ブログ、お問い合わせフォームの設置。

• これを10分でやりたい。

• ( ネット上で一発勝負は危険なので、今回はローカルでやります… )

ちなみに、事前に試してみた結果

WordPress のダウンロード～初期設定

完了までに 30秒

～デザイン・サイト完成までで 11分35秒かかりました。

10分、無理。

では、やってみます

の前に、デモに使う WP-CLIコマンドをざっくり見てから

デモやります。

実際のところ

• 実運用するには、OGP の設定、Twitter Card

の設定、Analytics の設定とかも必要なので、実際にはもう少し時間がかかります。

• そのあたりもプラグインでちゃちゃっとやると楽です。

さいごのまとめ

• 何度も繰り返す作業、面倒な作業はとにかく自動化してもっと有意義なことに時間を使いましょう！

• コマンドは覚えきれなくても、コピペ実行すれば大丈夫。覚えればもっと早くなります。

• プラグインだけなく、テーマも使ってみてね！

Internet

WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー

WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術ーインストールからデザイン、ページ作成までを10分でー