WordPress 3.8（日本語版）がリリースされていたので、早速アップデートしました。自分はとくに問題ありませんでしたが、アップデートで問題が起こる可能性もあるので、DBのバックアップを忘れずに行いましょう。（プラグインは注意が必要です。）
今までのグラーデーションが施された、ブルー＆グレーな色調から、いきなりシンプル＆フラットな黒基調のインターフェイスへの変更に驚きました。ダッシュボードもご覧の通りです。文字などの視認性は向上しています。
投稿やメディアの読み込みスピード、画面表示スピードなども改善されていて、全体的にサクサクと機敏に動作するようになりました。
新しいテーマ「Twenty Fourteen」も追加されています。まだ使用していませんが、黒基調のシンプルでモダンな雰囲気に。写真メインで使用する人は良いかもしれませんね。
昨日、ブクログからこんな内容のメールが来ていました。
【変更内容の注意事項】
・実施日時以前に、無料プランでAmazonアソシエイトIDを設定をしたお客様におきましては、実施日から1週間後の【2013年11月6日(水) 15:00】の時点で「ブクログ プレミアム」へご加入頂いていない場合、設定を無効とさせて頂きますことを何卒ご了承下さい。
ブクログがプレミアムサービス開始に伴い、今まで利用していたamazonアソシエイトID設定が有料化となってしまうため、商品リンクが使用できなくなってしまうそうです。ちょっと突然だったので困りましたが、時間もないので商品リンクの設定を取り急ぎ実行することにしました。
お気づきかもしれませんが、ちょっとだけサイトのデザインを変更しました。変更と言っても、ちょっと目に優しくないかんじだった背景色を、やわらかい感じのグリーンに変更し、サイトのタイトルなどを手書き風書体に変更した程度です。
サイトのh1タイトルは画像ではなく、「Googel Web Fonts」というWeb Fontsを使用してみました。Web Fontsっていうのは、自分のパソコンに書体を設置せずにWeb経由でフォントのファイルを読み込んで表示させる技術です。
Google Web Fontsは、なんと！629書体も無料で利用出来ます。しかも「Word」「Sentense」「Paragraph」「Poster」と単語や文章でのプレビューでの表示に切り替えることも出来ます。
1. 書体のスタイルを選択・・・とくに指定がなければそのまま。
2. 書体のキャラクターセットを選択・・・とくに指定がなければそのまま。
3. 書体のコードを選択・・・私は@importにて読み込むことにしました。
[css]@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);[/css]
4. 書体をCSSファイルに記述する
[css]font-family: ‘Roboto Slab’, serif;[/css]
たったこれだけの指定をするだけです。Web Fontsは外部のファイルだと読み込み時間がかかったりするのかな？と思って敬遠していたのですが特に問題もなさそうです。
昨日、レンタルサーバー「ロリポップ」でWordPressを使用しているユーザーのサイトが数千件？数万件？ハッキングされ、サイトの内容が改ざんされるという恐ろしい事態が発生しました。
【緊急警報!!】ロリポップとGMOのinterQのWordPressが軒並み乗っ取られてます
犯人は「Krad Xin」という人物とのことで、ハッキングされた人によるとサイトが文字化けしたりハックしたというメッセージが上部ツールバーに表示されていたそうです。WordPressのフォーラムで話題になっております。
ロリポップの発表によると、ロリポップ自体がハッキングされたわけではなく、あくまでもWordPressのセキュリティの問題でユーザーの自己責任という認識のようです。
幸い私はTwitterでそのニュースを知り、すぐさま「.htaccess」ファイルに自分のIPアドレス以外がログイン出来ないように設定し、「wp-config.php」ファイルのパーミッションも「404」に設定しておきました。
今後さらなる攻撃が起こるかもしれないので取り急ぎお知らせします。また、ロリポップ以外の方も十分にお気をつけ下さい！！
WordPressでのカスタマイズ例です。Youtubeなどの動画をレスポンシブデザインに対応させるFitVidsという実に便利なjQueryがあるのですが、そのカスタマイズ例などを拝見していると、色々参考になることが書いてありました。まずは下記ご参照ください。
AUTOMATIC RESPONSIVE VIDEOS IN WORDPRESS WITH OEMBED
なるほど、色々とカスタマイズ出来そうですね。しかもこのFitVidsはWordPressプラグインまであるらしいので、それを使用すればオシマイ！という話ではあるのですが・・・しかし、私はあえてFitVidsは使用せずに、STEP3のfunction.phpをカスタマイズするところだけ参考にしました。iframeタグの前後に自動的にdivで囲ってあげるという部分です。
あとはCSSに下記を記述するだけ。「padding-top: 56.25%;」とするのは動画が16:9の比率だから。先ほどのfunction.phpを使って動画を投稿するたびに自動的に<div class=”video”></div>でサンドイッチするようになります。便利＼(^o^)／
[css].video {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}[/css]
以前はZenbackを使用していたのですが、関連記事の抽出の精度が高くないのと、自身の記事以外のリンクも掲載しないといけないので止めました。その代わりに「Yet Another Related Posts Plugin」通称：YARPPというプラグインを利用することにしました。このプラグインはカスタマイズ性も高く、精度が高いので評判です。サムネイル付きの一覧も考えていたのですが、どうもサムネイルがあるとごちゃごちゃしてしまうのでリスト形式にしました。 
関連記事の抽出は設定画面にて行うのですが、タイトル、内容、カテゴリー、タグの各項目の優先度、条件によりスコアを決定します。このスコア値を低くすれば多く表示されるようになるとのことですが、まだ使いこなせておらず、表示もまだまだな感じ。もう少しチューニングが必要のようです。
以前より私の環境下では日本語のタグが量産されてしまうというバグがあり、タグの積極的な運用を見合わせていたんですが、挙動を観察してみると、日本語のタグ設定後のスラッグの受け渡しが問題があるようでした。
調べていくうちに、どうやら原因は投稿時に、記事のスラッグをエントリータイトルから判別して自動設定するプラグイン「MT Style Postname」の原因であることが判明しました。ネットで検索すると、このPHPのバグを解決していらっしゃる方がいて、ようやく事なきを得たわけなのですが、原因はpostidやtagidなどは可変であるため、同じ入力文字列でも異なるスラッグが出力されてしまうそうで、この挙動が重複タグ問題を起こしているらしいとのことでした。
なるほど、自身の知識では詳細を理解するまでには至らなかったけど、WPのパーマリンクも「postname」で運用出来るようになって一安心。かつタグも日本語で利用できるので積極的に活用してみようと思います。これにより、先述の「YARPP」も設定しやすくなるかも。
当ブログはそんなに記事が多いわけではないのですが、ユーザービリティと、読み込み負荷軽減を考えて「WP Page Navi」プラグインを導入しました。プラグインをインストールして、有効化する前に、ナビゲーションを表示させる箇所にPHPコードを記述します。
あとはCSSでナビゲーション・メニューの表示をカスタマイズすれば完成です。この「WP Page Navi」は簡単にスタイルを変更する別プラグインもあるらしいです。
最近、サイトのデザインを変更いたしました。といっても、デフォルトテーマ「TwentyTwelve」を少しいじっただけの話なんですがね。自分が利用させてもらっているテーマは、レスポンシブ・デザインに対応しているので、iPhoneやタブレットなど様々なユーザーの閲覧環境に合わせて最適な表示をすることができます。
しかし、サイドバーにあるGoogle Adsenseが、iPadで表示したときに縮小されないので、サイドバーからはみ出てしまいます。Googeleの広告がレスポンシブデザインに対応してくれると良いのですが、現状は無理なので閲覧環境によって広告のサイズを切り替えるようにしました。
自分はPCで閲覧した場合の広告サイズが300ピクセル、モバイルでは200ピクセルといった具合に切り替えるようにしました。参考にしたサイトがこちらです。
［み］レスポンシブデザインのWordPressでAdSenseを切り替える方法
ユーザーエージェントを判別して自動で切り替えるわけですが、私はAdsenseの記述をサイドバーウィジェットにしているので、PHPを記述することができません。なので「PHP Code Widget」というプラグインを導入して投稿記事内でPHPを実行するように。ちなみに、このプラグインはインストールするとなぜか名称が「Executable PHP widget」となります。
それから、WordPressの記事の変更の履歴と、オートセーブですが、ずっと使用していると負荷が大きくなるので停止しました。wp-config.phpにリビジョン数を指定したり、停止する方法もありますが、プラグインで対応。
WordPress Disable Revisions and Autosave plugins
有効化するだけですので、設定も不要。
WordPressのプラグイン「Last.fm RPS」を入れてみました。このプラグインは右サイドバーのようにLast.fmの最近の再生リストと、現在再生中の曲を表示するもので、「今、自分はこんなオサレな音楽聞いているんだぁ〜」と、ちょっと自己顕示欲の強いかんじの人にはおすすめです。
インストール後は、wp-plugins/lastfm_RPS/内にあるCSSファイルをいじれば表示をカスタマイズできます。自分はWPのテーマファイルの方のCSSを編集してLast.fmのロゴを非表示にしました。
似たようなプラグインも色々とありますが、これが一番カスタマイズしやすいかも。iTunesだけじゃなくて、iPhone版のScrobblerからも更新できるようになったから密かに嬉しいです。
今までWordPress（以下WP）への動画埋め込みは「Viper’s Video Quicktags（以下VVQ）」というプラグインを使用しておりました。Youtubeはもちろん、Vimeoなど主要な動画形式にも対応しているし、動画のサイズなども細く設定出来るすぐれものでした。しかし、VVQのプレイヤーのスキームが新しいタイプ（AS3でしたっけ）ではなく、古いタイプ（ちょっと立体的なやつです！）なことがずっと気になっておりました・・・。
こんなこと気にするのもどうかと思うのですが、自分としてはシンプルな方が好きなので、変更したいなと思い、動画の埋め込みについて色々と調べてみたら・・・実はWPのバージョン2.9以降はURLを記述するだけで適切なサイズで埋め込みしてくれたんですね！しかも、新しいタイプのプレーヤーの方に。
というわけで、VVQのタグを「Search regex」というプラグインで一気に編集。［youtube］という埋め込みコード部分を一括で置換してしまいました。下の画像は上がVVQのもの。プレイヤーの再生部分が非表示にならなかったり、センターの再生ボタンの白フチがついてたり、上の動画のタイトル部分の文字が大きすぎたりしてちょっとダサイかんじ。下がWPの埋め込みプレイヤー。再生中はコントローラーも出ませんし、Youtubeのロゴがなかったりスッキリした印象です。やはり、シンプル・イズ・ベストですね。
WordPressを3.5にバージョンアップしたついでに、デフォルトテーマの「Twenty Twelve」を少しだけいじって、プチリニューアルをいたしました。「Twenty Twelve」は様々なデバイスでコンテンツを読みやすくなるように設計された「レスポンシブ・デザイン」対応のテーマということで、「rem」指定が使われています。もちろんCSS3未対応のブラウザのためにpxでの指定も併記しないといけません。それにしても、「rem」ってちょっとわかりづらいですよね。「1.142857143rem」と書いてあってもなんのこっちゃ？って感じです。でも、デフォルトテーマのスタイルシートには、きちんと解説が書いてあるのでご安心を！
例えば「Twenty Twelve」ではremのベースが14px、line-heightが24pxと設定されています。
ですので、16pxならば16÷14=1.142857143remになるということです。
さて、今回もCSSをいろいろといじっているわけなのですが、「Twenty Twelve」の元々のファイルは変更せずに、変更部分だけを子テーマを設定してみます。こうすることで、親のテーマが更新されても、せっかく設定したCSSなどが上書きされる心配がないからです。
やり方は超簡単!
「wp-content」の「themes」階層内に、適当なディレクトリを作り、更新が必要なファイルだけ設置します。自分はCSSファイルなので、それだけを置いておきました。
続いてCSSの設定。ファイルの上部に下記のような記述をします。
「Theme Name」は適当。「Template」は小文字オンリー（重要）です。そして、「@import」に親ファイルの読み込み設定も忘れずに。最後は管理画面内 →「外観」→「テーマ」を開いて、子テーマを有効化すれば完了です。
そんなわけで、ブログのリニューアルも無事完了！出来る限りシンプルにしたかったので結構気に入っています。WordPressの子テーマ設定は便利で良いですね。