PowerPoint プレゼンテーション

Size: px

Start display at page:

Download "PowerPoint プレゼンテーション"

しょうこはにうだ
5 years ago
Views:

1 <SKILL BASECAMP 2013> WordPress ネクストステッププラグインによる機能拡張と外部 WebAPI との連携株式会社コミュニティコム星野邦敏埼玉県さいたま市大宮区宮町 1-5 銀座ビル7 階 URL: 1

2 WordPressネクストステップ目次 0. 自己紹介 1. プラグインによる機能拡張 2. 外部 WebAPIとの連携 3.WordPressに最低限必要なPHP 知識 4. 質疑応答 2

3 WordPressネクストステップ目次 0. 自己紹介 1. プラグインによる機能拡張 2. 外部 WebAPIとの連携 3.WordPressに最低限必要なPHP 知識 4. 質疑応答 3

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

5 WordPressネクストステップ自己紹介 WordPressのイベントである WordCamp や WordBench にスタッフやスピーカーとして参加 5

6 自己紹介 WordPress 日本語サイトのイベントカレンダーを更新する係ココ 6

7 自己紹介公式ディレクトリにプラグインを登録したり Japan Tenki プラグイン全国 142 地域の天気を自動表示 Hello Wapuu プラグインブログ更新を応援 7

8 自己紹介 WordPress に関して書籍や雑誌で執筆をしたり 2012 年 1 月に出版 web creators 特別号 Webサイト制作最新トレンドの傾向と対策 2012 年 2 月に出版 Web Designing 2012 年 3 月号 2012 年 3 月に出版速習デザイン WordPress 8

9 自己紹介 WordPress に関して書籍や雑誌で執筆をしたり今も執筆中です 2012 年 7 月に出版 web creators 特別号スマートフォンソーシャルメディア WordPress 2013 年 1 月に出版 WordPress プラグイン & WebAPI 活用ガイドブック 9

10 WordPressネクストステップ自己紹介最近の関心事はコワーキングスペースの運営ですコワーキングスペース 7F 埼玉県さいたま市大宮駅東口徒歩 1 分 65 坪 215 平米 10

11 自己紹介 7F ではアルバイトを募集してます採用情報株式会社コミュニティコム 11

12 自己紹介今日のサンプルサイト WordPress プラグイン &WebAPI 活用ガイドブックの書籍翔泳社ダウンロードを参照 12

13 WordPressネクストステップ目次 0. 自己紹介 1. プラグインによる機能拡張 2. 外部 WebAPIとの連携 3.WordPressに最低限必要なPHP 知識 4. 質疑応答 13

14 WordPressネクストステッププラグインによる機能拡張 WordPress の設計プラグイン機能追加テーマサイトデザイン WordPressは本当に必要なモノしか初期状態では付いていないという設計 14

15 WordPressネクストステッププラグインによる機能拡張テーマとは? WEBデザインを変えるためのモノブログの着せ替え見た目の調整だけでなく表示する内容を操ることもできますテーマは自分で作ることも出来ます慣れてきたら自分でカスタマイズすると自由度が高まります 15

16 WordPressネクストステッププラグインによる機能拡張テーマフォルダの確認 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 twentyeleven / twentyten / index.php ココにテーマフォルダを FTPで入れる! 16

17 WordPressネクストステッププラグインによる機能拡張テーマは管理画面からも選べます! 検索もできます! 17

18 WordPressネクストステッププラグインによる機能拡張テーマは管理画面からも選べます! 18

19 WordPressネクストステッププラグインによる機能拡張テーマは WordPress.org からも選べます! 19

プラグインによる機能拡張自分でカスタマイズしたテーマの場合 http://wordpress.

20 プラグインによる機能拡張自分でカスタマイズしたテーマの場合既存のテーマは管理画面や公式ディレクトリからインストールできますがカスタマイズした独自のテーマは wp-content > themesフォルダにいれましょう 20

21 WordPressネクストステッププラグインによる機能拡張プラグインとは? 追加機能 WordPressの本体はシンプルなので自由に機能を追加するイメージプラグインは自分で作ることも出来ます慣れてきたら自分でカスタマイズすると自由度が高まります 21

22 WordPressネクストステッププラグインによる機能拡張プラグインフォルダの確認 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 ココにプラグインフォルダを入れる! 22

23 WordPressネクストステッププラグインによる機能拡張プラグインも管理画面から選べます! 検索もできます! 23

24 WordPressネクストステッププラグインによる機能拡張プラグインも WordPress.org から選べます! 24

