「wordpress」 一覧

WordPressプラグイン「Google Authenticator」。2段階認証用のアプリを消してしまった時の復旧方法。

スマホの初期化をこないだしたときに、WordPressへのログインがうまくいかなくなったことがあるので、その時の様子を紹介します。 原因から言うと、ログインするときには二段階認証の仕組みを取り入れているんですが、スマホ初期化したときに、二段階認証のためにスマホに入れていたアプリのGoogle Authenticatorも当然消えてしまったからです。。。 二段階認証とは、IDとパスワードの認証に加えて別の要素でも認証をする仕組みです。二要素認証と呼ばれることもあります。Google Authenticatorの場合はワンタイムパスワードの仕組みを使用します。

WordPress(ワードプレス)の管理画面が重い(遅い)時の対処方法(参考)。

2015/12/13   -wordpress

僕のブログはWordPress(ワードプレス)で運営をしていますが、最近、管理画面の表示速度が深刻なぐらい遅くなっていました。とにかく動きが重たい感じでした。 おそらく、ブログのサーバを移転をした時に合わせてワードプレス自体のバージョンもアップデートしたのが起因しているんだと思います。でも、バージョンは下げたくないので、改善する方法は何か無いかを探していると、いいものを見つけました(結果的にですが)。 P3 - Plugin Performance Profilerというプラグインです。いろんなプラグインなどの実行時間を確認してくれます。 使い方ですが、プラグインを使う時にお馴染みのインストールをまずはしておきます。 管理画面のプラグインの画面から、検索をするか下のURLのページからファイルをパソコンにダウンロードしてから、ファイルをアップロードをするとインストールができます。 P3 (Plugin Performance Profiler)(英語) P3 (Plugin Performance Profiler)(日本語) 使い方も非常に簡単です。インストールが終わっていると管理画面のツール(Tools)にP3 Plugin Profilerの項目が追加されているので、クリックします。 後は、表示されたページのStart Scanをクリックするだけです。 ちなみに、僕の環境で管理画面の表示が思ったくなっていた原因はいくつかのプラグインの実行時間が長いことが原因だったようです。All-in-One WP Migrationが一番の要因でした。 あとは、何回かスキャンをしている中で、Jetpack by WordPress.comも割合が大きかったです。 All-in-One WP Migrationの方は、WordPressを移転するときに使うプラグインですが、普段は使うことがないので無効にしておきます。Jetpack by WordPress.comはサーバの監視やCDNとして使っていましたが、あまり効果はなかったし、移転をしたサーバの機能は以前よりいいものを使っているのでとりあえず無効にしておきました。 プラグインをいくつか止めておいて再度スキャンをしてみると、管理画面の表示の重さ(遅さ)はだいぶ改善されました。スキャンの結果もずいぶんスッキリしたし、実際に管理画面を表示させてみると体感的にも早くなっていました。 先にも書きましたが、原因としてはWordPressのバージョンとプラグインの組み合わせの相性的なものが原因だったと思います。 もし、管理画面の表示の速度に問題を抱えている方がいればご参考にしてもらえればと思います。

【WordPress】4.1にバージョンアップをしたら問題があったのでダウングレードしました

2015/02/04   -wordpress

WordPressのダウングレード方法 WordPressをバージョン4.1にアップデートをしたときに、Wordpressの状態がかなり悪化したのでダウングレードをしました。 悪化した状態とは主に2点で、本文中にドラグ&ドロップで画像が表示されないのと、PC用のトップページでタグや画像を除く本文がすべて表示されてしまうという現象状態でした。 PC用ページではテキストの本文がすべて表示されてしまってものすごく見栄えが悪くなってしまいました。 その時の対応でプラグインのAuto Limit Posts Reloadedを臨時的に使ってトップページで本文が全文でないようにできましたが、画像をドラグ&ドロップで画像を挿入できないのは致命的でしたね。 ということで、WordPressのバージョンをダウングレードしました。 僕はお名前.comのVPSを使っているのでWordPressをアップグレードするときにスナップショットを取っていたら、すぐに戻すことができたのですがスナップショットを取っていなかったのでファイルやディレクトリを操作してダウングレードさせています。 ダウングレードの方法ですが、思っていたより簡単でした。その時の手順を記録として残しておきたいと思います。 設定方法 まずは以下のリンク先からダウングレードさせたいバージョンのファイルを取得します。 WordPress旧バージョン 取得したバージョンのファイルをFTPやSCPでサーバに転送をします。 後はコマンドでの操作の説明になります。僕は今回バージョンを4.1から3.9.3にバージョンを落としています。 #ディレクトリのパスは環境に合わせて適宜変更してください #※WordPressのドキュメントルートを"/data/www/zibunlog/"としています。 #残しておくファイルやディレクトリの保存場所を作成 # mkdir /home/zibunlog/wp_downgrade-tmp #WordPressのドキュメントルートディレクトリに移動 # cd /data/www/zibunlog/ #必要なファイルやディレクトリを退避しておく # cp -ar wp-content .htaccess sitemap.xml sitemap.xml.gz wp-config.php /home/zibunlog/wp_downgrade-tmp/ #※wp-contentとwp-config.phpだけでもダウングレードはできます。 #Wordpressのファイルをすべて削除する ※ディレクトリパスには十分注意してください。 # rm -fr ./* #ダウングレード用のWordPressのファイルが保存されているディレクトリに移動 # cd <WordPressのファイルが保存されているディレクトリパス> #ファイルを展開 # tar xzvf wordpress-3.9.3-ja.tar.gz #ファイルを移動 # cp -ar wordpress/* /data/www/zibunlog/ #退避していたファイルを戻す # \cp -far /home/zibunlog/wp_downgrade-tmp/* /data/www/zibunlog/ # cpコマンドで強制的に上書きをするときは先頭に"\"が必要になります。 ここまでのコマンド操作でファイルの用意は完了です。あとは管理ページ(http://domain/wp-login.php)にログインをするとデータベースの更新を促されるのでそのまま更新するとダウングレードは完了です。 管理画面にログインをして確認をするとちゃんとバージョンがダウングレードされていました。 さいごに 3.9から4.1とメジャーバージョンを上げて状態が悪くなったので、戻すのは難しいと思いましたが、意外と簡単だったのでいい経験になりました。 4.1で不具合が見られたので、WordPressのバージョンアップはもう少し後のバージョンまでしばらくまとうとおもいます。

【WordPress】画質が劣化していたので設定を変更して対応。

2015/01/23   -wordpress
 , ,

※Wordpressのテーマを変更しているので、記事の中の画像に変化はないので参考情報としてください。 WordPressの画像が劣化しないための設定 ブログにはWordPressを使っていて、僕は画像をよく使っていますが時々、写真が劣化しているのが気になっていました。 使っている写真は自分で撮影している物が多くて、カメラはNEX-5Tのミラーレス一眼を使っていてせっかくきれいに撮影できていた写真もWordPressにアップロードしたら劣化しているのが残念でした。

