PowerPoint プレゼンテーション

(1)

株式会社コミュニティコム 〒116-0013 東京都荒川区西日暮里5-37-5 NSO2階 URL： http://www.communitycom.jp/ E-MAIL： [email protected] 星野邦敏 ～WordPressを使ってかんたんスマホ最適化！～

(2)

スライドは後日に公開します！

WordPress（ワードプレス）コミュニティ http://wp3.jp/ PDFファイルにて、公開します。 VCスペシャルセミナー WordPress 始めに

(3)

０．自己紹介１． _{WordPressについて} ２． WordPressを使ってスマートフォン最適化 ３．ワークショップ（デモ）４．他にもこんなことができる VCスペシャルセミナー WordPress 目次５．今後の情報の調べ方など

(4)

(5)

株式会社コミュニティコムという会社で、自社運営サイトやアプリ、他企業様向けサイトも作っています。 オープンソースの活動をしたり、IT系の勉強会を主催したり、 地域の活動をしたり。 WordPressをCMSとしてWEBサイトを作ることが増えています。 星野邦敏(ほしのくにとし) Twitter ： @khoshino

Facebook : 星野邦敏（Kunitoshi Hoshino）

VCスペシャルセミナー WordPress

(6)

WordPressのイベントである

「WordCamp」や「WordBench」に スタッフやスピーカーとして参加。

(7)

WordPress日本語サイトの「イベントカレンダー」を更新する係。

ココ

(8)

公式ディレクトリにプラグインを登録したり。 Japan Tenkiプラグイン →全国142地域の天気を自動表示 Hello Wapuuプラグイン VCスペシャルセミナー WordPress 自己紹介

(9)

自社サイト運営から法人化。

ASPのイベントでお話する機会も。

(10)

WordPressに関して、書籍や雑誌で執筆をしたり。 2012年1月に出版 web creators特別号 2012年3月に出版 速習デザインWordPress 2012年2月に出版 Web Designing 2012年3月号 VCスペシャルセミナー WordPress 自己紹介

(11)

「速習デザインWordPress」 （技術評論社）

2012年3月出版

(12)

(13)

サンプルサイト

水族館コミュニティ

http://www.japan-aquarium.com/

(14)

同一URLで、

PCサイト、スマートフォンサイト、ガラケー（携帯）サイトの

振り分けを自動で実現。

(15)

・Twitterに「ツイートする」ボタン ・Facebookの「いいね！」ボタン などを、自分のサイトに設置してソーシャルな流れを作れる。プラグインをインストールするだけ！ VCスペシャルセミナー WordPress サンプルサイト

(16)

プラグインをインストールするだけ！クリック一つで口コミ評価を出来るようにする。＆口コミ評価一覧リストをサイドバーに表示する。 VCスペシャルセミナー WordPress サンプルサイト

(17)

プラグインをインストールするだけ！

アクセスの多い記事順に自動でリスト化する。

(18)

各記事のコメントを一覧表示する。

(19)

条件検索機能

(20)

プラグインをインストールするだけ！スマートフォンや携帯電話からのアクセスは、スマートフォンサイト・携帯サイトを VCスペシャルセミナー WordPress サンプルサイト

(21)

メールフォーム

(22)

WordPressに元々備わっている機能

WordPressの カスタムフィールド

(23)

新着記事をトップページに表示。

(24)

他のブログの更新情報を RSSで自動取得して表示。

(25)

WordPressの コメント欄を少しだけカスタマイズ WordPressに元々備わっている機能 VCスペシャルセミナー WordPress サンプルサイト

(26)

サイトのデザインは、 WordPressの デフォルトテーマ 「Twenty Ten」を、 子テーマにして、少しだけカスタマイズしただけ。 WordPressに元々備わっている機能 VCスペシャルセミナー WordPress サンプルサイト

(27)

各地域の天気予報を自動で取得する。

WordPressとAPIの連携（APIの活用事例） VCスペシャルセミナー WordPress

(28)

WordPressとAPIの連携（APIの活用事例）

各記事の水族館の位置を

Google Maps APIと連携して 自動で地図に一覧表示させる。

＆

近いスポットはピンをまとめる。

(29)

そのスポットの周辺の

写真を自動で表示させる。

(30)

各記事に関連する画像を自動表示する。

(31)

その水族館について、 Twitterの最新つぶやきを 自動表示させる。 WordPressとAPIの連携 （APIの活用事例） VCスペシャルセミナー WordPress サンプルサイト

(32)

WordPressとAPIの連携（APIの活用事例） そのスポットから２点間の直線距離の近い順番に、カフェやレストランを、自動で一覧表示する。この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。 VCスペシャルセミナー WordPress サンプルサイト

(33)

WordPressとAPIの連携（APIの活用事例） そのスポットから２点間の直線距離の近い順番に、ホテルを、自動で一覧表示する。この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。 VCスペシャルセミナー WordPress サンプルサイト

