Gallery3をWordPressのメディア機能の代わりに利用する方法

シェアする

WordPress(ワードプレス)を画像メインのブログとしたい場合に、標準のメディア機能に『カテゴリー分けできない』『タグ付けできない』などといった不満を感じた事はありませんか?

本項では使い勝手が悪いWordPressのメディア機能の代わって、フォトギャラリー系CMS『Gallery3』(ギャラリー3)を利用して埋め込む方法等をご紹介します。

スポンサーリンク

WordPressのメディア機能を使いたくない理由

その前に、WordPressのメディア機能の看過できない問題点を示しておきます。

WordPressのメディア機能はアタッチメント(Attachment,アップロードした画像そのもの及びサイズ違いを一纏めにした呼称)が多くなれば多くなるほど、過去にアップロードした画像を再使用する際にそのデメリットが顕在化してきます。

画像にカテゴリーやタグを設定できない。

冒頭で例示した通り、標準の仕様ではカテゴリーやタグを設定する機能がありません。

故に、過去のエントリーで使用した画像を再利用しようとした場合、アップロード時にタイトル、キャプション、代替テキスト、説明の何れかにキーワードを記述していなければ検索できないので、キーワードとなり得る言葉を含めて一々書き記さねばなりません。

確かに、カテゴリーやタグを追加できる『Attachment Taxonomy Support』というプラグインが存在しますが、実際に使ってみると日本語非対応であり、しかも日本語などの全角文字で入力すると自動的にエンコードされてしまうので非常に見分けがつかないという本末転倒な事態になってしまい、実用性に疑問があります。

アタッチメントがレスポンシブじゃない。

WordPressのメディア機能の役目は画像を保管する事だけなので、スマホでのアクセスの場合には小さい画像に差し替えるというモバイルフレンドリーな機能を持っていません。

故に、PC上で執筆した際に貼り付けたサイズがスマホにもそのまま読み込まれてしまいます。

SEOの観点から、このままではモバイルフレンドリーではないサイトという評価を受け、検索順位の上位から程遠いサイトになる事が予想されます。

uploadsディレクトリがサーバーを圧迫していく。

カテゴリー分けできない事やレスポンシブじゃない以上に問題視すべきデメリットがサーバーへの負荷です。

WordPressに画像をアップロードすると、サイズが異なる画像が自動生成されます。これはメディア機能だけでなく、使用中のテーマや有効中のプラグインの機能により、それらが要求するサイズが無い場合に作成されるためです。

ところがこれ、任意に削除できない、FTPで削除するとエラーとなる、または削除しても勝手に再生成されるという看過できないデメリットを有しています。勿論、テーマやプラグイン次第で自動生成されるサイズと数は異なりますが、1つの画像をアップロードするだけで、大抵はその際に形成されるアタッチメントの総容量がオリジナルサイズの2,3倍程度またはそれ以上の重さとなります。

そのせいでuploadsディレクトリが瞬く間に重くなってしまい、BackWPup等によるバックアップに必要となる容量と掛かる時間が日に日に増してしまうというヤバいデメリットを孕んでいます。

Gallery3を利用するメリット

WordPressのメディア機能のヤバさをご理解していただいたところで、Gallery3のメリットについて論じようと思います。

Gallery3はWordPressと同様に自前で設置・管理できるCMSであり、WPと同じくPHP言語で動作します。

オーガナイザー機能付きなので管理しやすい

アップロードした後で保存先となるアルバム(ディレクトリ)を変更したり、画像にタグを付けて検索しやすくする機能が標準で実装されています。それ故に、WordPressのメディア機能よりも遥かに画像の管理が容易です。

自由にアップロードできる

自前で設置するため、FlickrやInstagramのように写真だけという制限が一切ありません。

加えて、TumblrやTwitter等のSNSでアップロードが制限され得る内容の画像をアップロードしてもアカウントが凍結される事もありません。

つまり、自由にアップロードして管理する事ができます。

ただし、アップロードする画像の利用方法や公開状態が各種法令(著作権法、児ポ法、リベンジポルノ被害防止法等)に抵触する場合、プロバイダー等からの制裁を受ける可能性は否定できません。運用はくれぐれも公序良俗の範疇で行いましょう。

画像は別のドメインから読み込んだほうが早い

そして副次的な利点として、画像がより速く読み込まれます。

経験則として、一つのページ中で使用する画像が多ければ多いほど、ページの重さが増えてブラウザへの表示が遅くなる事は皆様もご存知だと思います。

またその一方で、クロスドメイン画像(※1)を読み込む場合、同じ画像を同じドメイン(uploadsディレクトリ等)から読み込むよりも早く読み込まれる事が知られています。