【WordPress セキュリティ】最低限の強化・対策はしておかなくてはなりません

2014/12/30   -wordpress

僕のブログはWordpressの専用サーバをレンタルしているのではなく、VPSをレンタルしてWordPressの運用しています。 ミドルウェアなどの設定も当然自分でしているわけで、セキュリティの設定も自分でする必要があります。 そこで、僕がWordPressのセキュリティのために施している設定を紹介しようと思います。 僕がセキュリティのためにしている設定は、主に3点です。 ・管理画面への接続は VPN + htaccess で接続元を限定 ・管理画面へはBasic認証でID/パスワードを設定 ・管理画面はSSLの暗号化を使用 管理画面への接続は VPN + htaccess で接続元を限定 投稿画面などの管理画面への接続は接続元のIPアドレスを限定するようにしています。 そのためにはまずはIPアドレスを特定する必要があります。 固定グローバルIPアドレスを持っている回線からであればそのグローバルIPアドレスを用いれば大丈夫ですが、外出した時など外から接続しようとしてもIPアドレスが変わってしまうので接続はできません。 そんな時にはVPNが便利です。僕は自前のSSL-VPNを使っていますが、有料になりますがVPNサービスを使うことでIPアドレスの固定をすることもできます。 IPアドレスの固定ができるとあとはサーバ側のhtaccessで接続を許可するIPアドレスを限定します。 WordPressのwp-adminディレクトリの中に.htaccessファイルを作成します。 # cd /<Wordpressのドキュメントルート>/wp-admin/ # vim .htaccess #以下の3行を追加して保存 order deny,allow deny from all allow from IPアドレス htaccessは保存後に即時反映されるので設定には気を付けます。 管理画面へはBasic認証でID/パスワードを設定 WordPressの管理画面へ接続するにはWordpress自身のID/パスワード認証がありますが、認証を2段階にするためにBasic認証もしておきます。 # htpasswd -c /etc/httpd/.htpasswd <ユーザ名> New password: Re-type new password: Adding password for user <ユーザ名> # "-c" オプションは初回のみ使います そして、Apacheにも設定を追加します。 # vim /etc/httpd/conf/httpd.conf # 任意の場所に追加します <Directory /<Wordpressのドキュメントルート>/wp-admin > AuthType Basic AuthName "Secret Zone" AuthUserFile /etc/httpd/.htpasswd Require user <ユーザ名> </Directory> # service httpd restart これでBasic認証の設定も完了です。管理画面に接続した時に、ユーザ名とパスワードの入力画面が表示されるはずです。 管理画面はSSLの暗号化を使用 これまでの接続元のIPアドレスを限定するのと、二段階の認証のためにBasic認証の設定をしていても通信自体が盗聴されていてはあまり意味がありません。 盗聴されないためにもSSLを用いて通信の暗号化は必要です。 SSL通信するための設定は、以前に投稿した記事があるのでそちらを参考にしてもらえればと思います。 SSL証明書も年間900円から使うこともできるので導入することをお勧めします。 【HTTPS】当ブログ(zibunlog.com)をHTTPSでの表示に変更しました そして、投稿ページはhttp通信をしますが、管理画面などは強制的にhttpsの通信に切り替えるようにします。 # vim /<Wordpressのドキュメントルート>/wp-config.php #以下の1行を追記して保存します define('FORCE_SSL_ADMIN', true); #Apacheの再起動は不要です。 ここまでの設定でSSL通信ができるようになっています。SSL通信をして通信が暗号化されるとかなり安心です。 おまけにサーバとしてのセキュリティ設定 ここまでの設定でWordPressとしてのセキュリティを高めることはできました。 ...

Twitter、Facebook、Google+、はてなブックマーク、FeedlyのSNSボタン設置とカウント数を表示

2014/12/12   -wordpress

ブログの独自性のためにSNSボタンをカスタマイズ WordPressでブログを運営してたら独自性を持たすためにいろいろカスタマイズしたくなるのはみんな同じ思いだと思います。 僕もこれまでにいろいろいじりながら当ブログをカスタマイズしてきました。 SNSのボタンはそのブログの特徴を表すといっても過言では無いと思います。 ようやく当ブログのSNSボタンも形が固まってきたので、設定方法を忘れないためにも今回の投稿で記録しておきます。 SNSボタンを作るときに一番難しいのはどれだけシェアされているかを表す数値の部分だと思います。 シェア数を取得するためにSNS Count Cacheというプラグインもあって、SNS Count CacheはローカルにSNSカウント数をキャッシュさせて表示させるので処理は軽くて便利だったのですが、カウント数がうまく取得できないこともあったので、別の方法を探しました。 そこで、こちらのサイトにすごく便利そうなプログラムの方法があったので参考にさせてもらいました。 Twitter、Facebook、Google+、はてブのソーシャルカウント数をWordPressで直接取得する関数まとめ まずはテンプレート化する まずはそれぞれのSNSのカウント数をテンプレートにして関数として使えるようにします。 function.phpに以下の内容を貼り付けます。 //ツイート数の取得 function get_twitter_tweet_count($url){ //JSONデータを取得 $json = @file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url='.rawurlencode($url)); //JSONデータを連想配列に直す $array = json_decode($json,true); //データが存在しない場合は0扱いにする if(!isset($array['count'])){ $count = 0; }else{ $count = $array['count']; } //カウントを出力 return $count; } //いいね!数の取得 function get_facebook_like_count($url){ //JSONデータを取得 $json = @file_get_contents('http://graph.facebook.com/?id='.rawurlencode($url)); //JSONデータを連想配列に直す $array = json_decode($json,true); //データが存在しない場合は0扱いにする if(!isset($array['shares'])){ $count = 0; }else{ $count = $array['shares']; } //カウントを出力 return $count; } //Google+1の取得 function get_google_plus_one_count($url){ //GETリクエストでURLを指定する場合 if(isset($_GET['url'])) $url = $_GET['url']; //CURLを利用してJSONデータを取得 $ch = curl_init(); curl_setopt( $ch, CURLOPT_URL, "https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ" ); curl_setopt( $ch, CURLOPT_POST, 1 ); curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, false ); curl_setopt( $ch, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"' . $url . ...

【HTTPS】当ブログ(zibunlog.com)をHTTPSでの表示に変更しました

2014/12/09   -wordpress

