モバイル端末かを判別するis_mobile関数の使い方と機能しないときの対処法

mobileこの記事は、モバイル端末とPCからのアクセスで処理を分けたいときに便利なWordpress関数wp_is_mobileとis_mobileの使い方について書いたものです。

 

Googleの検索アルゴリズムの変更で「モバイルフレンドリー」が実施される(2015年4月21日に導入)という発表があってから、色んなサイトやメールマガジンでこのことについて取り上げられているのを頻繁に見かけるようになりました。

 

これだけ騒がれているとスマホ対応済みだから大丈夫だと思っていても、何となく不安になります(笑) SEO Japanさんの記事を見ても、なんだか凄そうな感じ。。。

Googleのモバイルフレンドリー・アルゴリズムはパンダやペンギン以上のインパクトを与える

 

今後、WEBサイトはモバイル対応必須だということで、まだ未対応のWordpressサイトやブログなら、テーマをモバイル対応のものに変更するとか、あるいはプラグインWPtouchなどを導入するといった対応が必要になってきそうですね。

 

それと同時に、もう一つ知っておくと便利なのが、モバイル端末からのアクセスかどうかで処理を分けられる関数です。この記事では、Wordpressに標準で実装されているwp_is_mobile()と、function.phpにコードを追加することで実装できるis_mobile()関数について解説していきます。

 

スマホ・タブレットか、PCかで処理を分けるWordpress関数wp_is_mobile()

WordPressに標準で実装されているwp_is_mobile関数は、スマホ・タブレットをひとまとめにモバイル端末と判断します。

返り値がtrue: モバイル(スマホ・タブレット)からのアクセス

返り値がfalse: PCからのアクセス

ということですね。

 

使い方は、PHPのみでの処理なら以下のように記述します。

 

HTMLと組み合わせるときはこんな感じです。

 

ただ、このwp_is_mobile()のように、スマホとタブレットを合わせてモバイル端末とみなすより、スマホをモバイル端末、タブレット・PCをそれ以外という風に分けて処理したいときのほうが実は多かったりします。

そこで登場するのが自作関数is_mobile()。

 

スマホか、それ以外かで処理を分ける自作関数is_mobile()

繰り返しになっちゃいますがis_mobileの場合は返り値が以下のようになります。

返り値がtrue: スマホからのアクセス

返り値がfalse: スマホ以外(タブレット・PC)からのアクセス

 

実装はとても簡単で、ダッシュボードで外観 > テーマの編集にアクセスし、function.phpを開いて以下のコードを追加するだけです。

色んな人がいろんなところで同じような関数を作成していらっしゃいますが、いつも参考しているElloraさんのサイトに記述されていたものをコピペさせていただきました。ありがとうございます。

【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう!

 

あとはwp_is_mobile()の時と同様に、以下のように処理を分ければOKですね。

PHPのみでの処理の場合

 

HTMLと組み合わせるとき

 

is_mobile関数がうまく効かないときはキャッシュ系プラグインを疑え

WordPressでキャッシュ系のプラグインを使っている場合、is_mobile関数がちゃんと効かないことがあります。

私も最初is_mobileがちゃんと機能しなくて、PHPのコードがどこかで間違ってるのかと何度も確認したり、それでも結局よく分からずじまいで、ずいぶん困っていましたが、ようやく原因を見つけました。

どうやらサイトの表示を高速化するために使っているキャッシュ系プラグインW3 Total Casheが原因だった模様。

 

以下の記事に、W3 Total Cacheが原因でスマホ対応化プラグインWPtouchがちゃんと動かないという話とその解決方法が書かれていますが、is_mobile関数も同様の方法でちゃんと機能するようになりました。

WordPress の W3 total cache と WPtouch を併用するには除外設定が必要だ

 

W3 Total CacheのPage CacheとMinifyの設定画面で、Regected user agentsのところにモバイル端末一覧を追加するだけでよかったんです^^ 一覧は上のサイトからコピーしてくださいね。

rejected-user-agents

 

最後に、このis_mobile関数はどんなふうに活用できるのか、についてちょっとしたアイデアをシェアしたいと思います。

is_mobile関数の使って広告表示もモバイルフレンドリーにする

is_mobile関数の使い道は色々あると思いますが、私の場合はAdsenseの広告を表示するときに重宝しています。

Adsenseの広告サイズにはレスポンシブというのがあって、端末のサイズに合わせて広告サイズを調整してくれるのですが、これだと大きな余白に小さめの広告サイズで表示されることがあったりと、なかなか調節が難しく、だったら自分でis_mobile関数を使って広告サイズを切り替えてしまおう、ということで以下のように設定しました。

 

スマホの場合→ 320 x 100 ラージ モバイル バナー または 300 x 250 レクタングル

タブレット・PCの場合→ 728 x 90 ビッグバナー

 

PCだとビッグバナーのサイズは非常に効果があるのですが、横幅の狭いスマホではビッグバナーだと途中で表示が切れてしまうんです。

分かっていながら、しばらくそのままにしていましたが、スマホで横幅の狭い広告を表示されるようにしたら、モバイル端末での広告クリック数がPCからのクリック以上に増えました。(もっと早くやっておけばよかった・・・)

サイトやブログからの広告収入はアクセス数はもちろん、表示サイズや配置場所がかなりモノをいうということですね。ぜひ試してみてください。

WordPress用レンタルサーバーお勧め3選と申込み手順

この記事では、Wordpressを使ったブログやウェブサイトの運営に必須なレンタルサーバーの借り方を解説します。

初めてWordpressを使う人がサーバーを選ぶときのポイントは

ワードプレスのインストールが簡単にできる サーバーを選ぶこと

です。

多くのレンタルサーバーでは、難しい設定なしにほぼワンクリックでWordpressを簡単インストールできるサービスを提供していますが、以下にWordpressユーザーによく選ばれているレンタルサーバーを予算別に3つご紹介します。

 

予算別オススメレンタルサーバー3選

初期投資を抑えたい人におすすめの格安サーバー「ロリポップ」

【ロリポプラン】

・6カ月以上の契約で月額あたり263円

・初期費用1575円

・無料お試し期間10日間

※コロリポプランはWordpressのインストールが出来ません。ロリポプランかチカッパプランが必要です。

安定性で信頼度が高く低価格な「さくらのレンタルサーバー」

【スタンダートプラン】

・年間契約で月額あたり416円

・初期費用1000円

・無料お試し期間14日間

※ライトプランはWordpressのインストールが出来ません。スタンダートプラン以上が必要です。

高性能・大容量・安定性で評判の高い「エックスサーバー」

【X10プラン】

・年間契約で月額あたり1050円

・初期費用3150円

・無料お試し期間10日間

エックスサーバーはWordpress関連の情報を扱っているブログやサイトを見ていると必ずと言っていいほど、おススメされているサーバーの一つです。予算があれば最初からエックスサーバーを申し込むのがいいと思いますが、初めてブログを構築するなら、個人的にはロリポップか、さくらのスタンダードプランのレベルで十分だと思います。

ただし、ロリポップはWordpressブログは一つしか運営できないので、複数の運営を考えている方はさくらサーバーをおススメします。私自身は今のところ「さくらのレンタルサーバー」のスタンダートプランを利用していますが、今のところ問題はなく使い勝手もいいです。(というより、以前は頻繁に500サーバーエラーが起きていてエックスサーバーへの乗り換えを考えたのですが、最近はめっきりエラーがなくなり安定して使えるようになったので、そのまま使い続けています。)

 

以降ではさくらのレンタルサーバー「スタンダードプラン」の申込み手順を例に解説していきます。

 

「さくらのレンタルサーバー」の申し込み方法

まずはサイトにアクセスします。→ さくらのレンタルサーバー

さくらのレンタルサーバーサイト

スタンダードプランを申し込みます。

※ライトプランではWord pressがインストールできないので 必ずスタンダードプラン以上を申し込んでください。

申込みボタンをクリックすると、以下のようなレンタルサーバーの申し込み手続きのページが表示されます。

1.プランを選択する

さくらレンタルサーバ申込み画面

さくらインターネットのアカウントが既にある場合は会員IDがあるを選択し必要な情報を記入します。それ以外の場合は「初めて利用する」を選択します。

