WordPress テーマカスタマイズ 基本の「き」
-
Upload
kazue-igarashi -
Category
Technology
-
view
2.558 -
download
1
description
Transcript of WordPress テーマカスタマイズ 基本の「き」
![Page 2: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/2.jpg)
Who are you?五十嵐和恵
(株)デジタルキューブ(通称め組)のエンジニア
@gatespace_k
http://gatespace.jp/
WordPress日本語フォーラム世話役(通称おかん)
WordBench仙台モデレーター
JAWS-UG 仙台
網元起動隊
![Page 3: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/3.jpg)
網元起動隊よろしくね(宣伝) https://www.facebook.com/GHOSTINTHEAMIMOTO
https://aws.amazon.com/marketplace/pp/B00G2DMZJ8 ↑からAWSに網元でWordPress環境を起動したら誰でもなれるよ
![Page 4: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/4.jpg)
お品書きWordPressのテーマについて
準備1:開発環境を用意しよう
準備2:WordPressをデバッグモードにする
準備3:テストデータ(Theme unit test data)
準備4:テーマチェックプラグイン
公式テーマのガイドライン
テーマ開発4つアプローチ
![Page 5: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/5.jpg)
お断り
テーマカスタマイズの準備のお話です。
テンプレートタグやテーマファイルには、ほとんど触れません。
実際に制作会社などでお仕事されている方には退屈な内容かもしれません。
![Page 6: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/6.jpg)
テーマについて
![Page 7: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/7.jpg)
テーマの役割見栄え
マークアップ
CSS
機能
ウィジェット
カスタムメニュー など
![Page 8: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/8.jpg)
テーマの入手http://wordpress.org/extend/themes/
公式ディレクトリが基本
2,402テーマ(2013.3.26現在)
審査を通ったテーマのみ配布
ライセンスはGPL
有料でもGPLライセンスのもので販売しているサイトの紹介もあるhttp://wordpress.org/themes/commercial/
![Page 9: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/9.jpg)
テーマカスタマイズのための準備1開発環境を用意しよう
![Page 10: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/10.jpg)
WordPressはダッシュボード(管理画面)でテーマを編集できるが、
やらない方がよい
![Page 11: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/11.jpg)
ダッシュボードからテーマ編集のあるある
うっかりタイポ → 500エラー → サイトが真っ白
→ 管理画面にもログイン・表示できない
→ バックアップもない \(^o^)/オワタ
テーマファイルはPHPなので大変危険です
![Page 12: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/12.jpg)
開発環境1 : テスト用(ステージング)サーバー
できれば公開するサーバーと同じ環境
PHP(モジュール or CGI版)
MySQL
難しければ PC or Mac にローカルサーバーを用意
XAMMP(Win、Mac、Linux)
MAMP(Mac)
Virtual Box + Vagrant の VCCW ←New!
![Page 13: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/13.jpg)
開発環境2 : エディタ
UTF-8(BOMなし) で保存できるエディタ
Win : TeraPad、秀丸エディタ などメモ帳(Notepad)は使っちゃダメ!
Mac : mi、JeditX など
![Page 14: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/14.jpg)
開発環境3 :最低限用意しておきたいブラウザ
Internet Explorer(可能な限り対応したいバージョン全て)
Firefox ・ Chrome ・ Safari
ブラウザやバージョンによってHTML5、CSS、JavaScript(jQuery)の対応状況が異なる
WindowsとMacではデバイスフォントも異なる
![Page 15: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/15.jpg)
開発環境3’ :各ブラウザの開発者ツール
HTMLのマークアップやCSSの適用状態の確認
JavaScriptのデバッグ
!
幅を狭くしたい、リンクや背景の色を変えたい
文字の大きさを変えたい
→それはWordPressではなく、CSSの問題!
![Page 16: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/16.jpg)
Internet Explorer開発者モード(F12)
![Page 17: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/17.jpg)
FirefoxWeb開発ツール or Firebug
![Page 18: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/18.jpg)
Chromeデベロッパーツール
![Page 19: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/19.jpg)
テーマカスタマイズのための準備2デバッグモード
ここからはテスト用のサーバーで行う内容 本番環境ではやっちゃダメ
![Page 20: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/20.jpg)
デバッグモード
wp-config.php のdefine(‘WP_DEBUG’, false); を define(‘WP_DEBUG’, true); に
エラー内容が表示される
![Page 21: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/21.jpg)
テーマカスタマイズのための準備3テストデータのインポート
![Page 22: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/22.jpg)
テストデータ日本語https://raw.github.com/jawordpressorg/theme-test-data-ja/master/wordpress-theme-test-date-ja.xml
英語https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml
いずれも「ツール」→「インポート」でインポートhttp://wpdocs.sourceforge.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%83%A6%E3%83%8B%E3%83%83%E3%83%88%E3%83%86%E3%82%B9%E3%83%88
VCCW なら設定値で自動でインポートされる
![Page 23: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/23.jpg)
テストデータの内容
「作られる可能性のある」様々な投稿
画像、ギャラリー、投稿内でHTMLタグが使われた場合
予約投稿、下書きなどの投稿の状態
カテゴリー、タグ、日別アーカイブ
たくさんのカテゴリー・タグが指定された投稿
タイトルのない投稿、本文の無い投稿 など
![Page 24: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/24.jpg)
テーマカスタマイズのための準備4テーマチェックプラグインを使おう
![Page 25: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/25.jpg)
テーマチェックプラグインTheme-Check
http://wordpress.org/plugins/theme-check/元は公式テーマの審査基準のチェック用 テンプレートファイルの有無 スタイルシートでWordPressが付与するクラスの対応がされているか テンプレートタグが適切に実装されているか(非推奨コードが使われていないか) 必須(推奨)の機能が組み込まれているか セキュリティや互換性に関するチェック など
対処療法(モグラたたき)で確認や修正を行うよりはずっと効率が良い
![Page 26: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/26.jpg)
公式テーマのガイドライン公式テーマに申請しなくても 知っておきたいガイドライン
![Page 27: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/27.jpg)
Theme Reviewhttp://codex.wordpress.org/Theme_Review
ユニークな名前(関数、テキストドメイン)
プラグインのテリトリー
テンプレートタグやフック
WordPressで生成されたCSSクラスのサポート
テーマテンプレートファイル
GPL互換ライセンス など
![Page 28: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/28.jpg)
テーマ開発4つアプローチようやくテーマを開発(カスタマイズ)する
準備ができたので・・・。
![Page 29: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/29.jpg)
最大の注意点
「公式ディレクトリで配布されているテーマ(デフォルトテーマを含む)」を直接カスタマイズしちゃダメ!
公式ディレクトリのテーマは自動アップデートの対象。アップデートすると、オリジナルに変更を加えた箇所が無かったことに!
![Page 30: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/30.jpg)
テーマ開発4つアプローチ
出典:テーマ開発4つアプローチ http://ja.naoko.cc/2012/12/02/wordpress-theme-development-approach/
アプローチ 長所 短所
スクラッチ開発 コントロールできる 制作に時間がかかる
子テーマ すばやく機能を取り入れられる
親テーマへの依存が大きい
フレームワーク 多機能 慣れるまで時間が必要
スターター・テーマ 学習しやすい 元テーマが更新されても継承はない
![Page 31: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/31.jpg)
スクラッチ開発
イチから自分でつくる
必ず入れなければならない
テンプレートタグ
スタイル(クラス)
![Page 32: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/32.jpg)
子テーマhttp://wpdocs.sourceforge.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E
オリジナルのテーマの機能などをベースに、追加・変更したい部分のみをカスタマイズ
テーマの関数(functions.php)の改変には癖がある
気がつくと親テーマと同じぐらいのテーマファイル・・・
![Page 33: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/33.jpg)
テーマフレームワーク
学習コストが高い(WordPressのテーマ作成+フレームワーク独自のもの)
英語しか情報がない
![Page 34: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/34.jpg)
スターター・テーマ
改変することが前提
WordPressのテーマに必要な設定はされている
子テーマと違い、 元のテーマが更新されても継承しない
![Page 35: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/35.jpg)
それぞれ長所・短所があるので使い分けよう
![Page 36: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/36.jpg)
今日の資料・出典(1)スターターテーマ _s を使ってWordPressのテーマをつくる(準備編・補足) http://gatespace.jp/2013/01/07/underscores01/
テーマの入手
WordPress › Free WordPress Themes(公式テーマディレクトリ) http://wordpress.org/extend/themes/
Commercially Supported GPL Themeshttp://wordpress.org/themes/commercial/
![Page 37: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/37.jpg)
今日の資料・出典(2)ローカル環境
ローカル環境(XAMPP)にWordPressをインストールする手順http://wp.yat-net.com/?p=3507
図解!MacにWordPressのテスト環境を構築できるMAMPの設定手順http://05step.com/2012/10/09/mac-local-mamp/
VCCW(VirtualBox + Vagrant)https://github.com/miya0001/vagrant-chef-centos-wordpress
![Page 38: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/38.jpg)
今日の資料・出典(3)WordPressのデバッグモード http://gatespace.jp/2012/07/20/wordpress-debugging/
Codex : テーマユニットテストhttp://wpdocs.sourceforge.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%83%A6%E3%83%8B%E3%83%83%E3%83%88%E3%83%86%E3%82%B9%E3%83%88
日本語https://raw.github.com/jawordpressorg/theme-test-data-ja/master/wordpress-theme-test-date-ja.xml
英語https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml
WordPressでテーマを作る際のテーマユニットテストのススメ http://firegoby.jp/archives/
![Page 39: WordPress テーマカスタマイズ 基本の「き」](https://reader035.fdocuments.net/reader035/viewer/2022081800/547ae880b4af9f6f528b461d/html5/thumbnails/39.jpg)
今日の資料・出典(4)テーマチェック
WordPress › Theme-Check « WordPress Plugins http://wordpress.org/extend/plugins/theme-check/
公式テーマガイドライン
Theme Reviewhttp://codex.wordpress.org/Theme_Review
テーマ開発4つアプローチhttp://ja.naoko.cc/2012/12/02/wordpress-theme-development-approach/