1.
WordPressあるある
2016年版

2.
2014年、夏
セッション時間を
1/2で終わらせた

3.
WordPress
失敗あるある
あの悲劇から２年

4.
分かりづらい
資料の
全てを直して
帰ってきた！

5.
説明しやすい
テンパらない
早く終えない

6.
これで今日は
頑張ります！

7.
自己紹介
★ 所属
Web業界で5年ちょい、Si業界で半年
画面 （HTML/CSS/JS）
サーバー （PHP/C#）
DB （MySQL/Oracle）
テクノブレイブ名古屋オフィス → 会社
WordBench名古屋 → 勉強会コミュニティ
ミスリーズ → 卓球チーム
★ 技術
１

8.
自己紹介
★ 所属
Web業界で5年ちょい、Si業界で半年
画面 （HTML/CSS/JS）
サーバー （PHP/C#）
DB （MySQL/Oracle）
テクノブレイブ名古屋オフィス → 会社
WordBench名古屋 → 勉強会コミュニティ
ミスリーズ → 卓球チーム
★ 技術
１

9.
このセッションについて
★対象
WordPressをじっくり勉強してる人
WordPressを通じて多角的に知識を吸収したい人
CMSを一度あきらめた人
２
WordPress運営、
制作に対し意欲ある初級者

10.
このセッションの目的 ３
WordPressを利用してて
よくある問題を例に挙げ
解決の糸口を見つけられる
講座にしたいと思います

11.
WordPressあるある
俺のサイトが
とにかく白い件

12.
Web制作者P氏の証言

13.
WordPressが白い原因は？ ４
PHPのエラーによる
プログラムの中断
どんな時にエラーになるの？

14.
何が原因でエラーになるの？ ５
• 文字コードの設定ミス
• XMLのDoctype宣言
• 古いプラグインの利用
• プラグイン入れすぎ
可能性 小
可能性 大

15.
何が原因でエラーになるの？ ６
★ 文字コードの設定ミス
• XMLのDoctype宣言
• 古いプラグインの利用
• プラグイン入れすぎ
可能性 小
可能性 大

16.
文字コードの設定はUTF-8 ７
★ 文字ルール違反でエラーになる可能性がある
• プログラム内で日本語使ってるとダメかも
★ 文字化け回避の為にもUTF-8で保存しよう
• 最近のエディタは初期設定がUTFだよ
• タダの奴ならGithubのAtomがオススメ
最近だとあまりないかも

17.
何が原因でエラーになるの？ ８
• 文字コードの設定ミス
★ XMLのDoctype宣言
• 古いプラグインの利用
• プラグイン入れすぎ
可能性 小
可能性 大

18.
XMLで宣言する時はエスケープ ９
<?xml version= 1.0 … ?>
• 色の違う<? ?>がphpと解釈される場合がある
• php.iniのshort_open_tagディレクティブを無効にする
• ↑php 5.2のphp.iniでもデフォルトは無効
• <?php echo <?xml … ?> ; ?> phpから出力する
あんまり気にしなくていい

19.
何が原因でエラーになるの？ １０
• 文字コードの設定ミス
• XMLのDoctype宣言
★ 古いプラグインの利用
• プラグイン入れすぎ
可能性 小
可能性 大

20.
古いプラグインの利用はやめよう １１
★ 廃止された関数が使われている可能性がある
• 関数未定義エラーでプログラムが停止する
★ 非推奨の関数が使われている可能性がある
• 闇プログラマーの攻撃対象になる可能性がある
• コードの性能が悪い可能性がある

21.
何が原因でエラーになるの？ １２
• 文字コードの設定ミス
• XMLのDoctype宣言
• 古いプラグインの利用
★ プラグイン入れすぎ
可能性 小
可能性 大

22.
プラグインは必要最低限にしよう １３
★ プラグインが原因で競合を引き起こす
• テーマが原因であったり
• 別のプラグインが原因であったり
• アップデートが原因であったり
★ で、競合ってなに？
自分が考えられる範囲で例を挙げます

