Wordbeach 2011 hajimeno ippo

1,209 views

Published on

test

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,209
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Wordbeach 2011 hajimeno ippo

  1. 1. 「はじめの一歩」<br />インストールの仕方やテーマファイルについて等WordPress実装のイロハ<br />岡田洋一<br />
  2. 2. 自己紹介<br />名前 -> 岡田洋一 (ハンドルネームです)<br />Twitter -> @Yousan_O<br />住処 -> 富山県在住<br />WordPress歴 -> 3~4年<br />仕事 -> WordPress用のサーバ構築、プログラム、チューニング<br />言語 -> PHP, 日本語<br />趣味 -> vpnでトンネルを掘ること<br />
  3. 3. はじめに<br />このセションは、WordPressを利用してまだ日が浅い方、ブログ用途で使い始めて見たけど、次の一歩が踏み出せないよー、という方を対象としています。<br />プログラマ/エンジニアの切り口から色々とお話できれば、と思っています。<br />
  4. 4. 私とWordPressの出会い<br />WordPressとの出会いは2007年頃<br />ある案件でCMSを探しており、そのときに発見<br />当初はMovableTypeでやろうとして挫折<br />挫折の原因はページ数(post数)が数千件を超えたあたりから性能的に無理<br />MTに代わる何かを探しているとき、シェアが高いWordPressで試験 -> 採用<br />
  5. 5. 現在のWordPressの利用<br />案件でCMSとして利用<br />コンテンツ数600万<br />PV数月間300万<br />管理画面は機能カットしていないと開けない<br />複数のDBサーバ、webサーバで運用<br />独自のチューニングをしてしまい、オレオレWordPress状態<br />上記以外には個人用ブログなどなど<br />
  6. 6. アジェンダ<br />WordPressの仕組み、必要な環境<br />インストール<br />投稿<br />テーマ<br />プラグイン<br />カスタム投稿タイプとカスタムタクソノミー<br />アイキャッチ画像<br />
  7. 7. 日本語の情報<br />WordPress Codex 日本語版http://wpdocs.sourceforge.jp/<br />WordPress Codexhttp://codex.wordpress.org/<br />
  8. 8. WordPressの仕組み<br />WordPress概略<br />WordPress必要な環境<br />FTPでファイルのアップロード<br />
  9. 9. WordPress概略<br />ユーザがブラウザでwebサーバにアクセスする<br />webサーバがPHPを動かしてDBサーバ(MySQLサーバ)へアクセスする<br />PHPを動かして -> WordPressを動かして<br />DBサーバ -> ブログの記事、コンテンツを保持<br />webサーバが出力データを整形して返答<br />出力データの整形 -> テーマのテンプレートに沿って整形<br />ユーザのブラウザが出力<br />
  10. 10. WordPressに必要な環境<br />Webサーバ<br />PHP5.2.4以上が動くこと<br />DBサーバ<br />MySQL5.0.15以上<br />PostgreSQL等は不可<br />ファイル転送用のサービス<br />選択肢として<br />レンタルサーバ<br />自鯖(自前サーバ、自宅サーバ)<br />
  11. 11. WordPressに必要な環境<br />HTML(+PHP)を編集するエディタ<br />ファイルをアップロードするFTPクライアント<br />
  12. 12. XAMPP<br />XAMPP(ザンプ)とは、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもので、apachefriends.orgから提供されている。主として開発用あるいは学習用ではあるが、イントラネットなどにおいて実運用環境として使われることもある。<br />http://ja.wikipedia.org/wiki/XAMPP<br />wikipedia<br />
  13. 13. XAMPP<br />試験環境、開発環境に適している<br />一台のホスト、一つのインストーラで完結できる<br />通常の運用では複数のホストに対して複数のパッケージをインストールする必要が間々ある<br />
  14. 14. WordPressを使うために<br />レンタルサーバを借りる<br />MySQLの設定が必要だったりする<br />WordPressの公式からzipファイルを落としてくる<br />落としてきたzipを解凍する<br />http://wordpress.org/latest.zip (但し英語版)<br />FTPでファイルのアップロード<br />こっちはFTPの情報が必要<br />www.example.com/wp-admin/を開く<br />必要な項目を埋める<br />キタ(゚∀゚)コレ<br />
  15. 15. レンタルサーバを利用するとき<br />MySQLの情報を控えておく(調べておく)必要がある<br />ユーザ名<br />パスワード<br />ホスト名<br />データベース名(スキーマ名)<br />
  16. 16. 実際にレンタルサーバでやってみた<br />データベース名の入力<br />照合順序 ->文字コードのようなもの<br />Utf8_general_ciにしておけば問題がない<br />
  17. 17. 実際にレンタルサーバでやってみた<br />ユーザ名<br />ホストネーム<br />ログインを許可するホスト名で、%にするとすべて<br />パスワード<br />
  18. 18. FTPでファイルのアップロード<br />FTP -> File Transfer Protocol<br />ファイルの転送用のプロトコル<br />WordPressをwebサーバにアップロードするために使用<br />いくつかのサーバではFTPを利用せず、webブラウザからアップロードができたりするかも<br />
  19. 19. FTPでファイルのアップロード<br /><ul><li>ドキュメントルートの位置を確認しておく</li></li></ul><li>インストール画面<br />
  20. 20. インストール画面<br />
  21. 21. インストール画面<br />
  22. 22. インストール画面<br />
  23. 23. ログイン画面<br />
  24. 24. 管理画面<br />
  25. 25. 記事の投稿<br />
  26. 26. WordPressの記事<br />WordPressには二つの種類の記事が存在<br />post(投稿)<br />ブログの一つの記事として書かれる項目。主たるページに日付の新しい物から順に並べられる項目。<br />wp_postsテーブルで、post_typeが”post”となる行<br />page(固定ページ)<br />
  27. 27. post(投稿)<br />ブログの一つの記事として書かれる項目。主たるページに日付の新しい物から順に並べられる項目。<br />wp_postsテーブルで、post_typeが”post”となる行<br />http://www.example.com/?p=123<br />(但し標準のURL構成の場合)<br />
  28. 28. page(固定ページ)<br />固定的な、同種の物が並ばないような項目。”About this site”や”Contact”といった内容を書くところ。<br />wp-_postsテーブルで、post_typeが”page”となる行<br />http://www.example.com/?page_id=123<br />(但し標準のURL構成の場合)<br />
  29. 29. page(固定ページ)<br />
  30. 30. page(固定ページ)<br />
  31. 31. WordPressのテーマ<br />表示のされかたを決める最も重要な部分<br />(ほぼ)HTMLな書き方で、多少のPHPな書き方<br />スタイルシートを含み、全てのページの外観を決める<br />他の人が作ったテーマを利用することも可能、自分が作ったテーマを配布することも可能<br />
  32. 32. WordPressのテーマ<br />
  33. 33. WordPressのテーマ<br />
  34. 34. WordPressのテーマ<br />
  35. 35. WordPressのテーマ<br />
  36. 36. WordPressのテーマ<br />
  37. 37. WordPressのテーマ(インストール)<br />
  38. 38. WordPressのテーマ(プレビュー)<br />
  39. 39. WordPressのテーマ(表示)<br />
  40. 40. テーマのファイル構造<br />
  41. 41. テーマのファイルの中身<br />
  42. 42. テーマの編集方法 その1<br /><ul><li>手元で編集してサーバにアップロード
  43. 43. 変更を加える度にアップロードをする必要がある。
  44. 44. 普段から利用しているエディタを利用することが可能</li></li></ul><li>テーマの編集方法 その2<br />ブラウザ上でWordPressを通して編集することが可能<br />あくまで簡易的なエディタ<br />リビジョン管理などは不可<br />
  45. 45. テーマの編集方法 その2<br />
  46. 46. テーマの編集例<br />開発用のホストにXAMPPをインストール <br />手元の環境でXAMPPに入っているテーマを編集、確認<br />本番用のサーバへアップロード<br />微調整をブラウザで行う<br />サーバから微調整を行った物をダウンロード<br />手元で保管<br />
  47. 47. テーマ編集のポイント<br />スタイルシート(style.css)が結構重要<br />ここに制作者の名前など、管理画面から見える文字列を格納<br />既存のテーマをいじってみる<br />デフォルトテーマをよくよくいじってみる<br />3.2からtwenty elevenがデフォルトに<br />ロジック部分とデザイン部分を切り分ける<br />Ifやswitchなどの制御構文はテーマの中に<br />関数の定義はfunctions.phpに<br />クラスの定義、フックするような関数はプラグインに<br />
  48. 48. テンプレートヒエラルキー<br />http://codex.WordPress.org/Template_Hierarchy<br />
  49. 49. テンプレートヒエラルキー<br />記事、カテゴリなど、動的に表示されるべきアクセスに対して、どのテンプレート(ファイル)を適用して表示するか、というものを体系的に表した物<br />例として、通常の背景は白色で、カテゴリ一覧のページは白くしたい場合、category.phpにて背景部分のidを変えたりする。<br />中には表示されないアクセス(HTML出力の無いアクセス)もあるよ!<br />静的な表示へのアクセス、.htaccessなどを用いたリダイレクトは除かれるよ!<br />
  50. 50. テンプレートヒエラルキー(hogeカテゴリの場合)<br />カテゴリID: 123<br />カテゴリslug: hoge<br />www.example.com/?cat=123 へアクセスされた場合<br />category-hoge.phpがあれば適用<br />category-123.phpがあれば適用<br />category.phpがあれば適用<br />archive.phpがあれば適用<br />index.phpがあれば適用<br />
  51. 51. テンプレートヒエラルキー(postの場合)<br />ポストID: 234<br />www.example.com/?p=234 へアクセスされた場合<br />single-post.phpがあれば適用<br />single.phpがあれば適用<br />index.phpがあれば適用<br />
  52. 52. プラグイン<br />WordPressを快適に使うためのプログラム群<br />表示方法をカスタマイズ<br />天気予報をWordPressに追加<br />スペルチェック機能<br />インターネット上のどこかの誰かが書いたプラグインを利用可能<br />バージョンの互換性に関する情報が提供される<br />
  53. 53. プラグイン<br />公式サイトからダウンロード -> インストールが可能<br />WordPressの管理画面から、ブラウザ操作のみでインストール可能 (要FTPアクセス)<br />プラグインはzip形式で配布され、一つのディレクトリが一つのプラグインをなす<br />
  54. 54. プラグイン<br />
  55. 55. プラグイン<br />
  56. 56. プラグインを拾ってくるときの注意点<br />ダウンロード数が多いこと<br />数は力<br />互換性があること<br />最新版との互換性を必ずしも求めなくても良いが、せめてメジャーバージョンの一致、もしくは一つ前ぐらいまで<br />新しいこと<br />互換性<br />欲しいと思った機能が付いてくる可能性<br />評価の数が多くて高いもの<br />評価一件で欲し五つではアテにならない<br />
  57. 57. プラグイン<br />
  58. 58. プラグイン<br />
  59. 59. こんなプラグインを使っています<br />Akismet<br />Contact From 7<br />Custom Post Type UI<br />Democracy<br />Google XML Sitemaps<br />Hello Dolly<br />SyntaxHighlighter Evolved<br />Twitter Goodies<br />User Access Manager<br />参考サイトhttp://www.ustream.tv/recorded/15007221<br />
  60. 60. カスタム投稿タイプカスタムタクソノミー<br />WordPress3.0あたりから登場した新しい機能<br />内部的には2.3あたりから意識されていたり、2.8で公開されてたり<br />ブログからCMSへ生まれ変わる(?)ためのステップ<br />
  61. 61. カスタム投稿タイプ<br />post, pageに代わる第三、第四の投稿タイプ(post_type)<br />実際には”revision”や”attachment”があったり<br />これまではカテゴリやタグで表示を切り分けてきたものを、投稿タイプという区分けで切り分ける<br />
  62. 62. カスタムタクソノミー<br />tag, categoryに代わる第三、第四のタクソノミー<br />実際には”link_category”や”nav_menu”があったり<br />以前のバージョンではtagとcategoryは明確に区別されていたが、途中から区別されなくなった<br />現在ではtagもcategoryも一つのタクソノミーとして扱われる<br />タクソノミー -> 分類<br />
  63. 63. カスタム何とかの続きは4コマ目で!<br />
  64. 64. アイキャッチ画像<br />一つのポストに一つの画像をつけることが可能<br />一般の画像の挿入とは別途に、loopでの見出し画像として利用しやすいように配慮<br />有効化するにはfunctions.php等に記述が必要だったり<br />
  65. 65. 時間があればアイキャッチ画像の設定を実演<br />10分もなければ質問へ<br />
  66. 66. 謝辞<br />Wordbeachスポンサーの皆さま<br />新舞子まなビレッジ 南浜荘の皆さま<br />Wordbeach実行委員会の皆さま<br />弊社社長<br />本日お越しくださった参加者の皆さま<br />
  67. 67. ご静聴ありがとうございました<br />
  68. 68. 質問などあればどうぞ<br />Twitter, 懇親会等でもどうぞお気軽に<br />

×