2014/712　クリエイティブコネクトというイベントで話したスライドです。

1. 一歩踏み込むWordPress
2014/07/12 CreativeConnect.

2. @maki_saki平野正樹
WebSkill
WordPressのテーマを作るのが趣味です。
流行りのもの 技 術とか 大 好きで す！
大阪でWEBディレクターとかやってます。
前職はデザイナしてたのでデザインからコーディングまでやれます。
もちろんWordPressでの開発もおちゃのこさいさいです。
アニメやフィギュアが 好きな おっさんで す。
好きなキャラクター は 初 音ミクさんで す。
一人で な んで もやるからよくぼっちしてます。
（コンチ）
自己紹介

3. Antenart
webclips
家デザ
nomad
figure
yamanobori
WordPressで個人的に作ったサイト

4. アジェンダ
本日の流れ
（1）自分色を出していこう！
初心者にオススメ・子テーマで作るWordPressテーマ
（2）うちの会社HPをWordPress化してほしい！
そんなときにオススメWordPressテーマ「_s」
（3）プログラマじゃなくてもはじめられる！
今日からできるセキュリティ対策
（4）WordPress案件の依頼をするとき、
コストを押さえれる（かもしれない）ポイント

5. 自分色を出していこう！
初心者にオススメ・子テーマで作るWordPressテーマ


6. 子テーマで作るWordPressテーマ
子テーマってなんだろう?
ベースとなる親を決めて
変更したい箇所だけ子テーマとして作る
親テーマ
データを共有
子テーマ
twentytwelve
child_theme

wp-content themes twentyfourteen

7. 子テーマで作るWordPressテーマ
つまりこんなに少なくて済みます。
親テーマ 子テーマ
twentytwelve child_theme

index.php
single.php
sidebar.php
header.php
functions.php
※最低限必要な
ファイル
footer.php
style.css

8. 子テーマで作るWordPressテーマ
どういうことか
子テーマを先に読み込んで
適応するファイルが無ければ親テーマから
自動的に持ってくる
親テーマ子テーマ
サーバー
端末

