【WordPress】「Vote for Trump!」はリファラスパム。対策はコレだ!

こんにちは。ちゃぼP(@chabo0429)です。

昨日から、このサイトに大量のアクセスが来ている状態になっております。

spam_trump01

こんな感じ。明らかにオカシイですね。

アクセス元を調べてみると・・・

 

spam_trump03

言語のところに変な文字列が!

「トランプに投票しよう!」的なヤツじゃんね、コレ。しかもgoogleを騙るという手口。ヤバイ匂いがするぞ!

「Vote for Trump! 」の正体はリファラスパム。さっさとカウントから除外しよう!

この明らかに怪しいアクセスは、リファラスパムと言って、こうやってGoogle Analyticsの解析画面から、アクセス元を辿ろうとするサイト管理者向けに仕掛けたスパム攻撃のようなのです。

どうやら発信元はロシアのようですが、気持ち悪いのでGoogle Analyticsの管理画面から、さっさとブロックしてしまいましょう。

 

画面上部の「管理」のところにある、「ビュー」の「フィルタ」のところで、以下のようにフィルタを追加します。

spam_trump02

  • フィルタの種類:カスタム
  • フィルタフィールド:言語設定
  • フィルタパターン:Secret.ɢoogle.com You are invited! Enter only with this ticket URL. Copy it. Vote for Trump!

これだけでとりあえずOKのようです。

過去の部分はサマリーから削除されないようですが、フィルタを設定した時点からはきちんと除外されている模様。

一旦コレで様子を見てみます。ここ最近、アクセスが急増している場合はチェックしてみてくださいね。

【WordPress】テーマ「マテリアル2」のβがお試し公開しているそうな!

こんにちは。ちゃぼP(@chabo0429)です。

本ブログでは、WordPress用テーマ「マテリアル」をベースにして、なんか色々カスタマイズしちゃっているわけでございますが、この度作者のNobuo(@Nobuo_Create)さんが、後継バージョンの「マテリアル2」を開発され、現在β版の公開をされているそうです。

http://wp-material2.net/

 

うぉ、サイドバーが左に来ているんだ!

かなり見た目が変わりましたね。なお、現在は試用してもらえる人を募集されているようで、色々な声のフィードバック後に正式版を公開されるようですよ。

「風の羅針盤」どうすんの?

で、このブログどうしようということになりますよ。そりゃね。

ただねぇ、かなりいじっちゃってるので、コレをまた最初から作り直すのはかなり根気がいる作業でございまして・・(笑)

今の見た目はかなり気に入って使っていますし、ま、トップページはほとんど変わっちゃっているので、どうなんかなと正直思ってしまっております。。

 

「ハミングバード」みたいな動的なテーマもイイな、なんて最近ちょっと思っていたりします。有料だけどね。

でもそうなるとほとんどオリジナルのカスタマイズは出来なさそうですから、それではつまらないかな、とも思っています。

でも、マテリアルは私のブログの礎ともなっているテーマで、カスタマイズを通して色々なことを学ぶことが出来ました。ファイル数もそれほど多くないし、カスタマイズはし易いテーマなんですよね。

 

ということで、しばらくはこのまま行くと思いますが、今後ともご贔屓に何卒よろしくお願いいたしますm(__)m

【WordPress】Mac用FTPアプリ「ForkLift」が今だけ無料なんだって!

こんにちは。ちゃぼP(@chabo0429)です。

WordPressでブログをカスタマイズしている人なら、

「必ずFTPアプリは用意して置かなければならない」

この意味はよくご存知でしょう・・

 

WordPress管理画面からのテーマのインストールや、記事の投稿はとくにFTPアプリは必要ありません。

ですが、ちょっとphpファイルを変更したり、プラグインファイルを修正したりする場合は、必ずFTPアプリを用意しておく必要があります。

というのも、万が一ファイルの編集に失敗した場合に、致命的エラーが発生し、ブログ全体が表示されなくなってしまう恐れが有るためです。

 

実はワタシは今までFTPアプリに限っては、WindowsPCにインストールしていたWinSCPというアプリケーションを使っていました。

その名の通り、Windows用のアプリなのですが、実にコレが使いやすく、日本語化もされていてしかもフリーソフト。

これ以上便利で使いやすいアプリはないと思っていますが、Mac用ってなかなか良いのがないんですよね。あっても結構お高い。

そう思っていたら、ナント普段有料のアプリがキャンペーンで「0円」というではありませんか!

コレはゲットしておくしかないですばい!!

有料アプリ「ForkLift」が通常2,400円のところ、只今0円!

ワタシもコレは初めて使いますので、明日からちょっとコレで色々とサーバの中を覗いてみます。

でも、なんか有名ブロガーさんも使っているアプリのようですので、コレは期待できそう!

WordPressブロガーでまだゲットされていない方は、無料のうちにゲットしておきましょう!!

【WordPress】プラグイン「SNS Count Cache」がver0.10.0にアップデート!

こんにちは。ちゃぼP(@chabo0429)です。

この風の羅針盤では、各種SNSのフォロワー数や、シェア数をカウントして表示しているわけですが、その全てはまるぼんさん制作の「SNS Count Cache」に絶賛依存しております。

直近では、Facebookのシェアカウントがいきなり無効になった事件がございましたねえ(汗)

SNS Count CacheでFacebookシェアがカウントされなくなった時の対処方

この時の原因はと言うと、シェア数取得の非公式エンドポイントAPIが廃止されたために発生した現象だったわけですけれども、これまでなんとか色々と回避策をとって、取得を行っていました。

この度、「SNS Count Cache」がVer0.10.0にアップデートされ、この不具合に正式に修正が加えられましたので、早速アップデートいたしました。

[試] WordPressプラグイン SNS Count Cache (Ver. 0.10.0)リリース | Pinterestシェア数対応、Facebookシェア数取得安定化等

SNS Count Cache Ver0.10.0からは、新たに「Pinterest」に対応

本バージョンから、新たに「Pinterest」シェアに対応したようです。

インストール後の設定画面でチェックを入れるだけで、シェアカウントが有効になるようです。

sns_count01001

ちなみに、シェア数は以下の関数で呼び出すことが可能です。

scc_get_share_pinterest()

Facebookカウント取得不具合正式対応!

そして、コレ。待ちに待った、というところですね。

Facebook公式のAPIは、「APP ID」と「APP Secret」を使用してカウントを取得しないとエラーになる確率が高く、これでなかなか取得がうまくいかなかったのですが、本バージョンからは「APP ID」と「APP Secret」を設定することが出来るようになりました。

sns_count01002

SNS Count Cacheの設定画面から、自分のFacebookページの「APP ID」と「APP Secret」を入力します。

Facebookアプリは以下から作成することができますよ!

https://developers.facebook.com/

試しに取得してみる!

さて、プラグインの設定を行って数分後。うまく取得できるでしょうか・・・?

 

 

 

 

 

sns_count01003

うまくいったーーー!

ヤッタネ!

「N/A」になっていくつか取得がうまくいかないページがあるみたいですが、まあ、気にしない(笑)

コレで安定してシェア数をカウントしてくれるでしょう。作者のまるぼんさんに感謝ですね!

【WordPress】Webフォントを使ってブログのフォントを変えてみたら、スゴくいい感じ!

今日はブログのフォントの話をひとつ。

普段ブログのフォントって、あまり意識している人はあまり多くないのではないかと思う。

だがブログに限らず、WEBサイトを表示する時のフォントは、表示する端末側にインストールされているフォントを表示するようになっている。

例えば、この「風の羅針盤」は、スタイルシート(style.css)で以下のように設定されている。

	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "MS Pゴシック", "MS PGothic", Sans-Serif;

見ての通り、スタイルシートで指定されたフォントで表示するように指定されている。

MacBookだと、「ヒラギノ角ゴシック Pro」というフォントで読み込まれるし、Windowsだと「メイリオ」だったり、「MS Pゴシック」だったりする。

MacBookのRetinaディスプレイは精緻で美しいが、画面だけでなく通常は表示するフォントもWindowsとは違っているのだ。

 

だが、ここで一つ問題が発生する。

それは「端末によって表示するフォントが異なる」ということだ。

まあ、文字なんて別に何でも変わりないと言ってしまえばそれまでだが、時折見かけるカッコいいフォントを自分のサイトでも使ってみたい、そしてできればMacだろうがWindowsだろうがモバイルだろうが、同じフォントで表示させてみたかった。

そこで今回はちょっと「Webフォント」なるものに挑戦してみた。

「Webフォント」はオンラインで公開されているフォント

ブラウザで表示されるフォントは「端末にインストールされているフォント」ということは既に触れた。だから、アクセスしてきた端末にインストールされているフォントが違えば、表示も変わるのは当然のこと。

だが、「Webフォント」を使うと、「端末にどんなフォントがインストールされているか」ということを考えずに、一律に指定したフォント、しかもインストールされていないフォントだって使うことが出来るというのだ。

そのために、今回「TypeSquare」というサービスを利用することにした。

なぜ、Webフォントを使うと端末に依存せずに一律に同じフォントを表示することができるのか。

 

その仕組はこうだ。

まずこのブログを例にすると、「風の羅針盤」のヘッダーを読み込む際に、オンラインのフォントを読み込むスクリプトを読み込ませる。

次に、サイト本体スタイルシートを読み込むとき、「Webフォント」の名前を指定しておけば、サイト上のフォントはすべてそのWebフォントで読み込まれる仕組みだ。

