連載第85回
2014年7月19日
ローカルとServersMan@VPSで、SVG画像を扱う

 前回、サーバー上のWordPressでプラグイン等の更新情報を外部から取得できないという記事を書きました。当分解決のための努力に集中できなさそうなので、先にその他の課題を少しずつ進めることにします。
 そこで今回は、その課題リスト内にあった「SVG画像」の取扱いについて。
 現状だと、MacBook Air内のMAMP上に置いたWordPressでSVG画像を扱おうとするとエラーが出て、ローカルであっても「このファイルタイプはセキュリティの観点から許可されていません」と警告されるのです。SVG画像をアップロードし、サイトで公開できるようにする方法は以前に記事にしてあるので、それを参考にしつつ、まずはローカルにプラグインをインストールしてみることにします(実は今回が初めての、ローカルへのインストールだったりする)。

ローカルでの動作は問題なし

 MacBook Air内のMAMP上にインストールしたWordPressでは、エラーも出ず、何ら問題なくプラグイン検索が出来ます。SVG画像をWordPressで取扱い可能にする「Scalable Vector Graphics (SVG)プラグイン」も普通に探してきてくれました。

 ではそのまま「いますぐインストール」をクリックしてみると…普通にインストール出来たので、そのまま「有効化」を押します。問題なくプラグインリストに表示され、SVG画像のアップロード(ローカルへのインストール)も可能となり、投稿記事ページでのSVG画像の表示も問題なく出来ました。

ServersMan@VPSでのSVG関連設定

 ローカルMAMP上では問題なくプラグインの設定が出来たので、今度はServersMan@VPS上のWordPressへプラグインをアップロードします。本来ならWordPressからプラグインを検索して直接インストールしたいのだけれど、今はまだ前回のトラブルが継続中なので、手動でSFTPアップロードすることにします。アプリにはいつもの通り「Coda 2」を使用。

 先ほどプラグインをインストールしたローカルのプラグイン・フォルダ(左のカラム)から、右側のサーバーのプラグイン・フォルダへ、SVGプラグインのフォルダごとアップロード。特に問題はナシ。

 アップロード後にflfl.me上のダッシュボードにログインし、インストール済みプラグインを見てみると、無事「Scalable Vector Graphics (SVG)」がリストアップされていたので、そのまま有効化します。

続けて.htaccessファイルとか

 SVGプラグインを有効化させた後、先ほどローカルで試した画像をそのままサーバーにアップロードしてみようとしたところ、この時点で早くもエラーが表示されました。以前の記事では、画像のアップロード自体は問題なく出来たのですが、これはサーバーの仕様の違いなのでしょうか。

 そこで.htaccessファイルに、下記のSVG画像認識用のコードを追加します。ちなみにこの.htaccessファイルを設置している場所は、flfl.meの場合だと、index.phpを置いているサイト公開用のディレクトリ直下になります(その下のWordPressフォルダ内ではありません)。

.htaccessファイル追記

Options +ExecCGI
AddType application/x-httpd-cgi .cgi .pl

AddType image/svg+xml .svg
AddType image/svg+xml .svgz

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

4〜5行目:SVGファイルを、サイト上で画像として取り扱うためのコードを追加。

 アップロード後、改めてダッシュボードにログインすると、今回はメディアからSVG画像を無事アップロードすることが出来ました。これでひとまずflfl.meにてSVG画像を取り扱うことが可能に。つづく。

次回はロゴの作成か、タグの導入かどちらかを予定。