23.
functions.phpに関数を書き出す
使うからロックするわ ロックされとるやん
ほな先にこっちやるから
ロックするわこっちやったらロック解除するわ
その関数あるで
関数名がかぶった！
デッドロック
とある表A
とある表B
① ②
③④
例 1
例 2
プラグインA プラグインB
プラグインA

24.
更新がされてない
あんまり利用者がいない
プラグインを利用する際は
注意してください

25.
画面が白くなるのはPHPのエラー １４
PHPのエラーを知ることが解決への最善手
• プログラムが中断するエラーは２種類ある
• 致命的なエラー Fatal Error
• 構文エラー Parse Error
コード書いてると良く遭遇します

26.
致命的なエラー Fatal Error
何すると致命的なの？
• 未定義の関数やクラスを呼び出す
• 同じ名前の関数を作成する
• 変数で初期化したのに配列として使う
１５
…変数で初期化したのに？ん？？

27.
変数で初期化したのに配列として使う １６
$var = variant ;
$var[] = out ;
文字列ね
配列…だと！？
文字列で決まると配列にできない

28.
構文エラー Parse Error
ルール違反はダメ
• 行末にセミコロンがない
• の閉じ忘れ ; にする
• function{の閉じ忘れfunction{};にする
１７
行数が多いと猛威を振るいます

29.
WordPressでのデバック １８
オススメ方法
• エラーを画面に表示する
• エラーをログに出力する
WordPressで設定できる

30.
WordPressでのデバック １９
オススメ方法
• エラーを画面に表示する
• エラーをログに出力する
wp-config.phpの設定をする

31.
wp-config.phpって？
WordPressの設定ファイル
• DBの設定を書き込んだり
• 一時保存情報の暗号化を行ったり
• テーマディレクトリなどのパスの設定ができたり
• 初期状態は
root/wp-config-sample.phpという名前
２０

32.
デバック表示の設定の方法
デバックの設定（ページへ出力）
• 初期状態ではファイルのリネームが必要
• wp-config.php
84行目付近の定数の値を変更する
define('WP_DEBUG', false);
define('WP_DEBUG', true);
２１
真っ白い画面にエラーがでる

33.
WordPressでのデバック ２２
オススメ方法
• エラーを画面に表示する
• エラーをログに出力する
画面にエラー出したく無いよ！

34.
デバック出力の設定の方法
デバックの設定（ログへ出力）
定数で条件分岐しておまじないを書く
define('WP_DEBUG', true);
if(WP_DEBUG) {
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );
}
２３

35.
デバック出力の設定の方法
デバックの設定（ログへ出力）
２４
//wp-content/debug.logへ出力
define( 'WP_DEBUG_LOG', true );
//エラーを画面に表示しない
define( 'WP_DEBUG_DISPLAY', false );
//エラーを画面に表示しない
@ini_set( 'display_errors', 0 );
これで画面を汚すことはありません！

36.
警告と注意レベルのエラー
プログラムが中断しないエラー
• メッセージが出力される
• プログラムは中断しない
• パフォーマンスが落ちたりする
• 処理をすっとばして完了する
２５

37.
警告と注意レベルのエラー
プログラムが中断しないエラー
• メッセージが出力される
• プログラムは中断しない
• パフォーマンスが落ちたりする
• 処理をすっとばして完了する
２６

38.
注意 notice レベルエラーの例
配列の添字にコーテーションをつけない
• $[id]とした場合
• $[ id ]とした場合よりも
• 参照に２-2.5倍ほどコストがかかる
• 10万回参照した場合平均で0.２­0.3秒差
２７
パフォーマンスに明らかな差がある

39.
警告と注意レベルのエラー
プログラムが中断しないエラー
• メッセージが出力される
• プログラムは中断しない
• パフォーマンスが落ちたりする
• 処理をすっとばして完了する
２８

40.
警告 warning レベルエラーの例
処理が完了しなくて困るシリーズ
• 権限が違くて、書き込めない
• 所有者が違くて書き込めない
• ファイルパスが違くて書き込めない
２９
処理が完了しなくて困る

41.
警告と注意レベルのエラー
プログラムが中断しないエラー
• メッセージが出力される
• プログラムは中断しない
• パフォーマンスが落ちたりする
• 処理をすっとばして完了する
３０
警告も注意も修正しよう！

