Amazonアソシエイトで便利なWPプラグイン

ブクログのAmazonアソシエイトID設定が有料化で困った

昨日、ブクログからこんな内容のメールが来ていました。

 【変更内容の注意事項】
・実施日時以前に、無料プランでAmazonアソシエイトIDを設定をしたお客様におきましては、実施日から1週間後の【2013年11月6日(水) 15:00】の時点で「ブクログ プレミアム」へご加入頂いていない場合、設定を無効とさせて頂きますことを何卒ご了承下さい。

ブクログがプレミアムサービス開始に伴い、今まで利用していたamazonアソシエイトID設定が有料化となってしまうため、商品リンクが使用できなくなってしまうそうです。ちょっと突然だったので困りましたが、時間もないので商品リンクの設定を取り急ぎ実行することにしました。

続きを読む Amazonアソシエイトで便利なWPプラグイン

Google Web Fontsを使ってみる

サイトをプチリニューアル。

お気づきかもしれませんが、ちょっとだけサイトのデザインを変更しました。変更と言っても、ちょっと目に優しくないかんじだった背景色を、やわらかい感じのグリーンに変更し、サイトのタイトルなどを手書き風書体に変更した程度です。

lithium_ver02_02

Web Fontsを使ってみる

サイトのh1タイトルは画像ではなく、「Googel Web Fonts」というWeb Fontsを使用してみました。Web Fontsっていうのは、自分のパソコンに書体を設置せずにWeb経由でフォントのファイルを読み込んで表示させる技術です。

lithium_ver02_01

Google Web Fontsは、なんと!629書体も無料で利用出来ます。しかも「Word」「Sentense」「Paragraph」「Poster」と単語や文章でのプレビューでの表示に切り替えることも出来ます。

lithium_ver02_03

使用方法

1. 書体のスタイルを選択・・・とくに指定がなければそのまま。

2. 書体のキャラクターセットを選択・・・とくに指定がなければそのまま。

3. 書体のコードを選択・・・私は@importにて読み込むことにしました。

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);

4. 書体をCSSファイルに記述する

font-family: 'Roboto Slab', serif;

たったこれだけの指定をするだけです。Web Fontsは外部のファイルだと読み込み時間がかかったりするのかな?と思って敬遠していたのですが特に問題もなさそうです。

ロリポでWordPress使ってる人ご注意ください!

ニュースで取り上げるには遅いんだけど・・・

昨日、レンタルサーバー「ロリポップ」でWordPressを使用しているユーザーのサイトが数千件?数万件?ハッキングされ、サイトの内容が改ざんされるという恐ろしい事態が発生しました。

【緊急警報!!】ロリポップとGMOのinterQのWordPressが軒並み乗っ取られてます

犯人は「Krad Xin」という人物とのことで、ハッキングされた人によるとサイトが文字化けしたりハックしたというメッセージが上部ツールバーに表示されていたそうです。WordPressのフォーラムで話題になっております。

ロリポップの発表によると、ロリポップ自体がハッキングされたわけではなく、あくまでもWordPressのセキュリティの問題でユーザーの自己責任という認識のようです。

幸い私はTwitterでそのニュースを知り、すぐさま「.htaccess」ファイルに自分のIPアドレス以外がログイン出来ないように設定し、「wp-config.php」ファイルのパーミッションも「404」に設定しておきました。

今後さらなる攻撃が起こるかもしれないので取り急ぎお知らせします。また、ロリポップ以外の方も十分にお気をつけ下さい!!

Youtubeをレスポンシブデザインに対応

動画の縦横比率がおかしくなってカッコ悪いとお嘆きのあなたに!

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^)/

.video {</p>
<p>    position: relative;<br />
    width: 100%;<br />
    padding-top: 56.25%;<br />
}<br />
.video iframe {<br />
    position: absolute;<br />
    top: 0;<br />
    left: 0;<br />
    width: 100%;<br />
    height: 100%;<br />
}

WordPressの備忘録 Part2

関連記事の表示