25 プラグインによる機能拡張デフォルトのプラグインのご紹介有効化すると使えます! Akismet コメントスパム対策 Hello Dolly プラグインの開発サンプルコード WP Multibyte Patch マルチバイト文字による不具合の修正と強化 25

26 プラグインによる機能拡張プラグインの具体例 Contact Form 7 メールフォームを作成 Trust Form 確認画面付きメールフォームを作成 Ktai Style 日本の携帯電話 & スマートフォン対応 WPtouch スマートフォン対応 PS Auto Sitemap サイトマップを自動作成 Custom Field Template カスタムフィールドのテンプレート設定 Welcart ショッピングサイト構築 BuddyPress SNS 構築 Subscribe2 メールマガジン構築 Admin SSL SSL 対応 WP Super Cache キャッシュ生成表示の高速化 WP-DB-Backup データベースのバックアップ Advertising Manager 広告管理 26

27 プラグインによる機能拡張既存のプラグインだけで作れる事例既存のプラグインをインストールするだけで実現できる WEB サービスを作ってみましょう! 27

28 WordPressネクストステッププラグインによる機能拡張 Twitter のような一言コメントができるサイト P2 テーマ新規ユーザー登録を OKにすれば不特定多数のユーザーが登録できるサイトも作れます 28

29 プラグインによる機能拡張 WordPress 日本語翻訳の連絡も P2テーマを利用! WordPress Codex 日本語版会議室 29

30 WordPressネクストステッププラグインによる機能拡張 EC サイト ( ショップサイト ) Welcart プラグイン具体的な事例やカスタマイズは以下のURLを参照ください 30

31 プラグインによる機能拡張オープン型 SNS( 会員制サイト ) BuddyPress プラグイン新規ユーザー登録 OKにすれば不特定多数のユーザーが登録することのできるサイトも作れます 31

32 WordPressネクストステッププラグインによる機能拡張メールマガジン登録 & 投稿システム Subscribe2 Subscribe2 widget プラグイン 32

33 プラグインによる機能拡張プラグイン Cawaii Admin WordPress の管理画面を可愛くするプラグイン 33

34 プラグインによる機能拡張ころぐ WordPressの管理画面を変えられる! 34

35 プラグインによる機能拡張プラグイン WP Social Bookmarking Light 数々のソーシャルボタンをまとめて設置! 35

36 プラグインによる機能拡張プラグインをインストールするだけ! Twitterにツイートするボタン Facebookのいいね! ボタン Google+1ボタンなどを自分のサイトに設置してソーシャルな流れを作れる 36

37 プラグインによる機能拡張プラグイン Ktai Style WordPress を携帯対応させるプラグイン 37

38 WordPressネクストステッププラグインによる機能拡張同一 URLで PCサイトスマートフォンサイトガラケー ( 携帯 ) サイトの振り分けを自動で実現 38

39 プラグインによる機能拡張プラグイン WPtouch WordPress をスマートフォン対応させるプラグイン 39

40 プラグインによる機能拡張 WPtouchプラグインを有効化するだけで iphoneやandroidの端末で見たらスマートフォンっぽいサイトに見える 40

41 プラグインによる機能拡張テーマ Twenty Eleven 子テーマ WordPress デフォルトテーマを子テーマでカスタマイズ 41

42 プラグインによる機能拡張レスポンシブウェブデザインメディアクエリで横幅に応じてサイトを最適化 8bitodyssey.com 42

43 プラグインによる機能拡張プラグイン Feedback Champuru Twitter はてなブックマーク Google+ をコメントっぽく表示させるプラグイン 43

44 プラグインによる機能拡張コメント欄が賑わってる感じに! コメントしにくい敷居を下げる 44

45 プラグインによる機能拡張プラグイン Jetpack WordPress.com の標準機能である WordPress.com Stats プラグイン Twitter ウィジェット Shortcode エンベッド Sharedaddy などが含まれたバンドルプラグインです 45

46 プラグインによる機能拡張 WordPress.com の機能をセットで使える 46

47 プラグインによる機能拡張プラグイン Contact Form 7 メールフォームが作れるプラグイン 47

48 プラグインによる機能拡張メールフォーム 48

49 プラグインによる機能拡張プラグイン Custom Field Template ( カスタムフィールドテンプレート ) カスタムフィールドをカスタマイズするプラグイン 49

50 プラグインによる機能拡張カスタムフィールドカスタムフィールドを使ってみましょう! カスタムフィールドは WordPressに元々備わっている機能です 50