やってみると非常に簡単だったが、いくつか注意点があるので、合わせて紹介してみたい。

今回使うフォントは美しいフォントは「モリサワフォント」

ワタシが使いたかったカッコいいフォントは、有名な「モリサワフォント」というもので、実に多種多様なフォントが用意されている。

PCにプリインストールされているフォントとはまさに一線を画す、見やすく、美しいフォントがたくさん用意されている。その美しさは、モリサワのサイトを見れば一目瞭然だ。

そして、このモリサワが運営するのが「Type Square」というオンラインフォントのサービスなのだ。

 

まず最初に、「Type Square」のサイトでユーザー登録を行う。

web_font01

左側にある「新規登録」から登録作業に入る。

 

web_font02

続いて「ご利用申込み」を選択。

 

web_font03

規約の画面をスクロールし、

 

web_font04

「規約に同意」をチェックして次へ。

 

web_font05

web_font06

あとは、自分の情報を入力して次へ。その後登録したメールアドレス宛に、確認メールが届くので、メール本文のリンクをクリックしたら登録が完了する。

タグの貼り付けと、使用するフォントの選択

会員登録ができたら、次は専用ページでブログに貼り付けるタグの取得と、使用するフォントを選択する。

web_font07

先ほど登録したメールアドレスとパスワードを入力して、ログインする。

 

web_font08

ログインしたら、プランの内容が表示されるが、最初はまだ無料プランの状態だ。とりあえず月間1万PVまでは無料なので、このまま進む。

「プラン専用タグ」のところに、ブログの「header.php」に埋め込むタグが表示されている。下の「URLオプション」のところは、「デフォルトフォントを非表示」にするといい感じになるので、オススメする。

「クリップボードにコピー」ボタンをクリックし、ブログの管理画面から「header.php」を開き、

===ここにコピーしたコードを貼り付ける===
</head>

必ず/headタグの直前に貼り付けを行う。

 

web_font10

次に、「利用書体一覧」のところで、利用したいフォントを選択する。今回ワタシは「新ゴ R JIS2004」を使うことにした。

 

web_font11

次に、「利用サイトURL一覧」のところで、ブログのURLを登録する。これでType Square側の設定は完了となる。

スタイルシートへの定義

最後に、スタイルシート(style.css)へのフォントの定義を記述する。

ブログ管理画面から、style.cssを開き、冒頭のbody部分に、

html, body{
	font-family: "新ゴ R JIS2004";
}

と記述する。これで完成だ。

実際の表示の比較

さて、サイトの表示はどんな感じになるか比較してみよう。

web_font12

これがMacBookでの今までのフォント。「ヒラギノ角ゴ」フォントで表示されているのがわかる。

 

web_font13

続いてこちらはWIndows。フォントは「メイリオ」だ。シェアカウントの数字の部分や、文字の太さが微妙に異なる。

 

web_font16

そしてこれがWebフォント適用後のMacBookの画面。文字が若干細くなり、フォントが少し大きくなった感じがする。うーん、見やすくてカッコいい!

 

web_font18

こちらはWindows。フォントは同じWebフォントが表示されている。これで端末に左右されずに、常に同じフォントが表示される。

フォントも美しくて大満足だ!

さいごに。

アクセス端末に依存せずに美しいフォントでの表示を指定できる、Webフォント。

ただ、いくつか注意しなければならない点がある。

先ほど「無料プラン」という説明が出てきたが、無料で使えるのは月間1万PVまで。なので、無料で使うなら「テスト用」としてしかほぼ使えない。

1万PVを超えると、フォントは配信されなくなり、デフォルトに戻ってしまう。

月間100万PVまでなら、月額2,160円の課金でフォントが配信されるようになるので、無料プランで気に入れば課金プランに切り替えることが可能だ。

 

そしてもう一つ。フォントがオンラインで読み込まれるため、ページの読み込みに若干時間がかかることに注意しなくてはならない。

と入っても、何秒もかかるわけではないので、それほど気にならないかもしれないが、レスポンスを重視するサイトの場合は、課金プランに移行する前にしっかりと確認しておく必要があるだろう。

とはいっても、これだけ手軽に美しいフォントを手に入れることができるので、かなり魅力的なWebフォント。多種多様なモリサワフォントで、あなたのブログを少し人と違ったものにしてみてはいかがだろう!

SNS Count CacheのFacebookシェアがうまく動いてくれないので、別のWordPressプラグインを入れてみた!

こんにちは。ちゃぼP(@chabo0429)です。

先日、WordPress用プラグイン「SNS Count Cache」が突然の非公式APIエンドポイントの閉鎖に伴い、Facebookのシェアカウントが取得できなる現象が発生しました。

そのため、Ver 0.9.2の改造及びVer 0.9.3 Betaの導入でなんとかFacebookのシェアカウントをふっかつさせてみたという記事を書いたのですが、

Ver 0.9.2のカスタマイズ記事

SNS Count CacheでFacebookシェアがカウントされなくなった時の対処方

Ver 0.9.3 Betaの導入

SNS Count Cache v0.9.2でFacebookシェアカウント取得ができないのでbeta版をテスト中!

今現在、SNS Count Cacheのシェアカウントがどういう状況になっているかといいますと・・・

Step_by_Step01

残念ながら、やはりFacebookのカウントは取れないまま。。

最初はうまく行っていたんですが、しばらく経つとどうしてもカウント数を取得できなくなります。

「SNS Count Cache」でFacebookシェアカウント数が取れなくなる原因は、コール上限に達してしまうからというのが理由

なぜこういうことになるのかというと、今回から利用することにした公式のAPIエンドポイント「http;//graph.facebook.com」というAPIは、過大な負荷を避けるために、一定時間ごとのコール数(カウント取得のためのリクエスト)を制限しているから、というのが理由です。

それを回避するためには、「アクセストークン」という認証キーを使うことで、認証済みのアプリからのリクエストであることを都度申告をすれば、「600秒に600回」まではリクエストを受け付けるという仕様になっているとのこと。

ところが、「SNS Count Cache」はこのアクセストークンを使ったリクエストに対応していないため、あっという間にリミット上限に達して取得が不可になるということになったわけです。

この現象を回避すべく、この「アクセストークン」を使って取得できないか調べてみた

最初はSNS Count Cacheにこのトークンを実装できないかを調べてみましたが、あえなく挫折。そこで、別のプラグインを探してみたところ、ありました。アクセストークンに対応したシェアカウント取得用のキャッシュプラグインが!

それがこちら。

SNSのカウントをキャッシュするWordPressのプラグインを作成しました

「Step by Step Social Count Cache」というプラグインです。これを探し当てた時は半信半疑でしたが、実装はとっても簡単で動作も軽いので、速攻このブログでは実装してしまいました。

インストールはWordPress公式から

インストールは通常の管理画面の「プラグインの追加」から行います。

Step_by_Step02

「Step by Step Social Count Cache」で検索すれば出てきます。検索に出てきたら、「今すぐインストール」→「有効化」をクリックして有効化します。

 

Step_by_Step03

「設定」→「Step by Step Social Count Cache」を選択します。

 

Step_by_Step04

最初に、Facebookのアクセストークンを入力します。アクセストークンの入手方法については、Facebookにログインした状態で、Facebookデベロッパーサイトにアクセスします。

https://developers.facebook.com/

アプリが追加されていれば、アプリIDなどが表示される画面が出てくるはずです。

Step_by_Step07

「ツール&サポート」をクリックします。

 

Step_by_Step08

「Access Token Tool」をクリックします。

 

Step_by_Step09

画面最下部に「App Token」をコピーして、「Step by Step Social Count Cache」の「App Token」に入力すればOKです。

※このアクセストークンの取得は、最初に取得するためにはちょっと面倒な作業をしなければならないので、この部分については、後日記事にしてご紹介する予定です。

 

Step_by_Step05

カウントキャッシュをするSNSと、取得間隔を設定します。基本的にデフォルトのままでいいと思います。

実際に取得できているか、ページに表示させてみた

設定は実はコレだけ。これですぐに取得を始めてくれます。

ただ、SNS Count Cacheのようにダッシュボード機能は実装されていないんので、実際の表示ページに関数を入れて、表示させてみるしかありません。

「Step by Step Social Count Cache」では、各SNSごとにそのカウント数を個別に表示する関数及び合計を表示する関数が定義されているので、それを「single.php」の表示させたいところに記述すれば、表示されるはずです。

試しに、「single.php」の上部にあるカウントの部分を以下のように書き換えてみました。

<!--
		<?php if(function_exists('scc_get_share_total')) echo scc_get_share_total(); ?>
-->
		<?php
		$socal_count = sbs_get_all();
		echo $socal_count["all"]; // 全てのSNSの合計を返す
		echo $socal_count["twitter"];
		echo $socal_count["facebook"];
		echo $socal_count["google"];
		echo $socal_count["hatena"];
		echo $socal_count["pocket"];
		echo $socal_count["feedly"];
		?>

1〜3行目は今までのSNS Count Cache用の関数なので、コメントアウトし、その下に「Step by Step Social Count Cache」用の関数を書き加えました。この状態で、先日のバンガードのカメラバッグの記事を表示させてみると・・・

 

Step_by_Step06

なんかとんてもない数が表示されていますが、これは※の部分がシェアカウントの合計。その右側の①がTwitter、②がFacebook、③がGoogle+、④がはてなブックマーク、⑤がPocket、⑥がFeedlyです。つまり、①〜⑤までの合計は※に表示されています。

