HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

Welcart の商品詳細ページを自分で作る

スポンサーリンク


welcart の商品詳細ページってすごく汚いですよね?
かといって、テンプレートをカスタマイズしようにも、そのテンプレ―トが汚くて見ずらい。

そこで考えた。WelCart のカゴボタン等々を張り付けられないか。

WelCartの商品詳細ページを自分で作る方法その1


自分で作ったページの「かごに入れる」ボタンを付けたいところへ
1、WelCartの商品詳細ページを表示させる。
2、ソースを見るで、ソースファイルを開く。
3、かごへ入れてるところをコピーして、自分のページへ張り付ける。

そすっとある程度 form 系タグがわからないとできないので。

WelCartの商品詳細ページを自分で作る方法その2


テンプレートを見て直すには、若干敷居が高いかもしれない。

つーのは、オリジナルの商品詳細ページでは、そのページそのものの postデータなので、
いきなり usces_the_item(); を呼び出してやれば、マスターデータが決まるわけだ。

自分で作った個別ページでやるためには、post データを確定させないといけないので、
query_posts() でデータを確定させてやる必要がある。

確定させてしまえば、あとはこっちのもの。
テンプレートを見ながらプログラムを書けばいい。

<form action="<?php echo USCES_CART_URL; ?>" method="post">
<?php
query_posts(・・・);
while(have_posts()) {
    the_post();
    global $post;
    usces_the_item();
    if( usces_sku_num()>0 ){
        // form の内容の表示
        while (usces_have_skus()){
            //オプションの表示
            if( usces_is_options()>0 ){
                $col = 0;
                while(usces_have_options()){
                    // オプション内容の表示
                    usces_the_itemOption( usces_getItemOptName());

                }
            }
        }
        // 数量
        usces_the_itemQuant();
        // サブミット
        usces_the_itemSkuButton('カートへ入れる');
    }
    // エラーの受け取り表示
    $block = usces_singleitem_error_message($post->ID, usces_the_itemSku('return'), 'return') ;
    if($block!=''){
        echo $block;
    }
}
?>
</form>
※usces_the_itemQuant は、個数入力ボックスなんだけど、これってクソ長くなるので、ここの長さは、WelCartのQ&Aにありました。
usc-e-shop/css/usces_cart.css 内の#itempage .skuform .skuquantity を修正します。Welcart 専用テーマで無い場合は適宜セレクターを変更してください。
変更が確認できましたら、修正したusces_cart.css をテーマフォルダの中にコピーして設置します。(重要です)


サブミットしてデータチェックで引っかかるとかごに飛ぶのではなくて、そのページに戻ってくる。
なので、エラー受け取り処理の記述が必要となるわけだ。

JavaScript にも似たようなものがあるけど、これはどうやらダミーらしい。
つか、前のバージョンの物なのかも。

classes/usceshop.class.php の中に本物が入ってるので、そこのエラーチェックモジュールを
手直しすると、任意のエラーチェックをいれることができる。 function incart_check() 当たりでやればいい感じ。

ただ、ここを触るとバージョンアップのたびに書き直さないといけなくなるので要注意。


WelCartのフィールドのカスタマイズ


welcart の入力フィールドをカスタマイズするといってもとて泥臭い方法w

welcart の関数のほとんどは ‘return’ を引数にいれてやると、その場で表示ではなくて変数に取り出すことができる。

これを利用する。

ようするに、それを受け取って文字列を置換してやればいい。

例えば、<input name=”??????” class=”iopt_select” ・・・> なら、
class=”iopt_select” を違うクラスにかえてしまってもいい。
※ replace 関数を使って置き換えてしまえw

form のフィールドを分解して、組み立てなおしてもいいわけだ。

欲しいのは、name= と id=” の中身だけだ。


welcart パーツ出血大サービス


これは、welcart に限らないけど、HTMLのタグの要素を取り出す関数のソースです。
function get_formfield($buffX,$fieldname){
	$buff = $buffX;
	$p=strpos(" ".$buff,$fieldname);
	if($p>0){
		$p--;
		$buff = mb_substr($buff,$p+mb_strlen($fieldname));
		$p=strpos(" ".$buff,"=");
		if($p>0){
			$p--;
			$buff = mb_substr($buff,$p+1);
			$p=strpos(" ".$buff,'"');
			if($p>0){
				$p--;
				$buff = mb_substr($buff,$p+1);
				$p=strpos(" ".$buff,'"');
				if($p>0){
					$p--;
					$buff = mb_substr($buff,0,$p);
					return($buff);
				}
			}
		}
	}
	return("");
}
使い方は、プログラムを読むとわかると思うけど、

get_formfield(HTMLタグ,取り出したい要素);

戻り値:要素の内容

例、

$a = ‘<a href=”http://hoge.com”>あああ</a>”;
$b = get_formfield($a,’href’);

$b には、http://hoge.com が戻ってくる。


