www.hbirds.net

使っているテーマのひとつ aerosold のサイドバーをアイテムごとにアイランド状に分割するカスタマイズを行ってみた。
ポイントはfunctions.php の変更。

変更前の functions.php

<?php     //The Sidebar Widget Function
if ( function_exists('register_sidebars') )
        register_sidebars(5,array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    )); ?>

変更後の functions.php

<?php     //The Sidebar Widget Function
if ( function_exists('register_sidebars') )
        register_sidebars(5,array(
        'before_widget' => '<!--sidebox start --><div id="widget-block" class="widget %1$s">',
        'after_widget' => '</div><!--sidebox end -->',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    )); ?>

style.css を以下のように変更

#sidebar-left,#sidebar-right {
        float: left;
        margin-top: 20px;
        margin-bottom: 10px;
}
#widget-block {
        width:200px;
        color:#fff;
        margin-bottom:10px;
        padding-left: 10px;
        padding-bottom: 10px;
        background:#000;
        overflow:hidden;
        opacity: 0.7;filter:alpha(opacity=70);zoom:1;
         -webkit-border-top-left-radius:10px;
         -webkit-border-top-right-radius:10px;
         -webkit-border-bottom-left-radius:10px;
         -webkit-border-bottom-right-radius:10px;
         -khtml-border-radius-topleft:10px;
         -khtml-border-radius-topright:10px;
         -khtml-border-radius-bottomleft:10px;
         -khtml-border-radius-bottomright:10px;
         -moz-border-radius-topleft:10px;
         -moz-border-radius-topright:10px;
         -moz-border-radius-bottomleft:10px;
         -moz-border-radius-bottomright:10px;
}

※もともとの#sidebar-left,#sidebar-rightの中身のうち、必要部分を新たに作った#widget-block に移動しています。

投稿記事の表示順序を自由自在に変えるテクニックです。
投稿記事はデフォルトでは、日付順に新しいものから古いものへ順に並ぶようになっていますが、例えばある特定カテゴリーの投稿記事を表示する場合は、逆に古いものから順に並ばせたいといった場合があります。
このサイトでも使っているWP-PostvVewsプラグインなども、記事の閲覧者数をカスタムフィールドに登録して大きい順に表示したりしています。
こういったテクニックについて、簡単に紹介します。

最も簡単なのは、それ用のプラグイン Custom Query String Reloaded を使うことです。これは、カスタムフィールドには対応していませんが、カテゴリー別に記事のソート順序などをかえることができるようになっています。

今回紹介する方法はより汎用性がある方法で、WordPress から　SQL を発行して必要な記事を表示する方法です。MySQLの知識が必要になりますが、それを習得すれば、投稿記事をいかようにも抽出し、かつ並べ変えも可能になるでしょう。

スクリプトのコアな部分は以下のとおりです。
このケースの場合は、見て分かるように、投稿日が現時点より前、投稿タイプが’post’、公開されている、かつパスワード保護されていない投稿記事を１０件、更新日の新しい順に並べ替えて配列$pageposts に取得しています。
それをsetup_postdata()で整形化しています。

<?php
 $querystr = "
    SELECT $wpdb->posts.*
    FROM $wpdb->posts
    WHERE post_date < '".current_time('mysql')."'
    AND post_type = 'post'
    AND post_status = 'publish'
    AND post_password = ''
    ORDER BY post_modified DESC LIMIT 10
 ";
 $pageposts = $wpdb->get_results($querystr, OBJECT);
?>
 <?php if ($pageposts): ?>
  <?php foreach ($pageposts as $post): ?>
    <?php setup_postdata($post); ?>
   <div>この間にコンテント表示のスクリプトを書く</div>
  <?php endforeach; ?>
  <?php else : ?>
 <?php endif; ?>

WordPressのデータベース構造とMySQLのSELECT文の文法について理解できれば、
$querystr を必要な条件で書き換えればOKです。

次の例は、WP-PostsViewsプラグインによるカスタムフィールドの値（閲覧数）で大きい順にソートして表示するケースです。前の例は、実はこのテクニックを使わなくてもWPの関数を使えばできるのですが、カスタムフィールドを使って投稿記事をソートするのは、この方法でしかできないと思います。
$querystr 以外のスクリプトは上の例とまったく同じです。

 $querystr = "
    SELECT DISTINCT $wpdb->posts.*, (meta_value+0) AS views
    FROM $wpdb->posts LEFT JOIN $wpdb->postmeta ON $wpdb->postmeta.post_id = $wpdb->posts.ID
    WHERE post_date < '".current_time('mysql')."'
    AND post_type = 'post'
    AND post_status = 'publish'
    AND meta_key = 'views'
    AND post_password = ''
    ORDER BY views DESC LIMIT 10
 ";