(34)

WordPressとAPIの連携（APIの活用事例） 記事に関連する商品を自動で一覧表示する。この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。 VCスペシャルセミナー WordPress サンプルサイト

(35)

サンプルサイト

常連イン

http://www.joren.in/

(36)

VCスペシャルセミナー WordPress サンプルサイト WordPressと現在地の緯度経度情報取得 HTML5のGeoLocation APIにより、 現在地の緯度経度情報を取得。その地点から近いお店やホテルの情報を取得。

(37)

サンプルサイト

現在地から近い

お店やホテルの情報を

WebAPIから取得して表示。 Google Mapa APIと連携。 詳細ページは各APIから取得。

(38)

サンプルサイト

Twitterによるユーザー登録。

(39)

VCスペシャルセミナー WordPress サンプルサイト WordPressに元々ある ユーザー登録機能をカスタマイズ。 WordPressに元々備わっている機能

(40)

世界トップ100万サイト中、WordPress利用率

１５．９％

マクラケン直子さんのブログより引用 http://detlog.org/2011/09/12/wordcamp-kobe-2011/ VCスペシャルセミナー WordPress WordPressについて

(41)

CMSでのWordPressのシェア

５３．９％

マクラケン直子さんのブログより引用 http://detlog.org/2011/09/12/wordcamp-kobe-2011/ VCスペシャルセミナー WordPress WordPressについて

(42)

世界の検索トレンド

VCスペシャルセミナー WordPress WordPressについて

(43)

日本の検索トレンド

(44)

BOOK・OFFスタッフブログ

ブログとしても

勝間和代ブログカイ士伝 （「WordPress を使ったサイト– VCスペシャルセミナー WordPress WordPressについて

(45)

美的.com TechCrunch Japan ロイター通信

マガジンサイトとしても

（「WordPress を使ったサイト– WordPress Codex 日本語版」より引用） VCスペシャルセミナー WordPress WordPressについて

(46)

クックパッド株式会社株式会社ベクター IR・会社情報サイト さいたまスーパーアリーナ （「WordPress を使ったサイト–

企業のサイトとしても

(47)

昭和女子大学神戸芸術工科大学長岡工業高等専門学校

学校のサイトとしても

(48)

PEPSI （ペプシ）のブログ フォルクスワーゲン Nikon

海外のサイトとしても

（「WordPress を使ったサイト– VCスペシャルセミナー WordPress WordPressについて

(49)

小出裕章 (京大助教) 非公式まとめ prayforjapan.jp 助けあいジャパン

震災の時にはスピーディな情報公開に貢献

(50)

WordPressとは？

・CMS（コンテンツ・マネジメント・システム） ・ブログだけでなく、企業サイトやコミュニティサイトも ・オープンソース（GPLライセンス） ・無料・機能拡張が柔軟・利用者が多い、情報が多い ・プログラムはPHP、データベースはMySQLで構成 VCスペシャルセミナー WordPress WordPressについて

(51)

GPLライセンスとは？

→オープンソースの一形態・無保証・著作権表示の保持・無料でソースコードを入手できる、再配布自由・特定製品に依存しない、技術的な中立を保持・個人やグループを差別できない ・再配布物にもGPLライセンスが適用される VCスペシャルセミナー WordPress WordPressについて

(52)

WordPressを利用すると・・・

（１）好きな独自ドメイントで運営できる。（２）自分の意図しない広告は入らない。（３）文章や写真のデータを自分で管理できる。（４）突然のサービス停止の心配がない。（５）自由にデザインや機能を追加できる。 VCスペシャルセミナー WordPress WordPressについて

(53)

（１）好きな独自ドメイントで運営できる。無料のブログでは、例えば、 http://ameblo.jp/（自分のアカウントID） http://blogs.yahoo.co.jp/（自分のアカウントID） といった形になりますが、 WordPressをサーバーに設置して独自ドメインを取得すれば、 自分のURLでサイトを運営することができます。

WordPressを利用すると・・・

(54)

（２）自分の意図しない広告は入らない。無料のブログでは、 その無料ブログサービスのPR広告が勝手に入ってしまうことも 多くあります。そのPR広告を外すために有料版に切り替えて お金が掛かることもあると思います。 WordPressでは、レンタルサーバー代は掛かりますが、 その分、自分の意図しない広告が入ることは今後もありません。

WordPressを利用すると・・・

(55)

（３）文章や写真のデータを自分で管理できる。無料のブログでは、文章や写真などのデータは、その無料ブログサービスのサーバー上にあり、データにアクセスできないことが多いです。 WordPressでは、自分の管理しているサーバーに全ての データがあるので、いつでもアクセスが可能です。

WordPressを利用すると・・・

(56)

（４）突然のサービス停止の心配がありません。無料のブログでは、サービス停止で、ブログが強制的に無くなってしまう可能性もあります。例）「さるさる日記」（http://www.diary.ne.jp/） WordPress.orgは、サーバーインストール型なので、 サービス停止によるブログ閉鎖などの心配がありません。