サービスプランは「スタンダード」を選択します。

さくらレンタルサーバ申込み画面2

「ご希望の初期ドメイン名を入力してください」というところは、 自分の好きな文字列を設定して大丈夫です。ブログやウェブサイトには専用の「独自ドメイン」を取得しますので、 この「初期ドメイン」をあなたのブログやサイトのURLとして使うことは基本的にありません。 あまり考え込まずサクッと決めて大丈夫です。「利用規約の確認へ」ボタンをクリックして次に進みます。

 

2.利用規約の確認

利用規約の確認画面が表示されたら「同意する」を選択し「お客様情報の入力へ」をクリックします。

 

3.お客様情報の入力~支払情報の選択

ここからは個人情報の入力になります。必要事項を記入し、パスワードを設定し、支払情報を入力して手続きを完了させます。

※パスワードは忘れないように控えをメモしておきましょう。

 

申し込みが完了すると、 「お申込受付完了のお知らせ」という件名の確認メールが届きます。

さらに、早ければ当日中に「さくらのレンタルサーバー仮登録完了のお知らせ」というメールが届きます。

※仮登録とあるのは、2週間無料のお試し期間があるからで、 お試し期間中にキャンセルをしない限り、そのまま本登録となります。

特にこの仮登録完了のお知らせのメールは、 これからブログを開設していくのに必要な情報が書かれていますので、 絶対になくさないようにしてください。

 

以上でレンタルサーバーの申し込みは完了です。 お疲れ様でした!

サーバーの申し込みができたら、次は独自ドメインを取得しましょう。

WordPressサイトをデバッグ!Pleiades All in oneの設定手順

この記事では、Wordpressサイトのローカル開発環境をXAMPPとEclipsePDTで作るための手順をまとめています。

WordPressでも既存のテーマを利用したシンプルなウェブサイトやブログなら、ローカルで動かさずに直接サーバーにアップしてコンテンツを追加していくので十分いけますし、ちょっとしたデザインの変更や機能の追加などもダッシュボードからの編集でなんとかなりますよね。

 

これまでは私のWordpressの利用レベルもそんな軽い感じだったのですが、最近、オリジナルテーマを作りはじめたり、クライアントから依頼されたウェブサイトに、条件検索フォームを組み込む必要がでてきたりして、一気に「デバッグできるローカル環境がほしい!」モードになってきました。

 

WordPressサイトをローカルホストで動かすのに欠かせないXAMPPは既に使用中だったのですが、これに加えてPHPのデバッグ環境がどうしても欲しくなり、久々にEclipseを使うことにしました。(この時のこの変数の中身がどうなってるのか見たい!!!って思っちゃうとね・・・)

Eclipseはプログラマー勤務時代にJavaの開発で使っていたのですが、当時から開発環境の設定は本当に嫌い(ぜったい何かしらで躓いちゃうから)で、Google先生にお世話になりつつ、あれこれ5日間くらい手間取ってようやく全てが何とか動くように。。こんな苦労は二度としないためにも、この記事に一発、手順をまとめておこうと思った次第です。

前提条件

今回、XAMPP + Eclipse PDTを使い始めるにあたって、「こんな条件下でゴニョゴニョやっていました」という前提条件をまず挙げておきたいと思います。

  • OS: Windows 7 (64ビット)
  • Cドライブ直下にxamppを設置済み
  • 複数のWordpressサイトをローカルホストにインストール済み

上記のような状況ですので、今回の記事は、Wordpressを初めてローカルホストにインストールするのではなく、ローカルホストで動いている既存のWordpressサイトをEclipseで編集・デバッグできるようにするという流れになっています。

 

最初の試みと失敗

以前もEclipseで開発環境を作るときはAll in One パッケージを使っていたという記憶があり、Pleiades All in One PHPというのがとっても便利そうだったので、これをダウンロードすることにしました。

Pleiades All in One PHPには、xamppも含まれ、xdebugというデバッガーもxamppに設定済みだったり、eclipseでphpで開発するためのPDTとか、eclipseでphpを動かすために必要なものが一通りそろっているようです。

ただ私の場合、すでにxamppは利用していたので、Pleiadesの中のxamppではなく、Cドライブ直下にあった既存のxamppと今回ダウンロードしたeclipseを組み合わせて使おうという考えになり、この方向で設定を進めていきました。

が、これが原因で、いろんなところでエラーが発生。。。

 

Eclipseのほうではwordressサイトが見れなかったり(アクセス権がないエラー)、そのエラーを治すためにApacheの設定をいろいろいじっているうちに、今度はブラウザからwordpressサイトのトップページ以外Object not foundエラーになり、パーマリンクの設定をしなおしたけど結局エラーは消えず・・・などなど。

まだまだ、開発環境の設定の怖さを甘く見ていた初日。 「やっぱりダメだったか・・・」と痛い思いをしながら解決を試みたものの、モグラたたきのようにあちこちで発生しつづけるエラーには収集がつかなくなりました。(トホホ)

 

そんなときに、とあるサイトで「素直にPleiadesだけ使えばすんなりいく」みたいな言葉を発見。この言葉でふと我に返り、既存のxamppを使うというこだわりはやめて、Pleiadesに含まれるxamppを利用しようという結論に至ったのでした。

ここまでが大体ウダウダしながら2日間。今まで使っていたPleiadesはごっそり削除して、新たにzipファイルを解凍してやりなおし。以下、あらためて手順はPleiadesをダウンロードするところから始めます。

 

Pleiades All in One PHPのダウンロード

ダウンロードサイト: http://mergedoc.sourceforge.jp/

まず上のサイトからPleiades All in One をダウンロードします。私の場合、eclipseの現時点の最新版Eclipse 4.4 Luna、64bit Full EditionのPHP版を選んでダウンロードしました。(結構ボリュームがあるzipファイルなので、場合によってはちょっと時間がかかります。)

 

ダウンロードが無事に終わったら、zipファイルを解凍します。ここでの注意点は、二点。

  1. 解凍する場所をデスクトップなどパスが深くなるところに解凍しない。エラーが起きる可能性があるので。cドライブ直下(C:\pleades)のようにパスが長くならない場所に解凍する
  2. 解凍ソフトにLhaplusを使わない。ちゃんと解凍ができないらしいです。知らないでLhaplusで解凍し、見事eclipse.exeが起動しませんでした。。Windows7デフォルトの展開ウィザードか、7zipを使う。私は7zipでいけました。

 

解凍も結構時間がかかるので気長に待ちましょう。私のようにすでにxamppを使っているという方は、ここでバックアップを取っておいてください。

 

既存XAMPPからデータをバックアップ

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

まず、以前に使っていたXAMPPを起動し、ApacheとMySQLをスタートさせて、phpMyAdminにアクセス。今後も利用したいデータベースをエクスポートしておきます。エクスポートは普通にデータベースを選んでエクスポートボタンをクリックすれば、ファイルのダウンロードがはじまります。

あと、xamppやmySQLにパスワードを設定している場合はそれもメモっておくと後で楽です。

 

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

xamppフォルダのhtdocsの中にあるフォルダのうち、今後も利用したいものを別の場所にコピーしておきます。

 

ここまでできたら、XAMPPのコントロールパネルを終了します。Pleiadesのダウンロードが完了していたら、ここで一度PCを再起動しておきましょう。

※既存のxamppは残しておいても起動さえしていなければ、Pleiades内のxamppとの間で特に問題は起きないので、私はあえてアンインストールしないで進めました。(何かの時にすぐ戻せるように・・・)

 

Pleiades内のXAMPPの初期設定

解凍されたpleaiadesフォルダをエクスプローラで開き、その中のxamppフォルダ内からsetup_xampp.batを見つけてダブルクリックします。

次に、xampp-control.exeを実行し、コントロールパネルを開きます。いつものようにApacheとMySQLのstartボタンをクリック。

※Apacheの起動でエラーになる場合、既存のxamppが実行中になっていないか、またSkypeなどの他のプログラムとのポートのバッティングがないか、チェックしてください。(Skypeの設定が問題の場合は、Skypeにログインし設定>詳細>接続にて「追加の受信接続にポート80と443を使用」のチェックを外します。)

 