51 例 : WordPressネクストステッププラグインによる機能拡張カスタムフィールドカスタムフィールドを出力する WordPressのテンプレートタグ <?php echo get_post_meta($post->id,'address',true);?> カスタムフィールドに入力したデータを表示しています水族館コミュニティ 51

52 WordPressネクストステッププラグインによる機能拡張カスタムフィールドテーマに4 行のプログラムを追加して実現! <?php $custom1 = urlencode(post_custom('name')); $yahoo_gazou_api = " アプリケーションID>&query=". $custom1 ; $yahoo_gazou_api_xml = simplexml_load_file($yahoo_gazou_api); foreach($yahoo_gazou_api_xml->result as $gazou_output) { echo '<img src="'. $gazou_output->url. '" alt="" />'; }?> 52

53 プラグインによる機能拡張 WordPress の各記事の位置情報を地図に表示各記事の水族館の位置を Google Maps APIと連携して自動で地図に一覧表示させる & 近いスポットはピンをまとめる 53

54 プラグインによる機能拡張 WordPress に周辺の写真を自動で表示そのスポットの周辺の写真を自動で表示させる 54

55 プラグインによる機能拡張 WordPress に画像を自動で表示各記事に関連する画像を自動表示する 55

56 WordPressネクストステッププラグインによる機能拡張 WordPressに Twitter 情報を自動で表示その水族館について Twitter の最新つぶやきを自動表示させる 56

57 プラグインによる機能拡張 WordPress にカフェ情報を自動で表示そのスポットから 2 点間の直線距離の近い順番にカフェやレストランを自動で一覧表示するこの部分は自動でアフィリエイトリンクになっていて成果の収益に繋がる 57

58 プラグインによる機能拡張 WordPress にホテル情報を自動で表示そのスポットから 2 点間の直線距離の近い順番にホテルを自動で一覧表示するこの部分は自動でアフィリエイトリンクになっていて成果の収益に繋がる 58

59 プラグインによる機能拡張 WordPress に商品情報を一覧表示記事に関連する商品を自動で一覧表示するこの部分は自動でアフィリエイトリンクになっていて成果の収益に繋がる 59

60 プラグインによる機能拡張カスタムフィールドで検索も可能カスタムフィールドに入力した情報で検索ができる 60

61 プラグインによる機能拡張プラグイン WP Lightbox 2 リンクのある画像をクリックすると画像が浮き上がるようなデザインとなるプラグイン 61

62 プラグインによる機能拡張画像をクリックすると 62

63 プラグインによる機能拡張 WordPress を使ったらサイトが重くなった! WordPress 初心者ねこびんさん 63

64 プラグインによる機能拡張プラグイン WP Super Cache キャッシュを作ってくれて表示の高速化ができる 64

65 プラグインによる機能拡張 WP Super Cache プラグインをインストールしてキャッシングを利用にするだけです! 65

プラグインによる機能拡張大曲仁さん @jim0912 プラグイン 001 Prime

66 プラグインによる機能拡張プラグイン 001 Prime Strategy Translate Accelerator 翻訳ファイルの読み込みをキャッシュ化する 66

プラグインによる機能拡張プラグイン WordPress Database 三木徹さん

67 プラグインによる機能拡張プラグイン WordPress Database Backup データベースのバックアップを手動または自動で取ることのできるプラグイン 67

68 WordPressネクストステッププラグインによる機能拡張 MySQLを管理画面から保存できる定期バックアップも自動で出来る 68

69 プラグインによる機能拡張プラグイン WP Total Hacks お客様に WordPress を納品する時に便利なプラグイン 69

70 プラグインによる機能拡張いわゆる WordPress 色を消すことが出来る設定が 20 項目以上 70

71 プラグインによる機能拡張管理画面のロゴを変えられる等 WordPress の色を消すことが出来るその他にも webmaster 権限追加フッター文字情報の変更なども 71

72 プラグインによる機能拡張プラグイン ytbd change the display in PC and smartphone スマホサイトとPCサイトの表示を分けて入力出来るプラグイン 72

73 プラグインによる機能拡張 PC 表示用スマホ表示用 73

74 WordPressネクストステッププラグインによる機能拡張プラグイン WP Social Bookmarking Light 色々なソーシャルアイコンを WordPressの本文の上または下に設置することができるプラグイン 74

75 プラグインによる機能拡張ホームページビルダー 17 でもホームページビルダーの管理画面から編集 75