WordPressを利用すると・・・

(57)

（５）自由にデザインや機能を追加できます。無料のブログでは、デザインできる箇所に制約がある場合もあります。また、欲しい機能がサービスに備わっていない場合もあると思います。 WordPressでは、後述する「テーマ」と「プラグイン」により 自由にデザインと機能を、選択して設置することができます。慣れている人は、自分のイメージ通りに作ることもできるので、カスタマイズの柔軟性がとても高いです。

WordPressを利用すると・・・

(58)

WordPress.com と WordPress.org フリーのブログサービス ＜WordPress.com＞ ＜WordPress.org＞ サーバーインストール型・サーバーを用意する必要なく作れる。 ・データベースの管理権限、FTP の アクセス権などが無く、テーマやプラグインのアップロードに制約。・サーバーを用意する必要がある。・自由度が高い。 今回はorgの説明。 VCスペシャルセミナー WordPress WordPressについて

(59)

PHP バージョン

5.2.4 以上

MySQL バージョン

5.0.15 以上

もし、レンタルサーバーを借りる時は一応、仕様を確認しましょう。 →ほとんどのレンタルサーバーで対応しています！

WordPressが動く環境

(60)

レンタルサーバー情報

WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/レンタルサーバ情報 のページが便利です。 さくらのレンタルサーバ、ロリポップ！、CORESERVER.JP、heteml、XREA、CPI、 チカッパ！、ファーストサーバ、ABLENET、め組サーバ、オーシャンインターネット、 MEDIAWARS、エックスサーバー、シックスコア、ハッスルサーバー、ギガーン、 livedoorレンタルサーバ、FC2レンタルサーバー、使えるねっと、美ら海レンタルサーバー、 フューチャースピリッツ、SpeeVer、カゴヤ・ジャパン、OCN ホスティング、WADAX、

ExpressWeb、BlueHost、DreamHost、Exclusive Hosting、Laughing Squid、

(61)

「４分で解説！WordPressインストール」

http://www.youtube.com/watch?v=dfI9cnc8ac0

(62)

ワンクリックインストール

http://wpdocs.sourceforge.jp/WordPress_ のインストール/ワンクリックインストール 国内の２０近いレンタルサーバーが、 WordPressワンクリックインストールに対応。 レンタルサーバーの管理画面から導入。 VCスペシャルセミナー WordPress WordPressについて

(63)

レンタルサーバーの「heteml（ヘテムル）」を 例にして、 http://heteml.jp/ 「heteml（ヘテムル）」の管理画面からの ワンクリックインストールを見てみましょう。

ワンクリックインストール

(64)

①

ワンクリックインストール

(65)

②

ワンクリックインストール

(66)

③

ワンクリックインストール

(67)

④

ワンクリックインストール

(68)

インストール完了！ワンクリックインストールを使えば、インストールに１分も掛からない！？

ワンクリックインストール

(69)

wp-config.php

ワンクリックインストールの場合は、データベース情報を意識することが少ないので、必要になったら、 wp-config.phpファイルを見ましょう！ VCスペシャルセミナー WordPress WordPressについて

(70)

データベース情報などの確認

wp-admin / wp-content / wp-includes / index.php license.txt readme-ja.html readme.html wp-activate.php wp-app.php wp-atom.php wp-blog-header.php wp-comments-post.php wp-commentsrss2.php wp-config.php （wp-config-sample.php） wp-cron.php wp-feed.php wp-links-opml.php wp-load.php wp-login.php wp-mail.php wp-pass.php wp-rdf.php wp-register.php wp-rss2.php wp-rss.php wp-settings.php wp-signup.php wp-trackback.php xmlrpc.php VCスペシャルセミナー WordPress WordPressについて

(71)

投稿と固定ページ

記事を書くのに使うのは、基本、この２箇所。 ※WordPress3.0から「カスタム投稿タイプ」ができましたが、 これは応用的なので詳細はお話しません。興味のある方は、検索などで調べてみてください。 VCスペシャルセミナー WordPress WordPressについて

(72)

投稿・時系列の記事・カテゴリー＆タグなどで分類・投稿間で親子関係は無し・投稿毎の専用テンプレートの選択は不可例：ブログ記事、新着ニュース固定ページ・時系列ではなく、順序でソート・カテゴライズは無し・階層化（親と子）構造が可能・投稿毎の専用テンプレートの選択が可能例：自己紹介、会社概要

投稿と固定ページ

(73)

新規投稿をクリック。

投稿

(74)

記事を書いて・・・公開！

投稿

(75)

表示されました！ ※表示の仕方は、テーマのコードの書き方によって変えられますが、デフォルトテーマでは、時系列に表示されます。

投稿

(76)