ただし、サービス品なので 要素のくくりがシングルクォートの場合には対応していません。
直して使ってねw

スポンサーリンク

スポンサーリンク

よく使うタグ

・float クリア
<br clear="all"><div style="clear:both;" class="clearfix"></div>
・角丸め
round-radius
border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;
・div box
overflow:scroll;min-width:300px;max-width:300px;min-height:300px;max-height:300px;
・TEXTAREAリサイズ
resize: vertical;
・サイトURL
home_url() // http://…
if(site_url()==home_url){
$shorturl_yuzu_path = substr(ABSPATH,0,strpos( ABSPATH, substr(site_url(),strlen(home_url()) ) ) ).’/’;
}else{
$shorturl_yuzu_path = ABSPATH.’/’;
}
// /var/…
・WP HOME URL
site_url() // http://…/wp
ABSPATH // /var/…/wp
・プラグイン(自分のDIR追加必要)
plugins_url() // http://…/plugins
WP_PLUGIN_URL // http://…/plugins
WP_PLUGIN_DIR // /var/…/plugins
・使用中のテーマ
get_template_directory_uri() // http://…/theme/xx
get_template_directory() // /var/…/theme/xx
・wp-content
content_url() // http://…/wp-content
WP_CONTENT_DIR // /var/…/wp-content
・画像URLからDIR変換
$pctdir=str_replace(content_url(), WP_CONTENT_DIR,$pcturl);
・パス名分解
$pathData = pathinfo($file);
echo $pathData["dirname"]; // /var/~
echo $pathData["filename"]; // xxx
echo $pathData["extension"]; // txt
echo $pathData["basename"]; // xxx.txt
・画像サイズ
list($width,$height) = getimagesize($url);
if(has_post_thumbnail()){
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
$src = $image[0]; //url
$width = $image[1]; //横幅
$height = $image[2]; //高さ
・画像サイズ比率
list($src_w,$src_h) = getimagesize($file);
$dst_w = 600;$dst_h = 0;
$dst_h = ($dst_w!=0)?(intval(($src_h*$dst_w)/$src_w )):(($dst_h!=0)?(intval(($src_w*$dst_h)/$src_h)):0);
・疑似要素順
link visited hover active


特殊文字
シングルクォート : &#39;
ダブルクォート : &quot;
WP設定内表示前処理(htmlタグ許可項目)
$str = str_replace(‘<','&lt;' ,$str);
$str = str_replace(‘>’,’&gt;’ ,$str);
$str = str_replace(‘\”‘,’&quot;’,$str);
$str = str_replace(“\'”,’&#39;’ ,$str);
WO設定項目表示前処理(htmlタグ許可項目)
$str = str_replace(‘\”‘,'”‘,$str);
$str = str_replace(“\'”,”‘”,$str);
・テーマ
get_theme_root_uri()
get_theme_root()
・WP 情報
get_bloginfo( $show )
・Wp config FTP 情報 設置
define( ‘FTP_HOST’, ‘host’ );
define( ‘FTP_USER’, ‘id’ );
define( ‘FTP_PASS’, ‘pw’ );
define( ‘FTP_SSL’, false );
弾に使う
placeholder:ユーザー入力補助

カテゴリー

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス flexbox は、div の box を横に並べるためのブラウザに標準装備されてるクラス。乱暴な言い方すればそういうことです。現場では細かいことはどうでもよくて、とにかく簡単に DIV BOX を横

vba タスクに IE が残る

vba タスクに IE が残る vba タスクに IE が残る。VBAでブラウザ経由でサイトのページの情報を拾い上げる技は結構使いますよね?私だけ?wwwそうすると、なぜかvba タスクに IE が残っていて、繰り返し利用するとどん

wp datepicker 特定の項目で動かない。

wp datepicker 特定の項目で動かない。 ワードプレスでつかえる datepicker は、とっても簡単につかえて便利なライブラリーです。javascript は、なれないとデバッグに時間がかかり気持ち的にすごく敷居が高い気がしますがわかって

プラグインの管理画面でHTMLの入力を許すフィールドの扱い方

プラグインの管理画面でHTMLの入力を許すフィールドの扱い方 ワードプレスのプラグインを書いていると、HTMLタグを入力できるフィールドを作りたくなりますよね?例えば、ページにデータを表示するときにその書式を入力さえるとか。例えば、これはワードプレスのプラグイン

ワードプレスのフッターにある jQueryの読み込みをヘッダーで出力させる

ワードプレスのフッターにある jQueryの読み込みをヘッダーで出力させる ワードプレスのフッターにあるjQueryの読み込みをヘッダーで出力させる必要ができました。simplecity の後継ともいわれる ワードプレスのテーマ cocoon のカスタマイズです。cocoon

ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプトもOK)

ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプトもOK) ワードプレスで jQuery の後に script を読み込ませる方法、これは動的スクリプトも可能な方法です。ワードプレスのプラグインで動くシステムを開発していたところ、ユーザーインターフェイスでどう