そこで、ブログのドメインとは別にGallery3専用のドメイン(※2)を用意してそこにインストールし、そこに保存した画像をクロスドメイン画像として読み込めば閲覧者の読み込み待ちによるストレスを低減する事が可能となります。

※1…別のドメインにある画像。Gallery3の他、FlickrやInstagram等にアップロードした画像も含まれる。

※2…サブドメインは可。サブディレクトリは不可。

前準備

それでは本項の目的であるGallery3の導入方法について説明してまいります。

専用のドメインを用意する(サブドメイン可)

Gallery3をインストールするサーバーの独自ドメインを予め確保しておきます。

この時に専用のサブドメインを用意する場合は、契約している独自ドメインのネームサーバーの指示に従って、DNSレコードAレコードもしくはCNAMEレコードのどちらかを書き加え、入力後1時間~数日(※)経つと使用可能になります。

【入力例】Aレコードの場合

a gallery 123.456.789.012

【入力例】CNAMEレコードの場合

CNAME gallery example.net.

※ネームサーバーの仕様によります。

MySQLのデータベースを用意する

WordPressをインストールする際にも必要となった、MySQLのデータベースを用意します。

自分の場合、Gallery3専用で使うための別のデータベース名を確保できましたが、レンタルサーバーの仕様上による保有制限でメインブログ等他のCMSと共用しなければならない場合は後述する”Table prefix”を指定すれば共用可能です。

公式サイトからダウンロードする

公式サイトからインストール用のZIPファイル(→最新版)をダウンロードし、これを適当な場所で展開します。

また併せて、GitHubからも拡張モジュールをダウンロード(→Download ZIP)し、これも展開しておいてください。

Gallery3のインストール

インストール・セットアップ、日本語化に関する大体の手順は@noncollecomさんのGallery3のインストール方法に準じます。

以下では補足事項を記します。

アップロードする前にパーミッションを変更する

FTPでアップロードする直前にルートディレクトリとなる設置先のディレクトリのパーミッションを一旦”777“(※)に設定し、変更後直ちに同ディレクトリへのアップロードを開始します。

また併せて、拡張モジュールの中にあるmodulesとthemesの中身をルートディレクトリ直下に置かれる同名のディレクトリにそれぞれアップロードしておきましょう。

※ユーザー(所有者)、グループ(同一サーバーの共同利用者)、ゲスト(その他)に対して、ディレクトリ内の読み込み(rまたは4)と書き込み(wまたは2)及び実行(xまたは1)を許可している状態。

アップロード完了後直ちにセットアップを開始する

アップロード完了後直ちにブラウザからドメインにアクセスしてセットアップを開始します。

まず必須項目であるDatabase nameにデータベース名、Userにユーザー名、Passwordにパスワード、Hostにホスト名(例:localhost)を入力します。

@noncollecomさんの説明ではTable prefix(optional)は空白でも構わない旨が記されていますが、前準備で言及した通り、他のCMSと共用する場合はこの欄に他のCMSと重複させないために任意の半角英数字の文字列を追加する必要があります。

【入力例】Table prefix(optional)に入力を要する場合

g3

パーミッションを変更する

セットアップ完了後、直ちにルートディレクトリのパーミッションを”755″に変更します。

設定方法

Gallery3:サムネイル画像・リサイズ画像のサイズ変更

セットアップ後、ダッシュボードから外観の『テーマのオプション』を選択して設定画面を開き、『サムネイル画像のサイズ』『リサイズ画像のサイズ』に(横幅の)任意のピクセル値を指定します。

参考として自分の場合、サムネイル画像は300px、リサイズ画像は680pxを指定してます。

前者はスマホ表示時に、本文中で表示させる際にこのサイズを使用するため、後者はPC表示時にSimplicityのメインカラムの幅に合わせたためです。

Gallery3:モジュール”Embed Links”の有効化

拡張モジュールをアップロードした場合、モジュール(Modules)の一覧に埋め込みリンク(Embed Links)が出現するので、それを有効化します。

有効化する方法は、モジュール名の左側のチェックボックスにチェックを入れた状態でページ最下部の更新ボタンを押せば完了です。

WordPress:CDN或いは遅延読み込みどちらか一方の解除

ページの読み込み速度を向上させるために導入しているサイトが多いCDNコンテンツ・デリバリー・ネットワーク)と遅延読み込みレイジーローディング)のどちらか一方を解除する必要があります。

理由は、JetpackのCDNサービスである”Photon”とSimplicityの画像遅延読み込み機能の両方をオンにするとGallery3の画像が表示されない不具合が存在するためです。