「カテゴリー」や「タグ」を使うことで、投稿記事を、分類することができます。 ※WordPress3.0から「カスタムタクソノミー （カスタム分類）」ができましたが、これは応用的なので詳細はお話しません。興味のある方は、検索などで調べてみてください。

投稿

(77)

本に例えると・・・「カテゴリー」は、『章』。「タグ」は、『付箋』。というイメージ

投稿

(78)

投稿・時系列の記事・カテゴリー＆タグなどで分類・投稿間で親子関係は無し・投稿毎の専用テンプレートの選択は不可例：ブログ記事、新着ニュース固定ページ・時系列ではなく、順序でソート・カテゴライズは無し・階層化（親と子）構造が可能・投稿毎の専用テンプレートの選択が可能例：自己紹介、会社概要

投稿と固定ページ

(79)

新規追加をクリック。

固定ページ

(80)

記事の書き方は投稿と同じ

固定ページ

(81)

表示されました！ ※時系列を意識せずに表示されます。

固定ページ

(82)

ページは、・階層化して使うことができます。・デザインテンプレートを複数用意して、切り替えることができます。・順序も変えられます。

固定ページ

(83)

入力方法には、①ビジュアル、②HTMLの２種類があります。 ①ビジュアルは、公開した記事の表示をイメージしながら直感的に編集することができます。 ②HTMLは、HTMLコードを書いて編集します。（HTMLが分かる人向け）

投稿と固定ページ

(84)

・記事にパスワードを掛けたり、・下書き保存したり、・未来の日付で予約投稿したり、できます。

投稿と固定ページ

(85)

画像の編集がWordPress上で出来ます！

ココをクリック

投稿と固定ページ

(86)

投稿と固定ページ

画像の編集がWordPress上で出来ます！

(87)

・画像の回転、・画像の反転、・トリミングなどができます。 ※本格的な画像編集は、 Photoshopなどの ソフトを使いましょう。

投稿と固定ページ

(88)

アイキャッチ画像

※WordPress3.0からの新機能。

投稿と固定ページ

(89)

(90)

サンプルサイト

水族館コミュニティ

http://www.japan-aquarium.com/

(91)

同一URLで、

PCサイト、スマートフォンサイト、ガラケー（携帯）サイトの

振り分けを自動で実現。

(92)

WordPressでは、無料で、 PC用・スマホ用・モバイル用に、 同じURLでユーザーエージェントで振り分けることができます。 （例）（１）各端末ごとに自動で最適な表示・ユーザーも見やすい・収益の機会損失が無くなる（２） 同一URLで自動で振り分け ・コンテンツを複数書く手間が無い・ミラーサイトにならない ・被リンク分散が無くSEOにも合う VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(93)

しかも、PCサイト用バナーと、携帯サイト用バナーを

切り替えるなど、表示させるコンテンツも変えられます。

＜PC用のバナー＞ ＜モバイル用のバナー＞

(94)

（方法１）スマートフォンに自動対応するプラグイン（方法２） Media Queriesを使ってテーマで対応 （方法３）ユーザーエージェントで振り分けて、 PC・スマートフォン・ガラケー、 それぞれのサイトを作る（難易度）低高 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(95)

（方法１）スマートフォンに自動対応するプラグイン 「WPtouch」プラグインを インストールして有効化すると、スマートフォン対応が自動でされた上に、デザインもスマートフォンっぽくなっています。 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(96)

プラグイン、管理画面からも選べます！

検索できます！

「WPtouch」

で検索！

WordPress.orgからも選べます！ VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(97)

プラグインフォルダの確認

wp-admin / wp-content / wp-includes / index.php license.txt readme-ja.html readme.html wp-activate.php wp-app.php wp-atom.php languages / plugins / themes / upgrade / uploads / index.php akismet / wp-multibyte-patch / hello.php index.php ココにプラグインフォルダを入れる！ 「wptouch」フォルダ VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(98)

WPtouch Languageを 「Japanese」に 選択して、 Saveする。

WPtouchは日本語にも対応しています。

（一部翻訳が微妙） VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(99)

WPtouchには有料版があります。

http://www.bravenewcode.com/store/plugins/wptouch-pro/ 基本的に、「Developer」を 選ばざるを得ない。 →ライセンスキーを各サイトごとに入力して管理する方法を取っている。 １回199ドルを支払えば、 その後は無制限・無期限で使える。 PayPalかクレジットカード決済 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(100)

Wptouch有料版は、色々できます。

iPadに対応。

(101)

Wptouch有料版は、色々できます。

「Enabled」を選択。

iPad対応

(102)

WPtouch有料版は、色々できます。

その他にも、・アイコン変更・メニュー変更・広告削除・広告設定・複数テーマ設定・デザイン色変更など VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(103)

(104)

WordPress3.2からの 新デフォルトテーマ 「Twenty Eleven」テーマは、 Media Queriesに対応した テーマですので、このテーマをベースにカスタマイズすることもできます。 CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応（方法２） VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(105)

