「wordpress」タグアーカイブ

記事下部にアマゾン商品広告を検索・表示するwordpressプラグイン「aoringo amazonradming」

はじめに

おーいえー! ブログ運営頑張ってますか!? 私はほどほどです! むしろ最近怠けてました。おーいえー。

アマゾン広告は、商品を勧めつつ紹介料も貰える素敵なブログツールの一つです。しかし、一つの商品を紹介するなら問題は無いですが、アットランダムにその時最新の商品広告を出したい。そういう時ってあると思います。少なくとも私はありますよ。

そういうわけで作成しました。特定の検索ワードで商品を検索し、ランダムに表示するアマゾン広告プラグインを。いえいいえい。

機能

幾つか機能があります!

  • ウィジェット広告
  • 自動記事下広告
  • 記事毎指定キーワード商品広告
  • 記事に設定されたカテゴリを検索キーワードにする
  • 毎回商品ランダム入れ替え
  • 結果キャッシュ機能

ざっとこんな感じです。

導入

ダウンロードしてプラグインを有効化したあとダッシュボードの設定から「アマゾン広告設定」を選択して各種必要な設定を入力。

 

上三つはアマゾン広告に必要な各種設定です。簡単ですね。下二つですが、

「記事デフォルト検索ワード(空だとカテゴリをキーワードとする)」は基本的に検索する商品のキーワードを入力します。サイトの内容が全てプログラムに関するものだったら適当に「プログラム」とか入れておけばそれっぽい商品を毎回検索してくれます。空のままだと記事に設定されたカテゴリを元に検索します。これにより記事が「php」のカテゴリだったらphpの商品を、「wordpress」のカテゴリならwordpressの商品を出してきますよ。むっちゃ便利やん!?

「記事下表示件数(0だと表示しない)」は記事の最後につけるアマゾン商品広告の数を設定します。最大数は多分20件くらいまでです。それ以下だと順番や商品を毎回ランダムに入れ替えて表示してくれます。これで既視感無く広告を出せますね。むふふん。

ウィジェットの所では「アマゾン広告」という物が登場していると思うので、それを好みの場所においてください。こちらもキーワードや数を設定する事で商品を出せますよ。実際便利。

記事別キーワード設定機能

プラグインを有効にすると編集画面にメタボックスが追加されます。

普通は無記入で問題無いですが、この記事だけはこの商品を出したいな、という時があると思います。そういう時はここに指定の文字列を入れてください。そうするとその記事だけ商品が変わります。

キャッシュ機能

キャッシュはwordpress標準のキャッシュ関数を使っています。mysqlに保存するタイプなので、mysqlが汚されるのが嫌な人は導入しないでください。

css無し

適当にdivを吐き出すのでcssで整えてください。基本的に私好みに作ったのでご自由に修正してくださいね! わーい!

ダウンロード

こちらからダウンロードだぜぇ!

簡単画像公開! 自前のレンタルサーバーに「gyazo」を設置しよう!

gyazo、知ってますか? むっちゃ便利なんですよ、gyazo。

デスクトップに実行ファイルを置き、起動してスクリーンショットを取りたいところをドラッグすると画像がアップロード出来ちゃうのです。その後はtwitterで使うなり、ブログで利用するなり色々と活用できちゃいます。

今見てる自分の画面を他人に見せるのは、以外と手間がかかるものです。それにしては良くそういった場面に出くわすもの。このサービスはそんな私たちにとってまさに救世主ですよ。

ただ、他人のスペースにそのような画像を置くのって怖いし、自分のスペースに置きたいものですよね。gyazoはオープンソースで色々な人が手を入れております。解説記事も沢山ありますので設置は簡単ですよ! さくっと設置して軽快gyazoライフを堪能しましょう!

今回は「さくらインターネット|サーバーホスティングサービス」さんで設置した私の例で紹介しますよ。プランはスタンダードプラン。月々500円で軽快にwordpressも動作するのに初めてのサイト作成にはとってもお勧めですよ!

さくらのレンタルサーバでもGyazoる | おふろめ

ほとんどここを参考にさせてもらいました!ありがとうございます!

記事の通りupload.cgiをダウンロードしてきたら、内容を少し変更します。

File.open("data/#{hash}.png","w").print(imagedata)
↓
File.open("../#{hash}.png","w").print(imagedata)

と変更します。cgiファイルがある場所から一つ上の階層に保存するようになるわけですね。

「upload.cgi」が「cgi_bin」に入っていた場合は画像がこのように保存されていくようになります。好みで変更してください。