ちゃんとすべてのSNSシェアカウントが取得できていますね!

あとは、合計のカウントだけを表示させたいのであれば

echo $socal_count["all"];

以外を削除すればいいですし、逆に個別に表示させたいのであれば、それぞれの関数を適宜記述するだけです。

ちなみにこのプラグインには標準でバルーン表示やスクエア表示などのデザインテンプレートが用意されていて、簡単に綺麗なシェアカウントを表示することも出来ます。

さいごに。

「SNS Count Cache」はとても優れたプラグインですが、Facebookのシェアカウント取得に関しては、APIの仕様が変わることがない限り、ちょっと運用だけではトラブルの回避は現状難しそうな気がしています。

アクセストークンを実装できれば、元に戻したいと思いますが・・・

ちなみに、フォロワー数の取得に関しては、引き続きSNS Count Cacheを使用しますので、当面は二重の運用です。

ただ、「Step by Step Social Count Cache」は今のところ非常に安定して動いているので、しばらくはこちらを使うことになりそうです。

ぜひ同じ悩みを抱えている方は、お試しくださいね!

SNS Count Cache v0.9.2でFacebookシェアカウント取得ができないのでbeta版をテスト中!

こんにちは。ちゃぼP(@chabo0429)です。

当ブログでも導入しているWordPress用プラグイン「SNS Count Cache」ですが、先日Facebookシェアカウント用APIエンドポイントが廃止になった影響で、カウント数が取得できなくなりました。

SNS Count CacheでFacebookシェアがカウントされなくなった時の対処方

そこで、自分なりに公式のAPIからシェア数を取得できるようにプラグインファイルを改造したので、記事にしておりました。

その後数時間後に修正版のv0.9.2がリリース。作者のまるぼんさんにも同様の問い合わせが入っていたようで、修正されたようですね。

私も公開された公式のアップデートを導入して、「メデタシメデタシ」という感じだったのですが、しばらくすると、再びカウント取得が行えない状態に・・・

SNS_Count_Cache01

実は、これには原因がちゃんとありました。

公式APIエンドポイントは一定時間内に何度も問合せを行うと、しばらくは取得ができない仕様

実は、今まで「SNS Count Cache」は非公式のAPIエンドポイントを使っていたため、あまり意識をすることはなかったのですが、今回から採用となったFacebook公式APIエンドポイントに関して、一定時間における制限回数が設けられているようです。

8月23日現在、「SNS Count Cache」の作者のまるぼんさんのサイトで、この制限に対策された「v0.9.3」がBeta版として公開されています。

[試] WordPressプラグイン SNS Count Cache(Ver. 0.9.3 beta)の臨時公開

公式APIで一定時間内の問合せ回数に制限がある以上、その制限内での運用を行うしかないわけですが、まるぼんさんのサイトによりますと、コレを回避するために今回公開されたBeta版では以下の対策が施されているようです。

  • カウント取得失敗時のリトライ処理の削減
  • 動的キャッシュ機能(ユーザのアクセスをトリガとした動的キャッシュ)のデフォルト無効化
  • 臨時キャッシュ機能のシェア数のチェック間隔の変更(300秒→600秒)

また、運用に於けるリスク軽減策として、以下の方法も推奨されています。

  • [設定]→[シェア基本キャッシュ機能]→[シェア数のチェック間隔(秒)]の値を増やす(チェック間隔をひろげる)
  • [設定]→[シェア基本キャッシュ機能]→[一度にチェックするコンテンツ数]の値を減らす
  • HTTPからHTTPSへのスキーム移行モードを有効にしている場合は、[設定]→[シェア基本キャッシュ機能]→[HTTPからHTTPSへのスキーム移行日]を設定する

ということで、早速Beta版をインストールしてみることにしました。

「V0.9.3 Beta」はWordPress公式からはまだダウンロード出来ないので注意!

V0.9.3 Betaは現在のところ、まだテスト運用中とのことなので、WordPress公式サイトからはダウンロードできません。ダウンロードする際は、まるぼんさんのサイトからzipファイルをダウンロードし、解凍した上でFTPツールを使って「SNS Count Cache」フォルダ以下をすべて上書きします。

上書き後に、「インストール済みプラグイン」の画面で、

SNS_Count_Cache05

のように、「バージョン0.9.3 beta」と表示されていれば正常に完了しています。

念のため、チェック間隔を1800秒に変更しておく

今回新たに実装された、「動的キャッシュを無効化」する機能や、エラー発生時のリトライを抑制する機能がデフォルトで効いているので、インストールするだけである程度制限に達するリスクは回避されているのだと思いますが、サイトで推奨されている通り、念のためチェック間隔を広げておきます。

SNS_Count_Cache04

「設定」ページの「シェア基本キャッシュ機能」のチェック間隔は、デフォルトだと600秒(10分)ですが、1800秒(30分)に変更しておきました。

最初の取得が一巡するまではちょっと時間がかかるとは思いますが、一回これで様子を見たいと思います。

今のところ、少しずつシェア数をカウント中!

キャッシュする間隔が30分ですので、ちょっと時間がかかりますが、今のところ少しずつ順調に取得が再開されています。

SNS_Count_Cache02

コレでうまくいくといいですね!

「SNS Count Cache」は、簡単にシェア数を関数で呼び出せるので非常に重宝しているんですよね。単一ページなどにカウント数の表示したい場合にとても便利です。

今後も末永く使っていきたいプラグインです。作者のまるぼんさんに感謝デス!

SNS Count CacheでFacebookシェアがカウントされなくなった時の対処方

※この記事は、SNS Count Cache Ver0.9.1までのバージョン向けです。現在は0.9.2がリリースされています。また、リクエスト数制限に対策されたVer0.9.3 betaも作者様のサイトで公開中です。詳細は以下をごらんください。

SNS Count Cache v0.9.2でFacebookシェアカウント取得ができないのでbeta版をテスト中!

こんにちは。ちゃぼP(@chabo0429)です。

ここ数日、なんかシェア数が少ないな・・と思い、プラグイン「SNS Count Cache」の管理画面を開いてみました。

SNS_Count_Cache01

ナント、Facebookのシェアカウントが無効になっていました。

これはイカンばいと言うことで、色々と解決策を探っていたところ、直接コードをfunction.phpとかに書いて、直接Facebookのシェアカウントを取得してしまう方法はいくつか見つけることが出来ました。

Facebookのシェアカウント数は、ブラウザから、

http://graph.facebook.com?id=http://www.omoide-soko.jp/apps/wordpress

とリクエストすることで、簡単に取得できます。

SNS_Count_Cache04

ですが、このブログでは他にもTwitterやらPocketやらを「SNS Count Cache」でシェア数をカウントしているので、なんとか「SNS Count Cache」で取得できるようにしたいところ。そこで、なんとか「SNS Count Cache」を修正してカウントが復活するようにしてみました。

プラグイン「SNS Count Cache」の「class-share-facebook-strategy.php」を編集

まず、WordPress管理画面のプラグイン一覧の画面を開きます。

SNS_Count_Cache02

「SNS Count Cache」の「編集」ボタンから、プラグインの編集画面に入ります。

 

SNS_Count_Cache05

右側に、プラグインで使用するphpファイルが表示されるので、その中から「class-share-facebook-strategy.php」をクリックします。

まず、80行目付近にある「public function build_query_url()」の1行を以下のようにコメントアウトします。

編集前

	public function build_query_url() {
		Common_Util::log( '[' . __METHOD__ . '] (line='. __LINE__ . ')' );

		$url = self::DEF_BASE_URL . '?' . http_build_query( $this->query_parameters , '' , '&' );

		return $url;
	}

編集後

	public function build_query_url() {
		Common_Util::log( '[' . __METHOD__ . '] (line='. __LINE__ . ')' );
/*
		$url = self::DEF_BASE_URL . '?' . http_build_query( $this->query_parameters , '' , '&' );
*/
		return $url;
	}

「url」の表示がある部分をコメントアウトすればOKです。

 

次に、90行目付近の「public function extract_count( $content )」を以下のように書き換えます。

編集前

	public function extract_count( $content ) {
		Common_Util::log( '[' . __METHOD__ . '] (line='. __LINE__ . ')' );

		$count = (int) -1;

		if ( isset( $content['data'] ) && empty( $content['error'] ) ) {
			$json = json_decode( $content['data'], true );

			if ( isset( $json[0]['total_count'] ) && is_numeric( $json[0]['total_count'] ) ) {
				$count = (int) $json[0]['total_count'];
			} else {
				$count = (int) -1;
			}
		} else {
			$count = (int) -1;
		}

		return $count;
	}

編集後

	public function extract_count( $content ) {
		Common_Util::log( '[' . __METHOD__ . '] (line='. __LINE__ . ')' );

		$count = (int) -1;
		$url = $this->query_parameters['urls'];
		$encoded_url = rawurlencode( $url );

		$response = wp_remote_get( 'http://graph.facebook.com/?id='.$encoded_url );
		$count = 0;

		if (!is_wp_error( $response ) && $response["response"]["code"] === 200) {
			$body = $response['body'];
			$json = json_decode( $body );
			$count = ($json->{'share'}->{'share_count'} ? $json->{'share'}->{'share_count'} : 0);
		}

		return $count;
	}

これでOKです。

あとは、「SNS Count Cache」の管理画面に戻り、再度キャッシュして動作確認を行います。

