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

More Related Content

Viewers also liked

カスタムフィールドの光と闇。 または、愛について。
カスタムフィールドの光と闇。 または、愛について。カスタムフィールドの光と闇。 または、愛について。
カスタムフィールドの光と闇。 または、愛について。
Hiroshi Urabe
 
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
 まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。 まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
Hiroshi Urabe
 
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNaganoカスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNaganoHiroshi Urabe
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
 
WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編
Hiroshi Urabe
 
かんたん!わかりやすいWafのおはなし
かんたん!わかりやすいWafのおはなしかんたん!わかりやすいWafのおはなし
かんたん!わかりやすいWafのおはなし
haruna tanaka
 
フーリエ変換と画像圧縮の仕組み
フーリエ変換と画像圧縮の仕組みフーリエ変換と画像圧縮の仕組み
フーリエ変換と画像圧縮の仕組み
yuichi takeda
 

Viewers also liked (7)

カスタムフィールドの光と闇。 または、愛について。
カスタムフィールドの光と闇。 または、愛について。カスタムフィールドの光と闇。 または、愛について。
カスタムフィールドの光と闇。 または、愛について。
 
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
 まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。 まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
 
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNaganoカスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
 
WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編
 
かんたん!わかりやすいWafのおはなし
かんたん!わかりやすいWafのおはなしかんたん!わかりやすいWafのおはなし
かんたん!わかりやすいWafのおはなし
 
フーリエ変換と画像圧縮の仕組み
フーリエ変換と画像圧縮の仕組みフーリエ変換と画像圧縮の仕組み
フーリエ変換と画像圧縮の仕組み
 

Recently uploaded

論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
0207sukipio
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
chiefujita1
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
t m
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
Matsushita Laboratory
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
Takayuki Nakayama
 

Recently uploaded (8)

論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
 

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