cgi.out(headers){"http://gyazo.com/#{hash}.png"} 
↓
cgi.out(headers){"http://hogehoge.com/#{hash}.png"}

あとは帰ってくるアドレスgyazoの物から自分のレンタルスペースのアドレスに変更してやるだけです。簡単!あとはこのcgiファイルをレンタルスペースにアップロードするだけです。ちなみにcgiファイルのパーミッションは700とかにしておきましょう。

[browser-shot width=”450″ url=”http://exe.tyo.ro/2012/02/gyazowingyazowin.html”]

gyazowin+を最新のgyazowinのソースとマージした – tyoro.exe

サーバー側の準備が終わったので次はクライアントを用意しますよ。さくっとzipファイルをダウンロードして解凍しましょう。

iniファイルの設定を変更していきますよ。

[gyazowin+]
upload_server=gyazo.com
upload_path=/upload.cgi

use_ssl=no
ssl_check_cert=yes

use_auth=no
auth_id=
auth_pw=

up_dialog=yes
copy_url=yes
copy_dialog=yes
open_browser=no

use_clipboard_base=no

内容はこんな感じ。うん、シンプル。

「upload_server」はアップロードするサーバーですね。今回の場合は自分のレンタルサーバの物に変更します。

「pload_path」はcgiファイルまでのパスですね。「gyazo」の中の、さらに「cgi_bin」の中に入っていたりしたら「/gyazo/cgi_bin/upload.cgi」とかになりますよ。

残りはとりあえずそのままで大丈夫です。保存してexeファイルを起動して適当な場所でドラッグしてみましょう!

こんな感じでスクリーンショットが取れちゃえばOKです! レッツgyazoライフ! イエーイ!

 

「艦これまとめたった~」の検索結果表示をgoogleカスタム検索に置き換えた

黙黙と艦これ画像RTった~と艦これ画像まとめたった~を改造しています。ブログ運営はどうしたって? ・・・・ハハッ!

艦これ画像まとめたった~は、その日に集めた艦これ画像を一日に一度まとめて記事にします。

艦これ画像まとめたった~ | aoringo works

で、この画像、一日に200枚ほど集まるのですね。恐ろしい数ですわ。それらに検索をかますとなると記事全てを走査するのでひっどいことになるわけです。一日に1枚でもそのキーワードのついたツイートがあると当たるわけですからね。

というわけでgoogleカスタム検索の出番ですよ。googleカスタム検索は、googleにインデックスされた情報を返すので改ページによりアドレスが変わる艦これ画像まとめたった~には都合が良いのです。

参考に下のは下記

WordPressのブログ内検索をGoogle検索にする方法 | jMatsuzaki

WordPressにGoogleカスタム検索を組み込む | brokendish

わざわざ記事を起こす必要も無いくらいまとまっていました。ありがとうございます。

結果はこんな感じ。該当改ページへ直行できます。前より使いやすくなったかなという感じですね。よかったよかった。

wordpressプラグイン「W3 Total Cache」を導入している人は管理者メニューが見えていないか確認しよう

WordPress › W3 Total Cache « WordPress Plugins
Easy Web Performance Optimization (WPO) using caching: browser, page, object, database, minify and c …

タイトルなが。

W3 Total Cacheはとても便利です。php処理の結果をキャッシュしそれを表示します。アクセスするたびに毎回処理をしていても無駄ですものね。ありがたい存在です。

しかし!! そのキャッシュの内容に、管理者である貴方用の表示が収納されている可能性があります! 具体的には、

 

こういうのです。

名称がよくわかりませんが「管理者メニュー」って感じですかね。この画面を表示してすぐに別デバイスで確認すると、管理者メニューが丸見えじゃないですか!!!

そこから中に入ろうとするとパスワード画面ではじかれるわけですが、あまり気持ちのいいものではありません。閲覧する人にとっても使い道のないリンクは邪魔なだけです。

管理者が閲覧したときはキャッシュを保存しないように設定しましょう。

ダッシュボード>Performance>Page Cache>Don’t cache pages for logged in users

 

これでログインしているユーザはキャッシュされなくなりました。安心!

wordpressでの投稿前にTRPGリプレイ文体をPHP処理で整形する

TRPGネクロカ「箱庭茶会 コンベンション」灰色卓リプレイpart0 – キャラ作成から始動 | aoringo works

リプレイのスタイルを少し変更し、名前を太字にしてみました。あとは改行されてもスペースを置かないように変更。一般的なリプレイ本と同じ文体ですね。

投稿する時にphp処理を挟む

文章を太字にするには「<b>」タグを利用します。つまり、リプレイの名前に全てこれを埋め込む必要があるのですね。執筆してる段階でそれらを入れていくのは疲れるものです。

グリーンマン:「”私”は構わないのだが。本当に案内せずともよいのかね?」
アン:「故郷を追われた時から覚悟を決めているわ。例え骨になろうともそれが私の運命。受け入れる覚悟は出来ている!」
グリーンマン:「そうか。残念だ。本当に、残念だ。骨になるなんて、そんなの、本当に、もったいない・・・」と笑みを称えて二人を見送ります。

これを、

<b>グリーンマン:</b>「”私”は構わないのだが。本当に案内せずともよいのかね?」

<b>アン:</b>「故郷を追われた時から覚悟を決めているわ。例え骨になろうともそれが私の運命。受け入れる覚悟は出来ている!」

<b>グリーンマン:</b>「そうか。残念だ。本当に、残念だ。骨になるなんて、そんなの、本当に、もったいない・・・」と笑みを称えて二人を見送ります。

こうしたいのです。wordpressでは、一度の改行で「<br>」、二度の改行で「<p>」としても処理されるので、改行を自動でつけるようにもしたいところ。

そういうわけで、ゴリゴリ書いていきますね。

投稿時に内容に処理を挟むには「content_save_pre」フィルター

名前の通り、内容を保存する前に働くフィルターです。

function replace_post_cont($text) {
  $text = preg_replace_callback('/(trpgreplay.*?>)(.*?)(?=</div>)/ius', "trpgreplay", $text);

  return $text;
}

add_filter('content_save_pre', 'replace_post_cont');

記事を保存するときに、「replace_post_cont」関数が働きます。「replace_post_cont」は記事を正規表現で整えるために用意しました。

「preg_replace_callback」は正規表現により抜き出した内容を、さらに関数を使って処理を挟むことができます。かなり便利です。

TRPGリプレイはdivタグの「trpgreplay」クラスを使用しているので、これを検索、中身を抜き出しています。

function trpgreplay($matches) {
  $text = preg_replace("/r/ius", "", "$matches[2]");
  $text = preg_replace("/n+/ius", "n", "$text");
  $text = preg_replace("/n(?!n)/iu", "nn", "$text");
  $text = preg_replace("/^(?!<)(.*?:)/ium", "<b>$1</b>", "$text");
  return $matches[1].$text;
}

そしてリプレイを整形しているのがこれです。「$matches」配列の[0]はマッチングした全体、[1]は$1にマッチングした部分、[2]は$2にマッチングした部分が収納されています。この場合、[1]には「trpgreplay”>」が、[2]には「リプレイの内容」が収納されています。

  $text = preg_replace("/r/ius", "", "$matches[2]");

内容のデータには「r」と「n」といった改行コードが混在している可能性があるので、「r」をまず全て消します。(正規表現じゃなくて普通の置換でよかったかも)

$text = preg_replace("/n+/ius", "n", "$text");

連続した改行を全て単発の改行に直します。これでエディタで執筆した内容の改行がゆらいでも大丈夫です。

  $text = preg_replace("/n(?!n)/iu", "nn", "$text");

単発の改行を二つの連続した改行に直します。一旦クリーニングして再度二度改行してるわけですね。

  $text = preg_replace("/^(?!<)(.*?:)/ium", "<b>$1</b>", "$text");

行の始めが「<」で始まらない場合は「:」までをbタグで囲むという処理です。ここをミスると「<b><b><b><b>」とひどいことになります。

最後にreturnで戻して完了。最終的な形は下記となります。

function trpgreplay($matches) {
  $text = preg_replace("/r/ius", "", "$matches[2]");
  $text = preg_replace("/n+/ius", "n", "$text");
  $text = preg_replace("/n(?!n)/iu", "nn", "$text");
  $text = preg_replace("/^(?!<)(.*?:)/ium", "<b>$1</b>", "$text");
  return $matches[1].$text;
}
function replace_post_cont($text) {
  $text = preg_replace_callback('/(trpgreplay.*?>)(.*?)(?=</div>)/ius', "trpgreplay", $text);
  return $text;
}

add_filter('content_save_pre', 'replace_post_cont');

完璧! 満足ちゃん。

TRPGのリプレイに最適なCSSスタイルを考える

タイトル通りです。

CSSってのは、HTMLの見た目をエレガントにカッチョウヨクデザインする事の出来る特別な文法であります。この機会に勉強するのもよいでしょう。

この記事では、CSSはある程度理解しているという前提に立ち考えていこうかと思いますよ。

pre か p か dl か。

まずどのHTMLタグを使用してデザインをするのか、選定をしていかないといけませんね。

テキストをそのまま持って来るという意味で、一番簡単なのが「pre」タグです。

<pre>
改行なんかも気にせずいけるもんね
わーいわーい
</pre>

brタグなんかを利用しなくてもそのままコピペでいけちゃいますね。ただ、問題点もあります。

それは各行のデザインをする事が出来ないということ。無難なテキスト丸出しなのでションボリーにな感じになりがちです。

二つ目、「dl」タグです。これは辞典などの項目に用いられますね。

<dl>
 <dt>PC1</dt>
 <dd>あいうえお</dd>
</dl>

こんな感じです。見出しと内容でこのように分かれてくれるの比較的見やすい形になるし、CSSでスタイリングもしやすいです。

が、htmlタグを見ての通り、それぞれの項目をタグで包む必要があるので面倒くさいという点があります。

そんなわけで、今回私は「p」タグを利用することにしました。

このブログを作るのに利用されている「wordpress」では、普通に文章を打てば、吐き出されるhtmlデータは全て「p」タグで囲われているのです。

これを利用しない手はありません。

実際にデザインしていく

とはいっても特に難しい事は考えません。見やすい文章になるように細かく調整していくだけです。

<div class="replay">
 <p>PC1:テスト</p>

<p>GM :テテスト</p>

<p>
 PC1:テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>

<p>GM :テ、テスト</p>
</div>

利用するテキストはこんな感じ。div.replayに囲まれた物のみに適応される形ですね。

素のままだとこんな感じ。

まず横幅を大体600pxにします。これは、横長になりすぎるとそれだけでストレスになる場合があるからですね。

読みやすい!

しかし折り返された文章が名前と被って読みづらい気もします。

そこで。

「text-indent」と「padding-left」を使用します。

text-indentは文章の一行目だけをインデントします。

p{
 text-indent:1em;
}

これで、

こんな感じになるわけですね。

じゃあこうしてみると?

p{
 text-indent:-3em;
 padding-left:3em;
 }

こんな感じで二行目以降にインデントする事が出来るわけですね。

他にも色々と装飾を乗っけて、見やすいTRPGリプレイを目指してみて下さいね。

軽く修正してみて最終的にはこんな形に。

<style type="text/css">
 body{
 max-width :600px;
 margin :0 auto;
 }

p{
 margin :0;
 text-indent :-4em;
 padding :10px 0 10px 4em;
 border-bottom :1px dotted gray;
 font-size :12px;
 font-family :monospace;
 }
 </style>

今回のデモは↑より。

また、aoringo worksではIRCやどどんとふの利用により生成されたチャットログを見やすくするためのwebツールを開発しています。

aoringo CHAT logger

こちらもご利用下さいな。

zenbackを入れてみましたが、実際これはどうなの

結論から言うと、あまりにもニッチな話題を取り上げているとあまり効果がないような気がします。とほほん。

zenbackとは

zenbackはブログの内容を解析し関連記事の表示はもちろん、各種ソーシャルボタン、ソーシャルストリーム、他のブログの記事を表示してくれるサービスです。

個人的には「他のブログ記事を表示してくれる」のがミソです。

自然と外へ向けたリンク、こちらへ向けたリンクが増えるので良いかなと思っております。

ただ。

微妙に的外れな気がしないでもない

どどんとふのダイスを変更する | aoringo works

この記事などは、どどんとふ をちょこっと改造する記事です。一番下をぐぐっと見てみると、

ううん、これはどうなんだ?

これだと、外で見られる私の記事などはどういった物なのかが気になるなあ・・・。

もう少し様子をみて流入してくるアクセスを見てみないといけなさそうですね。

記事横にスクロールでついてくる関連記事一覧を追加してみた

みんな大好きYARPP

記事の横に関連記事一覧を設置してみました。

YARPPというプラグインによる設置で、精度も高く、カスタマイズも簡単なのはとてもありがたいです。

WordPress › Yet Another Related Posts Plugin « WordPress Plugins

プラグインを設置して設定を見ると、

こんな感じで日本語なのも手伝ってとても分かりやすい。カスタマイズをしなくてもリスト表示、サムネイル表示ができてとても助かります。

ただ、やっぱりカスタマイズしたくなるのが人の性分でして、そういう人のためにテンプレートphpを出力してくれる機能まであります。痒いところに手が届きます。

テンプレートは複数種類あり、それを元に自分の好みに変更を加えることが出来ますよ。

テンプレートphpコード

<div id="YARPP-posts" class="side-widget">
  <p class="widget-title">関連記事</p>
  <?php if(have_posts()):
    $options = array('thumbnails_heading', 'thumbnails_default', 'no_results');
    extract($this->parse_args($args, $options));
    if(empty($thumbnails_default))
      $thumbnails_default = get_header_image();
    //echo esc_url($thumbnails_default); デフォルトサムネイルさん
    //
    ?>
    <ul>
      <?php while(have_posts()) : the_post(); ?>
        <li>
          <p><a href="<?php the_permalink() ?>" rel="bookmark">
              <?php
              if(has_post_thumbnail()) { //サムネイルがあるかどうか探す
                the_post_thumbnail('yarppthumb');
              } else {
                echo '<img width="100" height="100" src="' . esc_url($thumbnails_default) . '" class="attachment-yarppthumb wp-post-image" alt="secondarytile" />';
              }
              ?>
              <?php the_title(); ?></a>
            <br><?php echo get_the_excerpt(); ?></p>
          <!-- (<?php the_score(); ?>)-->
        </li>
      <?php endwhile; ?>
    </ul>
  <?php else: ?>
    <p>No related posts.</p>
  <?php endif; ?>
</div>

これが今回記述したコードです。特に工夫したことは無い素直な感じの物。

サムネイルが設定されてればサムネイルを出力し、されてなかったらデフォルトサムネイルを出力します。

YARPPに設定されているデフォルト画像は

$options = array('thumbnails_heading', 'thumbnails_default', 'no_results');
    extract($this->parse_args($args, $options));
    if(empty($thumbnails_default))
      $thumbnails_default = get_header_image();
    echo esc_url($thumbnails_default); デフォルトサムネイルさん

で吐き出す事ができます。今後デフォルト画像は差し替えるかもしれないので、こうしていた方が取り回し楽ですよね。

cssはこんな感じです。

/*サイドウィジェット、関連記事*/
#YARPP-posts li{
  margin   :15px 0;
  height:90px;
  overflow:hidden;
}
#YARPP-posts li:after{
  content :".";
  color   :transparent;
  clear   :both;
}

