カテゴリー : WordPress

無料で使える WordPress キャッシュプラグイン比較

WordPress のキャッシュプラグインを無料で使えるものに絞って比較してみました。

キャッシュプラグインを選ぶ前提

当サイトは Nginx, PHP-FPM の構成で WordPress を運用しています。

WordPress, Nginx, PHP-FPM などの設定を自分でカスタマイズできるエンジニア目線で、キャッシュプラグインを選定しました。

比較したプラグイン

  • W3 Total Cache
  • WP Fastest Cache
  • WP Super Cache

W3 Total Cache

結論としては、W3 Total Cache 一択だと考えてます。

メリットは、PC・モバイルのそれぞれ別のテーマでキャッシュできるところです。

デメリットは、Nginx の設定をちゃんと理解しておかないと扱えないところです。

WP Fastest Cache

WP Fastest Cache は初心者に人気なキャッシュプラグインとして取り上げているサイトが多いみたいです。

メリットは、取り扱いが簡単なところです。

デメリットは、機能が一部有料なところです。その一部有料の機能に、モバイル版をキャッシュする機能が含まれています。

WP Super Cache

僕は以前 WP Super Cache を利用していました。

メリットは、老舗のキャッシュプラグインなのでネット上に情報がたくさんある点でしょうか。

デメリットは、モバイル対応がプラグイン任せで好きなテーマが利用できない点ですね。

Google がモバイルファーストインデックスの導入予定を発表して、モバイル対応をしないといけないなと思ったタイミングで、モバイル対応の機能が乏しいことが気になり W3 Total Cache に移行しました。

まとめ

W3 Total Cache が管理画面も使いやすく、PC・モバイルのどちらも好きなテーマを設定できるのでオススメです。W3 Total Cache の設定方法については近々、公開予定です。

キャッシュプラグインについて一言いっておきたい WordPress ユーザの方、質問や異論反論はコメント欄にてお願いします。

[WordPress] AMP プラグインを利用して Accelerated Mobile Pages 対応する方法

WordPress で「AMP」プラグインを利用して Accelerated Mobile Pages 対応した道のりをご紹介します。

「AMP」プラグインをインストールする

まず、AMP を管理画面からインストールして、プラグインを有効化します。

AMP Test ツールで確認する

AMP Test

Not a valid AMP page
Invalid AMP pages will not have AMP-specific features in Google search results

というエラーメッセージが出ていますね。

Prohibited or invalid use of HTML Tag

  • The tag ‘plusone’ is disallowed.
  • The tag ‘share-button’ is disallowed.

不正な HTML タグを確認してみたところ、どちらも WP Social Bookmarking Light プラグインを使って設置しているボタンが原因みたいでした。

WP Social Bookmarking Light の設定を AMP Valid に変更する

Google +1 ボタンは AMP Valid な HTML タグに変更する設定が見当たらなかったので、この機会に削除しました。

Facebook Share ボタンはタグの設定を xfbml から html5 へ変更することで対応しました。

対応後に再び AMP Test をかけてみると Valid AMP page のメッセージが無事、表示されました。

Search Console から Accelerated Mobile Pages のエラーをチェックできる

Accelerated Mobile Pages のエラーは Search Console から確認することができます。

HTML タグの禁止された用法、無効な用法(問題の重大性: 致命的) などの重要な通知

まとめ

AMP 対応しておくと Google に気に入られて SEO 効果もあるかもしれません。

基本的にプラグイン1つで対応できるので、早めに AMP 対応をしておくとライバルサイトに差をつけることができるかもしれませんね。

参考情報

WordPress ファイルとデータベースを自動バックアップして Google ドライブにアップロードする

やっと当ブログの WordPress のファイルとデータベースをバックアップして Google ドライブにアップロードするまでの処理を自動化しました。

前提

扱っている技術的なものは以下のとおりです。

バックアップ処理を書いたシェルスクリプト

WordPress データベースのバックアップ

ひとまず、書いたシェルスクリプトを書き残しておきます。

# backup_db.sh
DB_NAME=mydbname
DB_USER=mydbuser
DB_PASSWORD=mydbpassword
DB_HOST=localhost
 