このケースを応用すれば、カテゴリーごとに閲覧数が多い順に投稿記事を表示したりすることもできますね。

参考文献はこれです。

先日、カウントをしなくなっていましたが、やはりカスタマイズしたときにミスをしていたようで、カスタマイズ前に戻したら、正常に動くようになりました。
タイプミスでもしたのかな。

アクセスをカウントしなくなってしまいました。
先日、IPを表示するようにカスタマイズしたからか、除外IPの入力の仕方が悪かったのか、いずれかが原因と思われます。
とりあえず、カスタマイズ前の状態に戻して、除外IPを空白にしたら、自分がアクセスした分は集計されて表示されました。
次に、自分のIPを除外リストに再入力してみました。
きちんと除外されてます。
やはり、カスタマイズの影響かな。
しばらく、様子見です。

PHP_Speedy_WP プラグインを入れてみました。
基本的に、JavascriptとかCSSを圧縮して転送量を減らしているようですが、回線速度が遅い場合やJavaを多用している場合は、有効かもしれないけど・・・。
どの程度高速化されるか、しばらく様子見。
直感的には、劇的に速くなったことはないような感じです。あまり変わらないという感じかな。

テーマによってサイドバーの数は決まっていて、たいていは１つか２つで、管理画面のウイジェットの表示でも二つの場合は、サイドバー１、サイドバー２という具合に表示されます。
今回のカスタマイズは、これをサイドバー３、サイドバー４という具合に増やしてしまうカスタマイズです。
/theme 内のfunction.php の３行目内の数値がサイドバーの数になってますので、これを増やすだけです。今回は４にしています。

<?php
if ( function_exists('register_sidebars') )
	register_sidebars(4, array(
        'before_widget' => '<!--sidebox start --><div id="%1$s" class="dbx-box %2$s">',
        'after_widget' => '</div></div><!--sidebox end -->',
        'before_title' => '<h3 class="dbx-handle">',
        'after_title' => '</h3><div class="dbx-content">',
    ));

たとえば、３番目のサイドバーはトップページでのみ使うようにカスタマイズするとか、４番目のサイドバーは、ブログパーツなどの保管用に使うとか、そんな使い方ができると思います。

カスタムページテンプレートを作る方法です。
wordpress では、ページごとに独自のテンプレートを使って表示できるようになっており、使用中のテーマ内をスキャンしてページテンプレートを探します。以下の順で、一番最初に見つかったものを使ってページを表示します。
1. カスタムページテンプレート
2. page.php
3. index.php

1.のカスタムページテンプレートがない場合は、デフォルトテンプレートとして、page.phpが選択されます。
たいていのテーマには、page.phpとindex.phpがあるので、デフォルトテンプレートは、page.phpになるというわけです。
管理画面では、カスタムテンプレートが作られていない場合は、テンプレートの選択画面が表示されません。
カスタムテンプレートは、以下のように作ります。
この例では、top_page.phpというファイル名にしています。

<!--  Template Name -->
<?php
/*
Template Name:top_page
*/
?>

たいていは、page.phpをコピーして先頭に以上のコードを挿入すればOKです。そして、page.phpの中身を必要に応じてカスタマイズすれば良いと思います。
このようにすれば、各ページ毎に異なったデザインとすることも可能になります。
注意！
１行目は使わず２行目からをコピーするように。IEでは表示が崩れてしまいます。

index.php に以下を追加しました。
これでnews で表示される投稿も管理画面まで行かなくてもその場で修正できるようになります。

<?php edit_post_link('Edit', '<p>', '</p>'); ?>

現在、ＩＥ環境下でカスタマイズしたテーマが著しく乱れて表示されています。
たぶん、ＩＥ７以下での問題かと思われます。

i3Themeでは、IE7以前のバージョンでは、ie-gif.cssというスタイルシートを使う設定になっており、このcssをカスタマイズしていないため、先にカスタマイズしたstyle.cssと不整合が生じていると考えられます。
また、YOU MUST NOT CHANGE OR OVERRIDE THESE と書かれている、dbx.cssも注意を無視して修正してしまっているので、そこが引っかかって表示がおかしくなっているのかも知れません。
いずれにしても、FireFoxではきちんと表示されているので、ＩＥ固有の問題と思われます。
自宅に帰ってチェックして修正にトライします。
うまく行けば、明日には直っているはずですが、どうなるか。
ＩＥ７以下の環境にも対応するのは、面倒ですが使っている人が多いからしょうがないですね。

透過フィルターをかけても投稿の写真がくっきりするように、background をブラックに変更してみました。文字色は白に変更です。
もともとセンターは白をべースに作られたテーマなので、もう少し細かいところの手直しが必要かもしれません。
前よりクールになったかな。

※style.css　に　/* black mode */のコメント付きでコードを追加する形でカスタマイズしました。ベースのコードをいじってないので、このコメントのあるコードを削除すれば元に戻ります。