#YARPP-posts img{
  border-radius :5px;
  width         :90px;
  height        :90px;
  float         :left;
  margin-right  :5px;
}
#YARPP-posts img:hover{
  opacity: 0.5;
}
#YARPP-posts li a{
  font-size:12px;
  font-weight:bold;
}

#YARPP-posts li  p{
  font-size  :10px;
  margin     :0;
  padding    :0;
  text-align :left;
}

画像を文字が回り込むような感じですかね。オーバーしそうだったら「overflow:hidden;」で非表示にします。

スクロールでついてくるようにしよう

あとはjqueryを使って、関連記事が追いかけてくるようにします。賛否両論だと思いますが、個人的にはこの仕様は好きです。

jQuery(function ($) {
            var nav = $('#YARPP-posts'), offset = nav.offset();
            $(window).scroll(function () {
              if ($(window).scrollTop() > offset.top - 20) {
                nav.addClass('fixed');
              } else {
                nav.removeClass('fixed');
              }
            });
          });

画面上部に関連記事の要素が来ると、cssクラス「fixed」を追加します。

cssファイルに以下を追加

.fixed{
  position :fixed;
  top      :20px;
}

ウインドウの絶対位置に要素を配置するのが「position :fixed;」ですね。「top :20px;」は表示位置となっています。