76 WordPressネクストステッププラグインによる機能拡張プラグインを使わずテーマに書く方法も <ul> <li> <a href=" class="twitter-share-button" data-count="vertical" data-via="khoshino" data-url="<?php the_permalink();?>" data-text="<?php the_title();?>">tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> </li> <li> <iframe src=" the_permalink();?>&layout=box_count&show_faces=false&width=50&action=like&colorscheme=light&height =62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowtransparency="true"></iframe> </li> <li><script type="text/javascript" src=" size="tall" href="<?php the_permalink();?>"></g:plusone></li> <li> <a href=" the_permalink();?>" class="hatena-bookmark-button" data-hatena-bookmarktitle="<?php the_title();?> <?php bloginfo('name');?>" data-hatena-bookmark-layout="vertical" title=" このエントリーをはてなブックマークに追加 "><img src=" alt=" このエントリーをはてなブックマークに追加 " width="20" height="20" style="border: none;" /></a><script type="text/javascript" src=" charset="utf-8" async="async"></script> </li> </ul> デザインの自由度が高い 76

77 WordPressネクストステッププラグインによる機能拡張 OGP(Open Graph protocol) 要は SNS に Web サイトの情報を認識してもらうもの Facebook に流れてきたとしてどちらの方がクリックしてもらいやすい? 77

78 WordPressネクストステッププラグインによる機能拡張 Open Graph Pro プラグイン OGP の実装 meta 情報として OGP を書く  <meta property="og:locale" content="ja_jp"> <meta property="og:type" content="article"> <meta property="fb:admins" content="( ココに Facebook のユーザー ID を書く半角数字 )"> <meta property="fb:app_id" content="( ココに Facebook の Platform アプリケーション ID を書く半角数字 )"> <meta property="og:site_name" content="<?php bloginfo('name');?>"> <?php if (has_post_thumbnail()) :?> <?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id,'medium');?> <meta property="og:image" content="<?php echo $image_url[0];?>"> <?php else:?> <meta property="og:image" content="<?php bloginfo('template_url');?>/( ココに画像までのパスを書く )"> <?php endif ;?> <?php if (is_home() is_front_page()) :?> <meta property="og:title" content="<?php bloginfo('name');?>"> <?php else:?> <meta property="og:title" content="<?php the_title();?>"> <?php endif ;?> <?php if (is_home() is_front_page()) :?> <meta property="og:url" content="<?php bloginfo('url');?>"> <?php else:?> <meta property="og:url" content="<?php the_permalink();?>"> <?php endif ;?> <meta property="og:description" content="<?php the_excerpt();?>"> プラグインもあるしテーマに直接書くと自由度が高い 78

79 WordPressネクストステッププラグインによる機能拡張 WordPressの記事の更新を TwitterやFacebookに流すまたは TwitterやFacebookの情報を WordPressに保存する 79

80 プラグインによる機能拡張プラグインで実装 Social プラグイン WordPressから TwitterとFacebookのタイムラインに更新を流せるまたコメント欄で SNSアカウントとしてコメント投稿できる 80

81 プラグインによる機能拡張 Social プラグインでの投稿 Broadcast Post を Yes にするプレビューが表示される 81

82 プラグインによる機能拡張 Social プラグインでの投稿 82

83 プラグインによる機能拡張 Social プラグインでのコメント欄 83

84 プラグインによる機能拡張 Facebook 公式 WordPress プラグイン Facebookが公式に公開しているプラグインがあります 84

85 WordPressネクストステッププラグインによる機能拡張 Facebook 公式 WordPress プラグインいいね! アイコン設置コメント欄をFB 対応に FBで繋がっている人がどの記事にいいね! をしているか分かるオススメの記事を表示など 85

86 WordPressネクストステッププラグインによる機能拡張注意点 TwitterやFacebookのAPIの仕様変更に対応しなくなったプラグインは突然動かなくなることもある自動が良いとは限らない Social や Facebook プラグイン以外にも例えば Facebookページに投稿する Wordbooker プラグインなど他にもSNS 連携のプラグインはあるもちろん自分でプログラムを書くこともできます 86

87 WordPressネクストステッププラグインによる機能拡張 TwitterやFacebookのアカウントで WordPressのユーザー登録 87

88 WordPressネクストステッププラグインによる機能拡張メリットユーザーは新たにIDやパスワードを覚える必要がないサイト運営者はパスワード情報を持つことがないユーザーとしてもパスワード情報をサイトに渡す必要がない 88

89 プラグインによる機能拡張プラグインで実装 Gianism プラグインこのプラグインを使うと Facebook, twitter, Googleのアカウントで新規登録およびログインできるようになります登録制のWordPressサイトを作っている場合ユーザーにアカウントを作ってもらうのが一苦労このプラグインを使えば Webサービスの情報を使ってログインできるようになりますユーザーは新しいユーザー名とパスワードを覚える必要がありません 89