9. 子テーマで作るWordPressテーマ
子テーマの作り方
style.cssにテーマの名前、子テーマの名前を書くだけ。
これだけで子テーマして動作しますが
親テーマのCSSは読み込んでくれないので、
そこも設定します。
@import url(’../twentyeleven/style.css’
/*
Theme Name: Child （子テーマ名）
Template: twentyeleven （親テーマ名）
*/

10. 実演します。
子テーマで作るWordPressテーマ

11. 子テーマで作るWordPressテーマ
公式テーマにそのまま更新してしまうと、テーマをアップデートした時に
更新した処理が全部消えてしまうので,カスタマイズして作るときは
子テーマで作ったほうが安全
子テーマで作る隠されたメリット

12. うちの会社HPをWordPress化してほしい！
そんなときにオススメなWordPressテーマ「_s」


13. WordPressテーマ「_s」
HTMLで作られた自社サイトを
WordPressで作ってくれませんか？って依頼ありませんか？
HTML

14. WordPressテーマ「_s」
そんなときにオススメのテーマ
http://underscores.me/
Underscore【_S】（アンダースコア）

15. WordPressテーマ「_s」
ファイル構成
スタイルシート
関数
…基本のテーマスタイルシート。
…アラビア語など右から左に記述する言語用のスタイルシート。
…アイキャッチ、カスタムヘッダー、ウィジェットなど
よく使う便利機能をぎっしり搭載しています。
[ins] 内のファイルも関数などをまとめているものです。
「style.css 」
「rtl.css 」
「functions.php」

16. WordPressテーマ「_s」
ファイル構成
テンプレートファイル
…どのテンプレートファイルにも適合しない場合使われる。
…投稿用テンプレート。
…固定ページ用テンプレート。
…アーカイブ用テンプレート。
…検索結果用テンプレート
…404 Not Found テンプレート。
「index.php」
「single.php」
「page.php」
「archive.php」
「search.php」
「404.php」

17. WordPressテーマ「_s」
ファイル構成
モジュール系
ファイル LOOP系
sidebar.php
comments.php
content.php
content-single.php
content-page.php
no-results.php
header.php
footer.php

18. ナビゲーションはスマートフォン用に自動切り替えできるJSが入っている。
⇨レスポンシブデザインにも利用しやすい。
WordPressテーマ「_s」
_sの特徴
テーマ開発でよく使うPHPは初めから書いてある。
⇨時間短縮（PHPがわからなくてもある程度なんとかなる。）
レイアウトが全くされていないので、どんなデザインにも当てはめやすい。
⇨CSS、HTMLを汚さずに自分の好きなように書ける。
（PHPを使えないコーダーにも依頼しやすい）
ファイル数が最小限で作ってある。
⇨導入コストが低く誰にでも理解しやすい。
カスタマイズもしやすい。

19. WordPressテーマ「_s」
これまでの
作り方
開発の流れの変化
もらったHTMLにWordPress用のコードを書いていく
⇨WordPressの設計を考慮していないので、時間がかかる。
⇨書くPHPのコードが多いので、一定以上のスキルが求められる。
⇨WordPressの設計を考慮されているのでそこに元にHTMLを流しこむだけで済む
⇨書くPHPのコードが少なく、元あったCSSも流用しやすい。
_Sでの
作り方
_SにもらったHTMLのコードを書いていく

20. WordPressテーマ「_s」
_Sを使うメリット
WordPressに慣れていないコーダでも作業しやすい。
書くコード量が減るので時間短縮に繋げやすい。
どんなデザインにも利用しやすく、今後の財産にしやすい。
使い続けることで社内の作業フローを統一しやすい。
使っている人が多いので、共有しやすい。
※これらは一例で_Sを使って、得られるものを保証するものではありません。
制作環境・スキルによって効果に大小があります。






21. プログラマじゃなくてもはじめられる！
今日からできるセキュリティ対策


22. 今日からできるセキュリティ対策
セキュリティって何をすればいいんだろう。
極端な話をすれば、
侵入できる入り口を全部潰せば良いです
入り口例
など

アカウント サーバー パソコン

23. WordPressの最新版を使うようにする。
※現在自動更新はWordPress3.7から実装されています。
※自動と言ってもマイナーバージョンのアップデートしかしません。
設定をすればメジャーバージョンのアップグレードも自動でしてくれます。
 今日からできるセキュリティ対策

24. 複雑なパスワードを使う
IDの管理も気をつける

人が安易に想像できるような
パスワードは使わない。
共通で使っているパスワードは使わない。
※複雑なパスワードを使っても
付箋使ってメモしていたりして人に見られるような
状態にはしないように。
パスワードの流出は人からです。
パスワード生成サービス
http://www.luft.co.jp/cgi/randam.php


IDにadminは絶対使わない
今日からできるセキュリティ対策

25. 大手のサーバー会社を使う
 今日からできるセキュリティ対策

26. PCにセキュリティソフトを入れる
どんなにサーバー側で強固なセキュリティをしていても
別の入口から侵入できれば、意味がありません。
サーバー パソコン
 今日からできるセキュリティ対策

27. WordPressの公式が提供しているものを使う。
公式で公開されているものは第三者のチェックを受けているので
一定以上の品質が保証されています。
野良テーマ・プラグインを
使う場合は品質をチェックしてくれる。
プラグインがあります。
※チェックを通ったからと言っても絶対問題がないと
言うわけではないので、気休め程度にお考えください。

http://wordpress.org/themes/
【Theme-Check】
https://wordpress.org/plugins/theme-check/
【Plugin-Check】
https://wordpress.org/plugins/plugin-check/
今日からできるセキュリティ対策

28. プラグインでできるセキュリティ対策

【 force Email Login】 https://wordpress.org/plugins/force-email-login/
WordPressへのログイン方法をユーザー名からメールアドレスにして
ブルートフォースアタック対策する。
【 Limit Login Attempts】 https://wordpress.org/plugins/limit-login-attempts/
ログイン認証に複数回失敗すると、ログイン画面を一定時間ロックし、
管理画面への不正ログインを防ぎます。
【 Crazy Bone】 https://wordpress.org/plugins/crazy-bone/
管理画面にログインをしようとしたログを見ることができます。
今日からできるセキュリティ対策

29. バックアップについて
もしデータが改竄されてしまった場合バックアップがないと
どうしようもありません。
なので、バックアップもきちんと取りましょう。
復旧するのもセキュリティの一環です。
【VaultPress】
Liteプランで月5$
毎日バックアップを取ってくれる。
バックアップデータは30日保管
AUTOMATTIC社製




https://vaultpress.com/
今日からできるセキュリティ対策

30. WordPress案件の依頼をするとき、
コストを押さえれる（かもしれない）ポイント


31. コストを抑えられる（かもしれない）ポイント
WordPress設置代行費 初期設定費の節約
簡単インストールを使えば
1分とかかりません。
製作会社に依頼すると〇万円請求されたりします。
セキュリティ的にもFTPなどでアップするより
こちらのほうが安全です。
※少なくともパーミッションの設定に関して言えば



32. コストを抑えられる（かもしれない）ポイント
ベーステーマを選定する。

コーディング費用の節約
2600以上の公式テーマが配布されているので
そこから近いものを探す。
［オプション］ ［テーマ一覧］

33. ご清 聴ありがとうございました。
@maki_saki