test

1. 「はじめの一歩」 インストールの仕方やテーマファイルについて等WordPress実装のイロハ 岡田洋一

2. 自己紹介 名前 -> 岡田洋一 (ハンドルネームです) Twitter -> @Yousan_O 住処 -> 富山県在住 WordPress歴 -> 3～4年 仕事 -> WordPress用のサーバ構築、プログラム、チューニング 言語 -> PHP, 日本語 趣味 -> vpnでトンネルを掘ること

3. はじめに このセションは、WordPressを利用してまだ日が浅い方、ブログ用途で使い始めて見たけど、次の一歩が踏み出せないよー、という方を対象としています。 プログラマ/エンジニアの切り口から色々とお話できれば、と思っています。

4. 私とWordPressの出会い WordPressとの出会いは2007年頃 ある案件でCMSを探しており、そのときに発見 当初はMovableTypeでやろうとして挫折 挫折の原因はページ数(post数)が数千件を超えたあたりから性能的に無理 MTに代わる何かを探しているとき、シェアが高いWordPressで試験 -> 採用

5. 現在のWordPressの利用 案件でCMSとして利用 コンテンツ数600万 PV数月間300万 管理画面は機能カットしていないと開けない 複数のDBサーバ、webサーバで運用 独自のチューニングをしてしまい、オレオレWordPress状態 上記以外には個人用ブログなどなど

6. アジェンダ WordPressの仕組み、必要な環境 インストール 投稿 テーマ プラグイン カスタム投稿タイプとカスタムタクソノミー アイキャッチ画像

7. 日本語の情報 WordPress Codex 日本語版http://wpdocs.sourceforge.jp/ WordPress Codexhttp://codex.wordpress.org/

8. WordPressの仕組み WordPress概略 WordPress必要な環境 FTPでファイルのアップロード

9. WordPress概略 ユーザがブラウザでwebサーバにアクセスする webサーバがPHPを動かしてDBサーバ(MySQLサーバ)へアクセスする PHPを動かして -> WordPressを動かして DBサーバ -> ブログの記事、コンテンツを保持 webサーバが出力データを整形して返答 出力データの整形 -> テーマのテンプレートに沿って整形 ユーザのブラウザが出力

10. WordPressに必要な環境 Webサーバ PHP5.2.4以上が動くこと DBサーバ MySQL5.0.15以上 PostgreSQL等は不可 ファイル転送用のサービス 選択肢として レンタルサーバ 自鯖(自前サーバ、自宅サーバ)

11. WordPressに必要な環境 HTML(+PHP)を編集するエディタ ファイルをアップロードするFTPクライアント

12. XAMPP XAMPP（ザンプ）とは、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもので、apachefriends.orgから提供されている。主として開発用あるいは学習用ではあるが、イントラネットなどにおいて実運用環境として使われることもある。 http://ja.wikipedia.org/wiki/XAMPP wikipedia

13. XAMPP 試験環境、開発環境に適している 一台のホスト、一つのインストーラで完結できる 通常の運用では複数のホストに対して複数のパッケージをインストールする必要が間々ある

14. WordPressを使うために レンタルサーバを借りる MySQLの設定が必要だったりする WordPressの公式からzipファイルを落としてくる 落としてきたzipを解凍する http://wordpress.org/latest.zip (但し英語版) FTPでファイルのアップロード こっちはFTPの情報が必要 www.example.com/wp-admin/を開く 必要な項目を埋める ｷﾀ(ﾟ∀ﾟ)ｺﾚ

15. レンタルサーバを利用するとき MySQLの情報を控えておく(調べておく)必要がある ユーザ名 パスワード ホスト名 データベース名(スキーマ名)

16. 実際にレンタルサーバでやってみた データベース名の入力 照合順序 ->文字コードのようなもの Utf8_general_ciにしておけば問題がない

17. 実際にレンタルサーバでやってみた ユーザ名 ホストネーム ログインを許可するホスト名で、%にするとすべて パスワード

18. FTPでファイルのアップロード FTP -> File Transfer Protocol ファイルの転送用のプロトコル WordPressをwebサーバにアップロードするために使用 いくつかのサーバではFTPを利用せず、webブラウザからアップロードができたりするかも

20. インストール画面

21. インストール画面

22. インストール画面

23. ログイン画面

24. 管理画面

25. 記事の投稿

26. WordPressの記事 WordPressには二つの種類の記事が存在 post(投稿) ブログの一つの記事として書かれる項目。主たるページに日付の新しい物から順に並べられる項目。 wp_postsテーブルで、post_typeが”post”となる行 page(固定ページ)

27. post(投稿) ブログの一つの記事として書かれる項目。主たるページに日付の新しい物から順に並べられる項目。 wp_postsテーブルで、post_typeが”post”となる行 http://www.example.com/?p=123 (但し標準のURL構成の場合)

28. page(固定ページ) 固定的な、同種の物が並ばないような項目。”About this site”や”Contact”といった内容を書くところ。 wp-_postsテーブルで、post_typeが”page”となる行 http://www.example.com/?page_id=123 (但し標準のURL構成の場合)

29. page(固定ページ)

30. page(固定ページ)