HTTPS化するまでの流れ GoogleからアナウンスをされているようにWEBの安全性を高めるためにあらゆるWEBページのHTTPS化が推奨されています。 HTTPS化をすることでブログの検索順位が上がることも予測されるので僕のブログでも早速SSL証明書を用意してページ全てをHTTPSに変更しました。 Google では過去数か月にわたり、Google のランキング アルゴリズムでのシグナルとして、暗号化された安全な接続をサイトで使用しているかを考慮に入れたテストを実施してきました。この実験ではよい結果が得られているため、ユーザーがもっと安全にサイトを閲覧できるよう、すべてのサイト所有者の皆様に HTTP から HTTPS への切り替えをおすすめしたいと考えています。 Googleアナウンスページ まずはSSL証明書の用意 HTTPS化をするにはまずはSSL証明書の準備が必要になります。 SSL証明書は有名なとこでいうとグローバルサインやジオトラストなどがありますが、ECサイトや金融系のWEBサイトでない限り有名なSSL証明書は必要ないと思います。 僕のような個人ブログなどであれば安価なSSL証明書で十分です。 その中で僕が選んだSSL証明書はKingSSLを選んでいます。 このKingSSLを選んだ理由はやはり値段が安いということですね。一つのコモンネームのSSL証明書の年間の金額が900円と他のSSL証明書よりはるかに安い金額です。 あらゆるサブドメインにも対応したワイルドカードの形式でも年額で9,000円と大変お得です! それに、このKingSSLは完全自動化により証明書の発行が非常に速いです。僕も実際に使ってみて申請後約10分くらいで発行できました。 まず申請を行うにはCSRを作成しなくてはいけません。CSRとは証明書を作成するための事前情報といえばわかりやすいかもしれません。 CSRを作成するときに国や所在地を表す情報や、最も需要なコモンネームというサイトのドメインの情報が必要になります。 このCSRを作成する方法ですが、VPSなどのサーバを使用している人はサーバにログインをしてからopensslコマンドで簡単に作成することができます。 サーバにログインする環境が無い人は無償で使えるツールのサイトから作成することも可能です。 CSR作成ツール 僕の場合はサーバにログイン後にコマンドで作成しています。 #-- CSRを作成するための秘密鍵の作成 --# # openssl genrsa -des3 -out zibunlog.com.key 2048 Generating RSA private key, 2048 bit long modulus ....+++ ............................+++ e is 65537 (0x10001) Enter pass phrase for blog.zibunlog.com.key: Verifying - Enter pass phrase for zibunlog.com.key: #-- 作成した秘密鍵を基にCSRの作成 --# # openssl req -new -key zibunlog.com.key -out zibunlog.com.csr Enter pass phrase for zibunlog.com.key: You are about to be asked to enter information that will be incorporated into your certificate request. What you are about to ...

【mod-pagespeed】かなり効果があります。初めてAランクを計測。

2014/11/29   -wordpress

RSSで登録をしているブログなどを見ていたら、mod-pagespeedに関する情報を見るようになりました。 sixcoreなどのレンタルサーバでWordPressを運用している人たちがmod-pagespeedの機能を使えるようになったみたいです。 僕のブログの環境はVPSでCoentOS5.xにWordpressで、WEBサーバにはApacheを使っているので、試しにmod-pagespeedを使ってみました。 僕が使っているVPSはお名前.comのVPSでメモリ1GBプランを使っています。初期費用が無料でお得で、僕のブログはまだ月間10万PV未満なので便利に使っています。 mod-pagespeedとは PageSpeed Module PageSpeed speeds up your site and reduces page load time. This open-source webserver module automatically applies web performance best practices to pages and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow. Automatic website and asset optimization Latest web optimization techniques 40+ configurable optimization filters Free, open-source, and frequently updated Deployed by individual sites, hosting providers, CDNs ざっくりいうと、CSS、JavaScript、画像などを自動的に統合して最適化してくれるようです。 コードの不要な空白やコメント行や改行を削除をする仕組みです。 インストール方法 インストールはすごく簡単でした。 # vim /etc/yum.repos.d/mod-pagespeed.repo #以下の内容を記述して保存# [mod-pagespeed] name=mod-pagespeed baseurl=http://dl.google.com/linux/mod-pagespeed/rpm/stable/x86_64 enabled=1 gpgcheck=0 #リポジトリの情報を一度クリアにします# # yum clean all # yum --enablerepo=mod-pagespeed install mod-pagespeed インストールが終わると "/etc/httpd/conf.d/" あたりに pagespeed.conf と pagespeed_libraries.conf の2つのファイルができていると思います。 ...

【GMO WPCloud】を使ってみたので感想です。

2014/11/13   -wordpress