ブラウザからhttp:// localhost/xampp/にアクセスし、以下のように表示されればOKです。

xamppようこそ

ここで、セキュリティ関係の設定をします。

上のページの左サイドバーのメニューから「セキュリティ」をクリック。表示されたページに「これらのXAMPPページは一般的にネットワーク経由でアクセス可能です」「MySQLユーザルートにパスワードがありません」「PhpMyAdminはネットワーク上から自由にアクセスできてしまいます。」といった警告がある場合、設定が必要になります。

 

同ページの「そのような問題をすべて修正するには、単純に次のツールを使ってください。」の下にあるURL

http://localhost/security/xamppsecurity.php

にアクセスします。「MYSQL 項目: “ROOT” パスワード」と「XAMPPのディレクトリ制御 」の項目を入力します。これまでxamppを使っていた方は、その時のユーザー名、パスワードを入力しましょう。

 

http://localhost/phpmyadmin/にアクセスして、ログインが成功すれば初期設定完了です。

※phpMyAdminのアクセスでエラーが起き、エラーメッセージにconfig.inc.phpの設定がどうのこうのうと書かれている場合、pleiades/xampp/phpMyAdmin/config.inc.phpを開いて、/* Authentication type and info */のパスワード設定がちゃんとされているかチェックしてみてください。パスワードが設定されていない場合は、xamppのセキュリティページで入力したパスワードを入力してファイルを保存し、再度phpMyAdminにアクセスしてみてください。

 

XAMPPにバックアップデータを取り込む

既存xamppから移行したいデータがある方は、バックアップしておいたwordpressサイトのデータをpleiades内のxamppに取り込んでいきます。以下の2点を行います。

  1. xampp/htdocsフォルダ内からバックアップ(コピー)しておいたフォルダ・ファイル類をpleaiades/xampp/htdocs内に配置
  2. エクスポートしておいたmySQLのデータをphpMyAdminからインポート

 

ここまでできたら、ローカルホストからwordpressサイトにアクセスできるかチェックします。

http://localhost/wordpressサイトのルートフォルダ名/wp-admin/

で、ダッシュボードにアクセス。

※ここでデータベースのユーザー・パスワードに関するエラーが出たら、htdocs/wordpressサイトのルートフォルダ/wp-config.phpを開き、DB_USER、DB_PASSWORDに書かれているユーザー名、パスワードをphpMyAdminのユーザに追加してください。

 

無事にダッシュボードにアクセスできることが確認できたら、次はサイトのトップページや他のページを開けるかどうか確認しておきます。

 

さて、ここまででPleiades内のxamppの初期設定と、既存サイトデータの移行が完了しました。ここから、wordpressサイトのデバッグ環境=eclipse の設定を行っていきます!

 

 

EclipseにWordpressサイトをプロジェクトとして追加する

ここからが今回の肝、まずはpleiades/eclipse/eclipse.exeを実行し、eclipseを起動。起動には少し時間がかかるけど気長に待ちます。

もしここで起動されない場合は、zipの解凍がうまくいっていない可能性あり。Pleiades eclipse Luna 4.4の場合、pleiades/eclipseのフォルダ内は以下のような構成になっています。

pleiadesのeclipseフォルダ構成

見比べてフォルダがなんか足りないなと思ったらPleiadesを別の場所に解凍しなおし、その中のeclipseフォルダだけごっそりコピーしてくればOK。

 

起動されると、最初にワークスペースの場所を聞かれますが、今回はpleiades/xampp/htdocs/にwordpressサイトのフォルダを配置しているので、デフォルトで入力されている ../xampp/htdocs/のままでOKボタンをクリックします。

 

プラットフォームが表示されたら、ファイル>新規>PHPプロジェクトを選択。

ウィザードが表示されるので、プロジェクト名に今回編集したいwordpressサイトのルートフォルダ名(xampp/htdocフォルダに配置してあるwordpressサイトのフォルダ名)を入力します。

ここ、重要なので、しつこくキャプチャも載せておきますです。(こんなこと分からないのは自分くらいかもしれないですが、最初は適当なプロジェクト名を付けて全然うまくいかなかったので。。)

eclipseでPHPプロジェクト作成

 

このようにするとワークスペース(../xampp/htdocs/)内にあるwordpressサイトのフォルダ以下をプロジェクトとして編集することができるようになります。上記のウィザードでは、Javascriptサポートにチェックをいれてあとは「次へ」でどんどん進んで完了すればOKです。

以下のようにプラットフォームにwordpressサイトが追加されました!ツリーを展開して、wp-adminなどのフォルダやphpファイル類が読み込まれていることを確認してみてください。

eclipseにwordpressサイト追加

 

Eclipseでwordpressサイトをデバッグする

さて、Eclipseでwordpressサイトをデバッグするには、もう少し設定が必要になります。

ウィンドウ>設定>PHP>PHP実行可能ファイルを選択し、追加ボタンをクリック。

eclipse php実行ファイルの設定

名前のところには分かりやすいようにPHPのバージョンなどを入れておくといいです。実行可能ファイルとphp iniファイルをpleiades/xampp/php/php.exeとphp.iniにそれぞれ設定し、PHPデバッガーにXDebugを選択してOKをクリックします。

 

次に、デバッグの構成を作成します。

実行>デバッグの構成をクリックし、画面左側のPHP Webアプリケーションを右クリックして「新規」を選択します。

eclipseデバッグ構成1

 

以下のような画面が表示されたら各項目を設定していきます。

eclipseデバッグ構成2

名前は分かりやすいようにプロジェクト名などを入力します。

ファイルのところはプロジェクト名(ルートフォルダ)/index.phpを入力。

URLには、デバッグしたいページを設定します。トップページをデバッグしたい場合は自動生成をチェックすればいいですが、それ以外の場合は、自動生成のチェックを外し、そのページのURLに合うように入力する必要があります。ここがうまく設定できていないとデバッグがうまく行われないので注意してください。

 

次に「デバッガー」タブをクリックし、以下のようにデバッガーがXDebugになっていることを確認します。

eclipseデバッグ構成3

 

適用ボタンをクリックして閉じます。

以上で、デバッグの設定が完了しました!

 

実際にデバッグするには、XAMPPでApacheとMySQLが起動されている必要があります。起動していない場合は、XAMPPコントロールパネルでApacheとMySQLをstartさせましょう。

eclipseでデバッグを実行します。実行>デバッグをクリックしてもいいですし、緑色の虫マークをクリックしてもデバッグを開始できます。パースペクティブの変更のポップアップがでたら許可します。

index.phpの最初の行でブレークされればデバッグが無事、動いていることになります。ホッと一息ですね^^ デバッグしたい部分にブレークポイントを貼ってガンガン中身をチェックしてデバッグを加速させていきましょう!!

 

終わりに

WordPress + XAMPP + Eclipse(PDT)の組み合わせで検索すると、かなり親切な解説をしてくれているサイトが幾つかあってとても参考になりました。特に、以下のサイトの説明に大変お世話になりました。ありがとうございます!

メルマガ一括配信・ステップメール配信ができるWordPressプラグインArigato Pro(BFT-Pro)の機能まとめ【改訂版】

メルマガ一括配信、ステップメール配信ができるプラグインBroadFast Pro Autoresponder (BFT PRO)の最新バージョン2.4が先日届きました。早速プラグインをアップデートしてみたのですが、以前に使っていた2.2と比較して、欲しいな~と思っていた機能がちゃんと追加されていたり、かゆいところに手が届く感じに改良されてきているのを感じました。

以前に書いた記事の内容も一部修正する必要がでてきているので、今後順次更新していく予定です。まずは新機能も含めて、プラグインの機能まとめを今回あらたに【改訂版】として作成してみました。すでにプラグインを利用されている方、今後利用を考えている方はぜひ一度目を通してみてください。

2015.04.07追記: プラグインの正式名称がBFT-ProからAirgato Proに変わったみたいです。記事内の記述がBFT-Proのままのところもありますが、Airgato Proと同じと思ってくださいね。