42.
WordPressあるある
俺のサイトの
文字がなんかヤバイ件

43.
"親è²ãã®ç¡éç ²ã§å°ä¾ã®æããæã°ãããã¦ãããå°å¦æ ¡ã«å±ãæåå¦æ ¡ã®äºéããé£ã³éãã¦ä¸é±éã»ã©è
°ãæãããäºãããããªããããªç¡éãããã¨èã人ãããããç¥ãã¬ãå¥æ®µæ·±ãçç±ã§ããªããæ
°ç¯ã®äºéããé¦ãåºãã¦ããããåç´çã®ä¸äººãåè«ã«ããããå¨å¼µã£ã¦ããããããé£ã³éããäºã¯åºæ¥ã¾ããå¼
±è«ãã¼ããã¨åããããã§ãããå°ä½¿ã«è² ã¶ãã£ã¦å¸°ã£ã¦æ¥ãæããããã大ããªç¼ããã¦äºéãããããé£ã³éãã¦è
°ãæãã奴ããããã¨äºã£ãããããã®æ¬¡ã¯æãããã«é£ãã§è¦ãã¾ãã¨çãããï¼é空æ庫ããï¼è¦ªè²ãã®ç¡éç
²ã§å°ä¾ã®æããæã°ãããã¦ãããå°å¦æ ¡ã«å±ãæåå¦æ ¡ã®äºéããé£ã³éãã¦ä¸é±éã»ã©è
°ãæãããäºãããããªããããªç¡éãããã¨èã人ãããããç¥ãã¬ãå¥æ®µæ·±ãçç±ã§ããªããæ
°ç¯ã®äºéããé¦ãåºãã¦ããããåç´çã®ä¸äººãåè«ã«ããããå¨å¼µã£ã¦ããããããé£ã³éããäºã¯åºæ¥ã¾ããå¼
±è«ãã¼ããã¨åããããã§ãããå°ä½¿ã«è² ã¶ãã£ã¦å¸°ã£ã¦æ¥ãæããããã大ããªç¼ããã¦äºéãããããé£ã³éãã¦è
°ãæãã奴ããããã¨äºã£ãããããã®æ¬¡ã¯æãããã«é£ãã§è¦ãã¾ãã¨çãããï¼é空æ庫ããï¼è¦ªè²ãã®ç¡éç
²ã§å°ä¾ã®æããæã°ãããã¦ãããå°å¦æ ¡ã«å±ãæåå¦æ ¡ã®äºéããé£ã³éãã¦ä¸é±éã»ã©è
°ãæãããäºãããããªããããªç¡éãããã¨èã人ãããããç¥ãã¬ãå¥æ®µæ·±ãçç±ã§ããªããæ
°ç¯ã®äºéããé¦ãåºãã¦ããããåç´çã®ä¸äººãåè«ã«ããããå¨å¼µã£ã¦ããããããé£ã³éããäºã¯åºæ¥ã¾ããå¼
±è«ãã¼ããã¨åããããã§ãããå°ä½¿ã«è² ã¶ãã£ã¦å¸°ã£ã¦æ¥ãæããããã大ããªç¼ããã¦äºéãããããé£ã³éãã¦è
°ãæãã奴ããããã¨äºã£ãããããã®æ¬¡ã¯æãããã«é£ãã§è¦ãã¾ãã¨çãããï¼é空æ庫ããï¼è¦ªè²ãã®ç¡éç
²ã§å°ä¾ã®æããæã°ãããã¦ãããå°å¦æ ¡ã«å±ãæåå¦æ ¡ã®äºéããé£ã³éãã¦ä¸é±éã»ã©è
°ãæãããäºãããããªããããªç¡éãããã¨èã人ãããããç¥ãã¬ãå¥æ®µæ·±ãçç±ã§ããªããæ
°ç¯ã®äºéããé¦ãåºãã¦ããããåç´çã®ä¸äººãåè«ã«ããããå¨å¼µã£ã¦ããããããé£ã³éããäºã¯åºæ¥ã¾ããå¼
±è«ãã¼ããã¨åããããã§ãããå°ä½¿ã«è² ã¶ãã£ã¦å¸°ã£ã¦æ¥ãæããããã大ããªç¼ããã¦äºéãããããé£ã³éãã¦è
°ãæãã奴ããããã¨äºã£ãããããã®æ¬¡ã¯æãããã«é£ãã§è¦ãã¾ãã¨çãããï¼é空æ庫ããï¼è¦ªè²ãã®ç¡éç
²ã§å°ä¾ã®æããæã°ãããã

