is_home()が効かない

パーツのテンプレートを使ってページの下部、フッターの上にカテゴリバナー群を設置。
その中に上層の一覧ページへのリンクを貼る。

リンクのCSSをトップページとその他に振り分けるのに「is_home()」を使おうと思ったがトップページもすり抜けてしまう。

「is_front-page()」にしたり、「表示設定」で固定ページにしたりとやってみたが駄目。

たどり着いたのがこちら

http://kawatama.net/web/wordpress/1907

で、処理をリセットしていないせいだったようだ。


<?php wp_reset_query(); if(is_home()): ?>

トップページで表示したい内容

<?php else: ?>

トップページ以外で表示したい内容

<?php endif; ?>

これで解決。

楽天RMS スマホ商品ページにINPUT タグを設置する裏ワザ

楽天RMS、スマホの商品ページにINPUTタグを設置するにはタグの最後に全角スペースを13個挿入する

<input type="submit"　　　　　　　　　　　　　>

こんな感じ。

iFRAME版の裏ワザはいくつか記事があるが、INPUTのはどこにも見つからなかったので掲載する

Welcart 購入しても商品がカートに残る

購入手続きを完了しても商品が残ったままになっている。

Wel Cartのシステム要件は

・WordPress WordPress4.0
・PHP PHP5.4、5.5、5.6
・データベース MySQL5.5以上

https://www.welcart.com/wc-condition/

ロリポップサーバーのPHPバージョンが5.1だったので5.6に。

だが、MySQLはハードルが高そうだったので、アップしてあるファイル全てをバックアップしている間に


WCの公式ページに出ていた記事のようにテンプレートphpファイルを書き換えたところ

解決した。

「header.php」には

この位置

<?php wp_head(); ?>

</head>

「footer.php」には

この位置

<?php wp_footer(); ?>

</body>

で、テンプレートタグを記述する。

http://support.welcart.com/topic/178/

敷居の高い「MySQL」のバージョンアップはしなくて済んだ。

ポップアップで画像拡大

WPやっててアイキャッチ画像の拡大は大きなテーマでしたが、ほかの機能とぶつかったり動作がいまいちだったり、ありそうでなかなかいいのが見つかりませんでした。

今回、設置も超簡単で動きもスムーズ。（今のところですが）他の機能とぶつからない秀逸なjQueryを見つけたので記録しておきます。

名前は「Lity」。

HTMLのヘッダーに

<link rel="stylesheet" href="lity.min.css">

<script src="lity.min.js"></script>

それとjQuery本体を読み込み

リンクタグに

<a href="画像URL" data-lity="data-lity"><img src="画像URL"></a>

として「data-lity="data-lity"」を記述するだけ。

今回、ほかの機能として「bxslider」や「waypoints」等を設置するためjQueryは

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">

としました。

問題なく動作してます。

デモ

「Lity」の設置はこちらを参考にさせて頂きました。

http://on-ze.com/archives/2556

「Lity」公式サイトは→こちら

ついでに、固定表示しているヘッダーナビと買い物カゴボックスが上に出てしまったのでz-indexを増やしたのですが、今まで”999999”くらいが上限と思っていたのが実は

-2147483647から2147483647

とのことでした。

こちらを見させていただきました。

https://app.codegrid.net/entry/z-index-1

アイキャッチ画像拡大機能追加で

・トップページのスライダー「bxslider」

・スクロールでふわっと出てくる「Waypoints」

・カートシステムの「Welcart」（カートない表示ボックスも固定表示）

・ヘッダーのグローバルナビと”ページのトップ”がスクロールで移動するちょっとしたパララックス

・Perlで組んだリクルート募集システム

それと今回の

・アイキャッチ画像拡大

の６つの機能がそろいました。

あと、できれば予約システムも、と思っていますが、こちらはウェブで完結させるにはかなり高度な技が必要そうなので検討中です。

しかし、すべて無料でここまでできるとは。。

チェックボックスにチェックがつかない

ワードプレス、Welcartのログイン画面。

「 ログイン情報を記憶」のチェックボックスが行方不明に。

CSSで20px角になおしたものの、肝心のチェックがつかない。

調べたら、背景でできるらしい。

input[type="checkbox"]#rememberme{

background:#ccc;

width:20px;

height:20px;

}

input[type="checkbox"]:checked{

background:#ff6600;

}

これだと”レ点”ではなく、真四角になってしまうが、とりあえずカッコも悪くないのでこれにしとく。

カートの中身ボックス WP & Welcart

Welcartで一通りの基本機能ができたので、巷でよく見る「カートの中身」ボックスに取り掛かりました。

個数や金額は難なく表示できたのですが、
カートに何も入っていないときと入っているとき。
さらにショップや購入画面にいるときとそれ以外のページにいるときで表示をかえるにはどうしたらいいのか。
カテゴリ分けは基本だが、カテゴリを追加したときに記述を変えないで済む方法。
ショップの商品はすべて「ITEM」カテゴリに入っているので、これを取得すればOK。

変えるべき表示とは商品が入っているときの「購入画面へ」と入っていないときの「ショップへ行く」のリンクテキスト。
ショップにいるときでカートが空の時は非表示、カートに商品が入っているときは「購入画面へ」、購入画面にいるときはこのボックス全体を非表示にする。