WordPressを使用している僕にとっては気になるサービスがあったので紹介します。 そのサービスとは、「GMO WPCloud」というWordpressに特化したレンタルサーバです。   このサービスで一番興味を持ったのが、フラッシュストレージFusion-io ioDriveを使用している点です。 Fusion-ioとはSSDよりも高速で、SSDと比較すると約2~4倍のディスクのIOパフォーマンスを発揮するとされています。 パソコンなどで使われているSATAディスクと比較するとベンチマークの方法にもよりますが、100倍の性能も出るとされています。 そんな中、GMO WPCloudでは最小構成では月額900円で使うこともできるようで、且つ、10日間は無料トライアルで使えるようで、現在は僕はお名前.comのVPS(CPU:2core、MEM:1GB)を使っているので比較するために使ってみました。 まず初めに「.wpcloud.net」のドメインでサブドメインを決めます。 すでに使っているオリジナルドメイも使えるようですが、レギュラープランでは固定IPアドレスが使えないので、もしオリジナルドメインを使いたい場合は月額200円で固定IPのオプションを申し込む必要があります。 僕は試してはいませんが、DNSサーバでCNAMEを使えばオリジナルドメインでの運用も可能かもしれません。 登録が終わるとダッシュボードの画面が表示できます。ダッシュボードでは、サービスの利用状況などが確認できます。 画面右側のLiveボタンを押すと、Wordpress使用者ではおなじみのログイン画面が表示されます。 ログインするといつものコントロールパネルの画面が表示されます。 現在の記事などを移行します 初期状態のWordPressのテーマはTwenty Fourteenのテーマになっていて、投稿記事も当然何もありません。 なので、テーマと投稿記事はできるだけ現状のものを使って比較をしたいので用意をします。 WordPressのテーマは僕はstinger3forFANSを使っています。それでCSSのスタイルシートなども現状のものをできるだけ使いたいので用意をしました。 現在のテーマを移行するために使った方法は、サーバにSSH接続をしてコマンドで、テーマのディレクトリをコピーして”zip -r stinger3forFANS_backup.zip stinger3forFANS”を実行して、圧縮したファイルを自分のパソコンに転送をしてから、圧縮したテーマ用のファイルをGMO WPCloud側のコンパネ画面からインポートをして有効にしました。 半ばダメもとでやってみましたが、案外うまくいきました。 そして投稿記事にかんしてはWordPressの機能でまずは現状のサーバからxml形式でエクスポートをして、GMO WPCloudのほうでインポートをすれば投稿記事を移すことができます。 投稿記事のアイキャッチの画像が移行ができていないようでしたが、とりあえずは概ね同じ環境はできています 現状との比較 そして、ここまでの状態でスピードなどの評価を現状と比較してみます。 評価の方法はGTmetrixを利用します。 まずは現在運用中のお名前.comのVPS(CPU:2core、MEM:1GB)で運営しているサイトを計測します。 結果は画像の通りです。Page load timeが3.47秒という結果です。改善の余地がまだまだあります。 そして、GMO WPCloudの方を計測します。 結果は画像の通りでGoolgeの評価を示している「Page Speed Grade」とヤフーの評価を示している「YSlow Grade」もあまりよくは無いですが、Page load timeは2.07秒となかなか良い結果です。 「Page Speed Grade」と「YSlow Grade」の評価が良くないのは画像の下部にもあるように、画像のサイズの最適化や、圧縮機能を有効にした方が良いとの内容です。 これらの内容を改善した方がSEO的にもいいので今後の課題にしておきます。 早くはなったけどGMO WPCloudを本運用には使わないです GMO WPCloudを使うことで結果的にはサイトのスピードは良くなりました。でも正直な感想はFusion-ioを利用したら1秒台とかもっと早くなると考えていました。 それから、GMO WPCloudのサービスは ・訪問者数が1カ月で30,000人/月で、それ以上は1000人超過するごとに100円/月 課金される ・ディスクの容量が初期では10GBしかなく、超過分は10GBごとに100円/月 課金される ・固定IPアドレスも200円/月 初期の金額は月額900円と安く感じますが、サイトのボリューム次第では非常に高額になります。 100万PVを超えているサイトでは訪問者数はおそらく70万UU(unique users)くらいになるともいます。 30,000人を超えると、1000人毎に100円必要になるので、ざっくり計算をすると67,000円/月も必要になります。 これだけの金額を払うのは到底無理です。。。 それから、本運用に使わない他の理由としてはコマンド操作が好きな僕にとっては以下の理由は致命的でした。 ・SSH接続ができないのでコマンド操作ができないので面白くない ・コマンド操作ができないので、CSSなどの編集に不便 もし、上記の理由が今後改善されるようなことがあれば、本運用に使うどうかを考えてみたいと思います。

WordPress 【jetpack】 モニターでサーバの死活監視

2014/09/24   -wordpress

ブログがトラブったので状況と対策 ここ最近に自分が運営しているブログが見れなくなることが3回ほどありました。 過去のサーバトラブルを振り返ってみると1回目は発生時はCPUが異常なぐらい上昇していました。 WEBページにアクセスしてもDBに接続ができない状態だったので、DBのプロセスが何か詰まっていたのだと思います。 この時のトラブルはSSHでサーバへの接続ができない状態だったので、お名前.comのリモートコンソールで強制再起動をしました。 リモートコンソールの機能がなかったら操作がまったくできない状態だったので、リモートコンソールの機能があって助かりました。 2回目は特にCPUなどの負荷は上昇はしていなかったし、Apacheのプロセスも起動していたのですが、ブラウザでページにアクセスをしてみるとタイムアウトをする状態でした。 この時はサーバのSSHの接続ができる状態だったので、Apacheのプロセスを再起動することで問題が解消しています。。 3回目は2回目と同じでサーバの負荷は大したことなかったのですが、ページにアクセスをするとタイムアウトする状態でした。 サーバにログインをしてApacheの再起動をすることで問題は解消です。 僕のブログはお名前.comのVPSを使っています。スペックはCPUは2コアでメモリ1GBで月額の費用も1000円未満の低スペックサーバです。 でも、僕のブログの一日のPV数は平均1600程度で、アナリティクスなどで見ていても同時接続数は20にも満たない状況なので、まだこのスペックで十分だと思います。 再発したときの対策 ダウンしている時間が長いとGoogleの評価にも影響しそうなので、また再発をしたときのために対策を考えていました。 本職の仕事はサーバ・ネットワークエンジニアをしているので、且つLinux環境には慣れているのでシェルスクリプトを設定できるのですが、ここはブロガーとしての対策を探してみました。 そこで見つけたのがWordpressのプラグインの「jetpack」の機能の一つの「モニター」を使います。 この機能はサーバがダウンした時にメールが届きます。 ▼使い方ですが、まずはプラグインをインストールして有効にします。 ▼インストールが終わると左のメニューに「jetpack」が表示されているのをクリックします。 ▼機能の一覧に「モニター」を選択します。 ▼「有効化」を選択します。これでモニター(監視)が始まっています。 監視の間隔は5分間隔です。サーバがダウンした時と復旧した時にメールで通知されます。 ▼実際にサーバをダウンさせて復旧させてみた時に届いたメールです。 この監視の設定でどのように監視されているか少し調べてみました。 意図的にpingがブロックされるようにファイアウォールを設定しましたが、ダウンとしての検知はありませんでした。 サーバのping監視だけであれば高負荷時のトラブルに対応が難しかったですが、接続した時に200番の応答などのWEBサービスを監視指定してくれているようです。 WordPressを使っている人でまだjetpackのモニターの機能を使っていない人はぜひ使ってもらいたいと思います。 jetpackにはphotonやSNS連携など無料で使える機能もあるのでいろいろ試してみてほしいと思います。

「Stinger3」モバイルで接続の時だけ表示するようにカスタマイズ

2014/08/19   -wordpress, サイト運営

Stinger3をカスタマイズ モバイル接続だけ表示する方法 当ブログで使用しているWordpressのテーマのStinger3のカスタマイズをしたので備忘録として残しておこうと思います。 カスタマイズした内容は、モバイルで接続したときにだけタイトルの上に広告やSNSボタンを表示するようにしてみました。 変更する前はこのような状態で特に何も表示していません。 では早速変更をしてみたいと思います。 まずは、header.phpを編集します。 ※コマンドラインではなくワードプレスの管理画面のテーマの編集からも編集可能です。 # vim /<ドキュメントルート>/wp-content/themes/<使用しているテーマ>/header.php <div id="main">の下あたりに下記のコードを追記して保存します。 <?php if(is_mobile()) { ?> <!--mobile_ads--> <div class="mobile_ads"> ここに表示させたいコードを記入 </div> <!--/mobile_ads--> <?php } ?> そして次に、CSSを編集します。 # vim /<ドキュメントルート>/wp-content/themes/<使用しているテーマ>/smart.css 以下の内容を追記します。 ※margin-leftは必要であれば調整してください。 .mobile_ads { /*margin-left: -10px;*/ padding-bottom: 5px; } そして、最後にhttpdのサービスを再起動します。 # service httpd graceful これで設定は完了です 左の画像が変更前で、右の画像が変更後の画像です。 今回僕はSNSで少しでも広まることを期待してSNSボタンを設置しました。 広告を表示させたい場合は広告のコードを用意してもらえればと思います。 参考になりましたでしょうか。もしお役にたちましたらせっかくなのでSNSボタンでシェアしていただけると幸いです。 参考にさせていただいたサイト http://n2apps.jp/