SNS_Count_Cache03

順調にシェアカウントをキャッシュしてくれているみたいです。

原因は「https://api.facebook.com/method/links.getStats」が使えなくなったことによる

今回、シェアカウントが取得できなくなった原因は、カウント数取得用のAPI「https://api.facebook.com/method/links.getStats」が使えなくなったことのようです。

そこで、今回は回避策として公式のAPIである、「http://graph.facebook.com/」を使ってカウント数を取得することにしましたが、今後「SNS Count Cache」がアップデートされたら、この辺は仕様が変わるかもしれません。

それまでのツナギという形になると思いますが、「SNS Count Cache」を使っている方は参考にしてみてください!

画像をアップロードするとWordPressがフリーズ!EWWW Image Optimizerをアップデートしよう!

こんにちは。ちゃぼP(@chabo0429)です。

私はWordPressに画像をアップロードする際に、画像を軽くするために「EWWW Image Optimizer」というプラグインを使っています。

Home

コレ、画像データをアップロードすると自動的に圧縮してくれて、結果としてページの表示を軽くしてくれるんですね。しかもいちいち圧縮しなくていいので、画像アップロードの際もとても楽チン!

非常に快適に使っていたのですが、ある日突然トラブルが発生しました。

画像を1枚アップロードすると、WordPress自体がフリーズする

これ、最初焦りました。アイキャッチ画像を1枚アップロードしただけなのに、投稿画面はおろか、管理画面も、公開ページも全て反応せず・・・

数分で元に戻りましたが、これは焦ります。こんなんじゃ画像がアップロードできない。。

 

画像をアップロードする時に決まって現象が発生していましたので、画像処理系かな・・・と真っ先に思い浮かんだEWWW Image Optimizerを停止してみたところ、症状が改善しました。よかった・・・

で、先日EWWW Image Optimizerがバージョンアップされたので、更新情報のところを見てみたところ、

2.9.3

  • fixed: sorry, missed a session locking operation (manual optimize)

やはりバグだったようですね。バージョンアップ後は、プラグインを有効化しても問題なく動作していますので、同じような症状の方がいたら、最新版にアップデートしておきましょう!

 

【WordPressカスタマイズまとめ!】Simplicityとマテリアルを見やすく、個性的にする13の方法

こんにちは。ちゃぼP(@chabo0429)です。

WordPressのカスタマイズが一段落したので、これまでやったカスタマイズをまとめてみたいと思います。

それぞれの効果も人によっておそらく異なりますし、このままガサっと全部コピーしてしまうと、風の羅針盤のコピーサイトが出来てしまいますので、あくまで機能や目的、サイト全体のデザインバランスをよく検討したうえで、ご利用くださいね!

①Amazonリンク

【WordPress】Amazonリンクのおススメベスト3~TPOに合わせて最適なスタイルを!

アフィリエイトの定番、「Amazonアソシエイツ」。私のようにガジェット系のレビューをする人間にとって、大事なアマゾンへのリンクボックスですが、見た目がイマイチだと魅力も半減。ここはひとつ、魅力的な文章の最後に、ステキなリンクでAmazonへスマートに誘導しましょう!

ということで、goriさんのデザインをはじめ、いくつかのボックスを紹介しています。思えばこの記事から部長との縁が始まった記念すべき記事ですね。

②この記事が気に入ったら「いいね」しよう!ボックス

【WordPress】「この記事が気に入ったら いいね!しよう」を投稿ページに設置する方法

これはままはっくさんの元ネタの記事ですが、マテリアルだと「いいね」をしようとすると、サムネイルが切れてしまうという問題を抱えていたため、少しカスタマイズを加えました。

Simplicityを採用している部長のサイトでも使われています。見た目もイケてますね!

③新着記事には「New!」バッジを表示

【WordPress】WordPress用テーマ「マテリアル」新着記事に「New!」バッジを導入してみたよ

新しい記事は目立たせたい!

ブログ記事は通常、新しい記事から順番に表示されますが、公開したばかりの記事はひと目で「新しい記事」と分かってもらえるとアクセスアップにつながる可能性が高くなります。

ここでは公開後3日間以内の記事に、赤い「New!」バッジを表示させる方法を記載しています。新しい記事を目立たせたい方は是非どうぞ!

④ページ全文の「読むのにかかる時間」を表示

http://www.omoide-soko.jp/apps/wordpress/wordpress/709

本文の長い記事は、忙しい合間に読みにきてくれた人には全部読んでもらえない可能性が高くなります。そんな記事は「Pocket」にクリップしてもらって、あとで読んでもらえるようにするのも親切な設計。

ここではタイトル部分に全文を読む所要時間を「約○分」という形で表示しています。リンクボックスやコードは含まずに計算するので、純粋に「本文」のみの所要時間を表示してくれるので、記事の長さをパッと把握するのに便利ですよ!

⑤「リファラ」を伝えることができる「Celtispack」ブログカード

【WordPress】Celtispackで直接リンク形式のブログカードを作ってリファラを伝えよう

これは主に「マテリアル」に使う感じですが、プラグイン「Celtispack」を使うと、リファラ情報を相手に通知することができます。

「リファラ」とは、どこからサイトに飛んできたのかを示す情報で、例えばこの風の羅針盤に貼られている部長ナビのページへのリンクをクリックすると、部長のGoogleAnalyticsに「風の羅針盤からリンクで飛んできた人がいたよ!」と記録されるので、リンクしていることが相手に通知できるというものです。

Simplicityは、標準で「はてなブログカード」を装備しているので、このプラグインを入れなくても、ブログカードは表示できますが、リンク元が「hatenablog-parts.com」になります。そのため、リンク先のサイト側ではどのサイトからやってきたのかが分かりません。

この「Celticpack」は、リンク元がそのままリンク先に通知されるので、もしかしたらリンク先のブロガーさんに気づいてもらえるかも!?

⑥サムネイル付きページめくり機能

【WordPress】前の記事・次の記事へのサムネイル付きページめくり機能導入記

実は「マテリアル」にはページめくり機能が標準装備されておらず、何かいいものがないかと探していたところ、サムネイル付きのページめくり機能を紹介しているところがありました。

さっそく実装してみたところ、すごくいい感じ!

「直近のページを見たい!」という人には親切なページめくり機能。Simplicityには標準でページめくり機能は実装されていますが、ちょっと人と違った見た目がいい人におススメ。Simplicityでも多分実装できるはずです。試してないですが(笑)

⑦個別記事にシェアカウントを合計して表示

【WordPress】SNSシェア数を合計して表示する方法(マテリアル編)

これは元々部長のオーダーで作った機能ですね。既に部長のページでもお馴染みかと思います。風の羅針盤では個別記事の右上、それから記事下中央のシェアボタン上に表示しています。

プラグイン「SNS Count Cache」を使い、Twitter、Facebook、Pocket、Hatenaでのシェアをカウントしてくれますので、割と簡単に実装できます。これはイチオシです。

⑧トップページの最新記事を大きく目立たせる

【WordPress】トップページで最新記事を大きく表示する方法

これは風の羅針盤のトップページに表示している大きなアイキャッチと、下半分の半透明なタイトルエリアの実装方法です。この記事を書いた時と現在は若干デザインを変えていますので、元記事を修正しました。

テーマのデフォルトですと、ちょっとトップページが寂しかったので、最新記事を大きくした感じですね!

PCでは2記事、モバイルでは1記事のみを大きく表示するようにデザインしました。

⑨カテゴリ一覧固定ページを作成

【WordPress】マテリアルとSimplicityでカテゴリ一覧ページを作成する方法

カテゴリ一覧ページを固定ページとして作成して、それをグローバルメニューに表示しています。

記事がそれなりに多くなってくると、カテゴリをどうやって活かすかも重要になってきますので、簡単にわかりやすくカテゴリページにアクセスできるようにデザインしてみました。

⑩フォロワー数入りTwitter,Feedly,Push7フォローボックスを記事下に設置

【WordPress】記事下にTwitter,Feedly,Push7のフォローボタンを設置する方法

これも一応オリジナルです。プラグイン「SNS Count Cache」がTwitterやPush7に対応したため、それを利用してフォロワー数を表示できるようにしてみました。

フラットなタイル調にまとめてみましたが、色が強いので、サイトを選ぶかもしれませんね。

⑪関連記事をタイル風に並べて表示

【WordPress】関連記事をタイル風に並べて表示〜Simplicity,マテリアルカスタマイズ

これまで関連記事は一番左にアイキャッチ、右に記事タイトルが表示され、それが縦に並ぶ表示方法でした。

これをよりアイキャッチを目立たせ、スクエア風に見やすい関連記事にしてみました。これは部長のサイトでも実装済みです。

⑫カテゴリ別新着記事をヘッダー下に表示

【WordPress】ヘッダー下にカテゴリボックスを並べる方法(Simplicity,マテリアル)

以前は横に3枚でしたが、5枚に増やしました。ここは部長も同じデザインになっています。中の日付などの位置がちょっと違いますが、インパクト絶大です!

暖簾みたいですけどね(笑)

⑬個別記事下にアイキャッチ付きカテゴリリンクボックスを表示

【WordPress】アイキャッチ付きカテゴリリンクを個別記事に表示する(Simplicity,マテリアル)

これも部長のオーダーで実装済みです。アイキャッチがついたカテゴリリンクは、サイトの回遊率アップにとても効果的ですよ!

さいごに

