一歩踏み込むWordPress

1,949 views

Published on

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

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,949
On SlideShare
0
From Embeds
0
Number of Embeds
560
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

一歩踏み込むWordPress

  1. 1. 一歩踏み込むWordPress 2014/07/12 CreativeConnect.
  2. 2. @maki_saki平野正樹 WebSkill WordPressのテーマを作るのが趣味です。 流行りのもの 技 術とか 大 好きで す! 大阪でWEBディレクターとかやってます。 前職はデザイナしてたのでデザインからコーディングまでやれます。 もちろんWordPressでの開発もおちゃのこさいさいです。 アニメやフィギュアが 好きな おっさんで す。 好きなキャラクター は 初 音ミクさんで す。 一人で な んで もやるからよくぼっちしてます。 (コンチ) 自己紹介
  3. 3. Antenart webclips 家デザ nomad figure yamanobori WordPressで個人的に作ったサイト
  4. 4. アジェンダ 本日の流れ (1)自分色を出していこう!   初心者にオススメ・子テーマで作るWordPressテーマ (2)うちの会社HPをWordPress化してほしい!   そんなときにオススメWordPressテーマ「_s」 (3)プログラマじゃなくてもはじめられる! 今日からできるセキュリティ対策 (4)WordPress案件の依頼をするとき、 コストを押さえれる(かもしれない)ポイント
  5. 5. 自分色を出していこう! 初心者にオススメ・子テーマで作るWordPressテーマ 
  6. 6. 子テーマで作るWordPressテーマ 子テーマってなんだろう? ベースとなる親を決めて 変更したい箇所だけ子テーマとして作る 親テーマ データを共有 子テーマ twentytwelve child_theme  wp-content themes twentyfourteen
  7. 7. 子テーマで作るWordPressテーマ つまりこんなに少なくて済みます。 親テーマ 子テーマ twentytwelve child_theme  index.php single.php sidebar.php header.php functions.php ※最低限必要な  ファイル footer.php style.css
  8. 8. 子テーマで作るWordPressテーマ どういうことか 子テーマを先に読み込んで 適応するファイルが無ければ親テーマから 自動的に持ってくる 親テーマ子テーマ サーバー 端末
  9. 9. 子テーマで作るWordPressテーマ 子テーマの作り方 style.cssにテーマの名前、子テーマの名前を書くだけ。 これだけで子テーマして動作しますが 親テーマのCSSは読み込んでくれないので、 そこも設定します。 @import url(’../twentyeleven/style.css’ /* Theme Name: Child (子テーマ名) Template: twentyeleven (親テーマ名) */
  10. 10. 実演します。 子テーマで作るWordPressテーマ
  11. 11. 子テーマで作るWordPressテーマ 公式テーマにそのまま更新してしまうと、テーマをアップデートした時に 更新した処理が全部消えてしまうので,カスタマイズして作るときは 子テーマで作ったほうが安全 子テーマで作る隠されたメリット
  12. 12. うちの会社HPをWordPress化してほしい! そんなときにオススメなWordPressテーマ「_s」 
  13. 13. WordPressテーマ「_s」 HTMLで作られた自社サイトを WordPressで作ってくれませんか?って依頼ありませんか? HTML
  14. 14. WordPressテーマ「_s」 そんなときにオススメのテーマ http://underscores.me/ Underscore【_S】(アンダースコア)
  15. 15. WordPressテーマ「_s」 ファイル構成 スタイルシート 関数 …基本のテーマスタイルシート。 …アラビア語など右から左に記述する言語用のスタイルシート。 …アイキャッチ、カスタムヘッダー、ウィジェットなど  よく使う便利機能をぎっしり搭載しています。 [ins] 内のファイルも関数などをまとめているものです。 「style.css 」 「rtl.css 」 「functions.php」
  16. 16. WordPressテーマ「_s」 ファイル構成 テンプレートファイル …どのテンプレートファイルにも適合しない場合使われる。 …投稿用テンプレート。 …固定ページ用テンプレート。 …アーカイブ用テンプレート。 …検索結果用テンプレート …404 Not Found テンプレート。 「index.php」 「single.php」 「page.php」 「archive.php」 「search.php」 「404.php」
  17. 17. WordPressテーマ「_s」 ファイル構成 モジュール系 ファイル LOOP系 sidebar.php comments.php content.php content-single.php content-page.php no-results.php header.php footer.php
  18. 18. ナビゲーションはスマートフォン用に自動切り替えできるJSが入っている。 ⇨レスポンシブデザインにも利用しやすい。 WordPressテーマ「_s」 _sの特徴 テーマ開発でよく使うPHPは初めから書いてある。 ⇨時間短縮(PHPがわからなくてもある程度なんとかなる。) レイアウトが全くされていないので、どんなデザインにも当てはめやすい。 ⇨CSS、HTMLを汚さずに自分の好きなように書ける。  (PHPを使えないコーダーにも依頼しやすい) ファイル数が最小限で作ってある。 ⇨導入コストが低く誰にでも理解しやすい。  カスタマイズもしやすい。
  19. 19. WordPressテーマ「_s」 これまでの 作り方 開発の流れの変化 もらったHTMLにWordPress用のコードを書いていく ⇨WordPressの設計を考慮していないので、時間がかかる。 ⇨書くPHPのコードが多いので、一定以上のスキルが求められる。 ⇨WordPressの設計を考慮されているのでそこに元にHTMLを流しこむだけで済む ⇨書くPHPのコードが少なく、元あったCSSも流用しやすい。 _Sでの 作り方 _SにもらったHTMLのコードを書いていく
  20. 20. WordPressテーマ「_s」 _Sを使うメリット WordPressに慣れていないコーダでも作業しやすい。 書くコード量が減るので時間短縮に繋げやすい。 どんなデザインにも利用しやすく、今後の財産にしやすい。 使い続けることで社内の作業フローを統一しやすい。 使っている人が多いので、共有しやすい。 ※これらは一例で_Sを使って、得られるものを保証するものではありません。  制作環境・スキルによって効果に大小があります。     
  21. 21. プログラマじゃなくてもはじめられる! 今日からできるセキュリティ対策 
  22. 22. 今日からできるセキュリティ対策 セキュリティって何をすればいいんだろう。 極端な話をすれば、 侵入できる入り口を全部潰せば良いです 入り口例 など  アカウント サーバー パソコン
  23. 23. WordPressの最新版を使うようにする。 ※現在自動更新はWordPress3.7から実装されています。 ※自動と言ってもマイナーバージョンのアップデートしかしません。  設定をすればメジャーバージョンのアップグレードも自動でしてくれます。  今日からできるセキュリティ対策
  24. 24. 複雑なパスワードを使う IDの管理も気をつける  人が安易に想像できるような パスワードは使わない。 共通で使っているパスワードは使わない。 ※複雑なパスワードを使っても  付箋使ってメモしていたりして人に見られるような 状態にはしないように。  パスワードの流出は人からです。 パスワード生成サービス http://www.luft.co.jp/cgi/randam.php   IDにadminは絶対使わない 今日からできるセキュリティ対策
  25. 25. 大手のサーバー会社を使う  今日からできるセキュリティ対策
  26. 26. PCにセキュリティソフトを入れる どんなにサーバー側で強固なセキュリティをしていても 別の入口から侵入できれば、意味がありません。 サーバー パソコン  今日からできるセキュリティ対策
  27. 27. WordPressの公式が提供しているものを使う。 公式で公開されているものは第三者のチェックを受けているので 一定以上の品質が保証されています。 野良テーマ・プラグインを 使う場合は品質をチェックしてくれる。 プラグインがあります。 ※チェックを通ったからと言っても絶対問題がないと  言うわけではないので、気休め程度にお考えください。  http://wordpress.org/themes/ 【Theme-Check】 https://wordpress.org/plugins/theme-check/ 【Plugin-Check】 https://wordpress.org/plugins/plugin-check/ 今日からできるセキュリティ対策
  28. 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. 29. バックアップについて もしデータが改竄されてしまった場合バックアップがないと どうしようもありません。 なので、バックアップもきちんと取りましょう。 復旧するのもセキュリティの一環です。 【VaultPress】 Liteプランで月5$ 毎日バックアップを取ってくれる。 バックアップデータは30日保管 AUTOMATTIC社製     https://vaultpress.com/ 今日からできるセキュリティ対策
  30. 30. WordPress案件の依頼をするとき、 コストを押さえれる(かもしれない)ポイント 
  31. 31. コストを抑えられる(かもしれない)ポイント WordPress設置代行費 初期設定費の節約 簡単インストールを使えば 1分とかかりません。 製作会社に依頼すると〇万円請求されたりします。 セキュリティ的にもFTPなどでアップするより こちらのほうが安全です。 ※少なくともパーミッションの設定に関して言えば  
  32. 32. コストを抑えられる(かもしれない)ポイント ベーステーマを選定する。  コーディング費用の節約 2600以上の公式テーマが配布されているので そこから近いものを探す。 [オプション] [テーマ一覧]
  33. 33. ご清 聴ありがとうございました。 @maki_saki

×