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