これまで少しずつやってきたカスタマイズをまとめてみました。

改めて見ると、かなりいじってますね(笑)

でもかなり個性的&見やすい状態になっていると思います。

WordPressのデザインに悩んでいる方も多いと思いますが、参考にしていただけると幸いです!

【WordPress】トップページで最新記事を大きく表示する方法

この記事は2015年12月10日に公開した記事を、2016年7月7日に修正・追記しています。

こんにちは。ちゃぼP(@chabo0429)です。

このサイトではNobuoさん制作の「マテリアル」をテーマとして使用しています。

http://wp-material.net/

こういうパネル調のデザインのテーマって、意外とないんですよね。

記事が上から下だけでなく、横にも整列していて、アイキャッチも見やすいんでとても優れているデザインだと思っています。個人的にはもっとたくさんの人に使ってほしいなと思います。

ところで、そのマテリアルですが、いろいろと素人ながらにカスタマイズをしていますが、今回はトップページに表示されている新着記事を、もっと目立たせて更新が行われたことをよりアピールすることにチャレンジしてみました。

 

いろいろなブログサイトを見ていると、有料無料のいろいろなテーマを使っている方がいて、更にテーマを自作されている方もいたりします。

Webデザイナーのお仕事をされている方もおられるでしょうけど、自作できる人ってスゲーな・・と思うことしきりです。せいぜい、私なんてカスタマイズ位が関の山ですから、、

トップページの新着記事を目立たせる!

マテリアルのテーマカスタマイザー機能で、トップページに表示される記事数を設定することができます。

newpost1

この風の羅針盤では、最大の15件に設定しています。

 

そして、新着記事。公開したばかりの記事はできるだけ多くの人に見てもらいたいものです。それに、定期的に訪問してくれる人が、ぱっと見て更新されたかどうかを理解できるためのアイキャッチ的な役割も果たしてくれます。

マテリアルでは新着記事はすべて同じ大きさで表示されるので、これをもっと目立たせたいなと思っていました。

また、最近よく見かける透過レイヤーを用いた見出しをつけたいということもあったので、一緒に実装することを目標に作業にとりかかります。

モバイルとの条件分岐

PCでの表示では最新記事を大きくしますが、そのままモバイルでも同じ表示をしてしまったら、最新記事だけ横に長くなってしまって表示が崩れます。

なのでまず最初にモバイルでの表示はこれまで通りにするための、条件分岐を行います。

なお、phpファイルを直接修正する際は、必ずファイルのバックアップと、直接ファイルをコピーすることのできるFTPソフトを必ず用意した上で作業を実施してください。
修正時に誤ったコードを貼り付けたりすると、最悪管理画面からのアクセスもできなくなることがあるので要注意!!

また今回修正したファイル群はすべて子テーマにファイルをコピーした上で実施しています。

newpost2

今回修正するファイルは、

  • function.php
  • home.php
  • loop.php
  • style.css

の4つのファイルです。まずはfunction.phpへモバイル条件分岐の定義を追記します。ついでにトップページのページネーション機能を使ってページ送りをする場合に、今表示しているのが何ページ中の何ページ目なのかを取得出来るようにもしてしまいましょう。

function.php

//スマホ表示分岐
function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android.*Mobile', // 1.5+ Android *** Only mobile
        'Windows.*Phone', // *** Windows Phone
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

//現在のページ数の取得
function show_page_number() {
    global $wp_query;
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $max_page = $wp_query->max_num_pages;
    echo $paged;  
}
//総ページ数の取得
function max_show_page_number() {
    global $wp_query;
    $max_page = $wp_query->max_num_pages;
    echo $max_page;  
}

上記をfunction.phpに貼り付けて、保存です。

トップページやページ送り後の見出しを表示するコード

これは2ページ目以降、ページ上部にページネーションを表示するためのコードです。

home.php

<?php get_header() ?>

<?php if ($paged >= 2): ?>
	<?php get_template_part("ad_728") ?>
<?php endif; ?>

<div class="box big-box">

<?php if ($paged >= 2): ?>
<?php
if (function_exists("pagination")) {
	pagination();
}
?>
<?php endif; ?>

<?php get_template_part("loop") ?>

</div><!-- .big-box -->

<?php if (is_mobile()) :?>
<?php get_template_part("ad_728") ?>
<?php else: ?>

<?php endif; ?>

<?php get_sidebar() ?>

<?php get_footer() ?>

トップページの新着記事を大きく表示するコード

次にいよいよトップページの表示部の記述を行います。ファイル名はloop.phpです。

loop.php

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $counter++; ?>
<?php if (is_mobile()) :?>

	<?php if ($paged <= 1): ?>

		<?php if ($counter <= 1): ?><!-- 最初の記事判別 -->

			<div class="top_article">
			<a class="post-link" href="<?php the_permalink() ?>">
			<div class="top_article_thumb">

			<?php if(has_post_thumbnail()){ ?>
				<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
			<?php }else{ ?>
				<div class="no-thumbnail"><p>No thumbnail</p></div>
			<?php } ?>
			<p class="postcat">最新記事</p>
			<span class="top_text_area">
			<p class="up-date1"><span class="lsf">time </span><?php
	the_time('Y/m/d') ?></p>
			<h2 class="post-title"><?php the_title(); ?></h2>
			<!-- <p class="cat-link1"><?php the_category(' ') ?></p> -->
			</span>
			</div>
			</a>
			</div><!-- .post -->
			<?php get_template_part("ad_728") ?>
		<?php else:?>

			<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
			<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
			<div class="thumb-box sub-color-background">

			<?php if(has_post_thumbnail()){ ?>
				<a href="<?php the_permalink() ?>">
				<?php $title= get_the_title(); the_post_thumbnail(array(150, 150), array( 'alt' =>$title, 'title' => $title)); ?>
				</a>
			<?php }else{ ?>
				<a href="<?php the_permalink() ?>" class="no-deco">
				<div class="no-thumbnail"><p>No thumbnail</p></div>
				</a>
			<?php } ?>

			</div><!-- .thumb-box -->
			<a href="<?php the_permalink() ?>"><p class="up-date"><span class="lsf">time </span><?php
	the_time('Y/m/d') ?>
			<ul style="list-style: none;">
			<li class="post-title1"><?php the_title(); ?></a></li>

			<!-- <p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p> -->
			</div><!-- .post -->
			<?php
			if($count==6){ ?>

			<?php }
			if($count%2==0){echo "<div class='clear2'></div>";}
			if($count%3==0){echo "<div class='clear3'></div>";}
			$count++;
			?>

		<?php endif;?><!-- /最初の記事判別 -->

	<?php else:?>

		<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
		<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
		<div class="thumb-box sub-color-background">

		<?php if(has_post_thumbnail()){ ?>
			<a href="<?php the_permalink() ?>">
			<?php $title= get_the_title(); the_post_thumbnail(array(150, 150), array( 'alt' =>$title, 'title' => $title)); ?>
			</a>
		<?php }else{ ?>
			<a href="<?php the_permalink() ?>" class="no-deco">
			<div class="no-thumbnail"><p>No thumbnail</p></div>
			</a>
		<?php } ?>

		</div><!-- .thumb-box -->
			<a href="<?php the_permalink() ?>"><p class="up-date"><span class="lsf">time </span><?php
	the_time('Y/m/d') ?>
			<ul style="list-style: none;">
			<li class="post-title1"><?php the_title(); ?></a></li>
			<!-- <p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p> -->
		</div><!-- .post -->
		<?php
		if($count==6){ ?>

		<?php }
		if($count%2==0){echo "<div class='clear2'></div>";}
		if($count%3==0){echo "<div class='clear3'></div>";}
		$count++;
		?>

	<?php endif; ?>