「feedly」のボタンを追加してみました

2014/08/15   -wordpress, サイト運営

ブログのPV(ページビュー)を増やすためにはRSSの購読者を増やすのも必要です。 そこで、RSSの購読者数を増やすために「Feedly」のボタンを設置しようと考えました。 Feedlyはおそらく現在は最もよく使われているRSSリーダーだと思うので、ボタンを設置すればRSS購読者が増えるだろうという浅い考えです。 「Feedly」のボタン設置方法 まずは「Feedly Insight」をインストール 僕はブログにWordPressを使っているので、まずはプラグインの「Feedly Insight」をインストールします。 WordPressを使っていれば「Feedly Insight」のショートコードを使えるので簡単にボタンを設置することができます。 まずは、WordPressの管理画面のプラグインから「Feedly Insight」を検索してインストールを行います。 インストールが完了すると管理画面にFeedly Insightの項目が増えるので、設定を選択して、「Feedly ボタン用の css を出力する」にチェックを入れて、RSS フィードの URLの欄に「http://ドメイン名/feed/」を入力します。 これで、Feedly Insightのインストールと設定が完了です。 そして、Feedly Insightの設定が完了することで、以下のショートコードやPHPのプログラムを使用して購読者数を表すカウンター付のボタンを設置することができます。 ■横長のボタン  // ショートコード // phpであれば <?php do_shortcode( '' ); ?> // テンプレートタグ <?php if ( function_exists( 'fi_the_button' ) ) fi_the_button(); ?> ■四角い箱型のタイプ // ショートコード // php であれば <?php do_shortcode( '' ); ?> // テンプレートタグ <?php if ( function_exists( 'fi_the_button' ) ) fi_the_button( 'vertical' ); ?> ■小さくまとめるタイプ // ショートコード // php であれば <?php do_shortcode( '' ); ?> // テンプレートタグ <?php if ( function_exists( 'fi_the_button' ) ) fi_the_button( 'small' ); ?> といった感じで簡単にFeedlyのボタンを設置することができます。 ボタンを追加する 僕はWordpressのテーマにstinger3を使っています。 このテーマは既存でFaceBookなどのボタンは設置されているので、そこにFeedlyも追加します。 追加方法は管理画面の[外観]-[テーマ編集]からsns.phpを選んでコードを追加します。 ※追加の方法はワードプレスのテーマによって異なります PHPのファイルに書き込むのであれば以下のコードを追加すれば問題ないと思います。 <li> ...

「AmazonJs」のCSSをカスタマイズをしてみました

2014/08/10   -wordpress, サイト運営

こないだWordPressのテーマのcssを編集していたら変なことになってしまいました。 変更したところは、スマホ用のcssでh4タグのbackground-colorを変更したらamazonjsのタイトルの背景が同じく変わってしまいました。 画像の左が変更前で、右が変更後の背景がおかしくなってしまった状態です。 下の画像が僕のブログのh4タグですが、ここの色がamazonjsの背景色にも適用されているようです。 投稿文の中のh4タグの背景は維持したいので、amazonjs側のスタイルシートを変更できないか調べてみました。 そうすると、2つの方法を見つけました。 1、amazonjsのプラグインの機能の「Use Custom Css」を有効にする。 2、amazonjsのcssを直接編集する Use Custom Cssを有効にする まずは「Use Custom Css」の方法を説明します。 こちらはプラグインの設定の画面から「Use Custom Css」にチェックを入れます。 そして、以下のディレクトリにamazonjs.cssを新規作成します。 # vim /<サーバごとのドキュメントルート>/wp-content/themes/<使用しているテーマ>/amazonjs.css cssファイルに書くサンプルコードは以下のような感じです。適宜変更してみてください。 @CHARSET "UTF-8"; .amazonjs_item { border:1px solid gray; } amazonjs.cssの保存が終わると、httpdの再起動が必要です。 # /etc/init.d/httpd graceful ここまでの流れが「Use Custom Css」を有効にしたときの変更方法です。 amazonjsのcssを直接編集する 僕はこちらの方法を使っています。上の方法だと初めからコードを作成するのが手間そうです。 こちらのほうが現在の設定を踏襲しつつ必要な分だけの変更で済みそうです。 編集するファイルは以下のファイルです。 # vim /<サーバごとのドキュメントルート>/wp-content/plugins/wp-amazonjs-0.7/css/amazonjs.css ※バージョン 0.7.3では以下のパスに変わっていました。 # vim /<サーバごとのドキュメントルート>/wp-content/plugins/amazonjs/css/amazonjs.css (変更前 左の数字は行番号です) 50 .amazonjs_item .amazonjs_info h4 { 51 margin: 0 0 5px; 52 padding: 0; 53 font-size: 1.2em; 54 font-weight: bold; 55 clear: none; 56 border: none; 57 } (変更後 左の数字は行番号です) 50 .amazonjs_item .amazonjs_info h4 { 51 margin: 0 0 5px; 52 padding: 0; 53 font-size: 1.2em; 54 font-weight: ...

WordPress Photonプラグインを設定。ページの表示速度が速くなる?!

2014/05/15   -wordpress

