ウェブ制作会社の新人研修用資料。 WordPressのテーマ選びとカスタマイズについて

1. 1
WordPress基礎講座(3)
WordPressテーマカスタマイズ実習
2015年6月
小三ツ星インターフェイス 川満昭範

2. 2
WordPress基礎講座(3)
本日のメニュー
1. テーマ選びの重要なポイント
2. テーマのインストール
3. 有料テーマのセキュリティチェック
4. カスタマイズ実践（子テーマの作成）

3. 3
WordPress基礎講座(3)
テーマ選びの重要なポイント
● 原則として公式ディレクトリからインストールする。
– 有料テーマは除く（有料テーマは公式ディレクトリに登録できない）
● 野良テーマは入れない
– 公式ディレクトリには無いテーマを野良テーマと言う。
– 無料で配布している場合は、かなり高い確率でマルウェアが入って
いるので使わない。（サイトを乗っ取られる）
● 有料テーマは念のためセキュリティチェックをかけてから使う。
● CSSの変更だけで済むテーマを探す。
– 機能のカスタマイズは非効率。

4. 4
WordPress基礎講座(3)
野良テーマを入れるとどうなるの？
● サイトを乗っ取られます。
● 一見普通に運用できているように見えても裏で色んな悪
いプログラムが動き、どこかの企業や国の重要機関に攻
撃を行うなど、やばいことに使われます。
● サーバーに負荷がかかることを行われ、レンタルサー
バー会社から警告が来たり追い出されたり。
● 一度管理者権限レベルの乗っ取りをされた場
合、WordPressのシステムを一旦削除して入れなおさな
いと安心できない。

5. 5
WordPress基礎講座(3)
実例
● とあるテーマ配布サイト
● 海外のテーマを配布していた
● 機械翻訳を使っているようで日本語が変
● 「こちらから無料でダウンロードできます」とのボタン
● ご丁寧にもそのテーマの公式サイトへのリンクも
– ちなみに公式サイトでは有料ダウンロード。致命的に怪しいと分かる。
● 無料で配布していたサイトのテーマを調べると、ログインと同時に管理者のID,パスワード,
メールアドレスを特定のURIへ送信するスクリプトが書かれていた。
● このテーマをインストールした場合、乗っ取りのほか、メールアドレスを利用して管理者の
メール情報からgmailやSNS等へのアカウントの乗っ取りもありうる。（パスワードを使いま
わしていたら確実にやられる）
● この例は単純な方。物によってはインストールしているほかのテーマの書き換えをするもの
もあるらしい。

6. 6
WordPress基礎講座(3)
テーマのインストール手順
● WordPressの管理画面→外観→テーマ
● 「新規追加」で探してインストール。
● 有料テーマの場合は、そのテーマの取説に従ってインス
トールする。
● テーマをアップロードしてインストールする場合、サー
バーのアップロード上限サイズを超えていると失敗する。
– サーバーのマニュアルにしたがってアップロード上限サイズ
を設定して再度作業を行う。

7. 7
WordPress基礎講座(3)
サイズの大きいテーマの注意点
● サーバーのアップロードファイル容量を超えている場合、
インストールできない。
● レンタルサーバーの場合、サーバーの管理画面からアッ
プロード上限を変更できる。
● ローカルの場合、php.iniファイルから、以下の値を編集
する。
memory_limit = 128M
post_max_size = 2M
upload_max_filesize = 2M
max_input_time = 60
※memory_limitの数値を一番大きく、upload_max_filesizeを一番小さくすること。

8. 8
WordPress基礎講座(3)
有料テーマのセキュリティチェック
● チェックはセキュリティプラグイン（
Wordfence Security, AntiVirus）をインストールし
て行う。（分かりやすいのはAntiVirus）
● 有料テーマは、最初はローカルにインストールして
上記のプラグインでチェックする。（いきなりリモート
サーバーを使わないこと）
– 有料テーマを有効化する前に、ローカルのパソコンを
ネットワークから切り離しておくとなおよし。

9. 9
WordPress基礎講座(3)
カスタマイズ実践
● インストールしたテーマ本体には手をつけない。
● 「子テーマ」を作り、有効化・カスタマイズする。
– テーマ本体にもアップデートがある。（WordPress本体のアップデートやセ
キュリティパッチなどの理由により。）
– テーマは、アップデートのたびにCSSなどが初期化される。親テーマをカス
タマイズすると1からやり直し。
– テーマをアップデートしないという選択肢は不可。セキュリティホールを放
置することになる。
● カスタマイズするのは原則テーマファイルとCSSファイルのみ。
– 親テーマの機能（functions.phpの記述）を無効にしたり変更する事は不
可能。（追加はできる）

10. 10
WordPress基礎講座(3)
子テーマを使うとどうなるか
● 親テーマがアップデートされても影響を受けない。
● テーマファイルは子テーマのディレクトリのファイルが優先して適
用される。
● sidebar.phpなど、テーマファイルで参照されているのに、子テー
マのディレクトリに無い場合は親テーマのディレクトリから探し出
す。
● CSSは、親テーマのCSSを先に読み、子テーマのCSSが最後にな
る。（子テーマのCSSが優先される）
● function.phpは、子テーマを先に読み、親テーマがあと。つまり、
親テーマの機能を子テーマが上書きできない。

11. 11
WordPress基礎講座(3)
子テーマの作成方法
● 子テーマのフォルダを作り、その中にstyle.cssという
名前のCSSファイルを作る。
● style.cssの先頭にスタイルシートヘッダを記入する。（
参考）
/*
Theme Name: 子テーマの名前
Template: 親テーマのフォルダ名
*/
● あとは必要に応じて子テーマのフォルダ内にテーマファイ
ルを追加する。

12. 12
WordPress基礎講座(3)
カスタマイズ実践
● 管理画面→テーマ で子テーマを有効化。
– この時点では親テーマと同じ画面
● ブラウザでサイトを開き、firebugやブラウザの開発者モー
ドを使ってどのセレクタを編集しなければならないかを
チェックする。
● 子テーマのstyle.cssに該当するセレクタのプロパティを書
込む。
● テーマによっては、管理画面である程度デザインを編集で
きるものもある。

13. 13
WordPress基礎講座(3)
カスタマイズ実践
● CSSはWordPressのCSSコーディング基準に従って書く。
● ローカル環境で表示をチェックしてからリモートサーバー
にアップロードするほうが効率的。
● 変更したい要素のCSSクラス名は、ブラウザの開発者機
能などで確認する。
● エディタ（Dreamweaverなど）で修正をかけ、表示を確認
する。
● FTPなどでアップロードする。

14. 14
WordPress基礎講座(3)
WordPressのCSSコーディング基準（抜粋)
● インデントにはタブを使用
● セクションは2行の空白行、ブロックは1行の空白行
● セレクタはハイフン区切り。
– キャメルケースとアンダースコアは避ける
● 値は二重引用符(“)で囲む
● 色は16進コード、半透明はrgba()を
● 可能な限りショートハンドを使用
● プロパティの順序は
– Display
– Positioning
– Box model
– Colors and Typography
– Other
● ベンダープレフィクスは長い順
● 小数点以下の値には、0.* のように必ず0をつける。
#selector-1,
#selector-2,
#selector-3 {
background: #fff;
color: #000;
}
#comment-form {
margin: 1em 0;
}
/* next section */
#overlay {
position: absolute;
z-index: 1;
padding: 10px;
background: #fff;
color: #777;
}