プラグインによる機能拡張プラグインで実装 Gianism プラグインログイン高橋文樹.com https://takahashifumiki.

90 プラグインによる機能拡張プラグインで実装 Gianism プラグインログイン高橋文樹.com WordPressで会員制サイトを作ってユーザーに投稿してもらったり登録してもらうサイトを作る際に WordPress 独自登録でなく SNSのアカウントでクリック1つでログイン登録させることで登録率を上げる 90

91 プラグインによる機能拡張例えばこういうログインフォームに Gianism プラグインを使って SNSアカウントでのログインをさせることもできる WordCamp Osaka 2012 参加登録 91

92 WordPressネクストステップ目次 0. 自己紹介 1. プラグインによる機能拡張 2. 外部 WebAPIとの連携 3.WordPressに最低限必要なPHP 知識 4. 質疑応答 92

93 WordPressネクストステップ外部 WebAPIとの連携 API とは? Application Programming Interface API( アプリケーションプログラミングインタフェース Application Programming Interface) とはアプリケーションから利用できるオペレーティングシステムやプログラミング言語で用意されたライブラリなどの機能の入り口となるものである主にファイル制御ウインドウ制御画像処理文字制御などのための関数として提供されることが多いつまり簡単にいえばアプリケーションをプログラムするにあたってプログラムの手間を省くためもっと簡潔にプログラムできるように設定されたインターフェースの事である (Wikipediaより) 93

94 WordPressネクストステップ外部 WebAPIとの連携 API とは? 要はその WEB サービスにあるデータを自由に使えると言うこと 94

95 WordPressネクストステップ外部 WebAPIとの連携図にするとこういうイメージ広告主契約手数料 Web API やオープンソース直接広告 ( 純広告 ) として報酬無料で Web API やオープンソースを公開対象となるユーザーを集客して成果に貢献する提携広告仲介業者や広告代理店 ( 例 ) バリューコマース報酬 Web API やオープンソースを世の中に広める自分の運営サイト無料でその分野テーマに関する情報が手に入りかつユーザー間での交流ができる得た広告報酬等によりサービスをより向上させるインターネットユーザー 95

96 WordPressネクストステップ外部 WebAPIとの連携 Web API のメリット <WEB 制作者のメリット> 他社の膨大なデータベースや機能を無料で利用できるため Webサイトの開発コストを大幅に削減でき効率的に制作できる <API 提供会社のメリット> 自社のみでは考え付かないようなWEBサービス等を外部の誰かが作ってくれるため結果として自社サービスの利用者が増えることが期待できる 96

97 外部 WebAPI との連携何ができるの? 97

98 外部 WebAPI との連携 WordPress に天気情報を自動で取得各地域の天気予報を自動で取得する 98

99 外部 WebAPI との連携 WordPress の各記事の位置情報を地図に表示各記事の水族館の位置を Google Maps APIと連携して自動で地図に一覧表示させる & 近いスポットはピンをまとめる 99

100 外部 WebAPI との連携 WordPress に周辺の写真を自動で表示そのスポットの周辺の写真を自動で表示させる 100

101 外部 WebAPI との連携 WordPress に画像を自動で表示各記事に関連する画像を自動表示する 101

102 WordPressネクストステップ外部 WebAPIとの連携 WordPressに Twitter 情報を自動で表示その水族館について Twitter の最新つぶやきを自動表示させる 102

103 外部 WebAPI との連携 WordPress にカフェ情報を自動で表示そのスポットから 2 点間の直線距離の近い順番にカフェやレストランを自動で一覧表示するこの部分は自動でアフィリエイトリンクになっていて成果の収益に繋がる 103 バリューコマース対応

104 外部 WebAPI との連携 WordPress にホテル情報を自動で表示そのスポットから 2 点間の直線距離の近い順番にホテルを自動で一覧表示するこの部分は自動でアフィリエイトリンクになっていて成果の収益に繋がるバリューコマース対応 104

105 外部 WebAPI との連携 WordPress に商品情報を一覧表示記事に関連する商品を自動で一覧表示するこの部分は自動でアフィリエイトリンクになっていて成果の収益に繋がるバリューコマース対応 105

106 キーワードは WordPressネクストステップ外部 WebAPIとの連携カスタムフィールド Web API 106

107 外部 WebAPI との連携カスタムフィールドカスタムフィールドを使ってみましょう! カスタムフィールドは WordPressに元々備わっている機能です 107