DATE_STR=$(date +\%Y\%m\%d-\%H\%M\%S)
BACKUP_PATH=/tmp
BACKUP_FILE=$DB_NAME-$DATE_STR.sql
GDRIVE_DIR_ID=0B840dMOrdKT5am9aRDlNUUFic0k
KEEP_DAYS=3
 
## backup DB
cd $BACKUP_PATH
mysqldump $DB_NAME --default-character-set=binary \
-h $DB_HOST -u $DB_USER -p$DB_PASSWORD > $BACKUP_FILE
tar zcvf $BACKUP_FILE.tar.gz $BACKUP_FILE
gdrive upload --parent $GDRIVE_DIR_ID $BACKUP_FILE.tar.gz
rm -f $BACKUP_FILE.tar.gz $BACKUP_FILE
 
## Housekeeping
LIMIT_TIMESTAMP=$(date -d "$KEEP_DAYS days ago" +%s)
gdrive list --no-header --max 1000 --query "'$GDRIVE_DIR_ID' in parents" | while read ln
do
  ITR_ID=$(echo $ln | awk '{print $1}')
  ITR_DATE=$(echo $ln | awk '{print $(NF-1),$NF}')
 
  if [ $(date -d "$ITR_DATE" +%s) -lt $LIMIT_TIMESTAMP ]
  then
    gdrive delete $ITR_ID
  fi
done

WordPress ファイルのバックアップ

# backup_file.sh
DATE_STR=$(date +\%Y\%m\%d-\%H\%M\%S)
 
TARGET_PATH=/var/www/vhosts/
TARGET_FILE=codenote.net
BACKUP_FILE=$TARGET_FILE-$DATE_STR.tar.gz
GDRIVE_DIR_ID=0B840dMOrdKT5SFg5UkZ2c05aWkU
 
KEEP_DAYS=7
 
## backup files
cd $TARGET_PATH
tar cfz $BACKUP_FILE $TARGET_FILE/
gdrive upload --parent $GDRIVE_DIR_ID $BACKUP_FILE
rm -f $BACKUP_FILE
 
## Housekeeping
LIMIT_TIMESTAMP=$(date -d "$KEEP_DAYS days ago" +%s)
gdrive list --no-header --max 1000 --query "'$GDRIVE_DIR_ID' in parents" | while read ln
do
  ITR_ID=$(echo $ln | awk '{print $1}')
  ITR_DATE=$(echo $ln | awk '{print $(NF-1),$NF}')
 
  if [ $(date -d "$ITR_DATE" +%s) -lt $LIMIT_TIMESTAMP ]
  then
    gdrive delete $ITR_ID
  fi
done

gdrive コマンドの Tips

gdrive list でディレクトリの一覧を表示する。

$ gdrive list --query "mimeType='application/vnd.google-apps.folder'"
Id                             Name   Type   Size   Created
0B840dMOrdKT5am9aRDlNUUFic0k   db     dir           2016-12-13 00:17:46

随時、内容をアップデートしていきます。

参考情報

[WordPress] All in One SEO Pack で Facebook og:image をいい感じに表示する設定方法

WordPress プラグイン All in One SEO Pack の「ソーシャルメディア」機能を利用して、Facebook og:image をいい感じに表示する設定をしました。

まず、All in One SEO の [機能管理] メニューをクリックして、[ソーシャルメディア] の項目の [Activate] ボタンをクリックします。

All in One SEO Pack - Social media - before activate

[ソーシャルメディア] を [Activate] すると [ソーシャルメディア] メニューが追加されます。

All in One SEO Pack - Social media - side menu

[Select OG:Image Source] から [First Attached Image] を選択して、ページ下の [設定を更新 »] ボタンをクリックします。

All in One SEO Pack - Select OG-Image Source

この状態で「Sharing Debugger – Facebook for Developers」の機能を使って確認すると、Select OG:Image Source の設定を変更する前が下記で、

Facebook Sharing Debugger - before

Select OG:Image Source 設定変更後は、下記のように記事中の1枚目の画像が og:image に利用されるようになりました。

Facebook Sharing Debugger - after

All in One SEO Pack のソーシャルメディア機能には、他にもたくさん機能があるみたいなので積極的に活用していきたいです。

WordPress の投稿者名を非表示に設定しました

WordPress の投稿者が1人だけなのとセキュリティ的によくないとのことだったので、投稿者を非表示にしました。

設定は WordPress 管理画面の「テーマオプション」からできます。