<?php else: ?>

	<?php if ($paged <= 1): ?>

		<?php if ($counter <= 1): ?><!-- 最初の記事判別 -->

			<div class="top_article">
			<a class="post-link" href="<?php the_permalink() ?>">
			<div class="top_article_thumb">

			<?php if(has_post_thumbnail()){ ?>
				<?php $title= get_the_title(); the_post_thumbnail('large', array( 'alt' =>$title, 'title' => $title)); ?>
			<?php }else{ ?>
				<div class="no-thumbnail"><p>No thumbnail</p></div>
			<?php } ?>
			<p class="postcat">最新記事</p>
			<span class="top_text_area">
			<p class="up-date1"><span class="lsf">time </span><?php
	the_time('Y/m/d') ?></p>
			<?php
			$days = 3;
			$today = date_i18n('U');
			$entry = get_the_modified_date('U');
			$news = date('U',($today - $entry)) / 86400 ;
			if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
			?>
			<h2 class="post-title"><?php the_title(); ?></h2>
			<?php get_template_part("sns_count") ?>
			<p class="cat-link1"><?php the_category(' ') ?></p>
			</span>
			</div>
			</a>
			</div><!-- .post -->

		<?php elseif ($counter <= 2): ?>

			<div class="top_article">
			<a class="post-link" href="<?php the_permalink() ?>">

			<div class="top_article_thumb">
			<?php if(has_post_thumbnail()){ ?>
				<?php $title= get_the_title(); the_post_thumbnail('large', array( 'alt' =>$title, 'title' => $title)); ?>
			<?php }else{ ?>
				<div class="no-thumbnail"><p>No thumbnail</p></div>
			<?php } ?>
			<span class="top_text_area">
			<p class="up-date1"><span class="lsf">time </span><?php
	the_time('Y/m/d') ?></p>
			<?php
			$days = 3;
			$today = date_i18n('U');
			$entry = get_the_modified_date('U');
			$news = date('U',($today - $entry)) / 86400 ;
			if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
			?>
			<h2 class="post-title"><?php the_title(); ?></h2>
			<?php get_template_part("sns_count") ?>
			<p class="cat-link1"><?php the_category(' ') ?></p>
			</span>
			</div>
			</a>
			</div><!-- .post -->

			<?php get_template_part("ad_728") ?>

		<?php else:?>

			<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
			<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
			<div class="thumb-box sub-color-background">

			<?php if(has_post_thumbnail()){ ?>
				<a href="<?php the_permalink() ?>">
				<?php $title= get_the_title(); the_post_thumbnail('large', array( 'alt' =>$title, 'title' => $title)); ?>
				</a>
			<?php }else{ ?>
				<a href="<?php the_permalink() ?>" class="no-deco">
				<div class="no-thumbnail"><p>No thumbnail</p></div>
				</a>
			<?php } ?>

			</div><!-- .thumb-box -->
			<div class="post-info">
			<a href="<?php the_permalink() ?>"><p class="up-date"><span class="lsf">time </span><?php
	the_time('Y/m/d') ?></p>
			<?php
			$days = 3;
			$today = date_i18n('U');
			$entry = get_the_modified_date('U');
			$news = date('U',($today - $entry)) / 86400 ;
			if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
			?>
			<h3 class="post-title1"><?php the_title(); ?></a></h3>
			<?php get_template_part("sns_count") ?>
			<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
			</div><!-- .post-info -->
			</div><!-- .post -->
			<?php
			if($count==6){ ?>

			<?php }
			if($count%2==0){echo "<div class='clear2'></div>";}
			if($count%3==0){echo "<div class='clear3'></div>";}
			$count++;
			?>

		<?php endif;?><!-- /最初の記事判別 -->

	<?php else:?>

		<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
		<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
		<div class="thumb-box sub-color-background">

		<?php if(has_post_thumbnail()){ ?>
			<a href="<?php the_permalink() ?>">
			<?php $title= get_the_title(); the_post_thumbnail('large', array( 'alt' =>$title, 'title' => $title)); ?>
			</a>
		<?php }else{ ?>
			<a href="<?php the_permalink() ?>" class="no-deco">
			<div class="no-thumbnail"><p>No thumbnail</p></div>
			</a>
		<?php } ?>

		</div><!-- .thumb-box -->
		<div class="post-info">
		<a href="<?php the_permalink() ?>"><p class="up-date"><span class="lsf">time </span><?php
the_time('Y/m/d') ?></p>
		<?php
		$days = 3;
		$today = date_i18n('U');
		$entry = get_the_modified_date('U');
		$news = date('U',($today - $entry)) / 86400 ;
		if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
		?>
		<h3 class="post-title1"><?php the_title(); ?></a></h3>
		<?php get_template_part("sns_count") ?>
		<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
		</div><!-- .post-info -->
		</div><!-- .post -->
		<?php
		if($count==6){ ?>

		<?php }
		if($count%2==0){echo "<div class='clear2'></div>";}
		if($count%3==0){echo "<div class='clear3'></div>";}
		$count++;
		?>

	<?php endif; ?>

<?php endif; ?>

ここで何を具体的に行っているのか、簡単に説明してみましょう。

loop.phpというファイルは、その名の通り繰り返し(loop)処理を行うファイルです。記事を抽出して特定の数だけ表示するというのは、実は裏では1つずつ記事を抽出してそれを繰り返しています。

今回は表示数が15件なので、15回繰り返しています。

最後にスタイルを整えよう

さて、これで一応表示するためのプログラムは記述できましたが、スタイルシートを使って美しく見せるようにしましょう。

style.css

/* 最新の記事
--------------------------------------------------------- */
.top_article {
	margin:0 0 15px;
	box-shadow: 0 2px 5px #999;
	float: left;
	width: 100%;
}
.top_article_thumb {
	height: 486px;
	overflow: hidden;
	position: relative;
}
.top_article_thumb img {
	height: auto;
	width: 100%;
}
.top_text_area {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	width: 100%;
	height: 150px;
	border-top:4px solid #4CA5FF;
	transition: all 0.3s ease 0s;
}
.top_text_area h2 {
	margin-bottom: 0;
	padding: 12px 15px 0;
	color:#fff;
	font-size:24px;
	line-height:1.5;
}
.top_text_area .post-data {
	color:#ccc;
	font-size:15px;
	text-align:right;
	padding: 1px 15px 5px;
}
.up-date1{
	font-size: 1.0em;
	color: #fff;
	float: left;
}
.cat-link1{
	float: left;
	line-height: 1;
	clear: both;
	position:absolute;
	top: 0px;
	left:0
}
.cat-link1 a{
	display: inline-block;
	padding: 1px 5px 0px;
	background-color: #414852;
	line-height: 1.4;
	text-decoration: none;
	color: #fff;
	font-size: 1.0em;
}
a.post-link {
	background-color: #fff;
	display: block;
	transition: all 0.3s ease 0s;
}
a.post-link:hover {
	background-color: #ffffdd;
	text-decoration: none;
}
.postcat {
	position:absolute;
	top:0px;
	right:0px;
	background-color: #ff0000;
	color: #ffffff;
	display: inline-block;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	padding: 10px 10px 10px;
}

これをそのままstyle.cssに追記します。

続いて、モバイル表示用のコードを追記します。

@media screen and (max-width: 736px) {

.top_article {
	margin:-30px 0 0px;
}
.top_article_thumb {
	height: 250px;
}
.top_text_area {
	height: 120px;
	border-top: initial;
}
.top_text_area h2 {
	padding: 5px 5px 0;
	font-size:19px;
}
.thumb-box {
	width: 180px;
}
.thumb-box img{
	height: 170px;
}
.no-thumbnail{
	height: 170px;
}

}

 

どのように表示されるか試してみよう

さて、早速トップページを表示させてみましょう。うまくいくでしょうか。

New_auticle01

うまくいきました!!

アイキャッチ画像の下部分の上に透過スクリーンが乗って、その上に日付やタイトルが白抜き文字で表示されています。ちなみに左上のカテゴリをクリックすると、カテゴリ内記事一覧ページが表示されます。

念のため、モバイルの表示も見てみましょう。

New_auticle01

表示も問題無いですね。ちゃんと条件分岐されているようです。

2ページ目以降はどうなるかというと、

New_auticle01

ページネーションもきちんと表示されています。

これで思っていた通りの形でやりたいことができました。しかもとってもビューティフル~~!!

さいごに

最新記事を目立たせること自体は、実は色々な関数や構文が既にありますので、それほど難しくない印象でした。

私自身、phpやcssのプロフェッショナルじゃないので、完全に自己流^^; っていうか、まともに本とか買ってきて勉強したとか全く無いですからね。。必要なときに検索して調べるくらいなもので・・

それでもまあなんとかできますので多分皆さんでもできます!

ただ、一番苦労するのはスタイルシート。ホント、これは色々な要素が重なりあって影響しあう、まるで男女の仲のように複雑に絡みあうので(笑)、こんがらがります。

今回の作業の殆どをこの時間に費やしたと言ってもいいくらいです。

なので、もし必要であれば上のコードコピーしてお使いくださいませ。その際FeedlyやFacebookなどで定期購読いただけると非常に嬉しいです!

ぜひお試しあれ~~!

【WordPress】アイキャッチ付きカテゴリリンクを個別記事に表示する(Simplicity,マテリアル)

こんにちは。WordPressカスタマイズにハマっているちゃぼP(@chabo0429)です。

先日この風の羅針盤、それから部長サイトで、個別記事の一番下の部分にアイキャッチ付きのカテゴリページへのリンクが追加されております。

カテゴリをテキストで表示させるだけなら楽なのですが・・・やっぱりそこはアイキャッチ付きのカッコイイリンクの方が見栄えもいいし、分かりやすいですよね。

今日はその方法をご紹介していきます。

「Advanced Custom Fields」プラグインをインストール

通常、カテゴリにアイキャッチ画像は付与することができません。

アイキャッチをカテゴリに付加させるために、まずは「Advanced Custom Fields」というプラグインをインストールします。

インストールとアイキャッチ画像の追加については、以下のサイトに詳しく解説されていますので、参考にしてみてください。

カテゴリーごとに異なるアイキャッチ画像を表示する

single.phpにカテゴリリンクを挿入

プラグインのインストールと、カテゴリへのアイキャッチ画像の追加が完了したら、個別記事のカテゴリページへのリンクを挿入したい部分に、以下のコードを挿入します。