すでにプラグインを利用している方で1年以内に購入されている方には、購入時に指定したメールアドレスに最新版のzipファイルがメールで届いていると思います。プラグインのアップグレード方法は、届いたメール内にも書いてありますが、WordpressのダッシュボードのプラグインのページでBFT-Proをいったん削除し、新しいzipファイルをアップロードすれば完了します。更新前に必ずバックアップを取るようにしてくださいね。

 

ちなみに、この記事は「このプラグインでこういうことができます」という概要の説明ではなく、プラグインのメニューからどんな設定ができるのか、画面キャプチャと合わせて設定項目の説明をする感じで書いています。まずは「このプラグインで何ができるのか、ざっと知っておきたい」という方は以下の記事もあわせてご覧いただくと全体がつかみやすいと思います^^

かなり本格的なメルマガ・ステップメール配信ができるWordPressプラグインArigato Proのメリット・デメリットまとめ

BroadFast Pro Autoresponder (BFT PRO)のメニュー

BFT-ProをWordpressにインストールすると、ダッシュボードに以下のようなメニューが現れます。

BFT-Proのメニュー

  1. メール配信全体にかかわる設定(Settings)
  2. 購読者情報の管理(Mailing Lists)
  3. ステップメール配信(Autoresponder Campaigns)
  4. 一括メール配信(Newsletters)
  5. バウンスメール設定(Bounce Handling)
  6. メール送信による購読申込みの設定(Subscribe by Email)

それでは以降で一つずつ解説していきます。

 

Settings – メール配信全体にかかわる設定

共通設定(General Settings)

全てのメルマガに共通して設定される項目です。メルマガの種類ごとにわざわざ個別に設定する必要がない情報はここに設定しておくと楽ですね。

BFT-Proの共通設定

  • 送信者名と送信者メールアドレス
  • メルマガの最後(解除URLの手前)に挿入されるテキスト(署名など)
  • 購読者が登録を解除した場合、購読者情報をリストに残す(非アクティブにする)か情報を削除するかを選択(バージョン2.4からの新機能)

 

メール配信設定と配信制限(Settings For The Email Sending Process)

メール配信の設定

予約されたメールを送信するCron設定

予約されたメールをスケジュール通りに配信するためには、Cronという自動実行プログラムをサーバーに設定する必要があります。このセクションではCronによってメール配信を実行するか、ブログへのアクセスをトリガーにして実行させるかを選びます。推奨はCronですが、詳しくは以下の記事で解説しています。

ステップメール・メルマガ予約配信に必須のcron設定(さくらサーバー)

以前、メルマガスタンドを利用していた時はCronの存在など知らなかったのですが、このおかげで、わざわざ配信したい日時に自分で送信ボタンを「ポチッ!」と押さなくても勝手にプログラムの方で配信をしてくれるわけですね。特に、ステップメールを利用する場合は欠かせないありがたい機能です。

 

配信数の上限設定

メール配信を行う場合、多くのレンタルサーバーでは負荷がかかりすぎることを避けるため、一回当たりの配信数や一日当たりの配信数に制限を設けていることが多いです。

BFT-PROではこの制限を超えないために、一回当たりの配信数の上限と、一日当たりの配信数の上限を設定することができます。

 

メルマガを管理できるユーザー権限の設定(Roles)

ユーザー権限設定

デフォルトでは、管理者権限(Administrator)と特権管理者(Super admin) のみがBFT-Proの管理を行えますが、他の権限を追加したい場合はここで追加できます。

 

画像認証CAPTCHAの設定(Recaptcha Settings)

画像認証設定

最近色んな所で見かけますが、コンピュータによる自動登録を回避するために使われる画像認証CAPTCHAを登録フォームに設定するための設定をここで行えます。今のところ私は使用していませんが、こんな機能までついているとは本格的ですね。

 

テキストベースの認証設定(Question based capthca)

question-based-captcha-settings

前述の画像認証CAPTCHAを使わなくても、メルマガの登録フォームに質問をランダムで表示し、コンピュータによる自動登録を回避する方法を選ぶこともできます。「質問=答え」の形式で、デフォルトでは英語の質問が3つ設定されていますが、形式さえ守れば自分で質問と答えを編集することが可能です。

質問をメルマガの登録フォームに表示するかどうかはメーリングリスト(購読者リスト)の設定画面で選べます。

 

全メルマガ共通のメルマガ登録時ダブルオプトイン設定(Global Double Opt-In Email)

メルマガ登録ダブルオプト設定

メルマガ登録を、仮登録(フォームからの登録)と本登録(仮登録後に送信されるメール内のリンククリック)の2段階で行うダブルオプトイン形式にしたい場合、本登録用のメールの件名や本文をここで設定できます。

一部のメルマガのみにダブルオプトインを採用したい場合は、個別にも設定できますが、全メルマガに共通してダブルオプトインを採用するならここで設定しておくと便利です。

 

その他の共通設定

その他のBFT-Pro共通設定

Copy Data from BFT Lite: 無償版のBFT-Liteを利用していてデータを引き継ぎたい場合にクリックします。

Uninstall Options: このプラグインをアンインストールする際に保存されたすべてのデータを消去したい場合にチェックをいれ、Save Uninstall Optionsをクリックします。プラグインのアップデート時にここにチェックが入っているとそれまでのデータがすべてなくなるので注意が必要です。今後BFT-Proを一切使わない場合にのみ必要な設定になります。

 

以上がSettings(プラグイン全体の設定)の項目の解説でした。

 

購読者管理(Mailing Lists)

Mailing List(あえて購読者リストと訳しています)は、メルマガを配信するための購読者のリストのことを言います。Lite版(無料)では一つの購読者リストしか作れないのですが、Pro版では購読者リストを幾つでも作成することができます。(複数のメルマガ配信を行いたい場合はやはりPro版が必須ですね。)

複数の購読者リストは以下のように一覧管理できます。

メーリングリスト一覧

  • Autoresponders:  リストに登録された購読者に対して送信されるステップメール(クリックすると紐づいているステップメールの情報が表示されます)
  • Subscribers:  購読者。カッコ内は購読者数。Manage(xxx)をクリックすると購読者の一覧が表示され編集できます。
  • Custom Fields:  登録フォームにカスタムフィールドを設置したい場合、Manageをクリックしてテキストやチェックボックス、ドロップダウンリストなど様々な形式のフィールドを追加できます。
  • Subscribe Form:  登録フォームをサイトに設置するためのコードを取得できます。WordPress用のショートコードを使ってフォームを作成することもできますし、別のウェブサイトに設置したい場合のHTML形式のコード、またプラグインのContact Form 7やJetPackのコンタクトフォームと統合して利用したい場合など、様々なニーズに対応したフォームの設置方法が選べます。

 

購読者登録完了ページと解除ページ

登録フォームからユーザーがメルマガ購読を登録した後に遷移する登録完了ページはあらかじめ固定ページなどに作成しておき、そのURLを予め設定しておくことができます。(ダブルオプトイン採用の場合は、仮登録完了ページと本登録完了後のページを別々に設定可能)

登録解除フォームは、 ショートコードを使ってあらかじめか固定ページなどに作成しておけば、ユーザーがメール内の解除リンクをクリックしたときにそのページが表示されます。(バージョン2.4からの新機能)

 

 

購読者リストの新規作成・編集

詳しくは以下の記事にまとめています。

ステップメール配信ができるWordPressプラグインBFT-Proで購読者リスト作成

 

登録時・解除時の送信者(管理者)側への通知機能

上の記事で図解していますが、新たな購読者登録があった場合、また登録解除があった場合に、それを管理者に通知するかどうかを設定することができます。例えばメルマガ登録があった場合は通知が届くように設定し、解除は通知が来ないように設定するといったことも可能です。

 

購読者の管理

購読者の一括インポート・エクスポート機能

購読者一覧はCSV形式でインポート・エクスポートできます。

他のメルマガ配信スタンドから乗り換える場合や、無料レポートスタンドなどから取得したメールアドレスなどを代理登録する場合にインポート機能があると助かりますし、バックアップのためなどにもエクスポート機能があるといいですね。

※バージョン2.4ではインポート時に購読者の重複を排除する機能もあります。

 

個別の購読者情報の追加・編集・解除

BFT-Pro購読者追加画面