44.
なんかやばい
とてつもなく
ヤバイ

45.
サイトがヤバイことになっている
文字化けですね
• 文字化けとはなにか
• どうすればいいのか
３１

46.
PCの文字表示
文字化けを語る前に
• PCは文字を読めない
• 「あ」を「あ」と認識できない
３２
文字コード
e30102
対応フォント
あ
PCが文字に表示されるまで
UTF-8の「あ」が分かるフォントによって表現される

47.
文字化けについて
WordPressの場合
３３
®æ
なんやそれ e30102UTF-8
e30102を理解できないとアウト
ウェブブラウザ Webサーバー（apache)
PHP
DB

48.
サイトがヤバイことになっている
文字化けですね
• 文字化けとはなにか
• どうすればいいのか
３４

49.
文字化けへの対処 ３５
文字が全部分かるようにしておく
ウェブブラウザ
Webサーバー（apache)
PHP
DB
HTMLで規定 設定ファイル 設定

50.
文字化けへの対処 ３６
ウェブブラウザ Webサーバー/PHP DB
HTMLで規定 設定ファイル 設定
• ブラウザにUTF-8で文字コードを理解してもらう
• HTMLのmeta要素のcharset属性
• UTF-8を設定する

51.
文字化けへの対処 ３７
ウェブブラウザ Webサーバー（apache)
PHP
DB
HTMLで規定 設定ファイル 設定
• .htaccessかサーバーの設定ファイルを編集する
• AddDefaultCharset UTF-8を設定する
• UTF-8として文字コードを認識するようになる

52.
文字化けへの対処 ３８
ウェブブラウザ Webサーバー（apache)
PHP
DB
HTMLで規定 設定ファイル 設定
• DB作成時
• utf-8 general_ciを設定する
• DBがUTF-8を認識できるようになる

53.
サイトがヤバイことになっている
文字化けですね
• 文字化けとはなにか
• どうすればいいのか
３９
ファイルはUTF-8で保存しましょう

54.
UTF-8でのファイル保存
エディタ
• SublimeTextシリーズ
• PHPStorm
• Atom
４０
この辺はデフォルトでUTF-8で保存かも

55.
UTF-8でのファイル保存
BOMについて
• BOMはByteOrderMarkの略
• UTF-8と認識するための印を先頭につける
• BOMがないと、UTF-8と認識
できないアプリもある
４１
WordPressはBOMなしで保存

56.
WordPressあるある
俺のサイトが
表示されない件

57.
Webサイトにアクセスできない ４２
経験則からの原因の列挙
• Webサイトへのアクセスが集中している
• サーバーが落ちている
• ドメインの失効

58.
Webサイトにアクセスできない ４３
経験則からの原因の列挙
• Webサイトへのアクセスが集中している
• サーバーが落ちている
• ドメインの失効

59.
Webサイトへのアクセス集中 ４４
何で集中するとサイトが開けないのか
• サーバーでの設定値より多く人が来た
• 要求された処理がサーバーの許容量を超えた
わかりづらいので図にしてみる

60.
Webサイトへのアクセス集中 ４５
サーバーでの設定値より多く人が来る
キャパオーバーの例
200人以上
で入場制限
サーバー資源を沢山使う要求
サーバー資源を沢山使う要求
２００人以上の要求
対応できない

61.
入場制限の帯域拡張 ４６
サーバー設定の変更
• 許容値の拡張
• サーバーの設定を変更する
• サーバーの再起動を行う
• 一度全プロセスをバルスする
• 不要アクセスの排除
• 怪しい国からのアクセスを減らす
手っ取り早いのはサーバーの増設