<!--同タグ・同カテゴリー記事を出力-->
<?php

	$tags = get_the_tags();
	$categories = get_the_category();
	$id = get_the_ID();
	$args;


	if($categories){
		$cat_array = array();
		foreach($categories as $category){
			array_push($cat_array, $category->slug);
			if($cats_string)$cats_string .= ",";
			$cats_string .= $category->slug;
		}
	}

	if($tags){
		$tag_array = array();
		foreach($tags as $tag){	
			array_push($tag_array, $tag->slug);
		}

		$args = array(
			'tax_query' => array(
				'relation' => 'OR',
				array(
					'taxonomy' => 'category',
					'field' => 'slug',
					'terms' => $cat_array,
					'include_children' => true,
					'operator' => 'IN'
				),
				array(
					'taxonomy' => 'post_tag',
					'field' => 'slug',
					'terms' => $tag_array,
					'include_children' => false,
					'operator' => 'IN'
				)
			),
			'post__not_in' => array($id),
			'orderby'=>'rand',
			'posts_per_page' => $count
		);
	}else{
		$args = array(
			'category_name' => $cats_string,
			'post__not_in' => array($id),
			'orderby'=>'rand',
			'posts_per_page' => $count
		);
	}

	$the_query = new WP_Query($args);
	if($the_query->post_count > 0){ ?>

		<div class="cat-attention">
		<p>この記事に関連するカテゴリ内の記事はこちら</p>
		</div>
		<?php if($categories){ ?>
			<?php foreach($categories as $category){ ?>
			<div class="same-categories">
				<?php
				// カテゴリーのアイキャッチ画像を表示する
				$image = get_field('category-image', 'category_' . $category->cat_ID);
				?><a href="<?php echo home_url().'/?cat='.$category->cat_ID; ?>"><div class="cat-image-single">
				<?php echo wp_get_attachment_image($image['id']);
				?></div>

				<div class="cat-desc-single">
				<?php echo $category->name; ?>
				</div></a>
			</div>
			<?php } ?>
			<!-- .same-categories -->
		<?php } ?>
	<?php }
?>

ちなみに、このコードだと、カテゴリ名がそのままタイトルに表示されますので、カテゴリの説明を表示させたい場合は、73行目の、

				<?php echo $category->name; ?>

を以下のように変更すると、カテゴリのディスクリプション(説明)を表示させることができます。

				<?php echo $category->category_description; ?>

Category_link01

どちらを表示させるかは、サイトのデザインに合わせて設定してみてください。

ちなみに部長はカテゴリ名を、ちゃぼPはディスクリプションを表示させています。

最後にstyle.cssでデザインを調整

これでソースコードは完成ですので、あとはスタイルシートでデザインを調整します。

.cat-image {
	float: left;
	margin-bottom: 10px;
	margin-right: 10px;
}
.cat-desc {
	margin: 0;
	font-size: 1.5em;
}
.cat-image-single {
	float: left;
	margin-bottom: 0px;
	margin-right: 10px;
}
.cat-desc-single {
	margin-left: 10px;
	font-size: 1.5em;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.same-categories {
	margin-bottom: 8px;
	width: 100%;
	height: 150px;
	border: 1px solid #ddd;
	float: left;
}
.same-categories a{
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	transition: color .3s;
}
.same-categories a:hover{
	color: #ff0000;
	background-color: #ffffdd;
	text-decoration: none;
}
.cat-attention{
	color: #ffffff;
	background-color: #000000;
	width: 100%;
	height: 30px;
	font-size: 1.3em;
	text-align: center;
	margin-bottom: 5px;
}

これがPC用です。モバイル表示の時は少し文字を小さくしないとはみ出てしまう場合があるので、

@media screen and (max-width: 736px) {

.cat-attention{
	font-size: 0.95em;
}
.cat-desc-single {
	font-size: 1.3em;
}

}

これを追加しています。

完成イメージ

これで完成です。イメージはこちら。

Category_link02

個別記事の最下部に、カテゴリに設定したアイキャッチとディスクリプションが表示されています。

ちなみに、「きょうのちゃぼP」の記事は単一カテゴリにしか属していませんが、

Category_link03

複数カテゴリに属する記事には、その記事が属する複数のカテゴリが縦に並んで表示されます。

 

Category_link04

部長の記事はこんな感じ。ページめくりの前に挿入しています。こちらはカテゴリ名をそのまま表示しています。

一方のモバイル表示はというと、

Category_link05

きちんと文字も小さくなって、綺麗に枠に収まっています。

 

プラグインの導入などもあって、少々手間がかかりますが、カテゴリページへのリンクを目立たせることでサイト内の回遊率アップに実際効果があるようで、カテゴリページへのアクセスが増加していますので、これはいい感じかも!

私の作成したコードは、simplicityとマテリアルで動作していますが、基本的なコードはテーマに左右されないはずなので、試してみてくださいね!

ぜひ試してみてくださいね!

【WordPress】ヘッダー下にカテゴリボックスを並べる方法(Simplicity,マテリアル)

こんにちは。ちゃぼP(@chabo0429)です。

今日のちゃぼPでも触れましたが、トップページのカテゴリ新着ボックスを3つから5つに増やしました。

早速部長も実装して、両サイトともなんだかトップページに暖簾がかかったようになっております(笑)

というわけで、今日はその実装方法をご紹介します。

カテゴリ新着ボックスは、「main」カラム前に挿入すること

これまでのカテゴリ新着ボックスは、メインカラムのトップ部分に挿入していましたが、それだと横に3枚が限界でした。というのも、サイドバーがヘッダーのすぐ下から始まってしまうため、メインカラムの幅しか使えませんでしたので、これを横いっぱいに使えるようにします。

トップページの要素を読み込む順番は、「ヘッダー」→「メイン・サイド」→「メイン」→「サイド」→「フッター」の順番で読み込みます。

そのため、「メイン」にボックスを挿入してしまうと、サイドバーがその前から始まってしまうのです。

そこで、ヘッダーの直後に挿入することにします。

Simplicityの場合は「before-main.php」に挿入

Simplicityの場合は、あらかじめ子テーマの中に「before-main.php」が存在していますので、そこにコードを挿入します。

<?php
//メインカラムの手前に何かを挿入したいときは、このテンプレートを編集
//例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。
?>

〜ここにコード挿入〜

すごく簡単ですね。よくSimplicityでヘッダー下に画像を挿入しているサイトを見かけますが、ここに入れていたんですね。

マテリアルの場合は「header.php」に挿入

マテリアルの場合はちょっと気をつけなければいけません。トップページを読み込む際には「header.php」→「loop.php」の順番でファイルを読み込みますが、loop.phpを読み込む時には、すでにメインカラムが始まっているので、header.phpに挿入しなければなりません。

(省略)

<script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

</div>
</nav>

<div class="main-side">

〜ここにコードを挿入〜

<div class="main">

このように、メインカラムが始まる前にコードを挿入します。

表示部ソースコード

実際にボックスを表示するは両テーマとも同じです。

<?php if ( is_home() || is_front_page() ) : ?>
	<?php if (is_mobile()) :?>
	<?php else: ?>
		<?php if ($paged <= 1): ?>
			<!-- 新着カテゴリ1 -->
			<div class="cat_article1">

			<?php
			    $cat = '(スラッグ名1)';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/(スラッグ名1)">カテゴリ1</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ2 -->
			<div class="cat_article2">

			<?php
			    $cat = '(スラッグ名2)';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/(スラッグ名2)">カテゴリ2</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ3 -->
			<div class="cat_article3">

			<?php
			    $cat = '(スラッグ名3)';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/(スラッグ名3)">カテゴリ3</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ4 -->
			<div class="cat_article4">

			<?php
			    $cat = '(スラッグ名4)';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/(スラッグ名4)">カテゴリ4</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ5 -->
			<div class="cat_article5">

			<?php
			    $cat = '(スラッグ名5)';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/(スラッグ名5)">カテゴリ5</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>
		<?php endif; ?>
	<?php endif; ?>
<?php endif; ?>

「スラッグ1〜5」はご自分のサイトのカテゴリのスラッグ名に書き換えます。「カテゴリ1〜5」は、ボックスのインデックスに表示させたいカテゴリ名に書き換えます。

style.cssでデザインを整えます

最後に、デザインを整えます。

/* 最新のカテゴリ記事
--------------------------------------------------------- */
.cat_article1 {
	margin:0 0px 15px 0px;
	float: left;
	width: 19.6%;
}
.cat_article2 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article3 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article4 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article5 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article_thumb {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.cat_article1 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article1 .anchor:hover, .cat_article1 .anchor:active {
	text-decoration: underline;
}
.cat_article1 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article1 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article1 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article1 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article1 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article2 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article2 .anchor:hover, .cat_article2 .anchor:active {
	text-decoration: underline;
}
.cat_article2 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article2 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article2 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article2 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article2 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article3 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article3 .anchor:hover, .cat_article3 .anchor:active {
	text-decoration: underline;
}
.cat_article3 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article3 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article3 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article3 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article3 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article4 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article4 .anchor:hover, .cat_article4 .anchor:active {
	text-decoration: underline;
}
.cat_article4 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article4 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article4 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article4 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article4 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article5 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article5 .anchor:hover, .cat_article5 .anchor:active {
	text-decoration: underline;
}
.cat_article5 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article5 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article5 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article5 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article5 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat-update{
	font-size: 0.7em;
	position:absolute;
	top:0px;
	left:0px;
	color: #fff;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
}
.cat_text_area {
	padding: 0 4px 0;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	color: #fff;
	font-weight: bold;
	overflow: hidden;
	height: 80px;
	line-height: 20px;
	font-size: 15px;
	text-decoration: none;
	background: rgba(3,3,3,0.6);
	background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(2,2,2,1.0)));
	background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(2,2,2,1.0));
	text-shadow: 0 0 5px rgba(0,0,0,1.0);
}
.postcat1 {
	position:absolute;
	top:0px;
	right:0px;
	background-color: #EA3382;
	color: #ffffff;
	display: inline-block;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	padding: 0px 10px 0;
}
/* ここまで

ボックスの横幅やマージンはサイトによって微妙に違うと思いますので、適宜調整を。

完成

これでボックスの完成。実際に表示させてみましょう。

categorybox01

横幅もバッチリ合いました!

ある程度のカテゴリが増えてくると、アイキャッチ付きのカテゴリボックスはインパクトもあって、回遊率アップにも効果的・・かなとも思っています(笑)

こんな感じで自由にカスタマイズできるのも、WordPressのいいところです。是非皆さんのサイトもお試しあれ!

【WordPress】SNS Count Cacheが0.9.1にアップデート!フォロワー数取得不具合に対応

こんにちは。ちゃぼP(@chabo0429)です。

先日、新しくリリースされたWordPressプラグイン「SNS Count Cache」がバージョンアップされたっところ、フォロワー数を取得する間隔を設定しても、正常に取得されないという件について、記事を書きました。

SNS Count Cache 時間通りにフォロワー数を取得しないことがある

そして、つい先ほどですが、バージョンアップされた新しい「Ver0.9.1」がリリースされたようです!

すでに13日0時現在、アップデートが可能になっています。

リリースノートには、

0.9.1

Fixed: Follower count is not retrieved and cached at intervals according to your configuration.

とありますので、設定されたインターバルで正常に取得を行ってくれると思います。

SNS Count Cacheを導入して、フォロワー数の取得を行っている方は、早速アップデートしてみましょう!

SNS Count Cacheは、各SNSのシェア数、フォロワー数を簡単に表示できるプラグイン

SNS Count Cacheは、各SNSのシェア数、TwitterやFeedly、Push7などのフォロワー数は関数を埋め込むことで簡単に表示することができる、デザインの自由度が高い、極めて有用なプラグインです。

純正標準のアイコンやフォローボタンに飽きてしまった方は、自分でデザインされることもオススメですよ!

当ブログで作成いたしました、フォロワー数の表示ボックスの設置については、以下のページ解説しておりますので、ご参考にどうぞ!

【WordPress】記事下にTwitter,Feedly,Push7のフォローボタンを設置する方法

【WordPress】関連記事をタイル風に並べて表示〜Simplicity,マテリアルカスタマイズ

こんにちは。ちゃぼP(@chabo0429)です。

WordPressのテーマですが、皆さんは何を使っていますか?

この風の羅針盤ではNobuoさん(@Nobuo_Create)制作のマテリアルを使わせてもらっていますが、かなりカスタマイズしてしまっていて、原型をとどめないほどになってしまいました・・・

トップページなんて、もはやサイドバー以外はほぼオリジナルがありませんが、今のデザインは実は結構お気に入りです(笑)

 

今回はまたまた部長のオーダーが入りまして、個別記事の下部に表示される「関連記事」を変更したいとのこと。

これまではリスト形式の表示で、左側にアイキャッチのサムネイル画像、その右側に記事タイトルならび、これが縦一列になって幾つか表示されていました。

これをgori.me風にしたい!」とのことで、上部にアイキャッチ、下部にタイトルで、これがワンセットになって横に幾つか並ぶ、いわゆるタイル風のデザインにしたいとのこと。

 

かなり大掛かりなデザイン変更となりましたが、基本的にスタイルシートだけの変更でなんとかなりそうだったので、チャレンジしてみました。

部長のブログはわいひらさん(@yhira)制作の「Simplicity」ですので、標準のテーマカスタマイザーで同じようなデザインに変更することは可能です。ただ、ちょっと枠線がなかったり、タイトル文字が大きかったりと微調整が必要な部分があり、モバイル表示もちょっと崩れてしまっていたので、以下のようにカスタマイズしてみました。

1-1.【Simplicity】PC表示用コードをstyle.cssへ追記

まずは、PC表示用のデザインを整えます。こちらはSimplicity用のコードです。

/* 関連記事をタイル調へ変更 */
.related-entry-title a {
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    display: block;
    height: 120px;
    width: 210px;
}

