terabo.net 人生ラボラボ
WordPressプラグイン「Awesome Flickr Gallery」でFlickrアルバムをawesomeに記事に埋め込む
先日、公開した記事「初冬の八ヶ岳 (阿弥陀岳・赤岳・横岳・硫黄岳) に登ってきました」で、 Flickr アルバムを記事中に表示するために、WordPressプラグイン「Awesome Flickr Gallery」を使用しました。 本記事では、WordPressプラグイン「Awesome Flickr Gallery」が記事中にFlickrアルバムを埋め込むのになぜ良いと私が感じたか、およびセットアップ方法と使用方法を説明します。
私がプラグインに要求すること
WordPressに写真アルバムを載せた記事を書きたい場合、直接WordPressに写真をアップロードしコメントを書いていくことはできますが、
写真が大量にある場合や既に他人との写真の共有で別のWebサービス等に写真をアップロード済みの場合、また新たにWordPressに写真をアップロードするのはかなりの手間です。
私は写真を共有したりアルバムを作成するときはたいてい Flickr を使用しています。
無料アカウントでも1TBまで使用できるストレージを提供してくれて、アルバム (昔はセットと呼ばれていた) を作成することもできます。
写真を公開・非公開・友人にのみ公開等のオプションを与えてアップすることができます。
先日公開した記事「初冬の八ヶ岳 (阿弥陀岳・赤岳・横岳・硫黄岳) に登ってきました」では、
登山中に撮影した写真でFlickr上にアルバムを作成したので、Flickrで作成したアルバムをWordPress記事上に表示させてみたいと考えました。
私が記事中にFlickrアルバムを埋め込むにあたり、以下の項目を満たす方法を探しました。
- アルバムが表示できること
- アルバム内の写真を並べて表示できること (スライドショーではなく)
- 各写真の説明文 (description) を表示できること
- ある程度スタイルを編集できること
Flickrが提供するアルバム埋め込みコードを利用する方法、いろいろなWordPressプラグインを試してみましたが、 Awesome Flickr Gallery が最も自分が欲しかった機能を満たしていたのでこれのプラグインを使用することにしました。
Read more »
WordPress高速化プロジェクト 番外編「クライアントキャッシュの利用と圧縮」
アブストラクト:
WordPress高速化プロジェクト第2回目の記事は番外編です．クライアント側のブラウザキャッシュを利用/コンテンツの圧縮をして，実質的なコンテンツ表示の高速化を目指します．
WordPress高速化プロジェクト 記事一覧:
- 手法1 「PHP高速化」
- 番外編「クライアントキャッシュの利用と圧縮」 いまここ
Google PageSpeed Insights
今回は，Google の PageSpeed Insights [1] の結果を参考に，クライアントのブラウザキャッシュを利用/レスポンスコンテンツを圧縮して，実質的な高速化をしました．
改善前の PageSpeed Insights の結果を下の図に示します．
このうち，具体的には，「修正が必要」とくくられた項目の「ブラウザのキャッシュを活用する」，「圧縮を有効にする」を改善しました．
[1] PageSpeed Insights: PageSpeed Insights
前回と同じく環境は以下のとおりです．
- CentOS release 6.6 (Final)
- PHP 5.3.3
- Apache 2.2.15
WordPress を標準インストールしてデフォルトでは効いていない項目である「クライアントのブラウザキャッシュの利用」と「レスポンスコンテンツのgzip圧縮」を設定します．
Read more »
WordPress高速化プロジェクト 手法1「PHP高速化」
アブストラクト:
このサイトはWordPressで構築されています．
今回はPHPコードをキャッシュして高速化する Zend OPcache を使用して，レスポンスの約1.5倍の高速化しました．
WordPress高速化プロジェクト 記事一覧:
- 手法1 「PHP高速化」 いまここ
- 番外編「クライアントキャッシュの利用と圧縮」
WordPress は遅い？
WordPress はコンテンツの更新しやすさ，テーマ/プラグインの適用の容易さ等でかなり優れているツールですが，レスポンスが遅いなと感じることが多々あります．体感でもページ表示に1秒ぐらい要する感じです．
この辺はCMS特有のデメリットだと思いますが，特に WordPress はレスポンスごとに発生するデータベースへのアクセスと PHP での動的コンテンツ生成で時間を消費してしまいます．
このサイトは特にアクセスが多いわけでもないですが，レスポンスが遅いときあってたまにイライラするので今回から複数回に分けて高速化を検討していきます．
WordPress 高速化手法
WordPress を高速化にはいくつかの方法があります．簡単に分類すると次にようになります．現在Webサーバにapacheを使用していること前提です．
- PHPの高速化 (APC, Zend OPcache 等を使用)
- データベースの高速化 (インデックスの設定，クエリ数の削減等)
- WordPress高速化プラグインの使用 (WP Super Cache等)
- リバースプロキシサーバのキャッシュを利用 (Varnish, nginx等)
- Webサーバ自体を軽量なものにする (nginx等)
- Webサーバをnginxに変更した上で (FastCGI / proxy cache) を使用
参考文献:
– WordPressを100倍速くする！ MySQLの調整やnginx proxy cache | KRAY Inc
– さくらVPSのWordPressをチューニングして30倍高速化した方法 – 原宿・表参道.jp
– Nginxを使ったもう一歩進んだWordPressチューニング | cloudrop
以上，1~6 まで挙げましたが，数字の順にハードルが高くなっている（導入/設定が面倒）と思います．しかし数字の順に効果は大きいと推測しますが．
また，3 のWordPress高速化プラグインの使用は，平気で config.php や .htaccess を書き換えたりしたり，中身で何やってるかよくわからないのでできれば使用したくありません．結局やろうとしていることは動的コンテンツのキャッシュなので，プラグインで実現する機能は 4 や 6 のWebサーバのキャッシュ機能で実現できます．
2 のデータベース高速化に関してはプラグインや自前関数でとんでもないSQLクエリを実行していない限り大きな問題にはならない気がしますので手を触れません．
他にも，コンテンツのキャッシュ期限を明示的にすることによってクライアント側のブラウザキャッシュにコンテンツを残す，レスポンスコンテンツをgzip圧縮すること等によって，間接的に高速化することができます．
参考文献:
– WordPressキャッシュ系プラグインの比較とサイトに適した選び方 | ゆっくりと…
よって，1, 4, 5, 6の方法によってWordPressの高速化をしていきます．
Read more »
ブログカード風リンク表示WordPressプラグイン「TeraShare」をアップデート (version 0.2.0)
以前作成したブログカード風にリンク表示するWordPressプラグイン「TeraShare」を バージョン 0.1.0 → 0.2.0 にアップデートしました．
前回の記事を下に貼り付けます．
ブログカード風リンクとはまさに下に貼り付けたようなリンクのことです．
変更点
バージョンアップによる変更点は以下の2点です．
- ブログカード内タイトルの
h1タグをspanタグへ変更 - CSS修正
1. はSEOのためです．
以下の記事などを参考にどうやらh1タグは1記事に1つが良いようで，リンクを貼るたびにh1タグをつけてしまっては重要なポイントが分散してしまうので，リンクのタイトル部はspanタグへ書き換えました．
参考文献: SEOの基本中の基本！「titleタグ」「meta description」「h1タグ」の書き方まとめ | 株式会社LIG
2. は本当にどうでもいいような文字サイズの修正です．
Read more »
ブログカード風にリンクを表示するWordPressプラグイン「TeraShare」を作った
ブログカード風にリンクを表示するWordPressプラグイン「Tera Share」を作りました．
（厳密に言うと今まで自作テーマ内で使用していたものをプラグイン化しました．）
WordPressエディタでショートコードを挿入すると画像のようにリンクを表示できます．
Read more »