Wordpress Photonでサイトの表示速度の向上を実施 一日のPVが500未満でまだまだ弱小ですが、最近はおかげさまでブログのアクセス数も伸びてきました。 サーバの負荷は余力がまだまだありますが、グーグルアナリティクスのサイトの速度が悪くなってきたので対策が必要になってきました。 サイトの表示速度はSEO対策としても重要とされているので、サイトの表示速度が早くなる方法を探してみました。 サイトの速度が遅くなる主な原因は画像の表示に時間がかかっていることが多いのでそこを改善するようにしてみました。 こういった時によく使われる方法は、CDNを使うことが多いです。 CDNとは コンテンツデリバリネットワーク(Contents Delivery Network, CDN)とは、Webコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。 90年代以降ネットが一般に普及するにつれ、大手サイトからのリンクやテレビといった他メディアからのリンクにより、通常想定されていない大量のユーザーがサイトへ集中し、反応が遅くなったり、まったく応答不能になること(フラッシュクラウド効果)が多くなってきた。このような現象に対処する場合、サーバを一ヶ所だけに置くのではなく、地理的・バックボーン的に分散させるのが効果的である。同一のコンテンツを多くのサーバでミラーする手段としては、単純なDNSラウンドロビンから、P2P、地理情報を加味した複雑な配信技術までさまざまなものがあり、研究、実用化がなされている。 CDNを用いることにより、Webのみならず、大容量アプリケーション、音楽、動画の配信やオンラインゲームといったブロードバンドのコンテンツを配信することが安定かつ低コストで行えるようになる。そのためビジネス分野において注目されている。 要は環境の良いインフラ上にあるサーバに画像ファイルなどを設置してそこから画像を取得する仕組みといった感じです。 photo credit: 5Volt via photopin cc 無料で使えるCDNサービスを探してみる CDNを探している時に、ブログを運営している人は一度や二度は以下の2つのサービスを見たことがあると思います。 CloudFlare(クラウドフレア) (クラウドフレアの画像) CloudFlareを使っている人は多いと思いますが、今回僕は使用しません。 なぜなら 以前に使ってみたときに遅くなった 障害がたまにある 無償プランには制限がある といったことがありました。 Photon では、どのCDNサービスを使用しようかと思うと、Photonを使います。 PhotonはWordpress.comを運営している、automattic社のプラグインJetPackにある機能の一つです。 僕のブログはWordpressを使っているので相性がいいかも?!と考えました。 それに、プラグインを無効にするだけでCDNを使わず、自分のサーバから画像を取得するようにできるので障害が発生してからの復旧が早いです。 Photonをインストールしてみる Photonを使うには主に以下の手順を行います。 jetpackプラグインをインストール wordpress.comと連携 jetpackの認証 Photonを有効にする ▼ jetpackプラグインをインストール ▼ wordpress.comと連携 ▼ jetpackの認証 ▼ Photonを有効にする これだけでPhotonの設定が完了です。CloudFlareの場合だと、ドメインなどネームサーバの設定変更が必要になるので設定が煩雑ですが、Photonの場合は本当に簡単です。 Photonがちゃんと機能してるかを確認するには、サイトをソースで開いてみるとよくわかります。 画像のリンクにi1.wp.comと入っていればCDNが働いています。 http://i1.wp.com/zibunlog.com/wp-content/uploads/2014/05/medium_10443708943.jpg 変化を計測してみる 計測のためにはGTmetrixを使います。 まずは、Photonを使っていない状態。 それから、Photonを使った状態で計測。 結果的には0.3秒だけ速くなりました。 正直に言うと、もっと劇的に変化があるのかと期待していましたが、Googleから評価であるPage Speed Gradeが、CランクからBランクにアップしたので良しとします。

【WordPress】stinger3forFANS を使ってみた

2014/05/05   -IT, wordpress, サイト運営

僕がワードプレスのテーマで愛用している「STINGER」で新しいデザインがリリースされたのでさっそく使ってみました。 新しいテーマへの移行を簡単に説明してみたいと思います。 新しいテーマは2種類あって「STINGER for FAN」と「STINGER for LADY」の2種類があります。 今回僕は「STINGER for FAN」の方を使います。 まずは、テーマのダウンロードですね。 以下のURLのページからダウンロードが可能です。 http://stinger3.com/fan/ テーマを入手するにはSTINGERの作者のENJILOGさんを何らかのSNSでフォローすることが必要になります。 SNSでフォローをするとENJILOGさんの過去のつぶやきを見ることができるので、その中からパスワードを確認することができます。 パスワードを確認してダウンロードページでテーマをダウンロードしてください。 後は他のテーマと同様にワードプレスのテーマをインストールし有効にします。 テーマをインストールするだけで、一応は使うことができますが、変更する前のバージョンで使っていた設定がいろいろ抜けているので修正する必要があります。 photo credit: Huasonic via photopin cc まずはスタイルシートの変更 パソコンで表示するスタイルシートの「style.css」と、スマートフォンなどをレスポンシブ対応をさせるための「smart.css」の変更が必要です。 バーチャルホストの設定が各自異なると思いますが、二つのスタイルシートは "/<各自の設定のドキュメントルート>/wp-content/themes/stinger3forFANS/" のパスに保存されています。 古い環境から「style.css」、「smart.css」のcssのコードなどを必要な分だけ新しい環境のスタイルシートに移します。 僕の場合は各スタイルシートの最下行にオリジナルのコードを保存していたので、その分だけコピー&ペーストで済んでいます。 あとは、パソコン画面のフォントでは「メイリオ」が好きなので、「style.css」のこちらの行を意図的に変更させています。 (変更前)font-family: 'Bitter', helvetica, osaka, "MS PGothic", sans-serif; (変更後)font-family: メイリオ, Meiryo, 'Bitter', helvetica, osaka, "MS PGothic", sans-serif; 画像ファイルの同期 新しいテーマを有効にするだけでは、h3タグなどで使用していた画像が見つからず表示することができません。 なので、画像ファイルを新しい環境へ同期する必要があります。 FFFTPなどのツールでコピーする方法もありますが、僕は簡単にコマンドで実行しました。 rsync -azv /<各自の設定のドキュメントルート>/wp-content/themes/stinger3ver20131012/images/ /<各自の設定のドキュメントルート>/wp-content/themes/stinger3forFANS/images/ このコマンドの簡単に説明すると rsync -azv 同期元 同期先  といった形になり、同期先に無いファイルだけ同期元からコピーをしてくれます。 アイキャッチなどの画像はワードプレスの各テーマの共通のディレクトリに保存されているので同期をする必要はありません。 /<各自の設定のドキュメントルート>/wp-content/uploads ナビゲーションを設定 新しいテーマを有効にしただけではナビゲーションが抜けているので再設定が必要です。 ワードプレスのダッシュボードから、「外観」-「カスタマイズ」の設定からナビゲーションを有効にします。 変化を確認してみる これまでの設定で設定は一応完了です。 トップページのタイトル間が画像の縦の長さに合わせてまとまりが良くなりさらに罫線が入り、ウィジェットのタイトル観にも罫線が入るようになっています。 そして、僕がこの新しいテーマを使おうとした理由がスマートフォンのトップページの変化です。 以前のバージョン stinger3forFANS 比べてみると一目瞭然ですが、新しいバージョンの「stinger3forFANS」では画像の横に件名(サブジェクト)が入り、出だしの文章も無くなりかなりすっきりしていい感じの状態です。 新しいバージョンのほうが一度に数件の件名を確認できるし、以前からこのようなテーマを探していたのですごく気に入っています。 STINGERを調整してこのような形にしたいと思っていた矢先にSTINGERの作者のENJILOGさんからリリースされたので本当に運が良かったです。 GTmetrixでサイトの評価を確認してみると実は以前のバージョンのほうが少し良かったはもったいない気もしますが、ENJILOGさんには本当に感謝しています!! それにしても、ENJILOGさんはこのような高品質のテーマを無償で提供してくれるのでしょうか?! 僕も、いつかはテーマを自作できるようならねば!