ユーザー側が登録・解除するにはフォームからすればいいのですが、管理者側としてテストユーザーを登録したいとか、あとは、稀ですがちょっと困った購読者さんを解除したいとか、ステータスを変更したいなどいったことも、時にはあります。。。そういう時に、ワードプレスの管理画面から登録したり登録解除できるのは助かりますね^^

 

 

ステップメール配信(Autoresponder Campaigns)

BFT-Proを利用するメリットは、ステップメール配信機能がついているということに尽きると思っているのですが、特にPro版だとシナリオを複数作成・管理することができるのが嬉しいですね。

ちなみに、「ステップメールって何だ??」と思ったあなたは、以前のBFT-Proの機能まとめ記事の「ステップメール配信」の項目の最初に説明してあるので、よかったら参考にしてみてください。

ステップメール配信ができるWordpressプラグインBFT-Proの機能まとめ

 

作成したシナリオは以下のように、一覧表示されます。

ステップメール管理画面

  • Mailing Lists: ステップメールを配信する購読者リスト
  • Email Messages: 配信するステップメール。Manageをクリックするとメールを個別に管理できる
  • Reports: 各メールの配信履歴や開封率*が表示されます。
*開封率(Open rate)について:これまで開封率は明らかに開封されたのに0%のままになっていることがよくあったため、全く参考にしていなかったのですが、バージョン2.4の更新情報の中に、この部分の改良がおこなわれたという情報がありました。今後チェックしてみたいと思います。

 

シナリオの新規作成・編集

シナリオの数に制限は特にありません。必要な数だけ(データベースの容量を超えない限り?たぶん)追加することができます。具体的な使い方は以下の記事で解説しています。

メルマガ配信WordPressプラグインBFT-Proでステップメールを作成する方法

 

個々のメール作成・編集時に使える機能

各シナリオ内のメールの数にも制限は特にありません。5通で終わるステップメールを組んでもいいし、30通のかなり手のこんだステップメールを組んでも大丈夫です。

メール作成時には以下のような機能が使えます。

ステップメール作成1 ステップメール作成2

  • 送信者の個別設定:共通設定と異なる送信者を設定したい場合に個別に編集可能
  • 件名・本文の入力HTML形式かテキスト形式での送信が可能。購読者のメールアドレス、氏名あるいは名前、カスタムフィールド(設定されている場合のみ)のショートコードが件名と本文に使用できます

 

ステップメールに添付ファイル

  • 添付ファイル:メルマガにファイルを添付することも可能。

 

ステップメール作成スケジュール設定

  • 送信スケジュール: 登録後○日後に配信、日付指定して配信、○日ごとに配信、○曜日に配信といったスケジューリングの種類を選ぶことが可能

ステップメール作成スケジュール設定

  • 送信時刻: 時間指定なしと、○時○分以降の配信の2種類から選択可能

 

ステップメールテスト送信

  • テストメール送信: バージョン2.4で追加された待望の新機能ですね。これまではテストメール送信の機能がなかったのが不便でしたが、今後は手間取らずに済みそうです。

 

解除URLの自動挿入機能

メルマガ配信では、特定電子メール法により、配信解除URLを必ずメール内に設置する必要があります。BFT-Proでは解除URLがメールの最後に自動挿入されるようになっていますので、設置忘れなどの心配もありません。

 

 

一括メール配信(Newsletters)

購読者全員に対して一度にメールを送信するときに利用できます。

3通目のステップメールを受け取ったばかりの人にも、あるいは10通目を受け取った人にも、さらにステップメールをすべて受け取り終わった人にも、全員に対してメールが一斉に送られます。速報や緊急なお知らせなどを送信したいときに特に役立つ機能です。

一括メール配信の機能はステップメールの機能とほぼ同じですが、配信スケジュールの設定のみ異なっていて、メール作成と同時に配信するか、メールを下書きとして保存時しておいて後で配信するかの選択のみになります。

 

一括メール配信も数に制限はありません。作成したものは以下のように一覧できます。

一括配信メール管理

 

一括配信メールの作成時の機能

一括配信メール作成 一括配信メール作成2

  • 送信者・件名・本文の入力:ステップメールの作成と全く同じです。
  • 添付ファイルの設定

 

一括配信メール作成3

  • 送信先の購読者リストを設定:全ての購読者リストに対してメールを送信する(バージョン2.4新機能)か、特定の購読者リストを送信先に選択できます
  • チェックボタンにチェックを入れると既にメールを受け取った人に重複して配信されないように設定できます。複数の購読者リストに登録している人がいる場合は、迷惑がられないで済みますね^^ (バージョン2.4新機能)

 

一括配信メール作成4

  • テスト送信機能:チェックを入れておくとSaveボタンをクリックしたときにテストメールが送信されます。(バージョン2.4新機能)

 

 

バウンスメール設定(Bounce Handling)

バウンスメール設定

配信したメールが何らかの理由で購読者のメールアドレスに届かなかった場合に返されるエラーメールはバウンスメールといいます。バウンスメールを受け取りたい場合はこのページで受信するメールアドレスを設定します。

 

 メール送信による購読申込みの設定(Subscribe by Email)

ユーザーがメールを送信することで購読者登録ができるように設定することができます。メールのアカウント情報と登録先の購読者リストを指定するだけでいいので簡単そうですね。「空メール送信でメルマガ登録ができる」という機能は今のところあまり必要を感じていませんが、バージョンアップに伴ってどんどん機能が充実していっていることに驚きです(笑)

メール送信による購読者登録1

メール送信による購読者登録2

 

最後に

サボりっぱなしのメルマガ配信ですが、2015年はちゃんとステップメールを再開しよう(いつから宣言してるんだ?というツッコミはなしで・・・)と意気込んだところでのアップデートのお知らせは、なかなかテンションをいい感じにあげてくれて、勢いで機能まとめの改訂版も完成させることができました。

以前のBFT-Pro関連の記事も順次2.4に合わせてアップデートしていきたいと思っています。(2015.3.01現在:アップデート完了済み)

ブログ運営はWordPressにすべき6つの理由

この記事を書いている時点で、かれこれWordpressを使い始めて2年が経とうとしています。Wordpressできることはまだまだたくさんあると思っていますが、初心者レベルを抜けた今の自分が振り返ってみて、WordPressでブログを作っておいてよかった!と心から思える理由が幾つか出てきたので今回記事にまとめてみました。これからWordpressを使ってみようと思っている方は、そのモチベーションをアップさせるきっかけに、ぜひ一度目を通していただけたら嬉しいです。

 

運営費が安い

無料のブログサービスを利用したことがある方や、そういったサービスとWordpressのどちらでブログを作るか迷っている方は、Wordpressでブログを作ると運営費がかかってしまうということを気にしている方もいるかもしれません。私もWordpressを初めて使い始めるまでは、無料で運営できないことが理由でWordpressという選択肢は自分の中から消えていました。

 

が、Wordpressを使い始めて2年ほど経過した今の自分にとっては、

WordPressブログの運営に必要になるお金は、ちょうどいい感じにブログを続けるモチベーションになっている

というのが、正直な気持ちです。

 

全てが無料だとモチベーションが下がって続けるのが難しいし、逆に初期費用や運営費が高額だとそもそもWordpressを始めるかどうか戸惑ってしまいますが、Wordpressのブログ運営に必要な料金は、ちょうどよく背中を後押ししてくれる感じだなと思っています。

WordPress本体は無料でダウンロードできるし、必須といわれるプラグインはほとんどが無料で利用できます。(私は一つの有料プラグイン以外すべて無料のプラグインを使っていますし、有料で購入したものは必ずしも全ての人に必要なわけではないです。)

ドメインもレンタルサーバーも格安のものがあり、月々、一回のランチを節約すれば運営できるWordPressは金銭的なリスクがほとんどないといえるでしょう。

 

カスタマイズの自由度が高い

私は無料ブログをさほど活用したことがない(アカウントを開設して10記事未満で更新が停まったことは何度も・・・)ので、どの無料ブログサービスでどれほどカスタマイズができるのかはよくわかりません。

が、Wordpressでのブログのカスタマイズの自由度はかなり高く、使えば使うほど色んなことができることが分かってきてブログの運営自体が楽しくなるというのは経験してきました。

