Windows Azure Storage for WordPressプラグインとWordPress 4.4以降でサムネイルが表示されない問題について

Windows Azure Storage for WordPress プラグインについて

4-1.pngWindows Azure Storage for WordPressプラグインは、メディア画像をMicrosoft Azure Storage Blobに自動アップロードして、Azure Storageからダイレクトに画像配信を行うことができるとっても便利なプラグインです。

blob_st002.jpgこのプラグインの詳しい説明は、のりじさんのブログが詳しく解説してくれています。上記の画像のように画像専用サーバの代わりにAzure Blobを使うというものです。
このプラグインによってWebAppsのディスク容量は食わないし、配信は高速化されるし、WebApps側のコネクションを使わないなど、とっても良いことがあります。

とっても便利なので使ってない人は、是非インストールして試してみてくださいね。

WordPressサイトの画像は「Azure BLOBストレージ」に置いた方が色々便利な話。

WordPress 4.4のHTML5 SourceSet対応

4-3.png

さて、このプラグインを利用されている方の為に、WordPress 4.4以降での本プラグインの動作の問題について触れます。
可変するブラウザのサイズに合わせて、サイトの見た目を変えていくレスポンシブデザインは、とても便利です。

4-2.png

WordPressでは、4.4からウィンドウのサイズに合わせて最適な画像を表示するSrcSetに対応をする改良が行われました。WordPress 4.4で実装されたレスポンシブ対応のテーマなどでは、すでにこのSrcSetが使われています。

Azure Storage Pluginは、SourceSetの出力に、まだ追随対応していない

ストレージを確認するとサムネイルの生成は問題なく行われているのですが、表示の際にAzure Storage側を参照するフックが動作していない為、WordPressのwp-contents/upload配下を読みに行ってしまいます。結果的に、そこには画像が一枚も無いため画像が表示されない問題が発生します。

対応方法

しらべてみると、同様の問題を数日前に対応した人がいましたので、ありがたく使わせていただきました。以下のコードをプラグインフォルダの中にある、windows-azure-storage.phpファイルの行末に追記してください。

4-4.pngもしくは、ここからwindows-azure-storage.phpをダウンロードして、KuduやFTPなどを使ってファイルを上書きしてください。


// Fix for WP 4.4
add_filter(
    'wp_calculate_image_srcset',
    'windows_azure_storage_wp_calculate_image_srcset',
    9,
    5
);
 
function windows_azure_storage_wp_calculate_image_srcset($sources, $size_array, $image_src, $image_meta, $attachment_id )
{
    $mediaInfo = get_post_meta($attachment_id, 'windows_azure_storage_info', true);
    
    if (!empty($mediaInfo)) {
 
        foreach ( $sources as &$source ) {
            $imgFileName = substr($source['url'], strrpos($source['url'], '/') + 1);
            
            if ( substr($mediaInfo['blob'], strrpos($mediaInfo['blob'], '/') + 1) == $imgFileName ) {
                $source['url'] = "https://" . get_option( 'azure_storage_account_name' ) . ".blob.core.windows.net/" . $mediaInfo['container'] . "/" . $mediaInfo['blob'];
            } else {
 
                foreach ( $mediaInfo['thumbnails'] as $thumbnail ) {
        
                    if ( substr($thumbnail, strrpos($thumbnail, '/') + 1) == $imgFileName ) {
                        $source['url'] = "https://" . get_option( 'azure_storage_account_name' ) . ".blob.core.windows.net/" . $mediaInfo['container'] . "/" . $thumbnail;
                        break;
                    }
        
                }
 
            }
        
        }
 
    }
 
    return $sources;
}