WP Drivr Lite – Google Drive Plugin 設定手順

WP Drivr – Google Drive Plugin 設定手順

2018/09/01追記

WordPress 5.0以降で実装が予定されている新エディター Gutenberg(グーテンベルク)では、使用できません。
このプラグイン「Drivr」は、ビジュアルエディタ上部に[Add From Drive]ボタンを追加します。Gutenbergはこのボタンを表示されません。
Drivr Ver 1.0.1 で確認。今後のVerに期待。

対応方法
WPプラグイン「Drivr」をインストールしている環境でGutenbergを有効にした状態で動作検証しています。
手順
Googleドライブで共有可能リンクを取得

 drive.google.com
Google ドライブ -- ページが見つかりません
https://drive.google.com/file/d/**********************/view?usp=sharing
ウェブ ワープロ、プレゼンテーション、スプレッドシート
上の長い***箇所を下の長い***箇所に貼り付ける。
以下の2種類から、どちらかできる方を使用。

<img src=”https://drive.google.com/uc?export=view&id=**********************” alt=”” width=”” height=”” />

<img src=”https://drive.google.com/uc?export=download&id=**********************” alt=”” width=”” height=”” />

alt、width、heightは好みで設定。
Gutenbergビジュアルエディタ(+)から「カスタムHTML」をクリック。
imgのHTMLを貼り付ける。


WPのプラグインを使いこなしている方へ

WPの投稿画像は、Googleドライブから直接表示させたいな。
だって、WPレンタルサーバーには、容量制限があるんだもん。画像はファイル容量が大きいので外に出したい。
だから、WPの投稿で、画像URLをGoogleドライブに保存した画像URLにしたいな。
さらにこれならWPの引っ越しでも画像URLがそのまま使える。

この要望を実現できるWPのプラグインがあります。
この記事では、WPとGoogleドライブを接続するWPプラグインの紹介と設定方法を解説します。

WPプラグイン名
Drivr Lite – Google Drive Plugin
プラグイン作者: Awsm Innovations

このWPプラグイン、最終更新が2年前ですが2018年5月現在も使用できます。
筆者のブログで使用しています。正常に使えているので記事にしました。

なお、筆者ブログのWPプラグインの中で必須のひとつになっています。筆者は現在、有料版を使っています。

WP「Drivr – Google Drive Plugin」は、Googleドライブに保存した、画像、ドキュメント、スライド、スプレッドシート、フォーム、ビデオ、オーディオ、PDFなどをWPのWebサイトで表示できるようにしてくれます。
デモサイトがありますので、実際の状態を見られます。

GoogleドライブにAPI接続しGoogleドライブの共有設定画像URLをWPに挿入する仕組みです。

ブログの投稿などでGoogleドライブの画像等を入れたい場合は、投稿エディター画面の上にある「Add From Drive」ボタンをクリックします。するとGoogleドライブの画面が表示されるので差し込みたいファイルを選択します。

WP「Drivr – Google Drive Plugin」には、無料版と有料版があります。
無料版でも十分に使えます。

有料版は、$15で販売されています。

筆者が有料版なのは、制限を気にして使用したくなかったのと、$15以上の価値があったからです。

このWPプラグインを開発している会社はこちら。

WPにプラグインを追加する場合は、通常の方法と同じです。

WPのプラグイン新規追加で以下のプラグインを検索して有効化してください。

Drivr Lite – Google Drive Plugin
プラグイン作者: Awsm Innovations

GoogleドライブにAPI接続が必要です。

筆者は、ここで苦戦しました。
英語版の公式ガイドでGoogleドライブAPI設定方法が掲載されています。
Google Drive Picker Plugin for WordPress by AWSM Innovations 公式ガイド(英語)

日本語がよい方へ以下に設定手順を記載しました。
設定手順は、長いです。しかし、Google APIを使えるようになると無料で多くのことができるようになります。
WP運用費を増やしたくない方は、挑戦してみてください。

Google APIsの設定方法

以下の手順に従って、キーを生成してください。
このリンクをクリックしてください。

[プロジェクトの作成]ボタンをクリックします。
あなたのプロジェクトに名前を付け「作成」をクリックします。
例: WP-Plugin-Google-Drive-Picker

[APIとサービス]>「ライブラリー」を表示。
「Google Drive API」を検索して有効にする。
「Google Drive API」を検索して有効にする。

[APIとサービス]>「認証情報」>[OAuth同意]タブをクリック。
メールアドレスを入力
ユーザーに表示するサービス名を入力
例: WP-Plugin-Google-Drive-Picker
残りのフィールドは空白のままでOK。

[APIとサービス]>「認証情報」>[認証情報]タブをクリック。
「認証情報を作成」プルダウンをクリック
[OAuthクライアントID]を選択します。

アプリケーションの種類で、「Webアプリケーション」を選択。
名前を入力(自分のサイト名等)
例:アップマネー.jp
[承認済みの JavaScript 生成元]に自分のWebサイトURLを入力。
例 https://xn--cck6c4a1b9azn.jp
作成」ボタンをクリックします。

OAuth クライアントが作成されました。
OAuth クライアントの「クライアント ID」と「クライアント シークレット」が表示されます。
「クライアント ID」をコピーしメモ帳などに貼り付けます。
「クライアント シークレット」は使いません。

[APIとサービス]>「認証情報」>[認証情報]タブをクリック。
「認証情報を作成」プルダウンをクリック
[APIキー]をクリックします。
[APIキー]が表示されるので、コピーしメモ帳などに貼り付けます。

WPの設定

WP > 設定 > Drivr をクリック
Key タブをクリック
Client ID と API Key を貼り付けます。
(クライアント シークレットは使いません)

Googleドライブ

新規フォルダー作成
例: Public
半角英数にする。スペースや日本語にするとスマートフォンで画像が表示されない。
フォルダーを共有設定にする。
これで個々のファイルの共有設定作業が不要になる。
WPの画像は、Googleドライブの共有化したフォルダーに入れます。

はじめの実行

投稿の画面で「 Add From Drive」をクリック。
ブラウザーがポップアップをブロックするので注意。
「このアプリは確認されていません」画面が表示。
左下の「詳細」クリック。
「URL(安全ではないページ)に移動」クリック。
「許可」クリック。

オリジナルマニュアル(英文)