31. WordPressのテーマ 表示のされかたを決める最も重要な部分 (ほぼ)HTMLな書き方で、多少のPHPな書き方 スタイルシートを含み、全てのページの外観を決める 他の人が作ったテーマを利用することも可能、自分が作ったテーマを配布することも可能

32. WordPressのテーマ

33. WordPressのテーマ

34. WordPressのテーマ

35. WordPressのテーマ

36. WordPressのテーマ

37. WordPressのテーマ(インストール)

38. WordPressのテーマ(プレビュー)

39. WordPressのテーマ(表示)

40. テーマのファイル構造

41. テーマのファイルの中身

43. 変更を加える度にアップロードをする必要がある。

45. テーマの編集方法 その２

46. テーマの編集例 開発用のホストにXAMPPをインストール 手元の環境でXAMPPに入っているテーマを編集、確認 本番用のサーバへアップロード 微調整をブラウザで行う サーバから微調整を行った物をダウンロード 手元で保管

47. テーマ編集のポイント スタイルシート(style.css)が結構重要 ここに制作者の名前など、管理画面から見える文字列を格納 既存のテーマをいじってみる デフォルトテーマをよくよくいじってみる 3.2からtwenty elevenがデフォルトに ロジック部分とデザイン部分を切り分ける Ifやswitchなどの制御構文はテーマの中に 関数の定義はfunctions.phpに クラスの定義、フックするような関数はプラグインに

48. テンプレートヒエラルキー http://codex.WordPress.org/Template_Hierarchy

49. テンプレートヒエラルキー 記事、カテゴリなど、動的に表示されるべきアクセスに対して、どのテンプレート(ファイル)を適用して表示するか、というものを体系的に表した物 例として、通常の背景は白色で、カテゴリ一覧のページは白くしたい場合、category.phpにて背景部分のidを変えたりする。 中には表示されないアクセス(HTML出力の無いアクセス)もあるよ！ 静的な表示へのアクセス、.htaccessなどを用いたリダイレクトは除かれるよ！

50. テンプレートヒエラルキー(hogeカテゴリの場合) カテゴリID: 123 カテゴリslug: hoge www.example.com/?cat=123 へアクセスされた場合 category-hoge.phpがあれば適用 category-123.phpがあれば適用 category.phpがあれば適用 archive.phpがあれば適用 index.phpがあれば適用

51. テンプレートヒエラルキー(postの場合) ポストID: 234 www.example.com/?p=234 へアクセスされた場合 single-post.phpがあれば適用 single.phpがあれば適用 index.phpがあれば適用

52. プラグイン WordPressを快適に使うためのプログラム群 表示方法をカスタマイズ 天気予報をWordPressに追加 スペルチェック機能 インターネット上のどこかの誰かが書いたプラグインを利用可能 バージョンの互換性に関する情報が提供される

53. プラグイン 公式サイトからダウンロード -> インストールが可能 WordPressの管理画面から、ブラウザ操作のみでインストール可能 (要FTPアクセス) プラグインはzip形式で配布され、一つのディレクトリが一つのプラグインをなす

54. プラグイン

55. プラグイン

56. プラグインを拾ってくるときの注意点 ダウンロード数が多いこと 数は力 互換性があること 最新版との互換性を必ずしも求めなくても良いが、せめてメジャーバージョンの一致、もしくは一つ前ぐらいまで 新しいこと 互換性 欲しいと思った機能が付いてくる可能性 評価の数が多くて高いもの 評価一件で欲し五つではアテにならない

57. プラグイン

58. プラグイン

59. こんなプラグインを使っています Akismet Contact From 7 Custom Post Type UI Democracy Google XML Sitemaps Hello Dolly SyntaxHighlighter Evolved Twitter Goodies User Access Manager 参考サイトhttp://www.ustream.tv/recorded/15007221

60. カスタム投稿タイプカスタムタクソノミー WordPress3.0あたりから登場した新しい機能 内部的には2.3あたりから意識されていたり、2.8で公開されてたり ブログからCMSへ生まれ変わる(?)ためのステップ

61. カスタム投稿タイプ post, pageに代わる第三、第四の投稿タイプ(post_type) 実際には”revision”や”attachment”があったり これまではカテゴリやタグで表示を切り分けてきたものを、投稿タイプという区分けで切り分ける

62. カスタムタクソノミー tag, categoryに代わる第三、第四のタクソノミー 実際には”link_category”や”nav_menu”があったり 以前のバージョンではtagとcategoryは明確に区別されていたが、途中から区別されなくなった 現在ではtagもcategoryも一つのタクソノミーとして扱われる タクソノミー -> 分類

63. カスタム何とかの続きは4コマ目で！

64. アイキャッチ画像 一つのポストに一つの画像をつけることが可能 一般の画像の挿入とは別途に、loopでの見出し画像として利用しやすいように配慮 有効化するにはfunctions.php等に記述が必要だったり

65. 時間があればアイキャッチ画像の設定を実演 10分もなければ質問へ

66. 謝辞 Wordbeachスポンサーの皆さま 新舞子まなビレッジ 南浜荘の皆さま Wordbeach実行委員会の皆さま 弊社社長 本日お越しくださった参加者の皆さま

67. ご静聴ありがとうございました

68. 質問などあればどうぞ Twitter, 懇親会等でもどうぞお気軽に