WP Total Hacks - PowerPoint プレゼンテーション

お客様にWordPressを納品する時に便利な

WordPressネクストステッププラグインによる機能拡張

いわゆる

WordPress色を消すことが出来る設定が 20項目以上。

WordPressネクストステッププラグインによる機能拡張

管理画面のロゴを変えられる等、

「WordPress」の色を消すことが出来る。

その他にも、

権限追加、

WordPressネクストステッププラグインによる機能拡張

後藤賢司さん

@428design

プラグイン

ytbd change the display in PC and smartphone

スマホサイトとPCサイトの表示を分けて入力出来るプラグイン。

WordPressネクストステッププラグインによる機能拡張

PC表示用。

スマホ表示用。

WordPressネクストステッププラグインによる機能拡張

プラグイン

「 WP Social Bookmarking Light 」

色々なソーシャルアイコンを、

WordPressの本文の上または下に設置することができるプラグイン。

WordPressネクストステッププラグインによる機能拡張

ホームページ・ビルダー 17 でも。

WordPressネクストステッププラグインによる機能拡張

プラグインを使わず、テーマに書く方法も。

<ul>

<li>

<a href="https://twitter.com/share" 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>

?>&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>

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button"

data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript"

src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

</li>

</ul> デザインの自由度が高い。

http://www.communitycom.jp/2012/09/13/twitter-facebook-google-hatena/

WordPressネクストステッププラグインによる機能拡張

OGP （ Open Graph protocol ）

→要は、SNSにWebサイトの情報を認識してもらうもの。

WordPressネクストステッププラグインによる機能拡張

「Open Graph Pro」プラグイン

OGPの実装。meta情報としてOGPを書く。

<?php if (has_post_thumbnail()) :?>

<?php

$image_id = get_post_thumbnail_id();

$image_url = wp_get_attachment_image_src($image_id,'medium');

<?php else: ?>

<?php endif ;?>

<?php if (is_home() || is_front_page()) :?>

<?php else: ?>

<?php endif ;?>

<?php if (is_home() || is_front_page()) :?>

<?php else: ?>

<?php endif ;?>

http://www.communitycom.jp/2012/05/26/wordpress-facebook-ogp/

プラグインもあるし、テーマに直接書くと自由度が高い。

WordPressネクストステッププラグインによる機能拡張

WordPressの記事の更新を、

TwitterやFacebookに流す。

または、TwitterやFacebookの情報を、

WordPressに保存する。

WordPressネクストステッププラグインによる機能拡張

プラグインで実装。「 Social 」プラグイン。

WordPressから、

TwitterとFacebookのタイムラインに更新を流せる。

また、コメント欄で、

SNSアカウントとしてコメント投稿できる。

WordPressネクストステッププラグインによる機能拡張

「 Social 」プラグインでの投稿。

WordPressネクストステッププラグインによる機能拡張

「 Social 」プラグインでの投稿。

WordPressネクストステッププラグインによる機能拡張

「 Social 」プラグインでのコメント欄。

WordPressネクストステッププラグインによる機能拡張

「 Facebook 」公式 WordPress プラグイン。

Facebookが公式に

公開しているプラグインがあります。

http://wordpress.org/extend/plugins/facebook/

WordPressネクストステッププラグインによる機能拡張

「 Facebook 」公式 WordPress プラグイン。

・「いいね！」アイコン設置。

・コメント欄をFB対応に。

・FBで繋がっている人がどの記事に「いいね！」

WordPressネクストステッププラグインによる機能拡張

注意点

・TwitterやFacebookのAPIの仕様変更に

対応しなくなったプラグインは突然動かなくなることもある。

・自動が良いとは限らない。

「Social」や「Facebook」プラグイン以外にも、例えば、

Facebookページに投稿する「Wordbooker」プラグインなど、他にもSNS連携のプラグインはある。

もちろん、自分でプログラムを書くこともできます。

WordPressネクストステッププラグインによる機能拡張

Twitter や Facebook のアカウントで、

WordPress のユーザー登録。

WordPressネクストステッププラグインによる機能拡張

・ユーザーは、新たにIDやパスワードを覚える必要がない。

・サイト運営者はパスワード情報を持つことがない。

・ユーザーとしてもパスワード情報をサイトに渡す必要がない。