テーマオプションからWordPressの投稿者名を非表示にする。

テーマオプションからWordPressの投稿者名を非表示にする。

テーマオプション のURL は http://example.com/wp-admin/themes.php?page=theme_options です。

「投稿者名を表示にする」という項目があるので、ここのチェックボックスを外すと投稿者名を非表示にすることができます。

[WordPress] XML-RPC を無効にする

WordPress の XML-RPC を DoS 攻撃に悪用されることを知ったので、Nginx の設定を変更して XML-RPC を無効にしました。

/etc/nginx/conf.d/codenote.com.conf

server {
    # deny xmlrpc
    location = /xmlrpc.php {
        deny all;
    }

XML-RPC を無効にすると Nginx の error.log には下記のようなログが出力されます。

2015/07/12 21:49:31 [error] 11605#0: *815037 access forbidden by rule, client: 123.123.123.123, 
server: codenote.net, request: "POST /xmlrpc.php HTTP/1.1", host: "codenote.net"

以上です。


参考情報

[WordPress] モバイル端末向けの使いやすいテーマ Hew

WordPress の無料テーマ Hew がモバイルサイト向けに使いやすそうなのでご紹介します。

hew-screenshot-main

サイトへの訪問者のほとんどがモバイル端末のケースだと、PC・モバイルのそれぞれテーマを用意するのは面倒なのでモバイルに特化したいということが最近増えてきました。そんなとき Hew のようなレスポンシブデザインのテーマを使うことで、とかなり作業時間を短縮できてすごく助かってます。

レスポンシブデザインの WordPress テーマはたくさんありますが、Hew は PC とモバイルで大きくレイアウトに変更が変わらない軽めのレスポンシブデザインという点が個人的にポイント高いです。

[WordPress] カテゴリ名を被リンク(外部リンク)文言に使うサンプル

WordPress で、カテゴリ名を被リンク(外部リンク)文言に使うサンプルをご紹介します。

<?php
  $current_categories = get_the_category();
  $main_category = $current_categories[0];
?>
 
<a href="http://example.com" target="_blank" >
  <?php echo $main_category->name; ?>の◯◯なら✕✕におまかせ
</a>

カテゴリーを決めで1つ取得して、そのカテゴリ名を a タグのリンク部分の文言に使っています。


参考情報

WordPress 現在のカテゴリーIDやカテゴリー名、スラッグ、説明文、親カテゴリー等を取得表示する方法 | Stronghold

[WordPress]「WP-OGP」のサムネイル画像 og:image を変更する

WordPress で Facebook OGP を設定するプラグイン「WP-OGP」のサムネイル画像をデフォルトから変更しました。

まず、wp-content/plugins/wp-ogp/default.jpg を上書きするだけでサムネイル画像を変更できるとのことだったので、これを試してみました。

Facebook Debugger Tool でキャッシュをちゃんと消すところまではできたのですが、実際に Facebook 上でシェアするとデフォルトの画像のままでした。

結局、下記のようにファイル名を変更する方法で対応しました。


WP-OGP サムネイル画像の変更手順

  1. 新しくサムネイルに使う画像ファイル codenote-net-200×200.jpg を wp-content/plugins/wp-ogp/ 以下に設置する
  2. wp-content/plugins/wp-ogp/wp-ogp.php 内の wpogp_image_url_default メソッドで返す画像Pathを下記のように変更する
    function wpogp_image_url_default() {
            // default image associated is in the plugin directory named "default.png"
            //return wpogp_plugin_path() . '/default.jpg';
            return wpogp_plugin_path() . '/codenote-net-200x200.jpg';
    }
  3. Facebook Debugger Tool でキャッシュを削除する

以上です。


参考情報

Facebook「OGPの画像は1200px幅で」えぇ? 大きすぎない? しかも横長推奨? | Web担当者Forum

[WordPress] 良さそうなモバイル用テーマ(theme)

良さそうなWordPressのモバイル用テーマを自分用にまとめてみました。

いずれもレスポンシブデザインなので、プラグイン「WPtap Mobile Detector」でモバイルだけこれらのテーマを利用すればOKです。

Wallpress – Just another WordPress site

Gadgetry | Free WordPress Theme

DW Minion | FREE Responsive WordPress Theme For Personal Blog


参考情報

Themegraphy – WordPressテーマギャラリー