joppot

コピペで絶対動く。説明を妥協しない

ソフトウェア

WP Offload S3 とawsプラグインでwordpressの画像をs3にアップロードする

投稿日:

Pocket

wp_offload_image_top_thumb

概要

みなさんこんにちはcandleです。今回はwordpressの画像をs3にアップロードします。
私は最近まで別のs3にアップロードするプラグインを使っていたのですが、開発が2年前に止まってしまい、最新のwordpressのバージョンではうまく動かなかったので、wp offload s3に変更しました。

wp offload s3はamazon web service pluginの拡張なので、事前にそちらを入れる必要があります。そこも含めて解説していきます。


前提

amazon s3のiamを取得している。
もしも、まだ取得してない人は、こちらの記事を参照してください。
awsのs3を操作する為のaccess keyとsecret keyを取得する(IAM)

s3のバケットを作成しておく

SPONSORED LINK


Amazon Web Service pluginとWP Offload S3をインストールする

wp offload s3をインストールする前にamazon web service をインストールします。

wordpressの管理画面から「プラグイン」→「新規追加」を押します。

wordpress_add_new_plugin

プラグインの検索から「Amazon Web Service」で検索して、画像の候補をクリックして、インストールします。

search_amazon_web_service_plugin

同じように検索ボックスで「wp offload s3」で検索して、インストールします。

click_wp_offload_s3

インストールしたプラグイン一覧で、それぞれのプラグインを有効化します。

activate_each_plugin

これでインストールが完了しました。

awsの設定

左のメニューにawsという項目ができます。

aws_menu

s3へのアクセスキーとシークレットキーはwp-configに記述するか、データベースに保存するか選べます。awsプラグインが推奨しているのは、wp-config.phpに記述するほうなので、私はそちらで設定します。

wordpressのwp-config.phpを開いて、すでに取得しているs3のiamのアクセスキーとシークレットキーを記述します。

define( ‘AWS_ACCESS_KEY_ID’, ‘********************’ );
define( ‘AWS_SECRET_ACCESS_KEY’, ‘********************************’ );

awsのキーを設定するとawsのページが以下のように変更されます。

defined_aws_key

awsの設定は以上です。

wp offload s3の設定を行う

s3にアップロードするための設定をおこないます。
左のメニューのAWSの「S3 and CloudFront」を選びます。

choose_s3_and_cloud_front

以下の画面が出てきます。
テキストフィールドに直接バケット名を入れても良いのですが、
「Browse existing buckets」を選べば、
設定したiamのキーで参照できるバケットの一覧が出てくるのでそちらの方が楽です。

what_is_bucket_name

ボタンを押すと、バケットの一覧がでてくるので、アップロードしたいバケットを選びます。

choose_your_bucket

あとは自動的に設定がおこなわれて、以下のような画面が出れば成功です。

wp_s3_setting_window


s3のurlの設定を行う

s3にアップロードしたファイルのアドレスは様々な表現が可能です。

http通信の場合

もしも、あなたのサイトがhttp通信で行われているなら、
Domainの項目は「Bucket name as subdomain」をおすすめします。

pathは「wp-content/uploads/」にします。
http_web_site

https通信の場合

https通信でサイトを運用している場合は問題が起こります。
s3のバケット名ではドット「. 」が使えます。https通信では不要なドットはエラーを出すらしく、このプラグインではhttps通信を行う場合は「Bucket name as subdomain」を選べません。

仕方がないので、「Bucket name as path」にします。

unfortunatly_file_path

これ、自分のバケットはドットが入っていないのがわかっているから、なんとか設定できればいいのにと思っています。

メディアをアップロードしてみる

メディアに移動して画像をアップロードしてみます。

media_image

画像の詳細を見てみると、画像がs3のアドレスになっています。

s3_image_address

https通信だとこんな感じのアドレスでした。
https://s3-ap-northeast-1.amazonaws.com/バケット名/wp-content/uploads/2016/01/17002715/island-984445_640.jpg

s3のマネジメントページに行くと、以下のようになっていました。
自分はewwwのプラグインを入れているので、幾つかファイルが作成されています。

wp_backet_upload_success

まとめ

これ、やっぱりよくよく考えると、https通信の場合でもサブドメインにバケット名のせたいですね。というのも、サーバの引越しとかする場合にバケット名の部分が不要になるからです。

https://s3-ap-northeast-1.amazonaws.com/バケット名/wp-content/uploads/2016/01/17002715/island-984445_640.jpg

https://joppot.info/wp-content/uploads/2016/01/17002715/island-984445_640.jpg

urlにまとめられるならそっちの方が便利ですね。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-ソフトウェア
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

VirtualBoxにubuntu13.10desktop版をインストールする

概要 みなさんこんにちは、candleです。今回はVirtualBoxにubuntu13.10をインストールしてみましょう。 VirtualBoxは一般にVM(バーチャルマシーン)と言われるもので、O …

Aptana Studio 3でソースコードのどこにカーソルがあっても改行する方法

概要 みなさんこんにちはcandleです。今回はAptana Studio 3の素晴らしい機能の1つを紹介します。 改行はソースコードを書く上では大変重要になります。 新しくコードを書いている時は改行 …

何でも開けるエディタCotEditorをインストールしよう

概要 皆さんこんにちわcandleです。今回は、ほぼ全てのファイルを開くことができるCotEditorのインストールの仕方を書いていこうと思います。 CotEditorとは無料で使える素晴らしいエディ …

wordpressでタイトルに縦線をいれるならall in one seo packを使うと便利

概要 みなさんこんにちはcandleです。今回はwordpressのタイトルに縦棒を入れる方法を紹介します。 wordpresは特にプラグインを入れないとハイフン区切りのタイトルになります。 ホーム「 …

MarathonoはMacのGUIで簡単にlinuxコマンドを実行するソフト

概要 みなさんこんはcandleです。今回はmarathonoというGUIツールの使い方です。 このソフトの目的は大まかに2つです。 1つは任意のLinuxサービスを実行すること 2つ目はファイルの変 …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