WordPressのログイン画面は無味乾燥で素っ気ないですよね。
それをカスタマイズして、自分専用のログイン画面にカスタマイズできるのが、BM Custom Loginプラグインです。

通常のWordpresのログイン画面はおなじみこれですよね。

このままだと、ロゴをクリックするとwordpress.orgに飛んじゃうし、愛着がわかないですよね。

BM Custom Loginのダウンロードはこちらから。
http://wordpress.org/extend/plugins/bm-custom-login/

サポートページはこちらです。
http://www.binarymoon.co.uk/projects/bm-custom-login/

WordPressの管理画面のプラグイン検索からもインストールできます。

インストールしたら、有効化！
とりあえずは、pluginsフォルダにできた、bm-custom-loginの中にあるimagesフォルダの中の、login-bkg-tile-SAMPLE.jpgというファイルを、login-bkg-tile.jpgにリネーム。
ログイン画面を表示させると、ログイン画面が変わります！！

もちろん自分で好きなデザインに変更することも可能。
image-templatesフォルダの中に、psdファイルが入ってるので、これをPhotoshopで加工して、imagesフォルダへlogin-bkg-tile.jpgとしてアップロードします。
テンプレートファイルが縦長になってるのは、ログイン失敗時などのメッセージが表示された時に縦の長さが変わるのに対応するためです。

こんな感じにしてみました。

やっつけですいません。＾＾；

WordPressを使ったサイトを構築してお客さんに納品する場合など、そのサイトにあったデザインにして上げると少し喜ばれるかもしれませんよ！

ColorMeShopで売り切れ時に、Sold Outの表示ができるようにしました。

Smartyのif文で、CSSのclassを分岐させて、売り切れ時にはSold Outの画像を背景にして、
商品画像の写真の透明度を下げます。

ソースはこんな感じです。

<!-- 商品一覧 -->
<{section name=num loop=$productlist}>
	<div style="float:left;" class="product_area">
		<div
		<{if $productlist[num].img_url != ""}>
			<{if $productlist[num].soldout_flg == 1}>
				class="product_image_soldout"
			<{else}>
				class="product_image"
			<{/if}>
			>
				<a href="<{$productlist[num].link_url}>"><img src="<{$productlist[num].img_url}>"
					<{if $productlist[num].soldout_flg == 1}>
						class="product_soldout"
					<{/if}>
				/>
				</a>
		<{else}>
			<a href="<{$productlist[num].link_url}>"><img src="http://img.shop-pro.jp/tmpl_img/23/now100.gif" /></a>
		<{/if}>
		</div>

		<div class="product_exp_area">
			<a href="<{$productlist[num].link_url}>"><{$productlist[num].name}></a>
			<br />

			(価格情報等のソース省略)

			<{if $productlist[num].s_expl <> ""}><br /><{$productlist[num].s_expl}><{/if}>
		</div>
	</div>

	<!-- 商品を3個で改行(最後は含まない) ※4個で改行にする場合は " % 3 "　を " % 4 " に変更してください-->
	<{if $smarty.section.num.iteration % 4 == 0 and $smarty.section.num.last == false}><br style="clear:both;" /><{/if}>

<{/section}>

<!-- 商品一覧 -->

CSSで背景を設定します。
使った画像はこれです。

.product_soldout{
-moz-opacity:.60;
filter: alpha(style=0,opacity=60);
opacity:.60;
}

.product_image_soldout{
background: #000 url(http://bravo.cd/materials/shop/soldout_brack.jpg) no-repeat;
width: 100px;
height: 100px;
margin-bottom:2px;
}

.product_image{
width: 100px;
height: 100px;
margin-bottom:2px;
}

これでできるはず！　足りない部分があったら、コメントでお聞かせください。

ついなび　http://twinavi.jp/　　2010年1月31日現在、トップページで紹介されています。

ついなびでの紹介ページはこちら　http://twinavi.jp/posts/detail/978

かふぇったー（http://cafetter.com/）は、上の画像の説明通り、自分のじゃない他の人のPCで気軽にTwitterができるサービスです。

メインプログラムはPHPで、ページの更新や投稿時の入力等に、Ajaxを使っています。
公開したのは公式RTが出る前だったので、非公式RTを採用しています。
Youtubeのサムネイルや、twipicなどの写真のサムネイルも表示されるのが特徴です。
@の追加ルーチンではなかなか苦労しました。Ajaxの挙動が、IEと、SafariなどのWebkitエンジンでは、かなり違ったんですよ。

ネットカフェや友達の家のPCで使ってみてください。
閉じる時は、必ずログアウトしてくださいね。

いやーしかし、自分が制作に関わったものが、こうやって公式に認められるのはうれしいものですね。
自分のTwitterアカウントも載せてもらってるし！

というわけで、Let’s かふぇったーなう！！
かふぇったー　http://cafetter.com/

jfeed.pack.jsの以下の部分を変更。
updated　-> pubDate