WordPress:Kntkr Gallery3 Embed Changerの有効化

先ずGitHubへアクセスしてKntkr Gallery3 Embed Changerをダウンロード(→Download ZIP)してこれをインストールし、有効化してください。

次にKntkr Gallery3 Embed Changerの設定画面を開き、Gallery3設置先の欄にドメインを入力して変更を実行してください。

【入力例】Gallery3設置先

gallery.example.com

利用方法と留意点

Gallery3側における操作方法と留意点

格納しているアルバム(ディレクトリ)を変更すると画像のURL(絶対パス)も変更されるので、オーガナイザーを利用する際はメインブログ等に貼り付けた画像のアルバムを変更する操作をしないように気をつけましょう。

WordPress側における操作方法と留意点

以前書いたKntkr Gallery3 Embed Changerに関する記事の内容に同じなので、その補足事項を記します。

埋め込みリンクを用いてIMGタグを取得すると、srcのURLが拡張子の後に”?m=0123456789″という数字の羅列が付加されている場合が多々あります。

【例】

<a href="http://gallery.example.com/var/resizes/test/sample-image.jpg?m=0123456789"><img src="http://gallery.example.com/var/thumbs/test/sample-image.jpg?m=0123456789"></a>

この”?m=0123456789″等はモジュールが勝手に付加する値であり、削除しなくても画像の表示には問題はありません。

ただし、この部分を削除していないと”Auto Post Thumbnail”等のアイキャッチ自動設定機能が画像URLとして認識しなくなるので、アイキャッチとして使用したい画像の場合にはこの部分を必ず削除しておきましょう。

応用編:Gallery3をプライベート化する

アップロードした画像を好き勝手に使われたくない場合、画像以外にアクセス制限を掛ける方法を記します。

画像のファイル名そのものをランダム化する

その前に、アップロードする画像のファイル名にはランダムな文字列を使う事をおすすめします。

理由は、画像のファイル名が類推しやすい場合、仮にアクセス制限を施しても利用されやすく、最悪の場合には未公開の画像を暴露されるリスクも考えられるためです。

【例】同一ディレクトリに類推されやすいファイル名がある場合

osaka-001.jpg(メインブログ等で公開中)
osaka-002.jpg(メインブログ等で公開中)
osaka-003.jpg(メインブログ等で公開中)
osaka-004.jpg(未使用のため非公開)
...
osaka-101.jpg(未使用のため非公開)
kyoto-001.jpg(未使用のため非公開)
kyoto-002.jpg(未使用のため非公開)
...
kyoto-200.jpg(未使用のため非公開)

この対策としてファイル名に類推不可能なランダムを含めることが有効であるのは言うまでもありません。

そこで、こちらではファイル名変更君のご利用をおすすめします。

ファイル名変更君使い方)を用いれば連番の後にランダム文字列を追加することが可能です。

【例】連番の後にランダムを追加した後でURLの末尾を統一させるための文字列を追加

003-gsqxphmczvwfhxx1r9qv6shgqcz5t-bsod.gif

Gallery3での操作

先ず、モジュールにあるアルバムパスワードalbumpassword)を有効化します。

次に、ログインした状態で閲覧制限を掛けたいアルバムを開き、アルバムオプションから『パスワード作成』をプルダウンし、“Enter password”と書かれたダイアログを表示させて任意のパスワードを設定します。

設定が完了するとログアウトしている状態の時には表示されなくなります。また設定中はアルバムオプションの『パスワード作成』が『パスワードを削除』に変化します。

ただし、このモジュールで閲覧制限を掛けられるのはルートディレクトリ以外なので、ルートディレクトリには閲覧制限を掛けたいアルバムと並列させて、不特定多数に見られても構わないダミーのアルバムと画像を用意しておくことをお勧めします。

【設置例】

root-----dummy
      |
      ---hidden-----hiddenA
                 |
                 ---hiddenB
                 |
                 ---hiddenC-----hiddenD
                             |
                             ---hiddenE

FTPでの操作

先ず、FTPでルートディレクトリ直下にあるvarディレクトリを開くと、resizesthumbsという名称のディレクトリがあります。この2つに.htaccessを設置してそれぞれに以下の3行を書き加えます。

Satisfy any
order allow,deny
allow from all

次に、ルートディレクトリの.htaccessベーシック認証(Basic Authentication)を書き加えます。

このベーシック認証の設定方法はサーバーの仕様により異なるため、こちらでの解説は控えさせていただきますので、各自で調べて設定してください。

ベーシック認証の設定に成功すると、先に設定したresizesthumbsの中にあるファイル以外にはベーシック認証によるアクセス制限が掛かります。