以前はZenbackを使用していたのですが、関連記事の抽出の精度が高くないのと、自身の記事以外のリンクも掲載しないといけないので止めました。その代わりに「Yet Another Related Posts Plugin」通称:YARPPというプラグインを利用することにしました。このプラグインはカスタマイズ性も高く、精度が高いので評判です。サムネイル付きの一覧も考えていたのですが、どうもサムネイルがあるとごちゃごちゃしてしまうのでリスト形式にしました。 tarpp-config 関連記事の抽出は設定画面にて行うのですが、タイトル、内容、カテゴリー、タグの各項目の優先度、条件によりスコアを決定します。このスコア値を低くすれば多く表示されるようになるとのことですが、まだ使いこなせておらず、表示もまだまだな感じ。もう少しチューニングが必要のようです。

日本語のタグが量産されてしまうバグ

以前より私の環境下では日本語のタグが量産されてしまうというバグがあり、タグの積極的な運用を見合わせていたんですが、挙動を観察してみると、日本語のタグ設定後のスラッグの受け渡しが問題があるようでした。

調べていくうちに、どうやら原因は投稿時に、記事のスラッグをエントリータイトルから判別して自動設定するプラグイン「MT Style Postname」の原因であることが判明しました。ネットで検索すると、このPHPのバグを解決していらっしゃる方がいて、ようやく事なきを得たわけなのですが、原因はpostidやtagidなどは可変であるため、同じ入力文字列でも異なるスラッグが出力されてしまうそうで、この挙動が重複タグ問題を起こしているらしいとのことでした。

なるほど、自身の知識では詳細を理解するまでには至らなかったけど、WPのパーマリンクも「postname」で運用出来るようになって一安心。かつタグも日本語で利用できるので積極的に活用してみようと思います。これにより、先述の「YARPP」も設定しやすくなるかも。

ページナビゲーション導入

pagenavi

当ブログはそんなに記事が多いわけではないのですが、ユーザービリティと、読み込み負荷軽減を考えて「WP Page Navi」プラグインを導入しました。プラグインをインストールして、有効化する前に、ナビゲーションを表示させる箇所にPHPコードを記述します。

あとはCSSでナビゲーション・メニューの表示をカスタマイズすれば完成です。この「WP Page Navi」は簡単にスタイルを変更する別プラグインもあるらしいです。

 

WordPressの備忘録

久々にWordPressの話題です

最近、サイトのデザインを変更いたしました。といっても、デフォルトテーマ「TwentyTwelve」を少しいじっただけの話なんですがね。自分が利用させてもらっているテーマは、レスポンシブ・デザインに対応しているので、iPhoneやタブレットなど様々なユーザーの閲覧環境に合わせて最適な表示をすることができます。

iphone_view
iPhoneの表示。1カラムになり、サイドバーの情報は一番下に配置されます。

広告サイズをモバイルとPCで切り替える

しかし、サイドバーにある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

有効化するだけですので、設定も不要。

Last.fm RPSを入れてみた

音楽好きな人の、音楽好きな人のための自己満足プラグイン

WordPressのプラグイン「Last.fm RPS」を入れてみました。このプラグインは右サイドバーのようにLast.fmの最近の再生リストと、現在再生中の曲を表示するもので、「今、自分はこんなオサレな音楽聞いているんだぁ〜」と、ちょっと自己顕示欲の強いかんじの人にはおすすめです。

インストール後は、wp-plugins/lastfm_RPS/内にあるCSSファイルをいじれば表示をカスタマイズできます。自分はWPのテーマファイルの方のCSSを編集してLast.fmのロゴを非表示にしました。

似たようなプラグインも色々とありますが、これが一番カスタマイズしやすいかも。iTunesだけじゃなくて、iPhone版のScrobblerからも更新できるようになったから密かに嬉しいです。

lastfm_RPS_02
ウィジェットで各項目の表示・非表示を設定可能。
lastfm_RPS
一番上が再生中の曲で、下は再生リスト。

WordPressの動画埋め込みが簡単だった件について

ちょっと不勉強で恥ずかしいWordPressのネタ

今までWordPress(以下WP)への動画埋め込みは「Viper’s Video Quicktags(以下VVQ)」というプラグインを使用しておりました。Youtubeはもちろん、Vimeoなど主要な動画形式にも対応しているし、動画のサイズなども細く設定出来るすぐれものでした。しかし、VVQのプレイヤーのスキームが新しいタイプ(AS3でしたっけ)ではなく、古いタイプ(ちょっと立体的なやつです!)なことがずっと気になっておりました・・・。

