Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2016WordFes

142 views

Published on

やあ (´・ω・`)
ようこそ、バーボンハウスへ。
このテキーラはサービスだから、まず飲んで落ち着いて欲しい。

うん、「また」なんだ。済まない。
仏の顔もって言うしね、謝って許してもらおうとも思っていない。

でも、このスライドを見たとき、君は、きっと言葉では言い表せない
「ときめき」みたいなものを感じてくれたと思う。
殺伐とした世の中で、そういう気持ちを忘れないで欲しい
そう思って、このスライドをUpしたんだ。

じゃあ、http://www.slideshare.net/wasi300/wordfes2016-65434916文字のある方へ行こうか。

Published in: Internet
  • Login to see the comments

  • Be the first to like this

2016WordFes

  1. 1. WordPressあるある 2016年版
  2. 2. 2014年、夏 セッション時間を 1/2で終わらせた
  3. 3. WordPress 失敗あるある あの悲劇から2年
  4. 4. 分かりづらい 資料の 全てを直して 帰ってきた!
  5. 5. 説明しやすい テンパらない 早く終えない
  6. 6. これで今日は 頑張ります!
  7. 7. 自己紹介 ★ 所属 Web業界で5年ちょい、Si業界で半年
 画面 (HTML/CSS/JS)
 サーバー (PHP/C#)
 DB (MySQL/Oracle) テクノブレイブ名古屋オフィス → 会社
 WordBench名古屋 → 勉強会コミュニティ
 ミスリーズ → 卓球チーム ★ 技術 1
  8. 8. 自己紹介 ★ 所属 Web業界で5年ちょい、Si業界で半年
 画面 (HTML/CSS/JS)
 サーバー (PHP/C#)
 DB (MySQL/Oracle) テクノブレイブ名古屋オフィス → 会社
 WordBench名古屋 → 勉強会コミュニティ
 ミスリーズ → 卓球チーム ★ 技術 1
  9. 9. このセッションについて ★対象 WordPressをじっくり勉強してる人
 WordPressを通じて多角的に知識を吸収したい人
 CMSを一度あきらめた人 2 WordPress運営、 制作に対し意欲ある初級者
  10. 10. このセッションの目的 3 WordPressを利用してて よくある問題を例に挙げ 解決の糸口を見つけられる 講座にしたいと思います
  11. 11. WordPressあるある 俺のサイトが とにかく白い件
  12. 12. Web制作者P氏の証言
  13. 13. WordPressが白い原因は? 4 PHPのエラーによる プログラムの中断 どんな時にエラーになるの?
  14. 14. 何が原因でエラーになるの? 5 • 文字コードの設定ミス • XMLのDoctype宣言 • 古いプラグインの利用 • プラグイン入れすぎ 可能性 小 可能性 大
  15. 15. 何が原因でエラーになるの? 6 ★ 文字コードの設定ミス • XMLのDoctype宣言 • 古いプラグインの利用 • プラグイン入れすぎ 可能性 小 可能性 大
  16. 16. 文字コードの設定はUTF-8 7 ★ 文字ルール違反でエラーになる可能性がある • プログラム内で日本語使ってるとダメかも ★ 文字化け回避の為にもUTF-8で保存しよう • 最近のエディタは初期設定がUTFだよ • タダの奴ならGithubのAtomがオススメ 最近だとあまりないかも
  17. 17. 何が原因でエラーになるの? 8 • 文字コードの設定ミス ★ XMLのDoctype宣言 • 古いプラグインの利用 • プラグイン入れすぎ 可能性 小 可能性 大
  18. 18. XMLで宣言する時はエスケープ 9 <?xml version= 1.0 … ?> • 色の違う<? ?>がphpと解釈される場合がある • php.iniのshort_open_tagディレクティブを無効にする • ↑php 5.2のphp.iniでもデフォルトは無効 • <?php echo <?xml … ?> ; ?> phpから出力する あんまり気にしなくていい
  19. 19. 何が原因でエラーになるの? 10 • 文字コードの設定ミス • XMLのDoctype宣言 ★ 古いプラグインの利用 • プラグイン入れすぎ 可能性 小 可能性 大
  20. 20. 古いプラグインの利用はやめよう 11 ★ 廃止された関数が使われている可能性がある • 関数未定義エラーでプログラムが停止する ★ 非推奨の関数が使われている可能性がある • 闇プログラマーの攻撃対象になる可能性がある • コードの性能が悪い可能性がある
  21. 21. 何が原因でエラーになるの? 12 • 文字コードの設定ミス • XMLのDoctype宣言 • 古いプラグインの利用 ★ プラグイン入れすぎ 可能性 小 可能性 大
  22. 22. プラグインは必要最低限にしよう 13 ★ プラグインが原因で競合を引き起こす • テーマが原因であったり • 別のプラグインが原因であったり • アップデートが原因であったり ★ で、競合ってなに?
 自分が考えられる範囲で例を挙げます
  23. 23. functions.phpに関数を書き出す 使うからロックするわ ロックされとるやん ほな先にこっちやるから ロックするわこっちやったらロック解除するわ その関数あるで 関数名がかぶった! デッドロック とある表A とある表B ① ② ③④ 例 1 例 2 プラグインA プラグインB プラグインA
  24. 24. 更新がされてない あんまり利用者がいない プラグインを利用する際は 注意してください
  25. 25. 画面が白くなるのはPHPのエラー 14 PHPのエラーを知ることが解決への最善手 • プログラムが中断するエラーは2種類ある • 致命的なエラー Fatal Error • 構文エラー Parse Error コード書いてると良く遭遇します
  26. 26. 致命的なエラー Fatal Error 何すると致命的なの? • 未定義の関数やクラスを呼び出す • 同じ名前の関数を作成する • 変数で初期化したのに配列として使う 15 …変数で初期化したのに?ん??
  27. 27. 変数で初期化したのに配列として使う 16 $var = variant ; $var[] = out ; 文字列ね 配列…だと!? 文字列で決まると配列にできない
  28. 28. 構文エラー Parse Error ルール違反はダメ • 行末にセミコロンがない • の閉じ忘れ ; にする • function{の閉じ忘れfunction{};にする 17 行数が多いと猛威を振るいます
  29. 29. WordPressでのデバック 18 オススメ方法 • エラーを画面に表示する • エラーをログに出力する WordPressで設定できる
  30. 30. WordPressでのデバック 19 オススメ方法 • エラーを画面に表示する • エラーをログに出力する wp-config.phpの設定をする
  31. 31. wp-config.phpって? WordPressの設定ファイル • DBの設定を書き込んだり • 一時保存情報の暗号化を行ったり • テーマディレクトリなどのパスの設定ができたり • 初期状態は root/wp-config-sample.phpという名前 20
  32. 32. デバック表示の設定の方法 デバックの設定(ページへ出力) • 初期状態ではファイルのリネームが必要 • wp-config.php 84行目付近の定数の値を変更する define('WP_DEBUG', false); define('WP_DEBUG', true); 21 真っ白い画面にエラーがでる
  33. 33. WordPressでのデバック 22 オススメ方法 • エラーを画面に表示する • エラーをログに出力する 画面にエラー出したく無いよ!
  34. 34. デバック出力の設定の方法 デバックの設定(ログへ出力) 定数で条件分岐しておまじないを書く define('WP_DEBUG', true); if(WP_DEBUG) { define( 'WP_DEBUG_LOG', true ); define( 'WP_DEBUG_DISPLAY', false ); @ini_set( 'display_errors', 0 ); } 23
  35. 35. デバック出力の設定の方法 デバックの設定(ログへ出力) 24 //wp-content/debug.logへ出力 define( 'WP_DEBUG_LOG', true ); //エラーを画面に表示しない define( 'WP_DEBUG_DISPLAY', false ); //エラーを画面に表示しない @ini_set( 'display_errors', 0 ); これで画面を汚すことはありません!
  36. 36. 警告と注意レベルのエラー プログラムが中断しないエラー • メッセージが出力される • プログラムは中断しない • パフォーマンスが落ちたりする • 処理をすっとばして完了する 25
  37. 37. 警告と注意レベルのエラー プログラムが中断しないエラー • メッセージが出力される • プログラムは中断しない • パフォーマンスが落ちたりする • 処理をすっとばして完了する 26
  38. 38. 注意 notice レベルエラーの例 配列の添字にコーテーションをつけない • $[id]とした場合 • $[ id ]とした場合よりも • 参照に2-2.5倍ほどコストがかかる • 10万回参照した場合平均で0.2­0.3秒差 27 パフォーマンスに明らかな差がある
  39. 39. 警告と注意レベルのエラー プログラムが中断しないエラー • メッセージが出力される • プログラムは中断しない • パフォーマンスが落ちたりする • 処理をすっとばして完了する 28
  40. 40. 警告 warning レベルエラーの例 処理が完了しなくて困るシリーズ • 権限が違くて、書き込めない • 所有者が違くて書き込めない • ファイルパスが違くて書き込めない 29 処理が完了しなくて困る
  41. 41. 警告と注意レベルのエラー プログラムが中断しないエラー • メッセージが出力される • プログラムは中断しない • パフォーマンスが落ちたりする • 処理をすっとばして完了する 30 警告も注意も修正しよう!
  42. 42. WordPressあるある 俺のサイトの 文字がなんかヤバイ件
  43. 43. "親è²ãã®ç¡éç ²ã§å°ä¾ã®æããæã°ãããã¦ãããå°å¦æ ¡ã«å±ãæåå¦æ ¡ã®äºéããé£ã³éãã¦ä¸é±éã»ã©è °ãæãããäºãããããªããããªç¡éãããã¨èã人ãããããç¥ãã¬ãå¥æ®µæ·±ãçç±ã§ããªããæ °ç¯ã®äºéããé¦ãåºãã¦ããããåç´çã®ä¸äººãåè«ã«ããããå¨å¼µã£ã¦ããããããé£ã³éããäºã¯åºæ¥ã¾ããå¼ ±è«ãã¼ããã¨åããããã§ãããå°ä½¿ã«è² ã¶ãã£ã¦å¸°ã£ã¦æ¥ãæããããã大ããªç¼ããã¦äºéãããããé£ã³éãã¦è °ãæãã奴ããããã¨äºã£ãããããã®æ¬¡ã¯æãããã«é£ãã§è¦ãã¾ãã¨çãããï¼é空æ庫ããï¼è¦ªè²ãã®ç¡éç ²ã§å°ä¾ã®æããæã°ãããã¦ãããå°å¦æ ¡ã«å±ãæåå¦æ ¡ã®äºéããé£ã³éãã¦ä¸é±éã»ã©è °ãæãããäºãããããªããããªç¡éãããã¨èã人ãããããç¥ãã¬ãå¥æ®µæ·±ãçç±ã§ããªããæ °ç¯ã®äºéããé¦ãåºãã¦ããããåç´çã®ä¸äººãåè«ã«ããããå¨å¼µã£ã¦ããããããé£ã³éããäºã¯åºæ¥ã¾ããå¼ ±è«ãã¼ããã¨åããããã§ãããå°ä½¿ã«è² ã¶ãã£ã¦å¸°ã£ã¦æ¥ãæããããã大ããªç¼ããã¦äºéãããããé£ã³éãã¦è °ãæãã奴ããããã¨äºã£ãããããã®æ¬¡ã¯æãããã«é£ãã§è¦ãã¾ãã¨çãããï¼é空æ庫ããï¼è¦ªè²ãã®ç¡éç ²ã§å°ä¾ã®æããæã°ãããã¦ãããå°å¦æ ¡ã«å±ãæåå¦æ ¡ã®äºéããé£ã³éãã¦ä¸é±éã»ã©è °ãæãããäºãããããªããããªç¡éãããã¨èã人ãããããç¥ãã¬ãå¥æ®µæ·±ãçç±ã§ããªããæ °ç¯ã®äºéããé¦ãåºãã¦ããããåç´çã®ä¸äººãåè«ã«ããããå¨å¼µã£ã¦ããããããé£ã³éããäºã¯åºæ¥ã¾ããå¼ ±è«ãã¼ããã¨åããããã§ãããå°ä½¿ã«è² ã¶ãã£ã¦å¸°ã£ã¦æ¥ãæããããã大ããªç¼ããã¦äºéãããããé£ã³éãã¦è °ãæãã奴ããããã¨äºã£ãããããã®æ¬¡ã¯æãããã«é£ãã§è¦ãã¾ãã¨çãããï¼é空æ庫ããï¼è¦ªè²ãã®ç¡éç ²ã§å°ä¾ã®æããæã°ãããã¦ãããå°å¦æ ¡ã«å±ãæåå¦æ ¡ã®äºéããé£ã³éãã¦ä¸é±éã»ã©è °ãæãããäºãããããªããããªç¡éãããã¨èã人ãããããç¥ãã¬ãå¥æ®µæ·±ãçç±ã§ããªããæ °ç¯ã®äºéããé¦ãåºãã¦ããããåç´çã®ä¸äººãåè«ã«ããããå¨å¼µã£ã¦ããããããé£ã³éããäºã¯åºæ¥ã¾ããå¼ ±è«ãã¼ããã¨åããããã§ãããå°ä½¿ã«è² ã¶ãã£ã¦å¸°ã£ã¦æ¥ãæããããã大ããªç¼ããã¦äºéãããããé£ã³éãã¦è °ãæãã奴ããããã¨äºã£ãããããã®æ¬¡ã¯æãããã«é£ãã§è¦ãã¾ãã¨çãããï¼é空æ庫ããï¼è¦ªè²ãã®ç¡éç ²ã§å°ä¾ã®æããæã°ãããã
  44. 44. なんかやばい とてつもなく ヤバイ
  45. 45. サイトがヤバイことになっている 文字化けですね • 文字化けとはなにか • どうすればいいのか 31
  46. 46. PCの文字表示 文字化けを語る前に • PCは文字を読めない • 「あ」を「あ」と認識できない 32 文字コード e30102 対応フォント あ PCが文字に表示されるまで UTF-8の「あ」が分かるフォントによって表現される
  47. 47. 文字化けについて WordPressの場合 33 ®æ なんやそれ e30102UTF-8 e30102を理解できないとアウト ウェブブラウザ Webサーバー(apache) PHP DB
  48. 48. サイトがヤバイことになっている 文字化けですね • 文字化けとはなにか • どうすればいいのか 34
  49. 49. 文字化けへの対処 35 文字が全部分かるようにしておく ウェブブラウザ Webサーバー(apache) PHP DB HTMLで規定 設定ファイル 設定
  50. 50. 文字化けへの対処 36 ウェブブラウザ Webサーバー/PHP DB HTMLで規定 設定ファイル 設定 • ブラウザにUTF-8で文字コードを理解してもらう • HTMLのmeta要素のcharset属性 • UTF-8を設定する
  51. 51. 文字化けへの対処 37 ウェブブラウザ Webサーバー(apache) PHP DB HTMLで規定 設定ファイル 設定 • .htaccessかサーバーの設定ファイルを編集する • AddDefaultCharset UTF-8を設定する • UTF-8として文字コードを認識するようになる
  52. 52. 文字化けへの対処 38 ウェブブラウザ Webサーバー(apache) PHP DB HTMLで規定 設定ファイル 設定 • DB作成時 • utf-8 general_ciを設定する • DBがUTF-8を認識できるようになる
  53. 53. サイトがヤバイことになっている 文字化けですね • 文字化けとはなにか • どうすればいいのか 39 ファイルはUTF-8で保存しましょう
  54. 54. UTF-8でのファイル保存 エディタ • SublimeTextシリーズ • PHPStorm • Atom 40 この辺はデフォルトでUTF-8で保存かも
  55. 55. UTF-8でのファイル保存 BOMについて • BOMはByteOrderMarkの略 • UTF-8と認識するための印を先頭につける • BOMがないと、UTF-8と認識 できないアプリもある 41 WordPressはBOMなしで保存
  56. 56. WordPressあるある 俺のサイトが 表示されない件
  57. 57. Webサイトにアクセスできない 42 経験則からの原因の列挙 • Webサイトへのアクセスが集中している • サーバーが落ちている • ドメインの失効
  58. 58. Webサイトにアクセスできない 43 経験則からの原因の列挙 • Webサイトへのアクセスが集中している • サーバーが落ちている • ドメインの失効
  59. 59. Webサイトへのアクセス集中 44 何で集中するとサイトが開けないのか • サーバーでの設定値より多く人が来た • 要求された処理がサーバーの許容量を超えた わかりづらいので図にしてみる
  60. 60. Webサイトへのアクセス集中 45 サーバーでの設定値より多く人が来る キャパオーバーの例 200人以上 で入場制限 サーバー資源を沢山使う要求 サーバー資源を沢山使う要求 200人以上の要求 対応できない
  61. 61. 入場制限の帯域拡張 46 サーバー設定の変更 • 許容値の拡張 • サーバーの設定を変更する • サーバーの再起動を行う • 一度全プロセスをバルスする • 不要アクセスの排除 • 怪しい国からのアクセスを減らす 手っ取り早いのはサーバーの増設
  62. 62. Webサイトへのアクセス集中 47 サーバーでの設定値より多く人が来る キャパオーバーの例 200人以上 で入場制限 サーバー資源を沢山使う要求 サーバー資源を沢山使う要求 200人以上の要求 対応できない
  63. 63. 許容量オーバーへの対処 48 サーバ負荷の低減 • 負荷のかかるSQLの見直し • 負荷のかかるプログラムの見直し • 不要アクセスの排除 手っ取り早いのはサーバーの増設
  64. 64. サーバートラブルは リソースの増設が近道 と、いうことゎ
  65. 65. 金で解決できるね!
  66. 66. WordPressあるある カスタム投稿が 表示できない件
  67. 67. カスタム投稿が表示されないよ? 49 投稿ができるようにするだけじゃダメ • 表示するテンプレートを用意する • 投稿を表示するプログラムを作成する 多少プログラミングする必要がある
  68. 68. 表示用テンプレートを用意する 50 必要なファイル single.php • カスタム投稿ページを表示するのに必要 single-type.php   • カスタム投稿専用個別ページを表示するのに必要 • typeは投稿タイプ名 • register_post_type( こいつ ,$args); single-type.phpがいい理由
  69. 69. おぼろげな記憶 51 single.php   コーディング量増える single-type.php   コーディング量節約 専用のテンプレ作った方が楽
  70. 70. カスタム投稿が表示されないよ? 52 投稿ができるようにするだけじゃダメ • 表示するテンプレートを用意する • 投稿を表示するプログラムを作成する single-type.phpがある前提
  71. 71. 表示用プログラム 53 テンプレートがデータもった状態から始まるので <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php endwhile; ?> <?php endif; ?> <?php //the_content();とかthe系の関数の利用が可能 ?>
  72. 72. the系の関数 54 投稿の内容を表示できるプログラム • the_title(); タイトルの表示 • the_content();  投稿内容の表示 • the_permalink(); 投稿のURL表示 the_postとendifの間に挟む
  73. 73. たとえば・・・ 55 <?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. 74. おまけ WordPressは 勉強がしやすいよ!
  75. 75. WordPressは勉強しやすい 56 理由その1:利用者が多い • ノウハウを持ってる人が多い • コミュニティ活動が盛んに行なわれている 理由その2:資料がタダで見れる • ER図などは公開されている • 関数の利用方法なども公式ページで見れる 名古屋にもあります
  76. 76. WordBench名古屋 57 勉強したい人、登壇したい人 お待ちしてます! WordBench名古屋とは • 勉強会を毎月開催 • HTMLからサーバーまで WordPressに関わることを勉強 • 講師はメンバーが担当してます!
  77. 77. 詳しくはコチラ!
  78. 78. WordPressは勉強しやすい 58 理由その1:利用者が多い • ノウハウを持ってる人が多い • コミュニティ活動が盛んに行なわれている 理由その2:資料がタダで見れる • ER図などは公開されている • 関数の利用方法なども公式ページで見れる 名古屋にもあります
  79. 79. Codex 公式マニュアル 58 超お手軽に学習可能です! 公式のWeb資料 • Codexと検索すれば一番上に出ます • 作業に必要な情報が沢山載ってます • フォーラムがあり、   毎日質問と回答が飛び交ってます
  80. 80. WordPressあるある うちの会社が 仲間を募集してる件
  81. 81. テクノブレイブ • 人数 250人以上 • 本社 名古屋 東京 • 拠点 名古屋、福岡、タイ  • 事業 システムコンサル        インフラコンサル        受託開発
  82. 82. 会社の詳細は今日貰った ビニールバックに入ってます! 詳しくは…
  83. 83. 仲間募集してます! • プログラム書ける人 • 書けないけどデザイン得意な人 • 書けないけど夢がある人 • 書けないけどやる気ある人 • 人付き合い上手な人
  84. 84. いいところ 東京に たまにいけるところ!
  85. 85. いいところ 意見が形だけでも 社長まで届くところ!
  86. 86. いいところ 助けあえる 仲間がいるところ!
  87. 87. これからなところ 内緒で聞いてね!
  88. 88. ご清聴ありがとう ございました

×