ブログのレイアウトや、各パーツの中身の設定などのブログに表示される表面部分のカスタマイズはもちろん、セキュリティ管理、アクセス解析ツールとの連携、高速化やバックアップの設定などといったブログ運営の裏方部分の設定もできるのがありがたいです。

 

さらに、WordpressはCMS*のなかでもダントツにシェア率が高く、世界中に数多くの利用者**がいます。

*CMSとは:コンテンツ・マネージメント・システムの略。WordpressやJoomla!などのようにWebサイトやブログを作って管理するためのWebアプリのようなもの

**参考サイトによれば、なんとCMSを使ったサイトの中の60%以上はWordpressで作られているとのこと。日本ではさらにこの比率があがり、Wordpressが独り勝ちしている状況。

これだけ利用者が多いわけですから、ノウハウの蓄積も半端なく、困ったときにはGoogleで検索すれば必要な情報を探しやすいのもWordpressを選ぶメリットですね。家にいてネットがつながっていれば、誰かに付き添って教えてもらわなくても、自分で調べながらブログを作ってカスタマイズしていける。そんな魅力があるのがWordpressだと思います。

 

 

「自分のメディア」という意識が更新のモチベーションに

無料ブログを作っては5記事もアップしないうちに葬り去った経験はないでしょうか。

 

無料でやると、自分がリスクを負わないので続かない

という真実は私だけの真実ではないと信じているのですが(汗)

私の場合、Wordpressでブログを作る以前に作成したいくつもの無料ブログ、Wordpressブログ開設後にも同時進行で更新しようとして作成した無料ブログすべてが、今やネット上のゴミと化しています。。

 

ブログを書き始めてからいまだに更新がとまらずに何とか続いているのは、当ブログと昨年から運営し始めたRuuskiのみで、どちらも独自ドメインを取得してWordpressで運営しているものです。

 

私より全然マメな方はたくさんいるし、無料ブログをたくさん持ってちゃんと更新し続けている方も多いので、一概には言えないのは分かっているんですが、少なくとも私の場合は

独自ドメインをわざわざ取得して自分で借りたサーバーに設置して運営するブログへの意識は、無料ブログへの意識とは全然違う

んです。「自分の運営するブログ」という思いが更新へのモチベーションになっているのは間違いないです。

 

無料ブログの更新に挫折してきた方は、無料ブログより開設が面倒なWordpressであえてブログを作ってみることをおススメします。

 

スキルの向上

WordPressでのブログ作りは、スペシャリストでなくても十分可能なのですが、無料ブログほど簡単ではないし、初めて作成する場合は「サーバーにデータベースをインストールする」というような言葉だけで委縮してしまうこともあると思います。Wordpressのダッシュボードの使い方も、慣れるまではややこしく感じるかもしれません。

そういう最初の時期を乗り越えるまで、ネットであれこれ調べたり試行錯誤したりしながらブログの運営を開始し、記事を増やしたり、サイドバーを充実させたり、固定ページを増やしたりなどということをしていくうちに、おのずと身についていくのがPCスキル。それに加えて、記事を書きつづければ文章力も上がってくるし、記事を書くために調べ物をすることで、ネットの情報収集スキルも上がっていきます。

こういったスキルは、ブログ運営者としてだけでなく、生活の色々な場面で役立つことは間違いないし、少なくとも身に着けておいて損することは絶対にないはずです。

新たな知識やスキルが身に着けばその先に開けてくる世界も以前とは別のものになるかもしれません。ちょっと大げさ(?)になってしまいましたが、色んなスキルがアップするというのは本当で、1年位試してもらえれば自分自身で実感してもらえると思います。

 

知識の蓄積

自分で書いた記事が自分自身に役立つこともあります。

当ブログはブログ運営やサイト制作その他のPC作業で自分が困ったりしたときの解決方法や、覚えておきたいことを記事にすることもよくあるのですが、「あのやり方どうするんだっけ?」と忘れてしまったときにそういう記事を読み返せます。

そういう備忘録としてブログが役立つという意味での「知識の蓄積」もありますが、それと同時にブログを続けることは自分の脳に知識を増やしていく過程にもなり得ます。

記事にまとめようとすると、自分が理解しきれていないことに気づくこともよくあって、そういうときに再度調べなおしたり、頭で整理しなおしたりすることで、記事にするテーマについてより深く理解することができるからです。また、読み手にわかるように書こうとするプロセスにより、自分自身を再度教えることにもなります。

何かを記事にするという行為は自分の知識を増し加える行為になるいうわけですね。

 

 

マネタイズ化しやすい

WordPressでブログを運営することを考えている人の中には、「アフィリエイト」による収益化を考えている方も少なくないと思います。

ここでは無料ブログサービスを利用する場合と比較してどうか、という視点で書きますが、一言でいえば、

無料ブログの場合は自分の収益とならない広告が表示されることがあるが、Wordpressのブログなら自分の収益となる広告のみを表示させることができる

というのが最大のメリットだと思います。

広告の表示位置も自由に変えられるので、どうすれば収益を最大化させられるか、色々と実験することも可能です。

また、Wordpressでブログを作る場合、基本的には独自ドメインを取得してサーバーを借りてブログを運営することになるため、運営者は自分本人となり、無料ブログのように利用規約改定といった他者の意図によってブログが突然消えてしまうといったこともありません。

つまり、安定して収益化を図ることができるわけですね。

 

 

以上、Wordpressブログを2年ほど運営してきた管理人が、WordPressでブログを作るのが絶対いいと感じている6つの理由をまとめてみました。他にもメリットは色々あると思いますが、一番いいのは自分でやってみて実感する、ということだと思います。Wordpressでブログを作るかどうか迷っている方は、ぜひ迷わずに最初の一歩を踏み出してほしいなと思います。

 

Google Search Console(旧ウェブマスターツール)でサーバーエラーが急増した時の解決法

かれこれ一か月前になりますが、突然、Googleウェブマスターツールからこんなお知らせメールが届きました。
 ウェブマスターツールからのサーバーエラー通知メール:Increase in server errors

 

 

内容は、当ブログでIncrease in server errors つまりサーバーエラーの増加が起きているというもの。サーバー側の内部エラーかタイムアウトのせいでGoogleのクローラーがアクセスできないURLが急激に増えていますよ、とわざわざメールで警告してくれたわけなんですが。。

 

 

「な、なんだこの嫌な感じは・・・」と思いながらウェブマスターツールを開いてみると・・・

 

ウェブマスターツールで急増したURLエラー

 

なんと、
サーバーエラー(500エラー)が123件にもなっている
ことが発覚!!(衝撃)

 

 

ちなみに上のキャプチャーは、ウェブマスターツールの「クロールエラー」のページの中にある「URLエラー」の欄に表示されていたものです。

11/20以前はずっとゼロだったのに、11/21に1件、そしてその後、わずか一週間でサーバーエラーがこれだけ増えてしまったせいで、ウェブマスターツールが親切にもお知らせをメール送信してくれたわけですね。

 

11/23から海外に出かけていて、旅行気分でルンルンだったころに、ゾゾーっと寒気のするようなメールをGoogleさんからいただき、旅を楽しみつつも、ふと頭にあのグラフがよぎっては心が暗くなり、滞在先のホステルに戻ってはノートPCで解決策をググりまくる日々を過ごしました。。

 

そんな個人的な話はどうでもいいのですが、エラーになった原因を特定する時間がかかってしまったので、解決するまでの経緯をまとめておこうと思います。同じ状況になった方は参考になれば嬉しいです。

500エラーの原因について考えてみた

500番のエラーとは、先ほどからも書いている通り、サーバー内部で何らかのエラーが起きているときに返されるエラーコード。英語だとInternal Server Errorですね。

 

以前、さくらサーバーとWordpressの相性が悪かったせいか、しょっちゅうInternal Server Errorのページが表示されていたのですが、ある時さくらインターネットでメンテナンスが行われてから、めっきり見なくなっていました。(このあたりについては、以前の記事「さくらサーバー+複数WordPress=505エラー頻発!がめっきりなくなった件」に書いています。)

 

ひさしぶりにお目にかかった500エラーですが、今回の場合、ウェブマスターツールのほうで500エラーが起きたとされていたURLにアクセスしても、どれもエラーページになることなく正常に表示されていたので、よけいに「????」という感じでした。