こんなこと気にするのもどうかと思うのですが、自分としてはシンプルな方が好きなので、変更したいなと思い、動画の埋め込みについて色々と調べてみたら・・・実はWPのバージョン2.9以降はURLを記述するだけで適切なサイズで埋め込みしてくれたんですね!しかも、新しいタイプのプレーヤーの方に。

過去のタグは「Search regex」で一括置換!

というわけで、VVQのタグを「Search regex」というプラグインで一気に編集。[youtube]という埋め込みコード部分を一括で置換してしまいました。下の画像は上がVVQのもの。プレイヤーの再生部分が非表示にならなかったり、センターの再生ボタンの白フチがついてたり、上の動画のタイトル部分の文字が大きすぎたりしてちょっとダサイかんじ。下がWPの埋め込みプレイヤー。再生中はコントローラーも出ませんし、Youtubeのロゴがなかったりスッキリした印象です。やはり、シンプル・イズ・ベストですね。

yutube03
コントローラも非表示にならないし、タイトルの文字もでかい!
youtube04
再生中はスッキリ!

WordPress 3.5に更新。ついでにサイトもリニューアル。

blog01

WordPress 3.5 +「Twenty Twelve」

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ファイルなので、それだけを置いておきました。

blog02
同じ階層に設置します。

続いてCSSの設定。ファイルの上部に下記のような記述をします。

blog03
テンプレート名などは小文字オンリーです。

「Theme Name」は適当。「Template」は小文字オンリー(重要)です。そして、「@import」に親ファイルの読み込み設定も忘れずに。最後は管理画面内 →「外観」→「テーマ」を開いて、子テーマを有効化すれば完了です。

そんなわけで、ブログのリニューアルも無事完了!出来る限りシンプルにしたかったので結構気に入っています。WordPressの子テーマ設定は便利で良いですね。

WordPressの便利すぎるプラグイン

仕事でWordPressを使って、企業サイトを構築したときに活用したプラグインをご紹介させていただきます。大量にポストした記事を一括編集するのに便利なものばかりです。

CSV-importer

文字通り、CSVファイルの一括取り込みができるプラグイン。読み込ませるCSVファイルはプラグインのexampleファイルを参考ににすればOK。読み込ませたい項目だけ設定すれば良いです。

注意点としては項目は必ずダブルクォーテーション「”」で囲まれていなければならず、かつ、カンマ「,」で区切られている必要があります。エクセルなどからエクスポートしたファイルだと、文字コードがSHIFT-JISになっていると思うので、エディターで編集して、テキストエンコーディングを「UTF-8」に、改行コードも「LF」にしてください。

カスタムフィールドはそのままの名称を入れればOKです。カテゴリーはスラッグで。カンマで区切れば複数設定出来ます。

【参考例】
“csv_post_title”,”csv_post_post”,”csv_post_categories”,”カスタム”
“タイトル部分”,”ポスト例”,”Worpress,blog”,”カスタム”

【リンク】
http://wordpress.org/extend/plugins/csv-importer/

AStickyPostOrderER

投稿した記事を任意の順番に並び替えてくれるプラグイン。使い方は簡単で、【ツール】>【AStickyPostOrderER】で目的の投稿ページの一覧画面の右にある【Send To】に数字(順番)をいれて【Save to Refresh】で更新すればOKです。恐ろしく便利なのですが、現在最新版のWPには対応しておりません、と思ったらエンタナブログさんの方で、対応パッチの紹介と、ファイルも配布してくださっています。(感謝!)

【エンタナブログさん】
http://www.entanna.com/blog/2011/03/08-1816.html

Search Regex

そして、最後に紹介するのは究極の一括編集ツール。「Search pattern」に検索したい語句を入れ、「Replace pattern」に置換したい語句を入れればオッケーです。MySQLなどのデータベースを直接編集しちゃいます。「Regex」にチェックを入れれば正規表現も可能。これはすごい!!

【リンク】
http://wordpress.org/extend/plugins/search-regex/