WordPress On Zencart

WordPress On Zencart を使ってて、パンくずリスト(Breadcrumbs)とページタイトル(title)がどうも、うまく変化していなくて、いつもブログのタイトルだけになってしまっていたので、修正。

includes/languages/japanese/wordpress.php

修正前

if($woz_install){
    $cat_id = htmlspecialchars($_GET[‘cat’],ENT_QUOTES);
    if ( !empty($cat_id) ) {
            // category exclusion
            if ( !stristr($cat,’-‘) )
                $zen_heading_title[] = get_the_category_by_ID($cat_id);
    }

    $p_id = htmlspecialchars($_GET[‘p’],ENT_QUOTES);
    if ( !empty($p_id) ) {
            $zen_heading_title[] = $wpdb->get_var("SELECT post_title FROM $wpdb->posts  WHERE ID = $p_id");
    }

    define(‘NAVBAR_TITLE’, implode(BREAD_CRUMBS_SEPARATOR, $zen_heading_title));
    define(‘WOZ_HOME_ADDRESS’, ‘/?’);
}else{
    define(‘NAVBAR_TITLE’, ‘Error:not found [ABSPATH]’.ABSPATH);
}

修正後

if($woz_install){
    if(isset($_GET[‘cat’])){
    $cat_id = htmlspecialchars($_GET[‘cat’],ENT_QUOTES);
    if ( !empty($cat_id) ) {
            // category exclusion
            if ( !stristr($cat,’-‘) )
                $zen_heading_title[] = get_the_category_by_ID($cat_id);
    }
    }
    if(isset($_GET[‘p’])){
    $p_id = htmlspecialchars($_GET[‘p’],ENT_QUOTES);
    if ( !empty($p_id) ) {
            $zen_heading_title[] = $wpdb->get_var("SELECT post_title FROM $wpdb->posts  WHERE ID = $p_id");
    }
    }
    if(isset($_GET[‘page_id’])){
    $p_id = htmlspecialchars($_GET[‘page_id’],ENT_QUOTES);
    if ( !empty($p_id) ) {
            $zen_heading_title[] = $wpdb->get_var("SELECT post_title FROM $wpdb->posts  WHERE ID = $p_id");
    }
    }

    define(‘NAVBAR_TITLE’, implode(BREAD_CRUMBS_SEPARATOR, $zen_heading_title));
    define(‘WOZ_HOME_ADDRESS’, ‘/?’);
}else{
    define(‘NAVBAR_TITLE’, ‘Error:not found [ABSPATH]’.ABSPATH);
}

タイポくさい気もするんですが、$_GET[‘p’] のところ。
実際のサイトでは、?page_id=*** というふうに $_GET[‘page_id’] を使って、ページIDを表示しているんで、修正前のコードだと、ページタイトルが取得できずに、ブログタイトルだけが、パンくずや、タイトルに送られていたんですね。

そこで、 $_GET[‘page_id’] があった場合は、それをページIDとしてページタイトルを取得するように修正しました。

[モバイル]formでの入力文字種制限 | レジストプランニング|スタッフブログ

モバイルサイトでFORMの入力文字種を設定する方法。

キャリアごとに指定する属性が違うので、全般的に対応させるために、それぞれの属性を設定します。

メンドクセーナー

[モバイル]formでの入力文字種制限 | レジストプランニング|スタッフブログ

◆DoCoMo
istyle属性

istyle="1" 全角かなモード
istyle="2" 半角カナモード
istyle="3" 半角英字モード
istyle="4" 半角数字モード

◆Au
format属性

format="*A" 半角英字(大文字)モード
format="*a" 半角英字(小文字)モード
format="*N" 半角数字モード
format="*X" 半角英数(大文字)モード
format="*x" 半角英数(小文字)モード
format="*M" 全角かなモード
format="*m" 全角英字モード
大文字小文字の区別に注意してください。
また"*"の部分に数字を入れると文字数を制限できます。
"*"のときは無制限を示しています。

◆Softbank
mode属性

mode="hiragana" 全角かなモード
mode="katakana" 全角カナモード
mode="alphabet" 半角英字モード
mode="numeric" 半角数字モード

タグの詳細については以上です。
例えば、上記3キャリアに対応したページで半角数字のみの入力を指定するフォームを作成する場合は

<input name="○○○" size="10" type="text" value="▼▼▼" istyle="4" format="*N" mode="numeric" //>

と記述することで実現できます。

開発者向けAPIツールを作ってみているよ

週末を利用してAPIツールみたいなものを制作中。

一応、簡単なユーザー登録制にして、簡単に利用できるようにしようと考えている。

できる事(できるようにしたい事)

  • Yomi-Searchなどの相互リンク登録フォームに「リンク設置確認」機能
  • 任意の画像に任意のテキストを画像合成した「クーポン」などの発行機能
  • 任意のスクリプトにPageRank機能
  • etc…

無料のスクリプトや、CGIに、「こんな機能があれば」というのを”3行以内の記述”で実装できるものを検討中。

今週は、ユーザー登録ページを作成してみた。
次回は、登録ユーザーに対して、使用するAPIの承認プロセスを作成予定。

APIごとに使用の許可ができるようにする。
イメージとしては、「NINJA TOOLS」みたいな感じになるかな。

有料化するかどうかは、今後の検討案件。

Image Rollover Borders That Do Not Change Layout

画像をタイル状に並べてロールオーバーでボーダーを表示した時、レイアウトが崩れてしまうのを防止するCSSテク。

ボーダーの太さ分だけ画像の要素が大きくなってしまうので、それを内側にボーダーを引くことで解消しています。

Image Rollover Borders That Do Not Change Layout

Problem CSS
#example-problem a img, #example-problem a   { border: none; float: left; }
#example-problem a:hover { border: 3px solid black; }

This CSS applies a border on a hover where there was none before. Layout problems ensue.

Fix #1: Inner Borders
#example-one a img, #example-one a           { border: none; overflow: hidden; float: left; }
#example-one a:hover { border: 3px solid black; }
#example-one a:hover img { margin: -3px; }

This CSS applies a negative margin on all sides of the image of the exact size of the border. This pulls the border inside and causes no layout changes.

Fix #2: Outer Borders
#example-two a img, #example-two a           { border: none; float: left; }
#example-two a { margin: 3px; }
#example-two a:hover { outline: 3px solid black; }

Javascript 親ウィンドウを更新(Reload)してみる

意外ともたつくことが多いのでメモ。

ページの流れ

  • メインのページ(A)
  • サブウィンドウのページ(B)

  1. メインページ(A) のリンクから サブウィンドウ(B) を別窓で開く。
  2. サブウィンドウ(B) で、フォーム処理(ログインとかね)する。
  3. サブウィンドウ(B) を閉じたら、メインページ(A) を更新する。

この流れで、よくある失敗が、メイン(A)の更新処理を別ウィンドウ(B)から、どうやってアクセスするかというところ。

  • サブウィンドウ(B)から見たメインウィンドウ(A) → window.opener
  • それを location.reload() して更新する。

実際には、サブウィンドウ(B) の onload とか、 「閉じるリンク」の onclick などのいずれかに

<script type=”text/javascript”><!–
window.opener.location.reload();
//–></script>

を記述します。

onload に記述した場合、サブウィンドウ(B) を閉じる前に、バックグラウンドで更新するので、ウィンドウをブラウザの閉じるボタン[×] で閉じられた場合にも対応できるのでオススメ。

※メインページがフォームPOST直後のページだったり、動的なページの場合は、更新タイミングで「POSTデータを再送信しますか?」みたいな警告が出る場合があります。
これは、メインページの方で、対処しておくといいです。