108 例 : WordPressネクストステップ外部 WebAPIとの連携カスタムフィールドカスタムフィールドを出力する WordPressのテンプレートタグ <?php echo get_post_meta($post->id,'address',true);?> カスタムフィールドに入力したデータを表示しています 108

109 WordPressネクストステップ外部 WebAPIとの連携カスタムフィールドテーマに4 行のプログラムを追加して実現! <?php $custom1 = urlencode(post_custom('name')); $yahoo_gazou_api = " アプリケーションID>&query=". $custom1 ; $yahoo_gazou_api_xml = simplexml_load_file($yahoo_gazou_api); foreach($yahoo_gazou_api_xml->result as $gazou_output) { echo '<img src="'. $gazou_output->url. '" alt="" />'; }?> 109

110 WordPressネクストステップ外部 WebAPIとの連携 WordPress 以外のAPIサンプルコードを WordPressに組み込むこともできます WordPressを使えばページごとに自由にキーワードを変えられるようにできる 110

111 WordPressネクストステップ外部 WebAPIとの連携 WordPress 以外のAPIサンプルコードを WordPressに組み込むこともできます熱帯魚に関連する Web API がアフィリエイトリンクで自動表示 111

112 外部 WebAPI との連携でどう作るの? 手順は 10 個 112

113 外部 WebAPI との連携ワークショップ (1) - 天気予報 API WordPress に天気情報を自動で取得各地域の天気予報を自動で取得する 113

114 外部 WebAPI との連携 ( 手順 1)Web API の仕様を確認するお天気 Web サービス仕様 - Weather Hacks - livedoor 天気情報 114

115 外部 WebAPI との連携 ( 手順 2)ID や Key が必要なら取得ココ Weather Hacks - livedoor 天気情報は不要 115

116 外部 WebAPI との連携 ( 手順 3) パラメーターを確認パラメーターを確認するパラメーター制約やソートの条件を指定するお天気 Web サービス仕様 - Weather Hacks - livedoor 天気情報 116

117 外部 WebAPI との連携 ( 手順 4)XML を生成パラメーターに基づいて XML を生成する livedoor 天気情報の場合がベースその上でパラメーターを付ける city 地域条件の設定 day 予報日 ( 例 ) 117

外部 WebAPI との連携 ( 手順 5) 一応 XML を確認 ( 例 ) http://weather.

118 外部 WebAPI との連携 ( 手順 5) 一応 XML を確認 ( 例 ) 118

119 外部 WebAPI との連携 ( 手順 6)simplexml_load_file で分析 ( パース ) ( 例 ) $tenki = (livedoorapi の XML) ; $xml = simplexml_load_file ($tenki); 119

120 外部 WebAPI との連携 ( 手順 7) レスポンスフィールドを確認レスポンスフィールドを確認するレスポンスフィールド出力データを指定するお天気 Web サービス仕様 - Weather Hacks - livedoor 天気情報 120

121 外部 WebAPI との連携 ( 手順 8) 出力 & 表示する ( 例 1)echo で単発で出力 echo $xml->title; タイトル見出し ( 例 ) 福岡県久留米 - 明日の天気 ( 例 2)foreach 文で条件の回数だけループ処理 ( 繰り返し処理 ) を行う foreach($yahoo_localsearch_api_xml->feature as $localsearch_output) { echo '<strong> 店名 :</strong><strong>'; echo $localsearch_output->name; echo '</strong>('; echo $localsearch_output->property->yomi; echo ')'; echo '<br /><strong> 住所 :</strong>'; echo $localsearch_output->property->address; echo '<br /><strong> 電話番号 :</strong>'; echo $localsearch_output->property->tel1; echo '<hr />'; } 121

122 WordPressネクストステップ外部 WebAPIとの連携 ( 手順 9) 変更したい点だけをカスタムフィールドで自由に変えることも出来ます post_custom(' 名前 ') カスタムフィールドで設定する名前それに合わせて値を設定 122

WordPressネクストステップ外部 WebAPIとの連携 ( 手順 10) サイトを確認 <?php $tenki = 'http://weather.livedoor.com/forecast/webservice/rest/v1?

123 WordPressネクストステップ外部 WebAPIとの連携 ( 手順 10) サイトを確認 <?php $tenki = ' $xml = simplexml_load_file ($tenki); echo $xml->title; echo "<br />"; echo "<img src='".$xml->image->url."'/><br />".$xml->telop."<br /> 最高気温 <font color=#ff0000>".$xml->temperature->max->celsius." </font><br /> 最低気温 <font color=#0000ff>".$xml->temperature->min->celsius." </font>";?> 123

