Enviar búsqueda
Cargar
自分のWordPressのブログをリニューアルした話
•
2 recomendaciones
•
1,599 vistas
Hiroshi Urabe
Seguir
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 40
Descargar ahora
Descargar para leer sin conexión
Recomendados
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
WordBench京都9月号
WordBench京都9月号
Koji Asaga
独自Ecサイト立ち上げワンストップセミナー 0907
独自Ecサイト立ち上げワンストップセミナー 0907
Makoto Nishimura
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
Web Sig+Wom 20070518 Ugawa
Web Sig+Wom 20070518 Ugawa
真一 藤川
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
Recomendados
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
WordBench京都9月号
WordBench京都9月号
Koji Asaga
独自Ecサイト立ち上げワンストップセミナー 0907
独自Ecサイト立ち上げワンストップセミナー 0907
Makoto Nishimura
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
Web Sig+Wom 20070518 Ugawa
Web Sig+Wom 20070518 Ugawa
真一 藤川
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
カスタムフィールドの光と闇。 または、愛について。
カスタムフィールドの光と闇。 または、愛について。
Hiroshi Urabe
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
Hiroshi Urabe
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
Hiroshi Urabe
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編
Hiroshi Urabe
かんたん!わかりやすいWafのおはなし
かんたん!わかりやすいWafのおはなし
haruna tanaka
フーリエ変換と画像圧縮の仕組み
フーリエ変換と画像圧縮の仕組み
yuichi takeda
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
furutsuka
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
Más contenido relacionado
Destacado
カスタムフィールドの光と闇。 または、愛について。
カスタムフィールドの光と闇。 または、愛について。
Hiroshi Urabe
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
Hiroshi Urabe
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
Hiroshi Urabe
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編
Hiroshi Urabe
かんたん!わかりやすいWafのおはなし
かんたん!わかりやすいWafのおはなし
haruna tanaka
フーリエ変換と画像圧縮の仕組み
フーリエ変換と画像圧縮の仕組み
yuichi takeda
Destacado
(7)
カスタムフィールドの光と闇。 または、愛について。
カスタムフィールドの光と闇。 または、愛について。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
カスタム投稿タイプ&カスタムタクソノミーの使い方 #wbNagano
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編
かんたん!わかりやすいWafのおはなし
かんたん!わかりやすいWafのおはなし
フーリエ変換と画像圧縮の仕組み
フーリエ変換と画像圧縮の仕組み
Último
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
furutsuka
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
Último
(9)
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
自分のWordPressのブログをリニューアルした話
1.
自分のWordPressのブログを リニューアルした話 WordBench
Nagano Vol.4 2014.11.29 Toro_Unit
2.
whoami
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 Type
Permalinks http://wordpress.org/plugins/custom-post-type-permalinks/
5.
Pull request待ってます。
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.
そんなあなたにVCCW
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.
テーマの開発
21.
とりあえず、index.phpからデザインに応じて 必要なテンプレートを作っていく。
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.
要は、WordPressのテーマと してちゃんとしてるか? のテストデータ。
28.
• 使う機能はしっかりテストしておく。HTMLと画像 の配置は絶対。
• ブログを書くのに<div>や<span>、クラスだのを書 かないといけないなんて、嫌でしょう? • ブラウザ上でデザインしていく場合、テーマユニッ トテストをインポートしてから始める方が楽だった りします。 • vccwなら、WP_THEME_UNIT_TESTをtrueにしておくと、はじめからimportされます。
29.
本番環境でのテスト
30.
Theme Test Drive
31.
• ログインユーザーに別 のテーマを適用できる
プラグイン。 • Access Levelは10にし ておくと管理ユーザー のみに有効。
32.
本番環境でOKだったら・・・
33.
公開
34.
1. Theme Test
Driveを無効にする。 2. テーマを切り替える。 3. 公開作業終わり。
35.
www.torounit.com
36.
作ったもの http://github.com/torounit/torounit2015
37.
クライアントワークでも、 基本的にこんな感じで開発してます。
38.
自分のブログがあるといろいろ試せます。 とりあえず今日帰ったら、 WordPressでブログ作りましょう。
39.
雑記 • 画像の圧縮とか、Sass/Coffee
Scriptのコンパイ ルとかいろいろ自動化するなら Grunt, gulpを使う といろいろ楽です。 • 作るものによっては、デフォルトテーマの子テーマ にしたり、_s等のスターターテーマを使うと楽かも です。 • 黒い画面からは逃げられないのでがんばりましょう。
40.
ご静聴ありがとうございました。
Descargar ahora