Successfully reported this slideshow.
Your SlideShare is downloading. ×

自分のWordPressのブログをリニューアルした話

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 40 Ad
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

自分のWordPressのブログをリニューアルした話

  1. 1. 自分のWordPressのブログを リニューアルした話 WordBench Nagano Vol.4 2014.11.29 Toro_Unit
  2. 2. whoami
  3. 3. 占部 紘 Toro_Unit e-office 所属 • Web Designer • Front-end Engineer • WordPress Plugin Developer • @Toro_Unit • fb.me/torounit • www.torounit.com HTML5/CSS3/JavaScript/Web Design/WordPress/PHP
  4. 4. Custom Post Type Permalinks http://wordpress.org/plugins/custom-post-type-permalinks/
  5. 5. Pull request待ってます。
  6. 6. 本日お話しすること
  7. 7. torounit.com をリニューアルしました。あとWordBench 長野やります。 http://www.torounit.com/blog/2014/11/21/1866/
  8. 8. torounit.com • 自分のBlog・ポートフォリオ • かれこれ、2009年から細々とやってます。 • ブログ記事が200ページほど。 これをリニューアルしました。
  9. 9. リニューアルの目的
  10. 10. • ソーシャルメディアからの流入も増えてきた。モバ イルでも見やすくしたい。 • 以前のリニューアルが2011年なので、コードのメ ンテナンスが億劫に。いい加減にGruntとかSass とかでコードを書いておきたい。 • 普段レスポンシブとかさんざん言ってるのに自分の ブログがモバイルで見づらいって、やばい。 • 話すネタが無かった。
  11. 11. 開発の流れ
  12. 12. 1. ローカル環境構築 2. テーマのデザイン・開発 3. テーマのテスト 4. 本番環境でのテスト 5. 公開
  13. 13. ローカル環境の構築
  14. 14. なぜローカル環境 • いちいちサーバーにアップロードするのが遅い。面倒。 • 本番サーバーにはあまり負荷をかけたくない。 • 本番環境に影響を与えずに設定を変えてみたり、プラグ インをテストしたりしたい。ローカルなら画面真っ白 も怖くない。 • ネットが無くても開発できるのでいろいろ便利。
  15. 15. ローカル環境の構築 でやる
  16. 16. Vagrant ? • 黒い画面等からVirtualbox等の仮想マシンを操作する ツール。サーバーの設定も自動化できる。 • MAMPとかXXAMPみたいにパソコンの設定を汚さない ので、複数の案件でも楽勝。削除も簡単。 • AWSとかDigitalOceanのクラウドサーバーもいける。 ※Virtualbox ・・・ vmware、Parallelsのように、 PCの内部に仮想的なPCを作成するツール。Oracle製
  17. 17. でも難しいんでしょう?
  18. 18. そんなあなたにVCCW
  19. 19. 1. ダウンロード (or git clone) 2. Vagrantfile.sample をコピーして Vagrantfile とい うファイルを作成。 3. 黒い画面で ‘vagrant up’ 4. http://wordpress.local/ にアクセス これだけで、ローカル環境にWordPressインストー ル済みのWordPress環境が立ち上がります。 • WordPress 3.7 ~ 3.9 のコアコントリビューターの宮内さん作 • 宮内さんのブログ(https://firegoby.jp)に行けば日本語の情 報もたくさんあります。
  20. 20. テーマの開発
  21. 21. とりあえず、index.phpからデザインに応じて 必要なテンプレートを作っていく。
  22. 22. このテーマで使っているテンプレート • front-page.php ・・・ トップページ • single.php ・・・ ブログ記事 • page.php ・・・ 個別ページ • 404.php ・・・ 404ページ • index.php ・・・ それ以外 (アーカイブとか)
  23. 23. index.phpは他に該当するテーマがなければ読み込ま れるテンプレート。 記事一覧系はindex.phpで処理するようにすると、テ ンプレートの数が少なくなる気がする。 ex. http://wpdocs.sourceforge.jp/テンプレート階層
  24. 24. テーマのテスト
  25. 25. とりあえず、 テーマユニットテストを インポートする。
  26. 26. テーマユニットテストとは? • https://github.com/jawordpressorg/ theme-test-data-ja • WordPressのテーマのCSS等のテストが詰 まった記事データ。 • 画像の配置、本文のCSS、大量のカテゴ リー、めちゃくちゃ長いタイトル、その他 諸々のテストができる。 • WordPressの公式テーマもこのテストを 使ってる
  27. 27. 要は、WordPressのテーマと してちゃんとしてるか? のテストデータ。
  28. 28. • 使う機能はしっかりテストしておく。HTMLと画像 の配置は絶対。 • ブログを書くのに<div>や<span>、クラスだのを書 かないといけないなんて、嫌でしょう? • ブラウザ上でデザインしていく場合、テーマユニッ トテストをインポートしてから始める方が楽だった りします。 • vccwなら、WP_THEME_UNIT_TESTをtrueにしておくと、はじめからimportされます。
  29. 29. 本番環境でのテスト
  30. 30. Theme Test Drive
  31. 31. • ログインユーザーに別 のテーマを適用できる プラグイン。 • Access Levelは10にし ておくと管理ユーザー のみに有効。
  32. 32. 本番環境でOKだったら・・・
  33. 33. 公開
  34. 34. 1. Theme Test Driveを無効にする。 2. テーマを切り替える。 3. 公開作業終わり。
  35. 35. www.torounit.com
  36. 36. 作ったもの http://github.com/torounit/torounit2015
  37. 37. クライアントワークでも、 基本的にこんな感じで開発してます。
  38. 38. 自分のブログがあるといろいろ試せます。 とりあえず今日帰ったら、 WordPressでブログ作りましょう。
  39. 39. 雑記 • 画像の圧縮とか、Sass/Coffee Scriptのコンパイ ルとかいろいろ自動化するなら Grunt, gulpを使う といろいろ楽です。 • 作るものによっては、デフォルトテーマの子テーマ にしたり、_s等のスターターテーマを使うと楽かも です。 • 黒い画面からは逃げられないのでがんばりましょう。
  40. 40. ご静聴ありがとうございました。

×