124 外部 WebAPI との連携楽天商品検索 API の場合 WordPress プラグイン &WebAPI 活用ガイドブック翔泳社ダウンロード 124

125 外部 WebAPI との連携実演します! WordPress プラグイン &WebAPI 活用ガイドブック翔泳社ダウンロード 09 rakuten.php を参照 125

126 WordPressネクストステップ目次 0. 自己紹介 1. プラグインによる機能拡張 2. 外部 WebAPIとの連携 3.WordPressに最低限必要なPHP 知識 4. 質疑応答 126

127 WordPress に最低限必要な PHP 知識 WordPress のテーマカスタマイズの前提 HTML CSS PHP MySQL JavaScript jquery WordPress テンプレートタグテンプレートタグ WordPress 条件分岐タグ汎用的 (WordPress 以外でも使える ) WordPress 独自 127

128 WordPress に最低限必要な PHP 知識 PHP の決まり事 Dreamweaverのようなソフトだけでなくテキストエディアでも大丈夫ただし文字コードは UTF-8 で保存しましょう (Windowsのメモ帳はこの点で非推奨) 拡張子は原則.php で保存する 128

129 WordPress に最低限必要な PHP 知識 PHP の決まり事 <?php で始まり?> で終わる 129

130 WordPress に最低限必要な PHP 知識 PHP の変数 ( 可変変数 ) 変数とは 1つのデータを入れておくモノ何回も使われるデータは変数にすると便利変数を使わない例 <?php echo 東京都北区 ; 変数を使う例 <?php $tokyo = 東京都 ; 変数は必ず $ から始まるという決まり事 echo 東京都荒川区 ; echo 東京都文京区 ;?> echo $tokyo. 北区 ; があります echo $tokyo. 荒川区 ; echo $tokyo. 文京区 ;?> 変数を使うと $tokyo = ; を変えれば一気に変わる 130

131 PHP の配列 WordPress に最低限必要な PHP 知識配列とは複数のデータを入れておくモノ 1つの変数に複数の異なるデータを保持したい時に便利 < 変数 > < 配列 > $a $a[0] $a[1] $a[2] 東京東京埼玉千葉 131

132 WordPress に最低限必要な PHP 知識 PHPでよく使う2つ (1) ループ ( 繰り返し処理 ) ループ( 繰り返し処理 ) とは特定の条件や回数まで繰り返す処理を行うこと 1 while( 簡単なタイプの繰り返し処理向き ) 2 for( 複雑なタイプの繰り返し処理向き ) 3 foreach( 配列用の繰り返し処理向き ) 132

133 WordPress に最低限必要な PHP 知識 PHPでよく使う2つ (2) 条件分岐条件分岐とはその名の通り特定の条件に該当する場合と該当しない場合で処理を変える時に使います 1 if( 条件 1つで該当する場合のみ処理を実行したい時 ) 2 if~else( 条件 1つで処理の実行を分けたい時 ) 3 if~elseif~else( 複数の条件で処理の実行を分けたい時 ) 133

134 WordPress に最低限必要な PHP 知識 PHP その 1 echo( 文字列の出力 ) echo は文字列を出力します <?php echo 東京都北区 ;?> 東京都北区 <?php $tokyo = 東京都 ; echo $tokyo. 北区 ;?> 東京都北区で囲んだ文字列の中に変数を入れると変数の値が表示されるで囲んだ文字列は変数名がそのまま表示される. は結合 134

135 WordPress に最低限必要な PHP 知識 PHP その 1 echo( 文字列の出力 ) カスタムフィールドを出力する WordPressのテンプレートタグ例 : <?php echo get_post_meta($post->id,'address',true);?> カスタムフィールドに入力した住所を表示しています 135

136 WordPress に最低限必要な PHP 知識 PHP その 2 if~else( 条件分岐 ) if は条件式が当てはまる場合のみ処理を実行します if~else は ifで条件式が該当する時に処理を実行して elseで条件式が該当しない時に処理を実行します if ( 条件 ) { 実行内容 } 136

137 WordPress に最低限必要な PHP 知識 PHP その 2 if~else( 条件分岐 ) 例 : WordPressの条件分岐タグ <?php if ( in_category('31') ):?> <div id="tenki2"> 兵庫県の天気 </div> <?php echo do_shortcode('[tenki area="82"]');?> <?php endif;?> ショートコード兵庫県カテゴリーの場合は兵庫県の天気を自動表示する 137