これで読み込めるようになりました。
jfeed.pack.jsは記述が暗号化されてるため、詳細は不明。＾＾；

blog/class/View.php というファイルの以下のサブルーチンを書き換えます。

565行目あたりに、ページャーのサブルーチンがあるので、次のように書き換えます。

 function parsePager($uri, $num, $limit)
    {

        //現在のページ
        $page = (isset($_GET['p'])) ? (int)$_GET['p'] : 1;
        //１ページあたりの表示数
        $limit = (int)$limit;
        //総記事数
        $num = (int)$num;

        //総ページ数
        $page_max = ceil($num / $limit);

        //表示ページ番号範囲
        $page_num_start = $page - 5;
        if ($page_num_start < 1){
         $page_num_start = 1;
        }

        $page_num_end = $page +5;
        if ($page_num_end <11){
         $page_num_end = 11;
        }
        if ($page_num_end >= $num){
         $page_num_end = $num;
        }

        //タグ生成

        $tag = "";

        if ($page >= 7){
   $page_num_back = $page_num_start - 1;
         $tag .= "<a href=\"{$uri}&p={$page_num_back}\">&lt;&lt;</a>　";
        }

        if ($page != 1){
         $page_num_back_one = $page - 1;
         $tag .= "<a href=\"{$uri}&p={$page_num_back_one}\">&lt;前</a>　";
         }

        for ($i = $page_num_start; $i <= $page_num_end; $i++) {

            $tag .= "<a href=\"{$uri}&p={$i}\">";

            if ($i == $page) {
                $tag .= "<strong>";
            }

            $tag .= $i;

            if ($i == $page) {
                $tag .= "</strong>";
            }

            $tag .= "</a>";

            if ($i != $page_num_end) {
                $tag .= " | ";
            }

        }

        if ($page != $num){
         $page_num_next_one = $page + 1;
         $tag .= "　<a href=\"{$uri}&p={$page_num_next_one}\">次&gt;</a>";
         }

        if ($page_num_end != $num){
   $page_num_next = $page_num_end + 1;
         $tag .= "　<a href=\"{$uri}&p={$page_num_next}\">&gt;&gt;</a>";
         }

        //-----------------

        if ($this->tpl->blockExists('pager')) {
            $this->tpl->setCurrentBlock('pager');
            $this->tpl->setVariable("pager_now",   $page);
            $this->tpl->setVariable("pager_max",   $num);
            $this->tpl->setVariable("pager_limit", $limit);
            $this->tpl->setVariable("pager_tag",   $tag);
            $this->tpl->parseCurrentBlock('pager');
        }

    }

ここまでです。

こんな感じに表示されます。

改造はご自身の責任のもとで行ってください。
もしもの時のためにバックアップは忘れずに！！

   <!-- Comments -->
   <div class="linktitle">COMMENTS</div>
   <div class="linktext">
    <!-- BEGIN recent_comments -->
    <dl>
    <dt>最近のコメント</dt>
    <dd>
    <ul>
    <!-- BEGIN recent_comment -->
     <li>{recent_comment_entry_title}><a href="./?eid={recent_comment_entry_id}">{recent_comment_name}</a></li>
    <!-- END recent_comment -->
    </ul>
    </dd>
    </dl>
   <!-- END recent_comments -->
   </div>

Highslide JSは、サムネイル画像を拡大表示してくれるスクリプトです。

ColorMeShopでは、<head> ~ </head>内をいじれないため、<body>内からスクリプトを呼び出します。

<script type="text/javascript" src="http://○○○/js/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="http://○○○/js/highslide/highslide.css" />
<script type="text/javascript">
    // override Highslide settings here
    // instead of editing the highslide.js file
    hs.graphicsDir = 'http://○○○/js/highslide/graphics/';
</script>

商品サブ画像の<a>タグに、class=”highslide” onclick=”return hs.expand(this)” と設定。

<!-- 商品サブ画像 -->
    <{if $product.ot1_url != ""}><a href="<{$product.ot1_url}>" class="highslide" onclick="return hs.expand(this)"><img src="<{$product.ot1_url}>" /></a>
    <{/if}>
    <{if $product.ot2_url != ""}><a href="<{$product.ot2_url}>" class="highslide" onclick="return hs.expand(this)"><img src="<{$product.ot2_url}>" /></a>
    <{/if}>
    <{if $product.ot3_url != ""}><a href="<{$product.ot3_url}>" class="highslide" onclick="return hs.expand(this)"><img src="<{$product.ot3_url}>"  /></a>
    <{/if}>
   <!--// 商品サブ画像 -->

ColorMeShopの場合、サムネイル画像と拡大画像が同じなので、これで拡大表示することができます。

このブログでは、日々の仕事の中で得たノウハウを掲載していきます。

つっこみどころ多いかと思いますが、どうぞよろしくお願いいたします。

Kazz拝