Rif.3rd

Woopra

レンタルサーバーを変えて、以前使用していたアクセス解析が使えなくなったので、色々探して出会ったのがWoopra - Website Tracking and Analyticsでした。
Wordpressの場合、プラグインのWordPress.com Statsが使えるならそれが一番いいと思っています。が、それが使えない私のような特異体質の人（？）で、複数サイトを持っていたりするなら、あえてプラグインでは無く、デスクトップで動作の軽いものもいいと思います。
Woopraは、GoogleAnalyticsと並ぶ多機能ですが、加えてリアルタイムでなおかつ画面が美しい。←ここ重要。テストに出ます（？）
β版で無料ということで、英語ですが、こちらに詳しく設置方法など書かれています。
私の場合はサイトが認証されるまで一か月程かかりましたが、実際デスクトップでWoopraを見たらホント感動ものです。設置後一週間程経ちますが、大満足です。
Wordpressのブログにコードの貼り付けには、一応プラグインもあります。
via: Woopra » Download Woopra(下の方)

まぁ、アクセスを解析する前に、更新しろよ！って感じですが。あはは。

ちょっと出張が多くて自宅のパソコンじゃないので、あと一週間ぐらいは、テーマ系いじれません。
あと、思ってたよりWordpressの記事よりDesk Topの記事に訪問してくれる方が多いようですが誠に恐縮です。
以前は結構デスクトップいじっていましたが、CS2を入れたあたりから容量が心配で全くいじることができなくなりました。
そろそろCS3にバージョンアップするので、デスクトップカスタマイズは今後不可能だと思います。ごめんなさい。

タグ: PLUGIN, woopra, stats

WP Google Custom Search Box and Results Page

Wordpress テーマのデフォルトサーチボックスと検索結果ページをGoogle Custom Searchに変える場合

Google Custom Search Engine - Site search and more
Create a Custom Search Engine ボタンをクリック

Basic information

サーチエンジン名:
サーチエンジン説明:
キーワード:
言語設定: 日本

What do you want to search?

Only sites I select.　にチェック

Select some sites