WordPress 端末ごとにテーマを切り替えることができるプラグイン

2014/03/21   -wordpress, サイト運営

ワードプレスのテーマにはStinger3を利用していますが、タブレットで開くとスマートフォンと同じモバイル用のテーマでページが表示されます。 下の画像はNexus7でページを表示したときの画像です。画像の横の空白が少し広いのが気になります。 タブレットではスマホとは違うテーマで表示したいと思っていた時に、あかめ女子さんのブログで便利そうなワードブレスのプラグインが紹介されていたのでさっそく使ってみました。 「Multi Device Switcher」というプラグインです。 各デバイスのユーザエージェントを判別してワードプレスのテーマを振り分けてくれる優れものです。 photo credit: Andrew Huff via photopin cc インストールしてみます。 プラグインの新規追加のところに「Multi Device Switcher」を入力してプラグインをインストールします。 プラグインの一覧から「Multi Device Switcher」の「設定」を選択します。 ここのページで各デバイスごとに使うテーマを選択ができます。 「ユーザーエージェント」の項目ではユーザーエージェントをどのデバイスとして扱うかを設定することができます。 WEBサーバーのログを見たことがある人はすぐ分かると思いますが、下のログに表示されている赤い個所がユーザーエージェントを表しています。 "http://zibunlog.com/" "Mozilla/5.0 (Linux; Android 4.4.2; Nexus 7 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Safari/537.36" 僕の場合はタブレット用のテーマに「Ribbon」を選択してみました。タブレット用にもStinger3を使っていた時より画像と文字の位置のバランスが良くなった感じがします。 まとめ 「Multi Device Switcher」を使えばデバイスやユーザーエージェントごとにワードプレスのテーマが変更できるのですごく便利です。 でも、パソコン、タブレット、スマホのそれぞれのスタイルシートの変更が必要になるので、テーマを分け過ぎにも注意が必要かなとも思いました。

WordPressのバックアップですが、スタンバイ機を作っているような感じです。

2014/01/13   -wordpress

久しぶりに技術系の投稿です。 僕のブログは「お名前.com」のVPSのサーバにWordpress(ワードプレス)をインストールしている環境です。 これまでは、サーバのバックアップは全く取っていなかったので、今回は自己流のバックアップの方法をご紹介したいと思います。 巷では、Wordpressのプラグイン機能で「BackWPup」などがありますが、僕はスクリプトで自己流のバックアップを作ってみました。 方法は、メインで使用している「お名前.com」のサーバから、「KAGOYA」のVPSのサーバに必要なデータをバックアップする方法をしています。 なので、必要なサーバ台数は最低でも2台必要になるので、もし同じ方法をとりたいと思った人がいたら別途サーバを用意してください。 まずは、バックアップ先のサーバにはLAMP(Linux、Apache、MySQL、PHP)を用意する必要があります。 結局、僕のバックアップ方法は簡単に言うと、同じコンテンツのサーバをもう一台用意してしまう形になっています。 photo credit: Phil Oakley via photopin cc LAMP環境の構築を簡単に説明 まずは、バックアップ先となる「KAGOYA」側のサーバにLAMP環境を用意しておきます。 ・必要なリポジトリと開発ツールなどをインストール [root@KAGOYA]# cd /usr/local/src [root@KAGOYA]# wget http://ftp-srv2.kddilabs.jp/Linux/distributions/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm [root@KAGOYA]# rpm -ivh epel-release-6-8.noarch.rpm [root@KAGOYA]# wget http://rpms.famillecollet.com/enterprise/remi-release-6.rpm [root@KAGOYA]# rpm -ihv remi-release-6.rpm [root@KAGOYA]# wget http://pkgs.repoforge.org/rpmforge-release/rpmforge-release-0.5.3-1.el6.rf.x86_64.rpm [root@KAGOYA]# rpm -ihv rpmforge-release-0.5.3-1.el6.rf.x86_64.rpm [root@KAGOYA]# yum -y update && yum -y groupinstall "development tools" ・Apache(アパッチ)をインストール(yum) [root@KAGOYA]# yum -y install httpd httpd-devel [root@KAGOYA]# /etc/init.d/httpd start [root@KAGOYA]# chkconfig httpd on ・MySQLサーバをインストール(yum) [root@KAGOYA]# yum -y install --enablerepo=remi mysql mysql-devel mysql-server [root@KAGOYA]# /etc/init.d/mysqld start [root@KAGOYA]# chkconfig msyqld on ・PHPをインストール(yum) [root@KAGOYA]# yum -y install php php-gd php-cli php-xml php-mbstring php-fpm php-common php php-devel php-gdphp-mysql php-pecl-memcache php-pdo php-bcmath ...

かなり便利! WordPressプラグイン「AmazonJS」をインストール

僕もブログを作っている中で、アマゾンの商品を紹介していることが多くあります。 これまでは以下のようにアマゾンアソシエイトからリンクやバナーを利用して紹介をしてきました。 確かにこれでも問題はないのですが、少しでも多くのクリック数を得るためにはやはりデザインも良くする必要があります。 そこで、見つけたのが「AmazonJS」というWordpressのプラグインです。 今回は「AmazonJS」のインストールと設定方法を書いていこうと思います。 AmazonJSをインストール ※以降の設定手順を進めていくには、「アマゾンアソシエイト」と「Amazon Web Service」の登録が必要になりますので、あらかじめIDなどは取得をしておいてください。 まずは従来通りWordpresの管理画面から、プラグインのインストール画面で「AmazonJS」を検索して、インストールをします。 インストールが完了してからは、プラグインを有効化にします。 プラグインを有効にした後は、管理画面から「設定」->「AmazonJS」を選択します。 AmazonJSの設定画面が表示されるので、「Product Advertising APIの設定」の項目で、 「アクセスキーID」、「秘密アクセスキー」 を入力します。 アクセスキーなどの取得はこちらから取得することができます。 続いて「アソシエイトタグの設定」の項目で、「Amazon.co.jp」の項目を入力します。 ここで入力する値は、 アマゾンアソシエイトにログインした後の画面左側に表示されているIDを入力すれば大丈夫です。 「Product Advertising APIの設定」と「アソシエイトタグの設定」の入力が終われば設定を保存してください。 AmazonJSを使ってみる 投稿画面を開くとアマゾンのマークが追加されていることが確認できると思います。 そのボタンを押すと検索画面が表示さるので、表示させたい商品のキーワードなどを入力して「検索」をクリックします。 そうすると商品の一覧が表示されるので、商品を選択して、「挿入」をクリックすれば完了です。 もしエラーが表示されれば 商品の検索中に、「Amazon APIからのレスポンスをパースできません」というようなエラーが出て検索できない場合、以下の2点を注意深く確認してください。 ・ 「Product Advertising APIの設定」と「アソシエイトタグの設定」の入力に間違いがないこと ・ アクセスキーのステータスがちゃんと有効になっていること まとめ ブログを運営していればアマゾンなどのアフィリエイトのリンクを使用している人は少なくないはずです。 せっかくブログにリンクを張って、多くの人にリンクをクリックしてもらうためには、デザインは重要な要素になります。 そこで、今回のAmazonJSは商品の検索もかなりスムーズにできるうえに、きれいなリンクも作成してくれるのですごく便利な機能です。 実際に僕が過去に使っていたアマゾンアソシエイトのリンク&バナーと、AmazonJSを比較してみると一目瞭然です。 まずこれがアマゾンアソシエイトのリンク&バナーの形式 武器としての書く技術 そして、これがAmazonJSを使ったときの形式です。 どちらの方が情報量が多くなっていたり、見ている人の注意をひきつけるかは見ての通りだと思います。

