2017年9月27日水曜日

カートの中身ボックス 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 カートの中身ボックス 終わり-->





2017年9月25日月曜日

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

店舗の詳細ページを個別の投稿(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で使えることが分かった。
しかもすごく簡単。
いろいろ応用できれば面白そう。




2017年9月20日水曜日

Premiere Pro Quick Time .MOVでの書き出し 「静止画の最適化」

Premiere Pro CC 2017から「.MOV」形式で書き出し、Adobe Media Encoderで「.MP4」に変換。
PC上では普通に再生したが、Androidタブレットではかなりの大きな乱れが。
この動画ではビデオではなく静止画を使っていたのですが、「.MOV」の書き出し設定で 「静止画の最適化」にチェックを入れたら治った。
何かの記事で「ビデオ動画はキレイだが、静止画は良くない。」と書いてあったので、これかな?とか思いながらポチッとしてみました。

静止画の寸法の再確認のため写真1枚だけのムービーを作ってインストール。
同じように荒れた。

いまだ原因不明。


追記

原因はともあれ、Premiere Pro CC 2017からの書き出しを「AVI」にすると非常に美しく、乱れのない動画ができた。
容量は4割ほど増加したが、タブレットでの再生にも問題なし。

動画をやってるとファイル形式に悩むことが多い。
変換やレンダリングにも時間がかかるし、同じアドビ製品を使っていてもサイト制作とはかなり勝手が違う。
とっとと終わらせないとワードプレスの世界に戻るのに手間がかかりそう。




ONKYO TA2C 55R302 SDカード破損

業務用のタブレット、オンキョウのTA2C。
店舗用タブレットメニューに動画を入れるためにMICRO SDカードを用意。
カードリーダーに差し込んでPCに接続。
こちらは何の問題もなく、3ファイル100MB 程を取り込んでくれた。
さて、リーダーから抜いて今度はタブレットへ。
この機種に限らずかも知れないが、出し入れがオルタネイト式(カメラのメモリカードスロットにもよくあるもの)になっていて、かなり奥まで差し込まないと装着できなかった。
で、エクスプローラーでタップしてみると「SD has no mounted」の文字。
USBに切り替えるという手もあるのだが、まずは「設定」で調査。

設定>ストレージ>SDカードをマウント

で「マウント」をタップすると「破損したSDカード」とのこと。

業務用のせいもあろうか、この機種の情報はほとんど出てこず、メーカーのマニュアルがいいところでした。
「初期化」の文字を入れてググっているとスマホでの対策が出て生きたので、こちらもメーカーのマニュアルらしいでしたが、見てみました。

http://www.jp.onkyo.com/support/smartphone/SIM_SDcard_toriatsukai.pdf

すると、「設定」でマウントしようとした時に出る「破損したSDカード」をタップするとフォーマット画面に進むとのこと。

たしかに初期化は正常に終了しWinにつなげても問題なし。
めでたく、MP4動画をインストールできました。

余談ですが、「設定」をいじっているとき、「SDカード」の下あたりの「消去」だか何だかをフォーマット鴨とか思ってタップしたところ、今までルートフォルダにずらっとエクスプローラーに並んでいたフォルダーが2つだけ残して全部消えていました。
ま、いいや。今度はタブレット本体でも初期化すればいいことだし。アプリは2個だけ再インストールすればいい。データなんて今回の動画だけ。
試験機でよかった。ホントウニ良かった。
Android系でのSDカードの初期化には気を付けましょう。ということでした。



2017年9月19日火曜日

Premiere Pro CC 書き出し 画質が荒い MP4

飲食店のメニューにタブレットを導入するということで、現在動画の作成をしている。
内容的にはフェードイン、アウトくらいのエフェクトでOKとのことなので、特に難しいことはない。FLASHならあっという間に作れそうなのだが。
作成するファイル形式は「MP4」限定。
使うソフトは「Premiere Pro」限定。
ソフトの使い方から勉強となった。
Premiere Pro 初心者 使い方」でググりながら、静止画を貼り付けてフェードイン下だけの超基本的なアニメを作って書き出し。
設定画面には200pxくらいの小さな画面とありえないほど粗い画質。
Premiere Pro 書き出し MP4 画質」などで探していると「シーケンス設定」の文字が。
この記事そのものではソリューションにならなかったが、ためしにその「シーケンス設定」とやらを開いてみると何やら怪しい数字が。
上の方の「ビデオ」の「フレームサイズ」が”4600x2800”くらいになっておりやたらとでかい。貼り付けた画像は1280x800なので。
他にいじるところが分からないので画像サイズと同じにしてみた。
すると、書き出しプレビューはさっきよりもかなり大きなサイズに。
ただ、画質はさっきと変わらない。
ネット情報では「.MOV」がいいとのことなので、やってみると確かにキレイになった。
Adobe の「Media Encoder」でMP4に変換。
やっとのことで使えそうな動画ができた。

2017年9月15日金曜日

ヘッダー(<head> </head>)内のスペース

ワードプレスでのコーポレートサイト制作でのこと。
気が付いたら画面の一番上に20px位の高さの空白ができていた。
画面を全選択すると空白部分の左端に半角スペースができていた。
「要素の検証」では「&nbsp;」。
これを削除すると空白も消えた。
場所は直近の作業でGoogleマップ設置作業に伴うAPI読み込み用に記入したタグのすぐ上。
はじめは全角と勘違いしエディタで検索したが「見つかりません。」。
タグの直前のスペースならそれを削除すればいのでは。ということでタグの前に2つくっついていたスペースを削除すると見事解決。
HTMLは基本不要なスペースを無視することになっているようだが、中には本文として表示してしまう場合があるらしい。



2017年9月7日木曜日

カテゴリページが表示されない原因は??


カテゴリページは「category.php」で”if文”振り分け。


if (is_category('sample')){

include(TEMPLATEPATH . '/category-sample.php');

}


みたいな感じで。

当然普通の投稿も同じくやってました。

商品カテゴリ表示がすんでから改めて、というか何の気なしにすでにつくってあった他のカテゴリを見てみると、ヘッダー、フッター以外真っ白のブラウザ。


あ??


固まりましたね。

まずは原因の究明から。

ページのソースを見てみると、今まで動いていた、商品カテゴリページでも動く、


<?php

$cats = get_the_category();

$cats = $cats[0];

?>

が効かなくなっていました。

ボックス(div)のクラスにカテゴリを当てはめる為、皆さんやっているように


<div class="<?php echo $cats->category_nicename; ?>-category-page">

みたく、はめ込んでいたのですが、出力結果は

<div class="-category-page">



同じコード、テンプレートタグで一方は正しく表示、他方は反応なし。ということなので勢い疑ってしまいます。

まぁ、それはそれとして一般投稿も表示させねばならないのでまずはカテゴリのスラッグを何としてもechoしなければなりません。

さんざ探し回って、やっとたどり着いてのが

CAT SPEAKさん
http://cat-speak.net/2011/05/06/75/

こちらのコードをいただいて

<?php
$cat = get_category( $cat);
$parentCat = $cat->parent;
var_dump($parentCat);
$catName = $cat->name;
var_dump($catName);
?>

親カテゴリは不要なのでこんな感じにしました。
<?php
$cat = get_category( $cat);
$catName = $cat->category_nicename;
?>


これでカテゴリスラッグだけ取り出して、

<div class="<?php echo $catName; ?>-category-page">

としたところ、希望通りの結果が得られました。

ところが、これはタイトルやボックスの背景スタイルなどを決めるだけで、肝心の投稿記事が表示されてません。


でももう安心。


カテゴリスラッグが取れたので

<?php if(is_category('sample-1')): ?>
<?php query_posts('category_name=sample-1'); ?>

<?php elseif(is_category('sample-2')): ?>
<?php query_posts('category_name=sample-2'); ?>
<? endif; ?>


みたく振り分けるつもりです。


まだやってないので何ともですが、不具合発見当時の落胆からすれば、現在はかなり希望があります。


★追記

さっそく、複数のカテゴリで振り分けてみたところ、大成功ですた。

あと、店舗紹介と人材募集のセクションにも適用する予定です。


★追記2

一通りの改修が終了。
今回の改修はおもにbreadcrumb NavXTで生成されたカテゴリページへのリンク先なので、投稿記事の取得は本来

query_post('category_name=******')

でカテゴリを指定しなくてもいいはずですが、カテゴリ関連の情報がうまく伝わらなくなったのでしょうか。

Word Pressは同じ情報をいろいろなやり方で取れるのですね。






あぁ~。
よかった。
でも。
なおって。
















2017年9月6日水曜日

カテゴリ設定に注意

今回のサイトでは「ニュース」、「商品」、「求人」と、3種類の投稿を使用している。
それぞれタグ、カスタムフィールドの設置状況が異なり、それぞれに対応するテンプレートは他の投稿にはちゃんと対応していない。
テンプレートはカテゴリで分類しているので、カテゴリ設定を間違えると表示がおかしくなる。
”てすと”の商品投稿をカテゴリ設定せずに保存したため、自動的に「未分類」カテゴリに設定された。
このカテゴリは「NEWS」に変更してニュース記事を入れるカテゴリとして使っていた。
商品は「Welcart」を使っていて、その商品は”商品マスター”で一覧表示され、”投稿一覧”には出てこない。
そして「Welcart」は「商品詳細ページタイトル」という部品を装備していて、「商品名」とは違い、一覧や詳細ページに表示するタイトルを別に設定できるようになっている。
デフォルトでは自動で同名になるが。
”テスト”商品を”てすと”ととして作成した後でやっぱりそのまま使うので「商品名」だけを変更した。
当然「商品詳細ページタイトル」は「てすと」のままで、一覧や詳細ページにはこのタイトルが表示される。
問題となった「NEWS」一覧ページは先頭にこの商品投稿が来ていて、本来のニュースが出てこないという事態になっていた。
しかも余計なアイコン、字崩れなど一見するとどうにも原因不明の、もしかしたら恐怖の”先祖がえり”かも、とも思わせる姿を見せていた。
「商品マスター」には「てすと」などという投稿は存在しない。「商品詳細ページタイトル」はこの一覧用ではないからだ。
もちろん「投稿一覧」にもない。
ゴミ箱を「完全に削除」しても消えない。

しかたなく、泣く泣く難しいデータベースへのアクセスを試みようと「WP データベース 投稿 削除」などとググってみた。
するとこんな記事に遭遇

https://www.imamura.biz/blog/10204

こちらの

<?php
$data = $wpdb->get_results( "
 SELECT post_title
 FROM $wpdb->posts
 WHERE post_status = 'future' /*予約投稿ステータス*/
" );
foreach ($data as $value) {
 echo $value->post_title . "<br />";
}
?>

を拝借して、試に一覧を出してみた。

すると「てすと」記事は確かに存在する。

では、どこにいるのか。

よくよく「商品マスター」を確認してみるとカテゴリに「NEWS」が設定されている記事が最後(つくったのが最初なので)にあるのを発見した。
商品名はもちろん「てすと」ではない。

商品編集画面で「てすと」から変更して本チャンにしたそのカテゴリに修正。
「NEWS」カテゴリ一覧ページは目出度く正常に表示されました。

今回はいつの間にか、「NEWS」用のテンプレートの

<?php query_post('category_name=news')?>

を削除していて、さらに分かりずらくなっていた。

こんなミスは後悔するようなものではないが、自戒の念と、もしかしたら結構多くの人が迷い込んでいるのではと思うので公開します。








2017年9月4日月曜日

Welcart e-Commerceの商品 カテゴリ 一覧表示の順序

投稿記事の一覧表示順を変えるには

1.Intuitive Custom Post Orderプラグインをいんすとーるする
2.カスタムフィールド + テーマのための関数に記述する
3.カスタムフィールド + query_postsで設定する

などの方法がありますが、Welcart e-Commerceの商品の表示順を任意に設定するには「1」のプラグインは使えません。

単純にカテゴリページを開く場合、例えば「Breadcrumb NavXT」などで表示されているパンくずリストをクリックするなどで表示されるカテゴリページの商品を任意に並び替えるには
「2」の「カスタムフィールド + テーマのための関数に記述する」で実装できます。「3」ではうまくいきません(私の場合)。

テーマのための関数 (functions.php)にコードを記述する方法はこちらを参考にさせて頂きました。
というかいつものコピペ。

http://while-creation.com/post-order-customfield/

*******************************************
function test_pre_get_posts($query) {
if ( is_admin() || ! $query->is_main_query() ) {
return;
}

if ( $query->is_category() ) {
$query->set( 'meta_key', '表示順序' );
$query->set( 'orderby', 'meta_value_num' );
$query->set( 'order', 'ASC' );
}
}
add_action( 'pre_get_posts', 'test_pre_get_posts' );
*******************************************


「表示順序」の部分をカスタムフィールドの項目名に合わせれば、ほかの作業なしに商品が並び変りました。




そして、任意の場所にカテゴリ内の商品を並べる場合は「3」のquery_postsでの設定がいいようです。「query_posts」で

<?php
query_posts('
category_name=category&
posts_per_page=0&
orderby=meta_value_num&
order=ASC&
meta_key=並び順
'); 
?>

とすると、カスタムフィールドの「並び順」に記入した順番(この場合は昇順)に表示されます。

「query_posts」は非推奨らしいですが、とりあえず動くので使っています。「get_posts()」にするべきみたいですが。。

カスタムフィールド重複

カスタムフィールドを重複して設定すると

<?php echo post_custom('カスタムフィールド'); ?>

で出力したとき

Array

となってしまう。

配列になったカスタムフィールドは「post_custom」ではArrayとして出力するようだ。