メリット

WordPressネクストステッププラグインによる機能拡張

プラグインで実装。「 Gianism 」プラグイン。

このプラグインを使うと、Facebook,

twitter, Googleのアカウントで新規登録 およびログインできるようになります。

登録制のWordPressサイトを作っている場合、ユーザーにアカウントを作ってもらうのが一苦労。このプラグインを使えば、Webサービスの情報を使って

WordPressネクストステッププラグインによる機能拡張

プラグインで実装。「 Gianism 」プラグイン。

ログイン | 高橋文樹.com

https://takahashifumiki.com/login/

WordPressで会員制サイトを作って、ユーザーに投稿してもらったり、登録してもらうサイトを作る際に、

WordPress独自登録でなく、

SNSのアカウントで

クリック１つでログイン登録

させることで、登録率を上げる。

WordPressネクストステッププラグインによる機能拡張

例えば、

こういうログインフォームに

「Gianism」プラグインを使って SNSアカウントでのログインをさせることもできる。

WordPressネクストステッププラグインによる機能拡張

０．自己紹介

１．プラグインによる機能拡張２．外部WebAPIとの連携

３．WordPressに最低限必要なPHP知識４．質疑応答

WordPressネクストステップ目次

Application Programming Interface

API（アプリケーション・プログラミング・インタフェース、Application Programming Interface）とは、

アプリケーションから利用できる、オペレーティングシステムやプログラミング言語で用意されたライブラリなどの機能の入り口となるものである。主に、ファイル制御、ウインドウ制御、画像処理、

文字制御などのための関数として提供されることが多い。

つまり、簡単にいえば、アプリケーションをプログラムするにあたって、プログラムの手間を

API とは？

WordPressネクストステップ外部WebAPIとの連携

要は、

その WEB サービスにあるデータを、

自由に使えると言うこと。

API とは？

WordPressネクストステップ外部WebAPIとの連携

広告主

広告仲介業者や広告代理店

（例）バリューコマース Web APIや

オープンソース

無料で、

Web APIや

オープンソースを公開

直接広告

（純広告）

として報酬

報酬手数料契約

提携対象となる

ユーザーを集客して、

成果に貢献する

図にすると、

こういうイメージ。

WordPressネクストステップ外部WebAPIとの連携

＜WEB制作者のメリット＞

他社の膨大なデータベースや機能を、無料で利用できるため、

Webサイトの開発コストを大幅に削減でき、効率的に制作できる。

＜API提供会社のメリット＞

自社のみでは考え付かないようなWEBサービス等を、

外部の誰かが作ってくれるため、結果として、自社サービスの利用者が増えることが期待できる。

Web API のメリット

WordPressネクストステップ外部WebAPIとの連携

何ができるの？

WordPressネクストステップ外部WebAPIとの連携

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

WordPressに天気情報を自動で取得 WordPressネクストステップ

外部WebAPIとの連携

WordPressの各記事の位置情報を地図に表示

各記事の水族館の位置を

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

＆

WordPressネクストステップ外部WebAPIとの連携

100

WordPressに周辺の写真を自動で表示

そのスポットの周辺の

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

WordPressネクストステップ外部WebAPIとの連携

WordPressに画像を自動で表示 WordPressネクストステップ外部WebAPIとの連携

102

その水族館について、

Twitterの最新つぶやきを

自動表示させる。

WordPressに

Twitter情報を自動で表示

WordPressネクストステップ外部WebAPIとの連携

WordPressにカフェ情報を自動で表示

そのスポットから

２点間の直線距離の近い順番に、

カフェやレストランを、

自動で一覧表示する。

この部分は、自動で

WordPressネクストステップ外部WebAPIとの連携

104

WordPressにホテル情報を自動で表示

そのスポットから

２点間の直線距離の近い順番に、

ホテルを、

自動で一覧表示する。

この部分は、自動でアフィリエイトリンクになっていて

成果の収益に繋がる。

→バリューコマース対応

WordPressネクストステップ外部WebAPIとの連携

WordPressに商品情報を一覧表示

記事に関連する商品を自動で一覧表示する。

この部分は、自動で

WordPressネクストステップ外部WebAPIとの連携

ドキュメント内 PowerPoint プレゼンテーション (ページ 69-122)