• 独自のフレームワーク “RikaBox” を利用た Ajax テーマオプション画面
• 特別なページのスクロール表示
• 7つに区分されたのウィジェットスペースと5つのカスタムウィジェット
• ローカライズ化
• DEMO
• 2種類のスタイルシート同梱

• 詳細・ダウンロード：　WordPress Free Theme RikaBox2 | YZ WEBDESIGN

ブログバージョンは今月末日まで無料でダウンロードできます。

ECmate

WordPress 2.8+ 用無料テーマを作りました。上図左がデフォルトカラーです。

• ページトップのカテゴリ付きドロップダウンナビゲーションメニュー
• クロスブラウザ：Safari, Firefox, Opera, IE.
• W3C XHTML valid
• YUI Fonts CSS
• テーマオプションパネルからカラーカスタマイズ
• デモ：DEMO

プレビュー

Arthemia

詳細

WP theme Arthemia Premium JS (日本) | YZ WEBDESIGN

まえがき

母親は年金を納めるだけ納めて一度も受け取らずに他界。取り残された一人暮らしの父親はどんどん老けてゆく。
兄弟はそれぞれ結婚して離れ離れ。
小さな子どもがいるから電話する時間帯がわからず、ま、今度会った時でいっか。
盆、正月に集まっても慌ただしく、上っ面の会話が当たり障りなく。
それでも日々平穏に暮らしてきた気がしてたけど、何か、もう一度、遠く離れて暮らすファミリーが一体になれる機会はないかと、ふと思う。

そうだ！

完全に閲覧者をファミリーに限定して、完全に記事投稿者とコメント投稿者をファミリーに限定したら、パソコンに眠っている思い出の写真をアップすればウェブアルバムができてバックアップにもなって、おまけにファミリーが喜ぶ。
なんでもいいから更新すれば、元気なんだと伝えられる。コメントすればコミュニケーションがはかれる。
小さな甥っ子の成長をタイムリーに知ることができる。
年老いた父の近況を知ることができる。
Wordpress でそれを作りました。

限定した人だけ閲覧可能に

wp-blog-header.php の wp(): の直前に以下のコードを追加
[php]
if (is_user_logged_in()){
}
else {
auth_redirect();
};
[/php]

これを使うと、ログインせずに下層のページに直接リンクした場合はログイン画面にリダイレクトされます。

携帯からメール投稿も

写メを送るだけ、でもりっぱな投稿です。キーボードが使えなくてもこれならできる。パソコンに向かうのが面倒でもコメントできる。

プラグイン

プラグイン名: Ktai Entry

1. 各種設定→投稿設定→「メールでの投稿」: 私はヤフーメールは使わないので、ヤフーメールアドレスを設定しました。
2. メールサーバー: ssl://pop.mail.yahoo.co.jp
3. ポート: 995
4. Ktai Entry オプション: サーバーオプション　チェックは外す

.htaccess

コアサーバーを利用しているので 携帯投稿した画像を表示するために.htaccessを作成
wp-admin へ
[php]

AddHandler application/x-httpd-phpcgi .php

[/php]
KtaiEntryフォルダーへ
[php]

AddHandler application/x-httpd-phpcgi .php

[/php]

携帯からの画像もlightbox 対応にする