138 WordPress に最低限必要な PHP 知識 PHP その 2 if~else( 条件分岐 ) WordPressの条件分岐タグ例 : <?php if ( is_front_page() ) {?> <h2 class="entry-title"><?php the_title();?></h2> <?php } else {?> <h1 class="entry-title"><?php the_title();?></h1> <?php }?> トップページの時は h2タグで表示してそれ以外の時は h1タグで表示する 138

139 WordPress に最低限必要な PHP 知識 Twenty Ten loop-page.php で解説 <?php if ( have_posts() ) while ( have_posts() ) : the_post();?> <div id="post-<?php the_id();?>" <?php post_class();?>> <?php if ( is_front_page() ) {?> <h2 class="entry-title"><?php the_title();?></h2> <?php } else {?> <h1 class="entry-title"><?php the_title();?></h1> <?php }?> <div class="entry-content"> <?php the_content();?> <?php wp_link_pages( array( 'before' => '<div class="page-link">'. ( 'Pages:', 'twentyten' ), 'after' => '</div>' ) );?> <?php edit_post_link( ( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' );?> </div> </div> <?php comments_template( '', true );?> <?php endwhile; // end of the loop.?> 139

140 WordPress に最低限必要な PHP 知識 PHP その 3 array( 配列 ) array は配列を作成します例 : <?php $my_query = new WP_Query(array( 'cat' => 55, 'posts_per_page' => 10, 'orderby' => 'date', 'order' => 'DESC' ));?> カテゴリー IDが55の記事の最新 10 件を日付を元に日付の新しい記事が上に表示されるように配列を作成しています 140

141 WordPress に最低限必要な PHP 知識 PHP その 4 while( 繰り返し処理 ) while は繰り返し処理を実現する処理です while ( 条件 ) { 実行内容 } 141

142 例 : WordPress に最低限必要な PHP 知識 PHP その 4 while( 繰り返し処理 ) <ul><?php while($my_query->have_posts()) : $my_query->the_post();?> <li><b><?php the_time("y 年 n 月 j 日 ");?></b> <a href="<?php the_permalink();?>"><?php the_title();?></a></li> <?php endwhile;?></ul> WordPress のテンプレートタグ新着情報を日付を入れて表示しています 142

143 WordPress に最低限必要な PHP 知識 PHP その 5 foreach( 配列用の繰り返し処理 ) foreach は配列の時に繰り返し処理を実現します foreach ( 配列 as 変数 ) { 実行内容 } 143

$WordPress に最低限必要な PHP 知識 PHP その 5 foreach( 配列用の繰り返し処理 ) 例 : foreach($gazou_api_xml->result as $gazou_output) { echo '<div$

144 WordPress に最低限必要な PHP 知識 PHP その 5 foreach( 配列用の繰り返し処理 ) 例 : foreach($gazou_api_xml->result as $gazou_output) { echo '<div class="gazou2">'; echo '<img src="'. $gazou_output->url />. ' ' ; echo '</div>'; } APIで自動生成したキーワードに関連した画像を配列で組み立てて上位 6 件を一覧表示しています 144

$php function tenki1 ( $atts ) { ココにlivedoorの天気 APIの記述を書く } [tenki area="82"] add_shortcode( 'tenki', 'tenki1' ); とショートコードを書くと兵庫県の天気が自動表示される$

145 WordPress に最低限必要な PHP 知識 PHP その 6 function( ユーザー定義関数 ) function は自分で定義する関数を作成します WordPressではプラグインを作成する場合やテーマのfunctions.phpに記述することが多いです例 : <?php function tenki1 ( $atts ) { ココにlivedoorの天気 APIの記述を書く } [tenki area="82"] add_shortcode( 'tenki', 'tenki1' ); とショートコードを書くと兵庫県の天気が自動表示される 145

146 WordPress に最低限必要な PHP 知識その他の PHP の関数 define include simplexml_load_file var_dump htmlspecialchars など使うケースが多いPHPですので調べてみて知っておくと便利です 146

147 WordPressネクストステップ最後に WordPressで繋がろう! WordPressのコミュニティにぜひご参加を! WordPressのイベントや勉強会に参加してみませんか? 147

148 WordPressネクストステップ最後に今後のお問い合わせなど何かありましたら Mail: URL: などにご連絡くださいありがとうございました! 株式会社コミュニティコム星野邦敏 148

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション WordPress と SNS を連携させるサイト事例とその作り方株式会社コミュニティコム星野邦敏 116-0013 東京都荒川区西日暮里 5-37-5 NSO2 階 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1 始めにスライド資料は既に公開しています株式会社コミュニティコム http://www.communitycom.jp/2012/11/03/wordcamp-osaka-2012-2/