楽天からアマゾンの広告に変えたらサイトのパフォーマンスがよくなった

僕はブログにはWordpressを使っていてテーマにはSTINGER3を利用していて、特にテーマのせいではないのですが、いつもページの表示が遅く感じて悩んでいました。 SEO的にもサイトの表示速度は速いほうが良いので、改善を試してみました。 宣伝【iPhone対応無料ゲーム】 斬-Xan- 戦国闘檄・無双伝 まずは現状の確認 改善前の僕のブログサイトの評価を恒例のGTmetrixで計測をしておきます。 計測結果は以下の通りです。 Googleの評価を表している 「Page Speed Grade:」 が Cランク Yahooの評価を表している 「YSlow Grade:」 が Dランク ページの表示速度を表している 「Page load time:」 は 5.26秒 という全く良い状態ではありませんでした。 どこかで見た情報ではページは4秒以内に表示が完了しないと、ユーザはどこか他のサイトに移動してしまうというのも見たことがあるので、それではいくら内部対策をしていてもページビューが伸びなくなります。 そこで何が問題になっているのかを確認します。 評価が表示されているページの中央ぐらいのところに、Timelineのタグがあります。そこをクリック。 そこには、どの処理がどれだけの時間がかかっているかを表示しています。 その中から時間がかかっているものを洗い出しをします。僕の場合は目に付いたのが以下の対策の3点になります。 1つ目の対策 1つ目は、トップページのヘッダー画像です。 下の画像の赤枠が、僕のブログのトップページのヘッダー画像の所要時間で、時間を見てみると、967msの時間がかかっています。 「ms」とは1000分の1秒を表しています。1000ms=1秒となりますね。 僕のブログのヘッダー画像はPNGファイルで、自分で作成して背景などは透明にしたのですが、JPGよりかは重たくなるみたいです。 ということで、こちらもよく利用するサイトですが、tinypng.comでPNGファイルを圧縮します。 実行結果はご覧のとおりですが、50.9KBあったファイルサイズが63パーセントも削減し、18.7 KBになりました。 2つ目の対策 2つ目はこちらもPNG画像ですが、画面右側に設置しているFeedlyで使用している画像です。 この画像も自分で加工して作ったのですが、ファイルサイズに問題があるのかもしれません。 表示するための時間も942msでした。 ということなので、tinypng.comで圧縮しておきます。このファイルに至っては55パーセントほど削減ができました。 3つ目の対策 3つ目は楽天のアフィリエイトの広告です。 これはいつも気になっていたのですが、サイトを開くたびに画面の右側で渦を巻いて少し時間が経ってから広告を表示していました。 渦を巻いているときはロードしている時だと思いますが、少し時間がかかりすぎです。 Timelineのトータルの時間を見ても635msなので少し気になる感じです。 そこで、楽天の広告はやめてAmazonの広告と差し替えました。 再計測をしてみる これまでの3点の対策でどこまでサイトパフォーマンスが改善されたかを計測してみます。 計測結果は以下の通りです。 Googleの評価を表している 「Page Speed Grade:」 が Bランクへランクアップ! Yahooの評価を表している 「YSlow Grade:」 が Cランクへランクアップ! ページの表示速度を表している 「Page load time:」 は 4.58秒で何とか4秒台に! 全体的に状態が良くなりました! まとめ 些細なことなのかもしれませんが、やっぱり画像はできるだけ圧縮をして容量を小さくする必要があります。 今はtinypng.comなど無料で使えるサービスが多いので積極的に使っていくことをお勧めします。 またアフィリエイトの広告はjavascriptを使用している物が多いですが、javascriptのプログラムは処理が重たくなる時が多いので利用するには注意が必要ですね。 それから、表示速度3秒台を目指してこれからも、まだまだ改善のしていかなくてはいけません。

WordPressプラグイン「WP to Twitter」でTwitter(ツイッター)と連携

プロが選ぶ WordPress優良プラグイン事典 私も、当ブログを運営しているので、少しでも多くの人に広げたいのでプラグインの「WP to Twitter」をインストールしてみました。 「WP to Twitter」のインストール プラグインの"新規追加"をクリックして検索の入力欄に "WP to Twitter" を入力して検索をします。 検索結果に "WP to Twitter" が表示されるので、"いますぐインストール""をクリックします。 接続情報の画面に変わりますので、ユーザ名とパスワードを適宜入力をしてインストールを開始してください。 インストールが完了したら"プラグインを有効化"をクリックしてプラグインを有効にしてください。 「WP to Twitter」の設定 設定メニューの一覧に "WP to Twitter" が追加されているのでクリックをします。 "Twitterと連携" の項目の4つの項目があるので、入力欄に情報を入力して "Twitterと連携" のボタンをクリックしてください。 ・Consumer Key ・Consumer Secret ・Access Token ・Access Token Secret ※まだKeyなどの情報を取得していない方はこちらから申請をしてください。 Keyなどの情報の入力が完了をすると、ツイッターとの連携もできるようになっています。 新規投稿をしてみてWordPressで投稿した内容がツイッターにも反映されていることを確認してください。 もしツイッターとの連携ができなかったとき おそらく下のようなエラーが表示されていると思います。 401 Unauthorized: 認証に失敗しました。 Your Twitter application does not have read and write permissions. Go to your Twitter apps to modify these settings. There's been an error posting your Twitter status! Visit your WP to Twitter settings page to get more information and to clear this error message. このような時はツイッター側で権限の設定ができていないことが多いので、権限の設定あたりを確認します。 もう一度、ツイッターの開発画面にログインをして "Home" → "My applications" から ...

Copyright© ZIBUNLOG , 2017 All Rights Reserved Powered by AFFINGER4.