トップディレクトリへ my-hacks.php 作成
[php]
function ke_rel_lightbox($html, $id, $size) {
if (preg_match(‘/rel=["\']/’, $html, $match)) {
$html = str_replace($match[0], $match[0] . ‘lightbox ‘, $html);
} elseif (! preg_match(‘/rel=/’, $html)) {
$html = str_replace(‘ }
return $html;
}
add_filter(‘image_link/ktai_entry.php’, ‘ke_rel_lightbox’, 10, 3);
?>
[/php]
私は Shadowbox JS プラグインを使用していますが、rel=lightbox が一緒なので、この設定できちんと表示されました。

ユーザーの新規追加

ファミリーのパソコンから投稿・閲覧用、携帯からの投稿・閲覧用のアドレスでひとりにつきふたつのユーザー登録をする。
ログインしないと記事が全く見れないので、ログインしないとコメントもできないということになる。

携帯表示も

一応携帯でサイトも見れるように。パケット対策してない人には一言必要。
プラグイン: Ktai Style

テーマ

テーマはデフォルトで十分でしたが、何年後かに見た時に思い出アルバム的にしたいので写真表示にこだわってテーマ探しをしました。
年寄りや、パソコンにまだ慣れていない子供でも楽しめるように、すべて日本語表示で、カスタムフィールドは避けました。
写真の無い、文字だけの投稿でも浮かないようにするには、フォトブログは向きませんでした。
携帯投稿の写真にカスタムフィールドを付けるやり方が分かったら、だいぶ幅が広がるなー。
ということで、WP theme Fusion 日本語化 « Rif.3rdしたわけです。

ギャラリーページ

wp-kougabu （画像付きアーカイブ） を利用してギャラリーページを作りました。
一番重要なページになるでしょう。

投稿者別アーカイブ

こうなると、やっと出番が来たauther php « Rif.3rd。
Fusion them には初めから入ってます。

ユーザー全員にメール

WordPress › Email Users « WordPress Plugins
受取人名が全角だと文字化け。
HTML形式が反映されない。一応送れるからいいや。

オリジナルログイン

プラグイン: BM Custom Login
なにしろ、ログインした人しか閲覧でいないのだから、普通より多く出現するログインページ。玄関みたいなものだから、プラグインを使って思いっきりオリジナルに変えました。
PSDファイルが入っているから、簡単でした。
ファミリーの中に、この配慮に気付く人はいないと思うけど。

あとがき

中々遠くて会いに行けないけど、毎日これを更新するのが、今私にできる小さな親孝行です。公開はできないけれど、ずっと続けていつか、自分の子供や孫が受け継いでくれたらスゴイなーなんて。「あるとおもいます！」

download

日本語化

1. WordPress › Fusion « WordPress Themesよりテーマファイルをダウンロード
2. lang フォルダへ ja.mo ファイルをアップロード
3. おわり

今この Rif.3rd では 日本語化していませんが、他サイトで WordPress2.7.1, Fusion v2.5 で問題無く動いています。

960 Grid Systemよりダウンロードしたフォルダの中の code > css > の中にある以下のスタイルシートを読み込みます。

• reset.css
• text.css
• 960.css

WordPress の場合はその他に通常通り style.css を用意します。
WP G960 theme では style.css で上記スタイルシートを読み込んでいます。

配置

WordPress theme G960 v1.0.1 では960 Grid System の container_12 の CSS を利用しています。
感覚的な説明ですが、上図のピンクの縦の帯が12個あり、一個を 1グリッド (grid_1) として考えます。各グリッド は左右 10px のマージンが付いています。

container_12 クラス

まず body class =”container_12″ とすることで、
[css]
.container_12 { margin-left:auto; margin-right: auto;width:960px;}
[/css]
と、960.css により、960px の横幅が決まり、その後のCSSクラスを .container_16 と区別します。
その中に、1から12までのグリッドを好きなように配置していきます。

grid_1 から grid_12 クラス

上図を拡大して見ると分かると思いますが、grid_1(ピンクの縦帯ひとつ分) は幅60pxに左右のマージンが10pxです。
全横幅は12グリッド なので、G960 theme のhome.php では、

としています。足して 12グリッド になればいいわけです。
G960 theme のsingle.php では、左サイドバーを取り払ってエントリーを広げました。

grid_12 クラス

ヘッダー、トップメニューや、パンくずメニュー、フッターなどは、12グリッド そのままの横幅でいいので、クラスgrid_12 の div で囲み、clearクラスを最後に付けるだけです。それをTopMenu.phpなど名前を付けて、小分けに保存しておけば、上下好きな位置にインクルードできます。
[php]

[/php]
[php]

[/php]

prefix_1 から prefix_11

prefix クラスで左パディングが決められています。
prefix_1 で 1グリッド分（60px）+ 左右マージン分(10x2px) = 80px 左にパディングが入ります。
[css]
.prefix_1 {padding-left: 80px;}
[/css]
例えば PageNavi plugin をエントリーの下に配置したい場合、
[php]

[/php]
home.php や archive.php でエントリーは左サイドバー 3グリッド分の横なので、frefix_3 クラスを付ければエントリーの真下に PageNavi が配置されます。PageNavi の幅は、残り9グリッドから好みに合わせて決めます。
G960 v1.0.1 では grid_5 prefix_3 に設定しましたが、エントリー数が多いと収まらないので、grid_6 prefix_3 へ変えた方が良さそうです。

suffix_1 から suffix_11

suffix クラスで右パディングが決められています。suffix_1 で1グリッド分右にパディングが入ります。
[css]
.suffix_1 {padding-right:80px}
.suffix_2 {padding-right:160px}
[/css]

横幅は簡単に変えられる。

以上を踏まえれば、サイドバーの幅、エントリーの幅などは、全幅合計が12グリッドにさえすれば、好きなように変えられるということになります。
8グリッド分のエントリーの中を区切ることも、もちろんできます。
実際には、グリッドの中に、G960 theme では、box などの div でパディングを設定しているので、エントリーを 2グリッド x 4 = 8グリッド　とはいきませんが、特定のページテンプレートなど、変化を加えたい場合は box クラスを取り払って、グリッドのみで区切ってみると面白いかもしれません。
Rif.G960 theme » Sitemapでは、8グリッドの中を3つに分けてみました。

以上は、WordPress theme G960-1.0.1 での説明になります。 また、リンク先のサイドバーには THEME SWITCHER があり、同テーマの他のバージョンに切り替わりますが、今回は v1.0.1 のみ、参考にしてください。
次回に続きます

特徴

• No Script CSS Menu: CSS のみの、上部プルダウンメニューに、 WordPress テンプレートタグでのページメニューとカテゴリ・月別アーカイブとサーチボックスを表示します。
• Widgets: 右サイドバー・左サイドバー・シングルページサイドバー・ページサイドバーをウィジェット対応にしました。
• Comment list: WordPress 2.7 以降に装備されたコメントリストのスレッド表示と返信機能に対応しました。
• シングルページ・サイドバーに目次を表示します。
• ページ・サイドバーにそのページの子ページを表示します。
• トップページ（home.php）にて、カスタムフィールドでサムネイル表示します。
• カスタマイズの骨組としてご利用ください。

対応プラグインプラグイン

Breadcrumb NavXT v.3.1.0

パンくずナビゲーション

flickrRSS v.5.0
ZooomrRSS v.1.0

左サイドバーのウィジェットで対応しています。

Get Recent Comments v.2.0.2

Gravatar 付きの最近のコメント表示ができます。右サイドバーのウィジェットで対応しています。プラグイン設定画面でアバター表示設定が必要です。

Table of Contents Generator v.0.3

シングルページの右サイドバーで目次の表示をします。

WP-PageNaviv.2.40
Organize Series

プラグインスタイルシートをテーマに合わせました。

Demo

• Rif.G960 theme | Just another WordPress weblog

Download

• WordPress theme G960-1.0.1 for WordPress 2.7.1
• PageNavi CSS
• functions.php 修正版

カスタマイズ方法などは次回に続きます。

• 2009 03 06: ダウンロードリンク先変更しました。
• 2009 03 08: functions.php 修正しました。
• 2009 03 09 リンク閉じました。

管理画面のリンクで任意のページ、外部リンクなどをブックマークして、第二のーメニューとして利用する方法（フッターにミニメニューを置く場合など。）

リンクの編集

リンク

1. 管理画面のリンクの編集で表示したいページや外部リンクを表示したい順に追加する。
2. リンクカテゴリ名を、ブログロールと区別するため同一の任意のものにする。（例: Navigation）

＊テンプレートタグ/wp list bookmarks – WordPress Codex 日本語版を参考に、細かいパラメータ利用できますが、この場合はリンク id 順で最初にブックマークしておくのが一番楽だったので、その場合のみの方法です。

コード

[php]

[/php]

パラメータ

メリット

• ブックマークのタグを使用するのでメインで使用するメニューリストとは区別しやすい
• 内容を管理画面で編集できる

ID の見つけ方

• リンク id: リンクの編集画面でリンク名にカーソルを合わせるとステータスバーに表示されるアドレスの最後を見る
• リンクカテゴリ id: リンクカテゴリー画面でカテゴリ名にカーソルを合わせるとステータスバーに表示されるアドレスの最後を見る

表示例

• このページのフッター

P.S. ブックマークを利用する方法は過去にどこかの英文の記事を読んで知り、活用していましたが、どこの記事を参考にしたか忘れてしまいました。分かったらリンクを貼りたいと思います。

任意のページのみ表示+現在のページにcurrentクラス付け+スムーススクロールJSによるページ移動とスクロール

ホームにいる時にcurrentクラス付加

[php]
>Home
[/php]

ページスクロール利用

使用スクリプト

[JS]ページ内をスムーズにスクロールできるスクリプト：更新- 3.0.5 | コリス

header

[php]


[/php]

コード

• 各アーカイブページ、検索ページ、シングルページにいるときにcurrentクラス付加
• クリックでスクリプトを利用した任意の個所へスクロール

bloginfo('url')ページへ移動し、homeblogのidを付けた場所へスクロールします。
[php]
Digg-like navigation bar using CSS

ページリストの基本

コード 1（WP1.5以降）

[php]

[/php]

表示例 1

デフォルト

デフォルト値

[php]
$defaults = array(
‘depth’ => 0,
‘show_date’ => ”,
‘date_format’ => get_option(‘date_format’),
‘child_of’ => 0,
‘exclude’ => ”,
‘title_li’ => __(‘Pages’),
‘echo’ => 1,
‘authors’ => ”,
‘sort_column’ => ‘menu_order, post_title’);
[/php]

パラメータ

カスタマイズ：タイトル無し・任意のページ除去・ページ番号順に並べ替え

コード 2

[php]

title_li=&
exclude=698&
sort_column=menu_order
‘);
?>

[/php]

表示例 2

カスタマイズ

カスタマイズ：表示ページのサブページをサイドバーに表示

コード 3

[php]
if (is_page() && $post->post_parent ) { //サブページのとき
$parent=$post->post_parent;
} else { //トップページのとき
$parent=$post->ID;
}
$ul_top_title = get_the_title($parent);
$ul_top_url = get_permalink($parent);
if(wp_list_pages(“title_li=&child_of=$parent&echo=0″ )):
?>

CSS 1

コード 4

[css]
#sidebar2 .pageNav-bg h3 {
background-color: #e5eff1;
background-image: url(images/top.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
height: 55px;
text-indent: -9000em;
overflow: hidden;
display: block;
}
#sidebar2 .pageNav-bg {
background-color: #e5eff1;
background-image: url(images/lister-bg.gif);
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
width: 200px;
padding-bottom: 16px;
margin: 10px 0pt 15px 40px;
border-bottom: 1px solid #020202;
border-right: 1px solid #020202;
}
#sidebar2 .pageNav-bg ul {
list-style-type: none;
list-style-image: none;
list-style-position: outside;
color: #030303;
text-align: left;
margin: 0;
}
#sidebar2 .pageNav-bg ul li {
border: none;
list-style: url(images/star.gif) none outside;
margin-left: -15px;
}
#sidebar2 .pageNav-bg .page_item {
margin-left: 15px;
}
#sidebar2 .pageNav-bg .page_item .page_item {
border: none;
list-style: url(images/star.gif) none outside;
margin-left: -15px;
}
#sidebar2 .pageNav-bg .current_page_item a {
color: #000;
border-bottom: 1px solid pink;
}
[/css] ]]> http://rikaizm.com/articles/wordpress/wp-menu-list-customize.html/feed 0