「Whiteboard」テーマなど、 http://whiteboardframework.com/ Media Queriesに対応した WordPressのテーマは、 複数あります。 CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応（方法２） VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(106)

style.css →横幅に応じて自動対応させている。 /* =Responsive Structure --- */ @media (max-width: 800px) { ・・・・・ } @media (max-width: 650px) { ・・・・・ } @media (max-width: 450px) { ・・・・・ }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応（方法２） VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(107)

style.css →横幅に応じて自動対応させている。 /* =Responsive Structure --- */ @media (max-width: 800px) { ・・・・・ } @media (max-width: 650px) { ・・・・・ } @media (max-width: 450px) { ・・・・・ }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { ・・・・・ビューエリアの最大幅 横幅800pxより小さい場合に適用 横幅650pxより小さい場合に適用 横幅450pxより小さい場合に適用 ビューエリアが320px～480pxの場合に適用 「レスボンシブウェブデザイン」 CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応（方法２） VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(108)

jQueryMobileでの

レスボンシブウェブデザインも可能です。

// @media all and (max-device-width: 480px) if ( window.screen < 480 ) { // jQuery Mobile 読み込み document.write('<script' + ' src="jquery.mobile.js"></' + 'script>'); ・端末ごとに出力するコンテンツ量を変えたい。・ガラケー（携帯電話）にも同時に対応をしたい。 →その場合は、（方法３）へ。 CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応（方法２） VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(109)

レスポンシブ・ウェブデザインメディアクエリで、横幅に応じてサイトを最適化。デフォルトテーマ 「Twenty Eleven」を 「子テーマ」で 8bitodyssey.com VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(110)

レスポンシブ・ウェブデザインに対応した日本人が作った無料配布の WordPressテーマ。 BizVektorテーマ VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(111)

(112)

PCサイト スマートフォンサイトモバイルサイト（ガラケー携帯） Ktai Styleプラグイン ・パケット量節約・画像を自動縮小など、日本のガラケー独特の仕様に対応（方法３）ユーザーエージェントで振り分けて、PC・スマートフォン・_{ガラケー、それぞれのサイトを作る} ユーザーエージェントで振り分け （方法１）WPtouchプラグインをそのまま使う or カスタマイズ （方法２）MobilePressプラグインをそのまま使う or カスタマイズ （方法３）Ktai Styleプラグインをカスタマイズ （方法４）ユーザーエージェントを振り分けるプラグイン

（「iPhone theme switcher」「Mobile Theme Switcher」「UserAgent Theme Switcher」など）

(113)

ユーザーエージェントで振り分け

（方法１）WPtouchプラグインをそのまま使う or カスタマイズ

（方法２）MobilePressプラグインをそのまま使う or カスタマイズ

（方法３）Ktai Styleプラグインをカスタマイズ

（方法４）ユーザーエージェントを振り分けるプラグイン

（方法５）$is_iphone関数で条件分岐 （$is_iphone＝iPhone＆AndroidのSafariでtrueになる。） PCサイト スマートフォンサイトモバイルサイト（ガラケー携帯） Ktai Styleプラグイン ・パケット量節約・画像を自動縮小など、日本のガラケー独特の仕様に対応（方法３）ユーザーエージェントで振り分けて、PC・スマートフォン・_{ガラケー、それぞれのサイトを作る} VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(114)

（手順１）スマートフォンサイトに対応したテーマや、ガラケーサイトに対応したテーマを作る。（手順２） ktai-themesフォルダに、作ったテーマを入れる。 （手順３） 管理画面のKtai Styleの［テーマ］をクリックして、 「Ktai Style」プラグイン VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(115)

［いますぐインストール］をクリックして、有効化します。

Ktai Styleプラグイン

(116)

Ktai Styleでのテーマフォルダの確認 wp-admin / wp-content / wp-includes / index.php license.txt readme-ja.html readme.html wp-activate.php wp-app.php wp-atom.php languages / plugins / themes / upgrade / uploads / index.php ktai-themes/ （注意） plugins/ktai-style の中の themesフォルダに入れると、 プラグインバージョンアップ時に作ったテーマが消えてしまうので、必ずこの方法で行いましょう！ココに、作ったテーマフォルダフォルダを追加！ ktai-tokyohanami / smart-tokyohanami / VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(117)

「Ktai Style」プラグインを有効化すると 管理画面のメニューに左のような項目が追加されるので、スマートフォンや携帯表示の設定ができます。［テーマ］をクリックして、各端末で使うテーマを、振り分けます。 Ktai Styleプラグイン VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(118)

「Ktai Style」プラグインを インストールすれば、各端末のユーザーエージェント に応じて、同一URLで、 サイトを振り分けることができます。 Ktai Styleプラグイン VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(119)

Q：PCと携帯のリンクを自動で振り分けできますか？ A：できます。「Ktai Style 2.1 ベータ版」 http://www.yuriko.net/arc/2010/05/10/ktaistyle-210-beta1/ [pc-only]...[/pc-only] [mobile-only]...[/mobile-only] で振り分ける。（注意）この方法で行わないと、 Ktai Styleの 次期バージョンに対応しないので VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(120)

Q：PCと携帯のリンクを自動で振り分けできますか？ A：できます。 PCサイト用バナーと、携帯サイト用バナーで、 同じURLで表示を分けられます。 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(121)

PCサイト スマートフォンサイトモバイルサイト（ガラケー携帯） Ktai Styleプラグイン ・パケット量節約・画像を自動縮小など、日本のガラケー独特の仕様に対応（方法３）ユーザーエージェントで振り分けて、PC・スマートフォン・_{ガラケー、それぞれのサイトを作る} ユーザーエージェントで振り分け （方法１）WPtouchプラグインをそのまま使う or カスタマイズ （方法２）MobilePressプラグインをそのまま使う or カスタマイズ （方法３）Ktai Styleプラグインをカスタマイズ （方法４）ユーザーエージェントを振り分けるプラグイン

（方法５）$is_iphone関数で条件分岐

(122)

コアファイルを確認 ※こうなっているというイメージだけでOK！ wp-admin / wp-content / wp-includes / index.php license.txt readme-ja.html readme.html wp-activate.php wp-app.php wp-atom.php ・・・ vars.php ・・・ VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(123)

$is_lynx = $is_gecko = $is_winIE = $is_macIE = $is_opera = $is_NS4 = $is_safari = $is_chrome = $is_iphone = false; if ( isset($_SERVER['HTTP_USER_AGENT']) ) {

if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Lynx') !== false ) { $is_lynx = true;

} elseif ( stripos($_SERVER['HTTP_USER_AGENT'], 'chrome') !== false ) {

if ( stripos( $_SERVER['HTTP_USER_AGENT'], 'chromeframe' ) !== false ) {

if ( $is_chrome = apply_filters( 'use_google_chrome_frame', is_admin() ) ) header( 'X-UA-Compatible: chrome=1' );

$is_winIE = ! $is_chrome; } else {

$is_chrome = true; }

} elseif ( stripos($_SERVER['HTTP_USER_AGENT'], 'safari') !== false ) { $is_safari = true;

} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Gecko') !== false ) { $is_gecko = true;

} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'Win') !== false ) { $is_winIE = true;

} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'Mac') !== false ) { $is_macIE = true;

} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== false ) { $is_opera = true;

} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Nav') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'Mozilla/4.') !== false ) { $is_NS4 = true;

} }