あとこの一連のjqueryコードとcssコードはwordpressテーマ「wsc7」に元々収録されています。元々はサイドバー全てがスクロールでついてくるのですけれど、関連記事だけ動くように変更してみました。

本当に痒いところに手が届く良いテーマだと思います。

WSC7

wordpress – query posts – orderby – 記事の検索条件

テンプレートタグ/query posts – WordPress Codex 日本語版

スニペット

'none' - 順番指定なし(バージョン 2.8 以降のみ)
'ID' - ポストID
'author' - 投稿者名
'title' - 記事タイトル
'date' - 投稿日時
'modified' - 記事の更新日付
'parent' - 親順に並べる。記事、ページに親関係が設定されていた場合、その親IDが基準となる。
'rand' - ランダム
'comment_count' - コメント数で並べ替え
'menu_order' - おそらく固定ページ作成の時に利用する「順列」を基準にするのだと思われる。

//↓利用する場合はカスタムフィールドによる検索条件を事前に組む必要がある↓
'meta_value' - カスタムフィールド内の値
'meta_value_num' - カスタムフィールド内の値を数字として認識

頻繁に使う割りに毎回調べている気がするのでまとめる。
「none」の利用方法がよくわからないが、mysqlに入っているものを順番に抜き出す、という意味なのだろうか。