考えられる理由として一番あり得そうだったのが「ページの読み込みが遅くてエラーと判断された(タイムアウト)」。確かに当ブログは表示時間が長くかかってしまうことがあるというのは前々から自覚してたので、これを機会にページの読み込みにもたついている原因が何かないかをチェックしてみました。

 

Debug Bar」というWordpressプラグインを利用すると、ページの表示時間をセグメントごとに教えてくれたり、エラーなどがないかなどをチェックすることができるようで、以下のサイトを参考にさせていただきながら検証してみました。

参考サイト: WordPress の表示が遅くなったので Debug Bar で調べてみた際のメモ

 

が、残念ながらこれといった問題点は見つかりませんでした。

次に「サーバーのエラーログに何かヒントがあるかも知れない」、と思い、レンタルサーバーのエラーログをチェック。

 

が、空白。つまりエラーログはなし。。。

(え、エラー、ないんですか?ないなら、ウェブマスターツールさんはなんでエラーをこんなに発見してるんですかぁあ!!?と心で何度叫んだか・・・)

 

 

さらにググっていくと、Lynxというテキストブラウザでページを表示させて、おかしいところがないかチェックしてみようというアドバイスを発見。

 

なんでも、このテキストブラウザというもので表示されたものが、いわゆる検索エンジンがそのページを見ている状態とほぼ同じなので、テキストブラウザでおかしな表示があれば、それが原因でエラーを返されている可能性が高いという話でした。

Windowsユーザーの方はLynx for Win32 を使うのが手っ取り早いです。具体的な使い方などが気になる方はググってみてください。

 

で、Lynxで当ブログのメインページやウェブマスターツールで500エラーとされた個別記事のページを表示させてみた結果は・・・

問題なし(うれしいような悲しいような)

 

どれもちゃんと最後まで表示されていて、問題は発見されず、解決策もなく・・・。という感じでした。

 

 

日本語でなかなかぴたりと当てはまる情報がなかったので、

Webmastertool Increase in server errors 500

などといった英語のキーワードで検索してみました。

すると、あるフォーラムで同じような問題を抱えている人がたくさんいて

「ページにはアクセスできるのにウェブマスターツールでサーバーエラーになっている」

「私も同じ現象だ」

「私も私も!」

という感じで盛り上がっていたので、これは最後のほうになにか解決策があるだろうと読み進んでいくと・・・

 

 

「放っておけばそのうち治る」

が結論。。(Really??)

 

 

そんなこんなで情報の海に翻弄されたまま解決しない日々が一週間ほど続いた後・・・(途中でまたウェブマスターツールからアラートメールが届き、さらに焦る)

やはり読み込み時間に問題があるのかもと思い直し、Wordpress高速化の定番であるW3 Total Cacheの設定を見直すことに

 

今回もお世話になったのが、バズ部さんのこちらの記事

→ W3 Total Cache のおすすめの設定方法

 

書いてある通りに順番に設定していくと・・・何とこんな解説があったのだ

4−2.サーバーエラーが表示されたときの対処法

W3 Total Cache をインストール後、「500 Internal Server Error」というサーバーエラーが表示され、サイトに何も表示されなくなったというご相談を受けたので、その時の環境とエラー解決策について紹介する。

 

実は上記の解説の内容は結果的には私の問題とは関係がなかったのですが、このフレーズをきっかけにあることを思い出したのです。

 

なにかって、

サーバーエラーが増え始める直前に

WordPressのバージョンを更新したんじゃない?

 

当時は海外に出発する直前で準備に忙しく、ブログにかまっている暇などなかったと思い込んでいたのですが、実はWordPressのバージョンを4.0に更新し、幾つかのプラグインも同時に更新していたんですね~。

 

もしやこれが原因では?と思いググってみるとこんな情報が・・・

3.5.1にアップデートしてから一部のページが
googleウェブマスターツールでサーバエラーとなります。
レスポンスコードは500と503です。
引用元: [解決済み] ウェブマスターツールでサーバエラー500、503

上記のページではWordpressの別のバージョンで問題が起きていたわけですが、WordPressのバージョンアップが原因で問題が起きたことには変わりないということで、以下の作業を行って様子を見てみました。

  • インストール済みのプラグインの更新を再チェック(更新が必要なものは更新)
  • 不要なプラグインを停止してできるだけプラグインの数を減らす
  • ウェブマスターツールのURLエラーの欄で、「エラーのあるページ」のリストは全部チェックして「修正済みとする」ボタンをクリックしておく(エラーが再度発生した時に分かりやすくするため)

 

すると、あんなにごちゃごちゃと色々やっても増え続けていたエラーが、2日後くらいには激減!

そして12/13日の時点でついにエラーが0になったのでした(ホッ)。

サーバーエラーが0に

 

結論

今回は、「エラー」という言葉に焦ってがむしゃらに解決方法を探していたわけですが、Wordpressのバージョンアップをしたということさえちゃんと頭に入っていればもう少し原因を特定するのが早かっただろうと思います。定番ですが、Wordpress本体やプラグインの更新、テーマの変更などを行ったときは、直後だけでなく1週間くらいはそのことを頭に入れつつ様子見をする必要がありますね。また一つ、勉強になりました。

固定ページPageと投稿Postを変換できるプラグインPost Type Switcher

WordPressでブログを書いていると、時経つうちに構成を変えたくなる時があります。先日、幾つか投稿としてアップしたものを一つのジャンルにまとめて固定ページで表示させたほうが見やすくていいんじゃないかという考えにいたり、投稿記事から固定ページに変換する方法を探してみました。

 

日本語で探すとほとんどがpTypeConverterというプラグインについての情報だったので、さっそくインストール。pTypeConverterのメリットは、記事タイトルが一覧表示されて、その中から固定ページに切り替えたいものを選択して一括変換できるというところ。固定ページから投稿への変換も可能です。

 

が、・・・

 

いくら待っても何をしても一覧表示がされず。。

 

何かのプラグインとバッティングしているのか、Wordpressのバージョンとの互換性がないのか、原因はよく分かりませんが残念ながらpTypeConverterは使えないよ、ということで別のプラグインを探してみました。

 

探してみれば色々あるもので、その中で気に入ったのがPost Type Switcherというプラグイン。

pTypeConverterとは違い、投稿や固定ページの編集画面で投稿タイプを切り替えることができます

 

投稿タイプを変換する記事がたくさんある場合はpTypeConverterのように一覧表示から選んで一括変換できるとありがたいですが、基本的にそんなにしょっちゅうあるものでもないし、変換したいとしてもせいぜい10記事程度くらいまでかと思うので、私はPost Type Switcherの機能で十分、使いやすいと思いました。

以下、簡単なインストール手順と使い方です。