62.
Webサイトへのアクセス集中 ４７
サーバーでの設定値より多く人が来る
キャパオーバーの例
200人以上
で入場制限
サーバー資源を沢山使う要求
サーバー資源を沢山使う要求
２００人以上の要求
対応できない

63.
許容量オーバーへの対処 ４８
サーバ負荷の低減
• 負荷のかかるSQLの見直し
• 負荷のかかるプログラムの見直し
• 不要アクセスの排除
手っ取り早いのはサーバーの増設

64.
サーバートラブルは
リソースの増設が近道
と、いうことゎ

65.
金で解決できるね！

66.
WordPressあるある
カスタム投稿が
表示できない件

67.
カスタム投稿が表示されないよ？ ４９
投稿ができるようにするだけじゃダメ
• 表示するテンプレートを用意する
• 投稿を表示するプログラムを作成する
多少プログラミングする必要がある

68.
表示用テンプレートを用意する ５０
必要なファイル
single.php
• カスタム投稿ページを表示するのに必要
single-type.php
• カスタム投稿専用個別ページを表示するのに必要
• typeは投稿タイプ名
• register_post_type（ こいつ ,$args）;
single-type.phpがいい理由

69.
おぼろげな記憶 ５１
single.php コーディング量増える
single-type.php コーディング量節約
専用のテンプレ作った方が楽

70.
カスタム投稿が表示されないよ？ ５２
投稿ができるようにするだけじゃダメ
• 表示するテンプレートを用意する
• 投稿を表示するプログラムを作成する
single-type.phpがある前提

71.
表示用プログラム ５３
テンプレートがデータもった状態から始まるので
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php
//the_content();とかthe系の関数の利用が可能
?>

72.
the系の関数 ５４
投稿の内容を表示できるプログラム
• the_title(); タイトルの表示
• the_content(); 投稿内容の表示
• the_permalink(); 投稿のURL表示
the_postとendifの間に挟む

73.
たとえば・・・ ５５
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
<div class= postTitle ><?php the_title(); ?></div>
<div class= postNaiyou ><?php the_content(); ?></div>
このページへリンクを貼れば
カスタム投稿が表示できる
投稿タイトル、内容が表示されるはず

74.
おまけ
WordPressは
勉強がしやすいよ！

75.
WordPressは勉強しやすい ５６
理由その１：利用者が多い
• ノウハウを持ってる人が多い
• コミュニティ活動が盛んに行なわれている
理由その２：資料がタダで見れる
• ER図などは公開されている
• 関数の利用方法なども公式ページで見れる
名古屋にもあります

76.
WordBench名古屋 57
勉強したい人、登壇したい人
お待ちしてます！
WordBench名古屋とは
• 勉強会を毎月開催
• HTMLからサーバーまで
WordPressに関わることを勉強
• 講師はメンバーが担当してます！

77.
詳しくはコチラ！

78.
WordPressは勉強しやすい ５８
理由その１：利用者が多い
• ノウハウを持ってる人が多い
• コミュニティ活動が盛んに行なわれている
理由その２：資料がタダで見れる
• ER図などは公開されている
• 関数の利用方法なども公式ページで見れる
名古屋にもあります

79.
Codex 公式マニュアル 58
超お手軽に学習可能です！
公式のWeb資料
• Codexと検索すれば一番上に出ます
• 作業に必要な情報が沢山載ってます
• フォーラムがあり、
毎日質問と回答が飛び交ってます

80.
WordPressあるある
うちの会社が
仲間を募集してる件

81.
テクノブレイブ
• 人数 ２５０人以上
• 本社 名古屋 東京
• 拠点 名古屋、福岡、タイ
• 事業 システムコンサル
インフラコンサル
受託開発

82.
会社の詳細は今日貰った
ビニールバックに入ってます！
詳しくは…

83.
仲間募集してます！
• プログラム書ける人
• 書けないけどデザイン得意な人
• 書けないけど夢がある人
• 書けないけどやる気ある人
• 人付き合い上手な人

84.
いいところ
東京に
たまにいけるところ！

85.
いいところ
意見が形だけでも
社長まで届くところ！

86.
いいところ
助けあえる
仲間がいるところ！

87.
これからなところ
内緒で聞いてね！

88.
ご清聴ありがとう
ございました