忘れてしまうと思うので、備忘録としてカスタマイズした主なことをまとめておきます。

ベースは　i3Theme 1.7 というテーマを使っています。
これに以下のカスタマイズを行っています。

・背景画像の変更
・ヘッダー画像の変更（現在は、ヘッダー画像は消しています）
・透明化フィルターの適用（aeros を参考）
・ヘッダーにＲＳＳフィーダーを設置（aeros を参考）
・パン屑リストを設置（BreadCrumb Navigation XT　を使用）
・ページナビゲーションの変更（WP-PageNavi を使用）

結果、 i3Theme と　aeros という二つのテーマを融合したようなテーマにカスタマイズしています。
そのうち、背景画像のランダム切り替えなどのカスタマイズもやるかもしれません。

全面に渡って背景画像をカスタム画像（片瀬西浜の夕陽）にしてみました。
また、エントリーやウィジェットがaerosのように透過するように設定してみました。
以上は、style.cssのカスタマイズによって可能になります。
透過は、body セレクタに filter プロパティおよび opacity プロパティを追加します。これでブログ全体を透過して背景画像を表示することができるようになります。
でも、IE7ではうまく透過していないようです（IE6との互換表示モードにするとうまく行きます）。FireFox,Safari,GoogleChromeでは問題ありません。

テーマを以前使っていたaerosにしてみました。
背景画像は、湘南の夕陽にカスタマイズしてみました。
画像サイズを100KB以下にして、高さを1024pxにして、custom.jpgという名前で/imagesにアップロードして、管理画面から’Change Background’で選択するだけです。

WordPress2.7にアップグレードしました。

WordPress2.7をダウンロードして、解凍するとダウンロードファイルに自分がこれまでカスタマイズした各種のファイルがどんな仕組みになっているのか自動的に引き継がれています。
よって、サーバー上のWordPressをディレクトリごと削除し、ダウンロードしたWordPressを単純にアップロードすれば作業は完了です。
WordPress2.7で動かないプラグインがあるみたいでエラーが出ています。一度、すべてのプラグインを使用停止にして、少しづつ有効化して問題のプラグインを探します。
面倒ですが、やっと見つけました。
Search Unleashed がエラーを起こしています。ということで、バージョンアップされるまで使用停止です。

アクセスカウンタープラグインのCounterizeⅡをインストールし、Widget　を使ってカウンターを表示するようにしてみた。
以下、導入手順です。

1. WP-Counterize II よりZIPファイルをダウンロードし解凍。
2. 日本語で使う場合はフォルダ内にある counterize-ja_UTF.mo と counterize-ja_UTF.po から「_UTF」 の部分を削除してcounterize-ja.mo 、 counterize-ja.po にリネーム。
3. counterizeii フォルダを pluginsフォルダへアップロード。
4. 管理画面より Counterize II を有効に。
5.Yesterdayが表示出来るように、 counterize.phpとcounterize_dashboard.phpをカスタマイズ（参考サイト参照）
6.Executable PHP widget をダウンロード、解凍、pluginsフォルダへアップロード、有効化します。
　手順は、１～３と同じです。
7.ウイジェット編集画面でExecutable PHP widgetを編集し、以下のコードを記入し保存します。

<ul>
<li>Today : <?php echo counterize_gethitstoday();?>hits and <?php echo counterize_getuniquehitstoday(); ?> unique IPs.</li>
<li>Yesterday : <?php echo counterize_gethitsyesterday(); ?> hits and <?php echo counterize_getuniquehitsyesterday(); ?> unique IPs.</li>
<li>Total : <?php echo counterize_getamount(); ?>hits and <?php echo counterize_getuniqueamount(); ?> unique IPs.</li>
<li>Now :<?php echo counterize_get_online_users();?>unique IPs.</li>
</ul>

参考サイト

戯言（表） ≫ Counterize IIの導入といぢくり(笑)

みんなの教室 – Counterize IIをインストール – WordPress – 裏番町通信

これもプラグインのダウンロード・解凍、そしてアップロードで完了しました。
超簡単。
いいかげん、WPのカスタマイズはWPのブログに投稿しなきゃね。

Firefoxの面白いところは、アドオンを使って自分流にブラウザをカスタマイズできるところ。
アドオンの数も相当あるみたいです。
とりあえず、Firebug,Gmailmanager,GoogleToolBar,IEview　を入れてみました。

２００８年６月から、何を思い立ったかブログを始めることに。
はじめはＤＴＩブログからスタートしてみたが、自由度のなさにあっという間に嫌気がさして、ＭｏｖａｂｌｅＴｙｐｅに転向。
もちろんこのブログもＭＴ４で作っています。カスタマイズに日々苦労しつつ、がんばっています。

その後、MT から WordPress に転向しました。