[ad#big-banner]

 

Post Type Switcherのインストール

post type swtcher

 

WordPressダッシュボードのプラグイン>新規追加 でPost Type Switcherと入力・検索し、該当するプラグインをインストール・有効化します。

あるいは以下のリンクからプラグインファイルをダウンロードし、ダッシュボードのプラグイン新規追加からアップロードします。

→ Post Type Switcherのダウンロード

 

Post Type Switcherの使い方

インストールと有効化が完了したら、投稿タイプの変更をしたい記事(ポスト)や固定ページの編集画面を開きます。

右上にある「公開」エリアにPost Typeという欄が表示されているので、「編集」をクリックします。

post type swtcher

 

表示されたドロップダウンの中から切り替えたい投稿タイプを選んでOKをクリックします。あとは更新ボタンを押すだけ^^

post type swtcher 2

説明するまでもないくらい簡単ですね^^; 投稿タイプの変換ができるPost Type Switcherのご紹介でした。

商用OK!無料で使えるアイコンフォントでブログ・サイトを楽しくお洒落に

最近、地元のマタニティウェアショップから依頼されたサイト制作で初めてアイコンフォントというものを使ってみたのですが、なかなか使い勝手が良かったので、今後の覚書ということでまとめてみました。

アイコンフォント(シンボルフォントとか言い方は幾つかあるよう)とは、Webサイトなどでよく使われるアイコンのセットをフォントとして使えるようにしたもののことです。

画像アイコンとは違ってベクター形式なので画面の解像度によらずきれいに表示されることや、cssで色、サイズなどを調整できるメリットがあります。

 

今回アイコンフォントを探してみて、商用利用も自由な無料のものでもかなり充実した内容のものがあるな~という感じでした。アイコンって探し始めると本当にあっという間に時間が過ぎて行ってしまいますが、今後はアイコンを探す手間も減るんじゃないかなと期待^^

ちなみに、Wordpressブログでアイコンフォントを使いたい場合も、ちょっとした設定だけで利用できるようになりますので、ぜひこの記事を参考に使ってみてください。記事の後半では、アイコンフォントをサイトで利用するときに便利なWebサービスも二つ、使い方も併せて紹介していきます!

 

初めての利用におススメなアイコンフォントFontAwesome

公式サイトhttp://fontawesome.io/

商用利用にもライセンス表記なしで自由に使える無料のアイコンフォントです(ライセンスの詳細はこちらを確認)。479個(記事執筆時)のシンプルで使いやすいアイコンが揃っていて、取りあえずこれがあれば事は足りるという感じの定番アイコンフォント。以下、使い方の手順です。

 

フォントを利用するHTMLで読み込む

まずはFontAwesomeのフォントを、自分のプロジェクト(サイト)のHTMLで読み込めるように設定していきます。方法は二つあって、フォントファイルをダウンロードせずに本家サイト(BootstrapCDN)から読み込む方法と、フォントファイルをダウンロードして自分のプロジェクト内に設置する方法があります。好きなほうを利用してください。

 

方法1.ダウンロードしないでBootstrapCDNからCSSを読み込む

以下のコードをHTMLファイルのheader内にコピペするだけでOK。

参考http://fontawesome.io/get-started/

 

方法2.フォントファイルをダウンロードして利用する

公式サイトにアクセスします。ダウンロードボタンが分かりやすい位置に表示されているのでクリックしてダウンロードを開始。

Font Awesome サイト

 

ダウンロードしたzipファイルを解凍。以下のような構成になっています。

downloaed font

cssフォルダ内のいずれかのファイル(推奨:font-awesome.min.css)とfontフォルダ内の全てファイルを自分のサイトのcssフォルダとfontフォルダにそれぞれコピーします。

注:cssとfontフォルダは同じ階層にあるようにしてください。

 

フォントを利用するHTMLを開き、header内で以下のようにコピーしたcssファイルを読み込みます。

※href=””内は自分のサイトの構成に合わせて適宜変更

 

ここまででフォントの読み込み設定が完了です。では実際にサイト内にアイコンを配置しましょう。

 

サイトにアイコンを配置

公式サイトにアイコンの一覧があるので以下よりアクセスします。

http://fortawesome.github.io/Font-Awesome/icons/

icons in FontAwesome

 

ずら~~っと並んでいますね^^; 使いたいアイコンが見つかったらクリックします。

select icon

すると、選択したアイコンのタグが表示されますのでコピーします。

copy code

HTML内に貼り付けます。

htmlに貼り付け

こんな感じにボタンに使ってみました。

fontawesome適用結果

 

アイコンのスタイルを変更するのに既に用意されたcssクラスも併せてチェックしておくと役立ちそうですね。

http://fontawesome.io/examples/

 

 

WordPressでFont Awesomeを使う設定

WordPressに何かの機能を追加するとなると、ついついプラグインを使う方向に頭が向いてしまいますが、今回はプラグインは使いわない方法でやってみました。

(実は、使おうとしたんですが、どれもうまく動作しなかったんです・・・。Worpress本体のバージョンとの互換性が微妙だったよう)

 

プラグインを使わずにFont Awesomeを導入する方法はいくつかあるようですが、私はfunction.phpに以下のコードを追加する方法にしてみました。

参考Add Font Awesome Icons To WordPress

 

ダッシュボードで外観>テーマ編集の画面に行き、function.phpを開き、以下のコードを追加してください。

※4.2.0の部分は公式サイトに表示されている最新バージョンに合わせると、最新のアイコンが使えます。

function.phpを保存したら、あとは、投稿画面のテキストモードで、必要な場所にiタグを設置すればOK。

例) <i class=”fa fa-angellist”></i> ⇒ 

 

簡単ですね

iタグに記述する各アイコンのクラス名は前述のようにサイトで確認してください。

 

このブログでは記事タイトルの先頭にあるマークを画像からアイコンフォントに変更しました。

Before: スマホなど画面幅の狭い画面で見た場合にタイトルが縦長になってしまっていました。

wp2

wp3

 

After:幅が狭くなっても改行が少なく見やすくなったかなと思います。色の変更とかもCSSだけで調整できるのもいいです。

wp4

wp5

 

March.15.2015追記:ブログデザインのカスタマイズに伴って上記のような記事タイトルの先頭のマークは消えました。代わりにFontAwesomeを使ってShareボタンやFollowボタンを表示させたり、グローバルメニューにもアイコンを表示させています。

 

さてここまではFont Awesomeというアイコンフォントのみの利用方法でしたが、それ以外にもフリーで使えるアイコンフォントは幾つも存在します。

そんなアイコンフォントのなかから好きなもの利用したいという場合に役立つサービスを二つご紹介します。

 

複数のアイコンフォントを簡単な設定で使えるWebサービスWE LOVE ICON FONTS

FontAwesomeを含め、幾つかのアイコンフォント(すべて無料かつオープンソース)を使いたいという時に便利そうなWebサービスを見つけました。ファイルのダウンロード不要でさくっと設定して使えます。

サイトにアクセスhttp://weloveiconfonts.com/

we love icon fonts

 

表示されているフォントの中から使いたいものをAddをクリックして追加します。

フォントを追加

 

ページの下のほうにスクロールすると、Use selected font(s)というセクションがありますので、そこに表示された内容をコピーして、自分のサイトのcss内に貼り付ければ、フォントの読み込み設定が完了です。

例)typiconsとzocialという二つのフォントを選んだ場合

we love icon fonts 使い方

 

次に使いたいアイコンをサイト内で選んでクリックし、ページ下に現れるアイコンのクラス名をコピーし以下のようにspanタグで設定すればOKです。

we love icon fonts 使い方

例)Zocialフォントのdribbbleを選ぶ場合 <span class=”zocial-dribbble”></span>

 

 

使いたいアイコンだけを選んで一つのフォントファイルにしてくれるサービスFontello

前述のサービスとは違って、cssやアイコンファイルをダウンロードして使うタイプのサービスですが、かなり使えそうです。幾つものアイコンフォントの中から、自分が使いたいアイコン(フォントではなく)だけを選ぶことができ、しかも選んだアイコンだけを新たなフォントとしてまとめなおしてくれるんです

数あるアイコンの中でも実際に一つのサイト内で使うものは限られていますし、ファイルサイズを最小限に抑えながら自分の好きなアイコンをセットにできるのはありがたいですね。

 

サイトにアクセスhttp://fontello.com/

一覧の中から使いたいアイコンをクリックして選んできます。 fontello

 

アイコンを選んだらページ右上のDownload Webfontをクリックしてファイルをダウンロードしましょう。

※ボタンのカッコ内は選んだアイコンの数です。

download webfont

ファイルを解凍すると以下のような構成になっています。

fontello ファイル

  • cssフォルダ : cssファイルがあります。
  • fontフォルダ : fontファイルがあります。
  • config.json : このファイルをfontelloサイト内でImport(レンチボタン内の機能)して作業を継続できます。
  • demo.html : ダウンロードしたアイコンとそのクラス名を確認できます。
  • README.txt : 使い方と注意事項。
  • LICENSE.txt : アイコンのライセンスを確認しておきましょう。

 

 

使い方は、css、fontフォルダを自分のプロジェクト内に追加し、cssフォルダ内のファイルをHTML内で読み込みます。

基本的には以下の二つのcssファイルを読み込めばOKです。

 

その他のcssファイルは必要に応じて利用してください(README.txtを参照)

 

アイコンはiタグのクラスにアイコン名を設定して利用します。自分が選んだアイコンの一覧とクラス名はdemo.htmlを見ると確認できますよ。

例) <i class=”icon-home-outline”></i>

fontello4