.related-entry-thumbnail {
    text-align: left;
    margin-bottom: 15px;
    margin-left: 5px;
    margin-right: 5px;
    width: 213px;
    height: 310px;
    border: 1px solid #ddd;
    float: left;
}

.related-entry-thumbnail img {
    width: 213px;
    height: 200px;
    margin-bottom: 0;
}

.related-entry-thumbnail .related-entry-content {
    font-size: 0.9em;
}

.related-entry-thumbnail .related-entry-content a {
    font-size: 0.8em;
}

.related-entry-thumbnail .related-entry-content {
    margin: -15px 0px 0;
}

.related-entry-thumbnail .related-entry-content:hover {background-color:#ffffe1;}

ここでは、

  • テキストの左寄せ(中央寄せ解除)
  • 画像・テキストボックスの位置調整
  • テキストのフォントサイズ変更
  • マウスオーバー時の背景色の設定とボックス全体をリンク化
  • 枠線の設定

を行っています。これでPC表示での関連記事は以下のようになります。

関連記事01

今回は横3列、縦2列の配置としました。キレイに揃いましたね。

続いて、モバイル表示の調整を行います。

1-2.【Simplicity】モバイル表示用コードをstyle.cssへ追記

モバイルの表示は、PC用のデザインをそのまま使うと表示が崩れるので、モバイル専用のデザインを設定します。ちなみに、アクセス端末がモバイルか否かは、表示画面の幅で決まります。

@media screen and (max-width: 736px) {
.related-entry-title a {
    text-decoration: none;
    font-size: 13px;
    color: #333;
    width: 100%;
    height: 90px;
}

.related-entry-thumbnail .related-entry-content {
    margin: -15px 0px 0;
}

.related-entry-thumbnail {
    text-align: left;
    width: 46.6%;
    height: 240px;
    margin-left: 5px;
    margin-right: 5px;
    float: left;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    line-height: 1.4;
    overflow: hidden;
}

.related-entry-thumbnail img {
    width: 200px;
    height: 150px;
}
}

@media screen and (max-width: 359px) {
#related-entries .related-entry-thumbnail {
    margin: 0 3px 0  !important;
    width: 46.6%  !important;
    margin-bottom: 1em  !important;
    height: 240px  !important;
}
}

ここでは、media screenのmax-widthプロパティを使って、表示する画面の横ピクセル数が「736px以下の場合」「359px以下の場合」の2パターンを設定します。

この「736px」は、iPadよりも小さい端末で適用されます。一般的な中型〜大型のスマホはここに含まれます。

「359px」については、iPhoneSEなどの4インチ以下の端末用です。

これを適用することで、モバイル表示はこんな感じでになります。

関連記事03

モバイル表示は、横幅が狭いので、横2列、縦3列としました。ちなみに特別なことはやっておらず、サイズと間隔の調整のみです。

2-1.【マテリアル】PC表示用コードをstyle.cssへ追記

ここでは、風の羅針盤のテーマ「マテリアル」用のカスタムコードを紹介します。

まずはPC表示用から。

.kanren .thumb-box{
	max-width: none;
	height: 150px;
	width: 200px;
	float: none;
}
.kanren ul a{
	color: #000;
	text-decoration: none;
	display: block;
	height: 250px;
	transition: color .3s;
}
.kanren ul a:hover{
	color: #ff0000;
	background-color: #ffffdd;
	text-decoration: none;
}
.kanren ul li {
	margin-left: 7px;
	margin-right: 7px;
	width: 200px;
	height: 250px;
	border: 1px solid #ddd;
	float: left;
}
.kanren-post-name {
	font-size: 0.9em;
}

やっていることはSImplicity版と同じです。出来上がりはこうなります。

関連記事02

文字の大きさは、Simplicity版より若干大きく、サムネイルを横長にしてみました。

追加でマウスオーバー時に「徐々に文字色が変化」するフェード効果を足しています。

それ以外は同じデザインです。続いてモバイル表示に進みます。

2-2.【マテリアル】モバイル表示用コードをstyle.cssへ追記

Simplicity版と同じで、ここでも端末の736pxの横幅表示をモバイルの判断材料とします。

@media screen and (max-width: 736px) {
.kanren .thumb-box {
    max-width: none;
    height: 100px;
    width: 100%;
    float: none;
}
.kanren-post-name {
	font-size: 0.8em;
}
.kanren ul li {
	width: 46.6%;
	height: 200px;
	margin-left: 5px;
	margin-right: 5px;
}
}

これをstyle.cssに追加します。

関連記事04

出来上がりはこんな感じになります。ここでもサムネイルは横長表示です。

イイ感じに仕上がりました!!

さいごに

部長オーダーのテーマ改造計画でしたが、WordPressの改造は結構楽しいものです。

また、Simplicityはかなりたくさんのブログで採用しているテーマだと思いますので、改造することで個性が強調されますし、是非オススメです。

Simplicity、マテリアルを使用しているサイトでしたら、すぐに使えると思いますので、参考にしてみてください!

ご自身のサイトで使われる際は是非フォロー・コメントいただけると嬉しいです!!

部長ナビのページ・gori.meもヨロシクね!

↓ちゃぼPがスタッフを務める部長のサイト。最近彼は「発注」という言葉をよく使うが、金銭的な絡みは全くない。盛岡名物である「冷麺にわんこそばつける」が調子に乗っている最近の部長の口グセ。

http://nabi1080.com/

↓部長が敬愛する師匠「g.O.R.i」さんのサイト。月間400万PVを超える巨大サイト。デザイン面で大いに参考にさせていただいている。とても見やすいサイトでスッキリしている。素晴らしい!

http://gori.me/