まず、ボックス全体は”is_page( get_option( 'usces_cart_number' ))”で購入画面にいるにいるかどうかを判別。
購入画面では非表示に。

購入画面以外では、
”usces_is_cart() ”をつかって、商品が入っていたら「購入画面へ」を表示、入っていなかったら「ショップへ行く」を表示。

そして、ショップにいるときは最上位カテゴリが「ITEM」であることを判別し、”welcart-incart-box-itempage”のセレクタ、「ショップへ行く」を”display:none;”しました。
商品が入っていたら「購入画面へ」は表示します。


これで完璧。

参考サイトはこちら。

http://securavita.net/get_category_parent_root/#category_archive_root


ちなみに、頂いたコードのままだと固定ページ（page）でエラーが発生する。
なので、”if(is_page()):”で括ってページを丸ごとエスケープしました。
固定ページなのに親カテゴリを探そうとするとエラーになるのでしょうか。
エラー箇所は「$parents = explode( ',',$parents );」の部分でした。
「explodeは”$parents”が文字列であることを期待している・・・」とか何とか。
よくはわかりません。





<!--/welcart カートの中身ボックス-->

<?php if ( is_page( get_option( 'usces_cart_number' ))): ?>

//カート画面ではボックスは非表示

<?php else: ?>

<div id="welcart-incart-box">
<div id="welcart-incart-box-title">お買い物状況</div>
<div id="welcart-incart-box-totalquantity">個数：<?php usces_totalquantity_in_cart(); ?>個</div>
<div id="welcart-incart-box-totalprice">合計金額：<?php usces_totalprice_in_cart(); ?>円</div>

<?php if( usces_is_cart() ): ?>

//カートに入っていいたら

<div id="welcart-incart-box-cartpage"><a href="http://suzukiayumu.moo.jp/zakuro/usces-cart/">購入画面へ</a></div>
<?php elseif ( !usces_is_cart()): ?>
<div id="welcart-incart-box-itempage"><a href="http://example.com">ショップへ行く</a></div>
<?php endif; ?>
<?php endif; ?>


<?php if( ! is_page() ): ?> //固定ページはエスケープする


//ここからコピペ

<?php
$cats = get_the_category();
$category = $cats[0];
$parents = get_category_parents( $category->term_id, false, ',', true);
$parents = explode( ',',$parents );
$root = get_category_by_slug( $parents[0] );
?>

//ここまでコピペ


<?php if( $root->name == 'ITEM' ): ?>

//最上位のカテゴリが「ITEM」だったら「ショップへ行く」ボタンを消す。

<style>
#welcart-incart-box-itempage{
display:none;
}
</style>
<?php endif; ?>


<?php endif; ?>



<!--/welcart-incart-box end--></div>
<!--/wel cart カートの中身ボックス　終わり-->

個別投稿ページでの地図表示

店舗の詳細ページを個別の投稿（SINGLE）でつくって、ブランドごとにカテゴリ分けなどして、カテゴリごとに背景を変えるなどしていた。

詳細ページに地図を載っけようと思ったので会社概要からとってきて貼り付け。

と、そこまでは良かったが、各店舗ごとに地図が変わるのは当たり前で、Google Mapスクリプトに与える座標をそれぞれの店舗用のものにしなければいけない。

JSON何とかとか、色々やってみたが最終的にはとても簡単な、行ってしまえば1行で実現できた。

実際には各店舗ページのスラッグで振り分けるので複数行になるが原理的には1行でOK。
ページごとに変数「$hoge」に与える座標を変更しているだけ。


<?php echo $hoge; ?>の部分に座標が入る。
もとは当然というかまんま数値が入っていた。
（このスクリプトの参考ページはURLを控えていませんでした。あしからず。）
はじめのうち、ただ単に「$hoge」とか「'$hoge'」とかやってみたが、変数の中身が出てこなかった。
結構探してみたが解決策は見つからず、<script type='text/javascript'>のなかで<?php ・・・?>が動くのであれば、これも行けるのでは。と試に実行。


みごとに座標がはまりました。


ちなみにJSONとやらを介したやりかた、


<?php $hoge = '座標を入れる'; ?> <script type="text/javascript"> var hoge = <?php echo json_encode($hoge); ?>; console.log(hoge); // 座標を入れる </script>


http://qiita.com/39_isao/items/09946484933b83060f10


で、<?php echo json_encode($hoge); ?>としていたが、これだと座標の前後にダブルクォーテーションがついてしまって使えなかった





************************************************


<?php if(is_single('shop1')): ?><?php $hoge = '35.682579, 139.752775'; ?>

<?php elseif(is_single('shop2')): ?><?php $hoge = '35.689838, 139.700331'; ?>

<?php endif; ?>

<script type='text/javascript'>

var mapCanvas;
function intialize() {
//Create a map
mapCanvas = new google.maps.Map(document.getElementById("map_canvas"));
mapCanvas.setCenter(new google.maps.LatLng(<?php echo $hoge; ?>));
mapCanvas.setZoom(17);
mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);

//marker1 : Tokyo, Japan
var marker = new google.maps.Marker({
position : new google.maps.LatLng(<?php echo $hoge; ?>),
map: mapCanvas
});
}
google.maps.event.addDomListener(window, "load", intialize);
</script>





このやりかたで、PHPの変数をJSで使えることが分かった。
しかもすごく簡単。
いろいろ応用できれば面白そう。