Sites to search:　Your domain.com/*

Select an edition

Standard edition - Free, ads are required on results pages. にチェック
I have read and agree to the 利用規約. にチェック
Next ボタンをクリック

Congratulations!

Send confirmation email to Your Email add
Finish ボタンをクリック

Search engines I’ve created

control panel リンクをクリック

Control panel: Your Search Engine

Code をクリック

Search results hosting options

Host results on your website: にチェック
iframe – requires two pages: one for the search box and another for the results にチェック

Specify search results details

http://Your dmain.com/index.php?

Search box code: yourblog/wp-content/themes/yourtemplate/searchform.phpのsearch formのコードをSearch box codeに以下の２行を足して書き換える

<input type="hidden" name="s" value="Search" />
<input type="hidden" name="submit" value="" />

<form action="http://Your dmain.com/index.php?" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="002196912597702158287:j0tw3idxz5o" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="検索" />
    <input type="hidden" name="s" value="Search" />
    <input type="hidden" name="submit" value="" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=ja"></script>

Search results code

Search results code: yourblog/wp-content/themes/yourtemplate/search.phpを書き換える

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

検索結果ページを新規作成する場合

新規に検索結果ページを作り、パーマリンクをコピーする
Specify search results detailsで指定するURLに貼り付ける
Search box codeをそのサーチボックスを表示したい場所へそのままコピペする
Search results codeを新規作成した検索結果ページにコピペする

DEMO: Rif.jQ

右サイドバー上部に通常のサーチボックス、下部にGoogle Custom Search boxをとりあえず置いています。

タグ: google custom search, search

WP PhotoStack+csscolor theme

DOWNLOAD: MONOTONE

Photologというとbackgroundが黒か白一色っていうのが常でしたが、このテーマは何がすごいかって、写真の色に合わせて背景色を自動で変えてくれちゃいます。

Thumb.php and .htaccess Installation:

1) 同梱されている htaccess.txt と thumb.php のふたつはテーマディレクトリではなく、 site’s root folder (xmlrpc.php があるところ)にアップロードします。
2) htaccess.txt を .htaccess にリネームします。
3) 同じく　root folderにcacheを作ります。(777)

thumb.php

thumb.phpでPhotoStackを利用していて、投稿記事でアップロードした画像をギャラリーにしてくれます。

csscolor.php

csscolor.phpは、CSS Colors: Take Control Using PHPで、BarelyFitz DesignsのSoftware Projectsです。これで写真の色に合わせた背景色を自動で設定してくれています。

archive.php

archive.phpも用意されていて、パーマリンクで月別を選んでアーカイブページのテンプレートを指定するとサムネイル表示されます。

どれもそれぞれ設置すると面倒ですが、このテーマを設置すれば素敵なPhotoLogが簡単に作れちゃいます。
時間を見て私も完全に移行する予定です。

DEMO: Rif.Photos

タグ: photolog, THEME

WP Facebox plugin

現在使用しているテーマRif.Magazineでは、llightbox表示を画像だけでなく、HTMLやIflame等の表示もしたいので、表示がかわいらしいjQueryベースのFaceboxを使用しました。Wordpressのプラグインで簡単に設置できます。
（当サイトRif.3rdではThickBoxを使用しています。）

via: Facebox 1.2
Wordpress plugin: WordPress › WP Facebox « WordPress Plugins

テキストリンクから画像表示、サムネイル画像からフルサイズイメージ、テキストリンクからDIV表示、テキストリンクからhtml fileをAjax表示、Iflameの表示例と使用コードを載せました。
Wordpress pluginは有効化するだけで、aタグの画像に rel=”facebox” が自動で付けられます。

DEMO: Facebox : Rif.jQ

タグ: Rif magazine, PLUGIN, jQuery, Facebox

theme 着替えました

jQueryを使用したマガジンタイプのテーマに着替えました。
後日Rif.jQの仕様で配布予定です。

タグ: THEME, jQuery, Rif magazine

WP カスタマイズ小技1

サイドバーの最近の投稿にサムネイル画像も表示する方法

必要なもの

カスタムフィールド
Recent posts plugin
Post-Plugin Library(Recent posts pluginを使用するのに必要です )

方法

カスタムフィールド

注意

毎回記事ごとに表示する画像とカスムフィールドの記入が必要になります。
画像のアップロードが行えていて、Recent posts plugin が使える環境であることが前提です。

プラグインのオプション設定

Post-Plugin Library をアップロードしてからRecent posts plugin を有効化します。
General Settingsで表示数やページを含めるかなどを好みで設定します。
Output Settings

Output template:

<li>{link}<br />
<a href="{url}"><img src="{custom:thumb}" alt="{custom:thumb-alt}" /></a><br />
<span class="small">{date} - {categorylinks}</span></li>

Text and codes before the list:

<ul>

Text and codes after the list:

</ul>

サイドバーテンプレート

<?php if (function_exists('recent_posts')) { ?>
	<div class="side-posts memo">
    	        <div class="topmemo"></div>
		<h2 id="toc-7"><?php _e('Recent Posts'); ?></h2>
    	        <?php recent_posts(); ?>
                <div class="bottommemo"></div>
       </div>
<?php } ?>

CSS: 画像もあるので、ダウンロードして確認してください。
Demo: Rif.create

画像の用意

投稿記事に使用した画像のサムネイルを使用する場合は、既に画像をアップロードしているので、その画像のサムネイルを使います。
記事に全く画像を使用していない場合は、新たに画像をアップロードするか、過去にアップロードした画像をギャラリーから選びます。
前もって、そんな時の為の画像や、カテゴリ別の画像を用意して分かりやすい名前でアップロードしておくと後が楽です。
一度アップロードした画像は
管理画面>設定>その他の設定>画像サイズ
にて指定したサイズで自動でサムネイルが作られています。
例えば管理画面でサムネイル画像サイズを100×100に設定すると
http://mysite.com/wp-content/uploads/2008/07/thumbnails.png
とアップロードした大きな画像は、自動的に
http://mysite.com/wp-content/uploads/2008/07/thumbnails-100×100.png
というサムネイル画像が作られるという訳です。よって、一度アップロードした大きな画像のサムネイルを使いたい時は、-100×100 を付加したファイル名を使用します。(もちろんいったんサムネイル画像を記事に挿入してそのファイル名をコピーしても同じことです。)

カスタムフィールドの記入

投稿作成時に下にあるカスタムフィールドを記入します。
キーの入力
後でカスタムフィールドに入力したサムネイル画像を呼び出す時に必要になりますので、それがサムネイル画像だと分かる名前を入力します。ここでは"Thumbnail" にしました。大文字と小文字は区別されるので、自分がCSSのクラス名と区別できるように大文字を利用しました。
以後、記事を投稿する度にこのカスタムフィールドのキーを使います。
値の記入
ここでは先ほどアップロードしたファイル
http://mysite.com/wp-content/uploads/2008/07/thumbnails.png
のサムネイル画像を使用するので
http://mysite.com/wp-content/uploads/2008/07/thumbnails-100×100.png
と入力します。

※上記はWP Free Theme Rif.createでの利用例です。

タグ: Rif.create, THEME, tips

WP Free Theme Rif.create

WordpressのVintage風テーマを作りました。
今まで「自分」の為に、何度かテーマを作りましたが、もっと勉強していきたいので、無料配布することにより、不備な点、もっといいやり方などありましたら教えていただけたらと思います。
尚、今回のテーマは背景画像を中心にしたもので、更なるカスタマイズには不向きです。
カスタマイズしやすいテーマもそのうちアップする予定です。
現在使用しているテーマも、時間が許せば整理してアップしたいと思っています。

プレビュー

Demo

Rif.creat

動作確認

WordPress 2.6-beta1

使用プラグイン

使用Ajax framework

Adobe Labs - Spry framework for Ajax

SpryTabbedPanels.js (タブ　)
SpryCollapsiblePanel.js (閉会式パネル)

カスタマイズ

トップページ(hoe.php)

上部に最新記事ひとつ、その下にタブでカテゴリ別の最新記事4件、カスタムフィールドを利用したサムネイルと共に表示しています。
カテゴリIDの入力が必要です。
デフォルトでは表示カテゴリ数は3つですが、コードの追加で数の増減はできます。
数があまり多い場合はタブ自体のサイズ変更が必要です。
最初に開いておくカテゴリを指定できます。
トップページは、設定でページを選ばなくても、home.phpを作るとindex.phpより優先されます。

トップページと他のページではサイドバーを変えています。
デフォルトではトップページでカテゴリ別の最新投稿表示をしているのでサイドバーの最近の投稿は非表示にしています。
カスタムフィールドを利用して記事のサムネイル表示をしています。
Recent Comments, Recent Postsプラグインのオプション設定が必要になります。
about meボタンをクリックするとボックスが開閉します。aboutme.phpに記入した内容が表示されます。デフォルトではAboutページへリンクを貼っています。
サイドバー(sidebar.php)を呼び込むテンプレートタグは

<?php get_sidebar(); ?>

ですが、sidebar-2.phpを呼び込む時は

<?php get_sidebar(2); ?>

と、複数サイドバーを操作することが楽になりました。

ヘッダーのブログタイトルの右に、メモ風にページメニューを表示しています。

ボトムバー(footer.php)

フッターにボトムバーを表示しました。

Other

その他、カスタムフィールド、プラグインのオプション設定方法をご覧ください。（関連記事は“Rif.create” タグページに随時アップしていきます。）
このテーマに限らず、Wordpress テーマのカスタマイズに応用できると思います。

ダウンロード

Wordpress theme Rif.create
（Mediafire.comからのダウンロードになります。）

licenses

タグ: THEME, Rif.create

WP Zemanta plugin

Zemanta は、ブログの記事の内容に関連した写真をライブで検索してくれる、エディターを拡張するサイドバーです。
Firefox 3や Flock, IE 7の拡張プラグインとしてブログ投稿に使用できますが、Wordpress 2.5.1 に対応した Wordpress plugin としても用意されているので、試してみました。

窓の杜 - 【REVIEW】ブログ記事の内容に関連した画像を自動検索して挿絵にできる「Zemanta」で詳しく説明されています。

ユーザーが投稿ページで300字書き込むごとに、記事内からキーワードが自動抽出され、それをもとに記事の内容に見合った画像がWeb上から自動検索される仕組み。また、編集中の記事が300字に満たなくても、サイドバー上のボタンを押すことで画像の検索が可能。画像は“Wikipedia”や画像共有サイト“Flickr”などから二次利用が許諾されているものが検索されるので、著作権上の問題もない。

via: 窓の杜

Gallery

私が今 wordpress でこの投稿を書いている最中も、右サイドバーで画像が更新されてます。

見ての通り、文章はほとんど日本語なので、英語の部分だけで検索されている様ですが、何故か「舞妓さん」や「長嶋監督」の画像も表示されたので、意味は分からないけど日本語だからとりあえず日本系で、みたいな感じでしょうか。

今サイドバーに表示される写真は 3×3　表示でどんどんページ数が増えていきます。
矢印ボタンでスライドして観られるます。
記事を書きこむ毎に写真も更新され、重さは全く感じません。

Articles

写真の下には関連のある最新の投稿記事のリンクが表示されています。

Preferences

プラグインのオプションは、投稿画面のサイドバーの一番下にあるPreferencesから行います。
画像の位置、Amazon ID, CSSをオリジナルにするか, ボタンのスタイル種類を選択します。

Links

エディタの下には、投稿記事のキーワードが表示され、クリックすると、該当サイトのリンクや、Wikipedia へのリンクが投稿記事のキーワードにリンクが付きます。
表示されるのは英語のキーワードのみです。

Reblog

投降した記事の下に、Reblog ボタンが表示されます。（非表示の選択もできます。）
この記事のしたのボタン、もしくはブラウザのアドオンのボタンをクリックすると、Zemanta のエディタ画面になります。
サイドバーから引用した記事を、Wordpress, Blogger Blogger, Typepad, Movable Type なら自分のブログへ簡単に投稿することができます。
左サイドバーに、記事の全文が表示され、好きな場所をブロックで引用に簡単に選択、挿入することができます。
右サイドバーには、関連写真、関連記事のライブ検索された結果が表示され、それも含めて引用投稿できます。

感想

私の場合はキーワードはほぼ英語なので、それほど違和感無く使えますが、これが日本語対応になったら、ものすごく便利だと思います。
書いている記事に関連している他の記事のリンクがArticlesにライブ表示されるので、思わぬところから（片思いの）知り合いができそうで、楽しみです。
もちろん表示されるのも全部英語のサイトですので、眺めるだけですけど。
日本語も対応になったらいいなぁ。
まだ一回試しただけなので、見当違いなところがあるかもしれません。
Flickr から著作権の心配無く簡単に記事に関連した画像が取り込めるので、ちょっと記事に色づけしたいって時は便利です。

プラグインダウンロード

WordPress > Zemanta WordPress Plugins

画像引用例

Image by chucks via Flickr

タグ: PLUGIN, editor, zemanta, FLICKR

RSSアイコンも普通に浸透しているので、個性的なものを選びたくなります。あまりにもかわいすぎるよ。これ。

via: RSS Drink Cocktail Party Icons | Download RSS Feeds PNG icon pack | IconsPedia
他にもPNG Icons & Icon Packs Download | IconsPediaでは、こんなのもダウンロードできます。

タグ: feed, icon, rss

Rif.3rd

Woopra

関連する投稿

WP Google Custom Search Box and Results Page

Wordpress テーマのデフォルトサーチボックスと検索結果ページをGoogle Custom Searchに変える場合

Basic information

What do you want to search?

Select some sites

Select an edition

Congratulations!

Search engines I’ve created

Control panel: Your Search Engine

Search results hosting options

Specify search results details

Search box code

Search results code

検索結果ページを新規作成する場合

関連する投稿

WP PhotoStack+csscolor theme

Thumb.php and .htaccess Installation:

thumb.php

csscolor.php

archive.php

関連する投稿

WP Facebox plugin

関連する投稿

theme 着替えました

関連する投稿

WP カスタマイズ小技1

サイドバーの最近の投稿にサムネイル画像も表示する方法

必要なもの

方法

カスタムフィールド

注意

プラグインのオプション設定

サイドバーテンプレート

画像の用意

カスタムフィールドの記入

関連する投稿

WP Free Theme Rif.create

プレビュー

Demo

動作確認

使用プラグイン

使用Ajax framework

カスタマイズ

トップページ(hoe.php)

サイドバー(sidebar.php and sidebar-2.php)

ボトムバー(footer.php)

Other

ダウンロード

licenses

関連する投稿

WP Zemanta plugin

Gallery

Articles

Preferences

Links

Reblog

感想

プラグインダウンロード

サイドバー（プラグイン）からRelated 引用例

画像引用例

関連する投稿

関連タグの＋－に画像を付けておしゃれに

Demo

使用しているプラグイン

プラグインオプション画面設定（関連タグ）

Archive.php

CSS

使用画像

関連する投稿

夏を先取りカクテルドリンクなRSSアイコン

関連する投稿