if ( $is_safari && stripos($_SERVER['HTTP_USER_AGENT'], 'mobile') !== false ) $is_iphone = true;

(124)

WordPressのコアファイルの条件分岐を前提に、

プラグインを作って、端末ごとに振り分けることも出来ます。

WordPressテーマとして、

style.cssに「Theme Name: smartphone」と書いてあるモノを

$is_iphoneの時（iPhoneやAndroidの時）に読み込むプラグイン。 if ( $is_iphone ) { add_action('stylesheet','change_stylesheet', 20); } function change_stylesheet($stylesheet) { return 'smartphone'; VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(125)

ユーザーエージェントで

振り分けて、

専用のテーマを作る場合、

jQuery Mobileも便利。

VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(126)

jQuery Mobile jQuery jQuery Mobileは、簡単で便利。 ブラウザ間の違いを気にしなくて良い。（IE対応など） VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(127)

・ _{jQuery Mobileのタグ} ・ _PHP ・ _{WordPressテンプレートタグ} ・ _{WordPress条件分岐タグ} を組み合わせるのがコツ。 jQuery Mobileのタグはリファレンス等を参考に。

Designs | jQuery Mobile

(128)

ダウンロード

jQuery Mobileを使う準備

(129)

ダウンロード

jQuery Mobileを使う準備

(130)

テーマフォルダの中に、 jQueryとjQuery Mobileを入れる。 ココでは、 jsフォルダを 作り、その中に入れました。 jQuery Mobileを使う準備 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(131)

jsフォルダの中身 jQueryと jQuery Mobileの サイトからダウンロードしたファイル。 jQuery Mobileを使う準備 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(132)

metaタグの中に、jQuery Mobileを読み出すタグを書く。

<link rel="stylesheet" href="<?php ks_theme_url(); ?>js/jquery.mobile-1.0b3.min.css" /> <script src="<?php ks_theme_url(); ?>js/jquery-1.6.4.min.js"></script>

<script src="<?php ks_theme_url(); ?>js/jquery.mobile-1.0b3.min.js"></script>

多くのテーマフォルダでは、header.phpファイル Ktai Styleで読み込む場合のタグ。 →これで、ktai-themesフォルダを 読み込んでくれる。 jQuery Mobileを使う準備 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(133)

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.mobile- 1.0b3.min.css" />

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.6.4.min.js"></script> <script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.mobile-

1.0b3.min.js"></script> 通常のWordPressテーマにおいて 読み込むテンプレートタグ。 jQuery Mobileを使う準備 metaタグの中に、jQuery Mobileを読み出すタグを書く。 多くのテーマフォルダでは、header.phpファイル VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(134)

WordPressのコアファイルには、jQueryが同梱されているので、 以下のWordPressのテンプレートタグで、読み込むこともできます。 <?php wp_enqueue_script('jquery'); ?> jQuery Mobileを使う準備 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(135)

<body>

<div data-role="page" data-theme="c"> <div data-role="header" data-theme="a">

<h1><?php echo get_bloginfo('name'); ?></h1> </div>

<div data-role="content" data-theme="c">

～～～

</div>

<div data-role="footer" data-theme=“a">

～～～ </div> </div> （１）テーマの色を確定 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(136)

<div data-role="header" data-theme="a"> <a href="<?php echo get_bloginfo('url'); ?>"

data-icon="home">TOP</a> <h1><?php echo get_bloginfo('name'); ?></h1> </div> サイトURL （WordPressのテンプレートタグ） （２）アイコンもタグだけで実現。記事上の共通部分は、 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(137)

<ul data-role="listview" data-inset="true"> <li data-role=“list-divider”>墨田区</li>

<li><a href=“×××.html“>隅田公園</a></li> <li><a href=“×××.html“>錦糸公園</a></li> </ul> HTMLでは・・・ トップページは、 home.phpファイルを用意 （３）リストビューもタグだけで実現。リストもタグ指定で簡単。 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(138)

<?php

$my_query = new WP_Query(array( 'cat' => 1, 'posts_per_page' => -1, 'orderby' => 'comment_count', 'order' => 'DESC' )); ?>

<ul data-role="listview" data-inset="true">

<li data-role="list-divider"><?php echo get_catname('1'); ?></li>

<?php while($my_query->have_posts()) : $my_query->the_post(); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endwhile; ?> HTMLから WordPressテーマ化 （３）リストビュー VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(139)

<?php

$my_query = new WP_Query(array( 'cat' => 1, 'posts_per_page' => -1, 'orderby' => 'comment_count', 'order' => 'DESC' )); ?> カテゴリーID「１」 の記事を配列に入れる。（３）リストビュー VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(140)

<ul data-role="listview" data-inset="true">

<li data-role="list-divider"><?php echo get_catname('1'); ?></li>

<?php while($my_query->have_posts()) : $my_query->the_post(); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> カテゴリーID「１」の カテゴリー名を取得 カテゴリーID「１」の記事を ループ処理（繰り返し処理）（３）リストビュー記事のタイトルを取得 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(141)

<div data-role="collapsible" data-collapsed="true"> ～～～ WEBAPIを利用して、 Yahoo!知恵袋の関連情報を自動取得＆表示 ～～～ </div> 各記事は、 single.phpファイルを用意 （４）折り畳みコンテンツの折り畳みも簡単。 WordPressと組み合わせれば、 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(142)

<div data-role="footer" data-position="fixed" data-theme="c"> <div data-role="navbar"> <ul> <li><a href=“http://www.○○○.com/">TOP</a></li> <li><a href=“http://www.○○○.com/profile.html">プロフィール</a></li> <li><a href=“http://www.○○○.com/mail.html">お問い合わせ</a></li> </ul> </div> </div> （５）フッターナビゲーション記事下の共通部分は、動的にならないのなら、 直接URLを入れても良い。 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(143)

スマートフォン＆携帯サイトをPCで確認の方法 Firefoxのアドオン 「FireMobileSimulator」 を使いましょう。 有効後、「ツール＞ FireMobileSimulator」にて、 スマートフォンや携帯サイトのように、 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(144)

アフィリエイトリンクの成果対象

PCサイト スマートフォンサイトモバイルサイト（ガラケー携帯） PC用 アフィリエイトリンクモバイル用アフィリエイトリンク バリューコマース・A8・リンクシェアなど、多くのASPはこの仕様。 PC用とモバイル用で振り分けないと、収益の成果対象にならない。 ※楽天アフィリエイトのように、PC用とモバイル用のアフィリエイト VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(145)

WordPressでのアフィリエイトリンク対応まとめ PCサイト スマートフォンサイトモバイルサイト（ガラケー携帯） PC用 アフィリエイトリンクモバイル用アフィリエイトリンク Ktai Styleプラグイン （方法１）スマートフォンに自動対応のプラグイン （方法２）Media Queries対応テーマ VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(146)

こんな感じにしないと成果報酬に繋がらない。 →ユーザーがちゃんとクリックしてくれるか分からない。機会損失。 →そもそも見た目が２行になる。 もしPC用とモバイル用で振り分けられなかったら・・・ では、別URLで、PCサイト・スマホサイト・ガラケーサイトを作る？ →手間が掛かる。ミラーサイトのようになる危険性も。 VCスペシャルセミナー WordPress WordPressを使ってスマートフォン最適化

(147)

スマホ専用のバナーもあります（例：バリューコマース）

①［オファー検索］をクリック

②［スマートフォン対応］をクリック

(148)

①［スマートフォン広告］をクリック

②［コードを取得］をクリック

(149)

スマートフォン専用のバナーが表示される。

(150)

(151)

（方法１）スマートフォンに自動対応するプラグイン（方法２） Media Queriesを使ってテーマで対応 （方法３）ユーザーエージェントで振り分けて、 PC・スマートフォン・ガラケー、 それぞれのサイトを作る（難易度）低高 VCスペシャルセミナー WordPress ワークショップ（デモ）

(152)

（方法１）スマートフォンに自動対応するプラグイン（方法２） Media Queriesを使ってテーマで対応 （方法３）ユーザーエージェントで振り分けて、 PC・スマートフォン・ガラケー、 それぞれのサイトを作る（難易度）低高 VCスペシャルセミナー WordPress ワークショップ（デモ）

(153)

(154)

WordPressのコアは、とてもシンプル。

(155)

シンプルなコアに、サイトにあった「テーマ」でデザインして、「プラグイン」で機能追加する。

テーマ

プラグイン

VCスペシャルセミナー WordPress 他にもこんなことができる

(156)

公式ディレクトリテーマ登録数

1,500以上

(157)

公式ディレクトリプラグイン登録数

18,000以上

(158)

多すぎて、どのテーマやプラグインが良いのか、分からない！ WordPress初心者 ねこび〜んさん VCスペシャルセミナー WordPress 他にもこんなことができる

(159)

そこで、 WordCampスタッフが お勧めのテーマやプラグインをご紹介！ WordPress経験者 わぷーさん VCスペシャルセミナー WordPress 他にもこんなことができる

(160)

西川伸一さん @shinichiN プラグイン

Cawaii Admin

WordPressの管理画面を 可愛くするプラグイン。 VCスペシャルセミナー WordPress 他にもこんなことができる

(161)

ころぐ http://colog.jp/ WordPressの 管理画面を変えられる！ VCスペシャルセミナー WordPress 他にもこんなことができる

(162)

カイ士伝さん

@kai4den

プラグイン

WordPress Related

Post for Japanese

Yahoo!の日本語形態素解析 Webサービスを利用して、 関連する自分の記事を表示。かなり精度が高い！ VCスペシャルセミナー WordPress 他にもこんなことができる

(163)

カイ士伝 http://blogging from.tv/wp/ ラーメン記事にはラーメンの記事が！サイト内でのユーザーの移動が高まる。 VCスペシャルセミナー WordPress 他にもこんなことができる

(164)

カイ士伝さん @kai4den プラグイン

WP Social

Bookmarking Light

数々のソーシャルボタンをまとめて設置！ VCスペシャルセミナー WordPress 他にもこんなことができる

(165)

・Twitterに「ツイートする」ボタン ・Facebookの「いいね！」ボタン ・Google+1ボタン などを、自分のサイトに設置してソーシャルな流れを作れる。プラグインをインストールするだけ！ VCスペシャルセミナー WordPress 他にもこんなことができる

(166)

をかもとさん @wokamoto プラグイン

Feedback Champuru

Twitter、はてなブックマーク、 Google+を、 コメントっぽく表示させるプラグイン。 VCスペシャルセミナー WordPress 他にもこんなことができる

(167)

コメント欄が賑わってる感じに！コメントしにくい敷居を下げる。 VCスペシャルセミナー WordPress 他にもこんなことができる

(168)

マクラケン直子さん @naokomc テーマ

P2テーマ

Twitterのような一言コメント掲示板 が作れるテーマ。連絡やコミュニケーションにも！ VCスペシャルセミナー WordPress 他にもこんなことができる

(169)

WordPress 日本語翻訳の連絡も P2テーマを 利用！ WordPress Codex 日本語版会議室 VCスペシャルセミナー WordPress 他にもこんなことができる

(170)

マクラケン直子さん @naokomc プラグイン

Jetpack

WordPress.com の標準機能である WordPress.com Stats プラグイン、 Twitter ウィジェット、 Shortcode エンベッド、 Sharedaddy などが含まれた バンドルプラグインです。 VCスペシャルセミナー WordPress 他にもこんなことができる

(171)

(172)

星野邦敏さん @khoshino プラグイン

Contact Form 7

メールフォームが作れるプラグイン。 VCスペシャルセミナー WordPress 他にもこんなことができる

(173)

メールフォーム

(174)

星野邦敏さん @khoshino プラグイン

WP Lightbox 2

リンクのある画像をクリックすると、画像が浮き上がるようなデザインとなるプラグイン。 VCスペシャルセミナー WordPress 他にもこんなことができる

(175)

画像をクリックすると・・・