カテゴリー: CMS・ブログツール

wordpressのスケルトンテーマでunderstrapを使ってて、カルーセルスライダーの画像の一部にブラーをかける備忘録

understrapのスケルトンテーマでは、wordpress&bootstrapでカルーセルスライダーを入れていて、トップページのメインビジュアルの中央部分に部分的にblurをかけて、スリが和す風の上に文字がくっきり乗っているようにしたい。ただし、背景画像全体にblurは、メインビジュアルの意味がなくなるのでNG。
1)スライダーの画像は入れ替わる
2)上に重ねるdivで文字を載せるので、背景になるスライダーの画像全体でなく、そのdivの枠の中身だけブラーかけたい
3)スライダーの画像は、WPの管理画面のwidget登録からお客様が自分で画像をポンと入れ替えるようにしたい
メインビジュアルの単なるパーツなのに地味に面倒・・・
入れ替わる画像のurlの配列を取ってこないといけなくて、それをブラーかけるjsなりcssなりに渡さないといけない。
・・・意外と道のり長いな;

とりあえず、スライダーの画像は、wp_optionに入っているから、そのキーをget_optionで取ってきて、多次元配列をforeachで回す。
dumpしてみたら画像のURLのキー名称がわかったので、それをforeach内で取得して。
ブラーの背景画像URLをセットしているコードのところに、変数にセットしたURL(または取得コードを入れ子にして?)を置き換える。

とりあえず前半はすんなりできたけど、cssに変数入れ替えるのが、js使って面倒だったので、
https://msurguy.github.io/background-blur/
これで。
インラインのコードでurl指定する箇所に、先に取得した画像のURL置き換えたらいけるはず。

ほんで、gulpでjsもminファイルを自動更新するようになってるので、jsのincludeディレクトリとgulpのタスクコードにブラー用のjsを追加。ただしjqueryの後から読み込まれるようにしないといけない・・・と。

もうちょい!!・・・かな?







WORDPRESSでスケルトンテーマを使う

WEB制作の現場では、大きな予算のあるようなプロジェクトは、もちろんデザインや戦略がトップにくるので、スクラッチで「こうあるべき」と開発要件を決めていきます。
一方で、予算がない時とか普通なサイト(どんなんよ;)の場合は、お客さまが、単純にWORDPRESSで作ったら、元がタダだし、安くできるんじゃないの?早くできるんじゃないの?と吉野家行ってこいな勢いで迫ってくるようなこともあったり、ユーザー側で更新が必要なサイトだと、WORDPRESSでCMS組んじゃうのが使い勝手が良いところがあったりで、WPさんにお世話になることも結構多い昨今です。

よく制作者のブログ記事なんかでは(てかお前もじゃんwとか言わないの。)wordpressに必ず入れときたいプラグイン10選とか、そういう記事もよくありますが、実制作してると、ちょっと違うんだよなぁ、ということもママあります。もちろん、それでオッケーなこともあるんでしょうけどねw

最近やっている案件で、不動産屋さんの物件検索機能つきCMSサイトというのがあって、検索機能とかお問い合わせ機能とかを色々組み込む必要があったので、デザインは簡単にいきたいということで、WP案件ですが、スクラッチでコーディングするのではなくWPのテーマを元にカスタムコードなんかを組み込んでいくというやり方で進めたので、その備忘録を書いときます。

WPでデザインを作るときには、いくつかやり方があるけれど、どのみち、WPのテンプレートの組み込み規則にしたがって、wp-content/theme/のテンプレートディレクトリの中に、自分の使うテーマ用のフォルダを作成して、その中にコアのWPに連携できるように、.phpのテンプレートファイルを追加していくことになります。

そこで、テーマファイルを一から作りたくない人は、WPに標準で入っているtwentyseventeenみたいなのをコピーして中身のファイルを変更して、という感じ。
しかし、元にするテンプレートセットに色々複雑な機能が組み込まれていたり、画像が読み込まれていたりすると、それを要るものと要らないものに仕分けして変更するのはまあまあ面倒です。

そこで、登場するのがスケルトンテーマと言われるもの。
これは、読んで字のごとく、基本で必要なテンプレートファイルの一式をセットにしたものに、それぞれのスケルトンテーマの配布元が、特徴のある機能や仕組みを追加したりしているものです。基本は、デザインに関する画像なんかは入っていない骨組みだけだったり、編集が必要なCSSファイルなんかに細かくインラインで注意書きや使い方を書いてくれているものが多いです。
例えばあらかじめBootstrap4を組み込んでくれてる、とか、CSSの編集は、sassやlessを組み込んでくれているとか、あるいはファイル管理システムで元のテーマが更新されたときには自動で更新できるようになっていたり、みたいな。

ただし、スケルトンテーマは、自分でCSSやphpのテンプレートファイルをいじって編集できる人向けです。わっかんないわ、っていう人は素直に素人向けテーマファイル買いましょう。その方が絶対幸せになれます。

いくつか人気のものがあって、その中で私が現時点でママ良いと思ったものはこの4つ。
・habakiri=>日本の方が開発者なスケルトンテーマ。開発現場で結構人気。
・bones=>必要なものが揃っていて、なおかつファイル内のコメントなどがわかりやすく、読み解きやすい。
・underscore=>無駄にソースを汚したくない人向けのドベーシックなテーマ。スクラッチくらいの勢いで作りたい人は、これを使うと結構幸せになれると思います。WPの機能は損なわず必要なテンプレは揃っていて、なおかつ要らないものはほぼ入っていません。
・understrap=>underscoreにBootstrap4を組み込んで、SASSでCSS編集するようにして、gulpで更新管理や最小化ファイルをかき出してくれる、みたいな今時なやつ。

で。understrap使いました。
これは、エンジニア向けな更新フレームワークが組み込まれていたりして、ちょっと調べたりするのめんどいなぁと思ったりで、本当は、underscoreスタートにしたかったのだけど、ここにbootstrapを自分で組み込んだり、sass対応を考えるなら、あらかじめやってくれてるヤツのルールを調べて覚える方が、まだ楽かなぁと思ったのと、understrapは、childテーマに対応していて、公式サイトでもchildテーマを配布しているので、本体の更新の時に対応しやすかろうということ、あとは、githubでの更新が早く、不具合とかわからないことがあっても結構早くにレスが返ってくるので、その辺が地味に助かるからです。

understrapはファイル更新をgulpで管理する仕様になっています。
(この記事は書きかけです。ちょっと長くなるので、少しずつ追記します。)




OpenCartのカスタマイズ HTMLメールの文字化けを治す

OPENCARTで時々お客様から、メールが文字化けしてて見れない!と言われます。

サンダーバードやiPHONEなどで見ると確かにひどい文字化け・・・修正します。

/system/library/mail.php

65行目あたりのpublic function setHtml($html)に1行追加します。

public function setHtml($html) {
$html = mb_convert_encoding($html, 'ISO-2022-JP', 'auto');
$this->html = $html;
}

おわり。

これで、HTMLメールの文字化けがなくなります。

OpenCartのカスタマイズ 支払い方法を追加する

オープンカートで標準で使用できる銀行振込モジュールは1つ。

テキスト形式で、支払先とか説明を入力して、ユーザーが買い物した際には、その内容が表示&メール送信sれるわけだけど、日本の場合、銀行振込ってメインの支払い方法なことも多く、郵貯と三井とか複数用意していることも多い。

1つに纏めて、ここかここかここって入金するときに勝手に選んでもらうのなら、良いのだけれど、入金確認の問題とか、注文数も多くなってくると、口座分だけ手間がかかるので、注文時に、郵貯なのか、三井なのか、ジャパンネットなのか、選んでおいて欲しいもの。

そこで、標準のBANK TRANSFER(銀行決済)モジュールを複製編集して、注文時にユーザーに予め選んでもらうことにします。

そうしますとですね、買い物画面では、支払い選択の時に、こんな感じで、 振込先銀行ごとに選択してもらえるようになるわけです。↓↓↓

 

1つの支払い方法モジュールを追加するごとに、コピー編集して追加するPHPファイルは、 9つです。

オープンカートは、MVCLフレームワークを使用しているので、

  • Model – Database layer
  • View – Template display
  • Controller – Main controlling code base
  • Language – Localization

という4つのファイルが1セットとなって動作する仕組みです。その組が、カタログとアドミンの双方に構成されます。ただし、上位のコントローラーのコードを引き継ぐ場合など、このうちの複数ファイルが上位ファイルで代替される場合があります。

参考:http://www.opencart.com/index.php?route=documentation/documentation&path=77_6

今回の銀行モジュールの場合は、アドミン4,カタログ5の計9ファイルが追加編集される1セットのPHPファイルとなります。

もともと存在するモジュールをコピー編集するだけですので、そう難しくはありません。

じゃあ、やっていきましょう!

下記のファイルをそれぞれ同ディレクトリにコピー&リネームしていきます。リネームする名前は揃っていれば問題ないので、任意で。

  • /admin/controller/payment/bank_transfer.php  →コピーして、bank_transfer02.php を作成
  • /admin/view/template/payment/bank_transfer.tpl  →bank_transfer02.tpl
  • /catalog/controller/payment/bank_transfer.php  →bank_transfer02.php
  • /catalog/model/payment/bank_transfer.php  →bank_transfer02.php
  • /catalog/view/theme/default/template/payment/bank_transfer.tpl  →bank_transfer02.tpl
  • /admin/language/english/payment/bank_transfer.php  →bank_transfer02.php
  • /admin/language/japanese/payment/bank_transfer.php  →bank_transfer02.php
  • /catalog/language/english/payment/bank_transfer.php  →bank_transfer02.php
  • /catalog/language/english/payment/bank_transfer.php  →bank_transfer02.php

3つめ、4つ目の支払いを作成する場合も同様の手順で、5ファイル1セットで追加を行います。

/admin/controller/payment/bank_transfer02.php

2行目のControllerPaymentBankTransfer を ControllerPaymentBankTransfer02 に。

class ControllerPaymentBankTransfer02 extends Controller {

ファイル内の、payment/bank_transfer をすべて payment/bank_transfer02 へ置き換え。

/admin/view/template/payment/bank_transfer02.tpl

ファイル内の、bank_transfer をすべて、 bank_transfer02 へ置き換え。

/catalog/controller/payment/bank_transfer02.php

2行目のControllerPaymentBankTransfer を ControllerPaymentBankTransfer02 に。

class ControllerPaymentBankTransfer02 extends Controller {

ファイル内の、payment/bank_transfer をすべて payment/bank_transfer02 へ置き換え。

/catalog/model/payment/bank_transfer02.php

2行目のModelPaymentBankTransfer を ModelPaymentBankTransfer02 に。

class ModelPaymentBankTransfer02 extends Model {

ファイル内の、payment/bank_transfer をすべて payment/bank_transfer02 へ置き換え。

/catalog/view/theme/default/template/payment/bank_transfer02.tpl

ファイル内の、bank_transfer をすべて、 bank_transfer02 へ置き換え。

4つの言語ファイルは、それぞれ文言を変更します。

例えば、

$_[‘heading_title’] = ‘銀行振込み(三井住友銀行)’;

というような感じで。

これだけです。

FTPアップロードして、管理画面で、モジュールをインストールし、支払先情報などを設定していきましょう。 登録したら、買い物画面で選択できるようになっているはず。

OPENCARTのカスタマイズ 受注メールの送信内容を追加する

OPENCARTでECの実運用をしようとしたら、ちまちまとカスタマイズしないといけないことが出てきてしまった。
EC-CUBEでも有ることなので、まあ、ECって結構システムの要件幅が広いというか宿命なのかも。

今回は、受注メール関連で色々気に入らないところが出てきてそれを簡単にカスタマイズした。

OPENCARTでは、受注の自動返信メールだけ何故かHTMLメールが送られる。その後のステータス変更は全部、はぁ?これでいいの?業務連絡???みたいなテイストメールなのになぜだ?

それで、変更点だけども、細かく言っていくと、キリがないので、自分にとって後から備忘録として応用できそうなところと、同じようなことをしたい誰かのお役に立ちそうなところの折り合いをつけて、やり方とか方向性とかポイントとか、うむ、なんだな、そういうちょっと手抜きなところを書いとく。

やること。↓

1)受注確認メールで、HTML/TEXTメール双方の表示文言を編集して変える
2)受注確認メールで、HTML/TEXTメール双方の文章の頭の方に、お客様名を入れる
3)受注確認メールのTEXTの方で、もう少し体裁を整えて、配送先とか請求先とか、ご挨拶文とかも入れる

テスト太郎 様 この度はご注文ありがとうございます。」「みたいな感じで。

もうちょっとスマートな方法もあるかも知れないけど、一応多言語化してもいいように、そこら辺は考えてやっとく。

 

出来上がりの受注メールはそれぞれこんな感じ。↓

文言とか順番とかは、アレンジで。

受注確認メールで、HTML/TEXTメール双方の表示文言を編集して変える

/catalog/language/japanese/mail/order_confirm.php の編集

(※英語とか中国語とか対応する多言語も同じ要領で変えておく)
以下は例ですので、適宜好きなように変えてください。
変更のポイントは、テキストメールの時は、挨拶文を複数行にするときは、1行ごとに改行コードを繋ぎます。
HTMLのところは、普通に
タグで改行できます。

4行目の $_[‘text_greeting’]  がHTMLメールの挨拶文に当たります。
ここを下記のように変更。
%s 様」、これが、後からPHPコードで読み出し追加するお客様名の表示部分になります。
1つ目の%s記号がお客様名で、2つ目の%s記号が店舗名を表示させるコードになります。
お客様名の表示が要らない人は、%sは店舗名のところだけです。

$_['text_greeting'] =
'このメールは当店でお買い上げいただいたお客様に送信しています。

%s 様

この度は、 %s でお買い上げ頂き誠にありがとうございます。

--------------------------------------------------------------------

このメールはご注文内容確認のための自動配信メールです。

当店で担当者がお客様からのご注文を確認し、商品の確保ができましたら、

改めてご確認のメールをお送りさせていただきます。

--------------------------------------------------------------------

以下のご注文を承りましたのでご確認ください。';

5行目にテキストメール用の挨拶文を追加。こっちは最初に定義されていないので、定義自体を新たに作成します。

$_['text_greeting_text'] =
'このメールは当店でお買い上げいただいたお客様に送信しています。'."\n\n".
'%s 様'."\n".
'この度は、 %s でお買い上げ頂き誠にありがとうございます。'."\n\n".
'--------------------------------------------------------------------'."\n".
'本メールはご注文内容確認のための自動配信メールです。'."\n".
'当店で担当者がお客様からのご注文を確認し、商品の確保ができましたら、'."\n".
'改めてご確認のメールをお送りさせていただきます。'."\n".
'--------------------------------------------------------------------'."\n\n".
'以下のご注文を承りましたのでご確認ください。';

後は、日本語で編集したい箇所があれば適宜更新して保存。
ちなみに、私は、名称は全て[ ]で括るようにしました。先の出来上がりイメージを見てもらうとわかると思うのですが、HTMLメールの時は表組みになるからそのままでも良くても、テキストメールにも項目表示させたいと思うと、タイトル名称と内容との区切りが欲しかったので。
例えば、

$_['text_order_detail'] = '[注文詳細]';

こういう感じですね。

受注確認メールで、HTML/TEXTメール双方の文章の頭の方に、お客様名を入れる~体裁を整える

まず、お客様名を表示させるための準備。

/catalog/language/japanese/mail/order_confirm.php の編集

これは今さっき上で一緒に済ませてしまいました。
$_[‘text_greeting’] の中身に%sを1つ先に足してやります。

/catalog/model/checkout/order.php の編集

●L136(HTMLメール用の挨拶文の定義箇所にお客様名の呼び出しコードを追加)

$template->data['text_greeting'] = sprintf($language->get('text_greeting'), html_entity_decode($order_query->row['store_name'], ENT_QUOTES, 'UTF-8'));

↓↓↓
$template->data['text_greeting'] = sprintf($language->get('text_greeting'), $order_query->row['firstname'].$order_query->row['lastname'], html_entity_decode($order_query->row['store_name'], ENT_QUOTES, 'UTF-8'));

●L299~L344 (テキストメール用の挨拶文の定義を変更)


//ここで挨拶文定義している。さっき日本語ファイルで追加したtext_greeting_textの定義箇所。↓
$text = sprintf($language->get('text_greeting_text'), $order_query->row['firstname'] .' '. $order_query->row['lastname'], $order_query->row['store_name'], $order_id) . "\n\n";
//見やすいように区切り線追加。↓
$text .= '--------------------------------------------------------------------' . "\n";
$text .= $language->get('text_order_id') . ' ' . $order_id . "\n";
$text .= $language->get('text_date_added') . ' ' . date($language->get('date_format_short'), strtotime($order_query->row['date_added'])) . "\n";
$text .= $language->get('text_order_status') . ' ' . $order_status_query->row['name'] . "\n";
$text .= '--------------------------------------------------------------------' . "\n";
//構成箇所を変えて先にお客様からのコメントと支払情報を表示させる。↓
if ($order_query->row['comment'] != '') {
$comment = ($order_query->row['comment'] . "\n\n" . $comment);
}
if ($comment) {
$text .= $language->get('text_comment') . "\n";
$text .= $comment . "\n";
}
$text .= '--------------------------------------------------------------------' . "\n";
//お客様名、E-MAIL、電話番号の表示↓
$text .= $language->get('text_customer_name') . ' ' . $order_query->row['firstname'] .' '. $order_query->row['lastname'] . "\n";
$text .= $language->get('text_email') . ' ' . $order_query->row['email'] . "\n";
$text .= $language->get('text_telephone') . ' ' .$order_query->row['telephone'] . "\n";

//お届け先の情報を表示↓
$text .= $language->get('text_shipping_address') . "\n"
.$textmail->data['shipping_address']. "\n";

//請求先の情報を表示↓
$text .= $language->get('text_payment_address') . "\n"
.$textmail->data['payment_address']. "\n";
$text .= '--------------------------------------------------------------------' . "\n";
$text .= $language->get('text_product') . "\n";

foreach ($order_product_query->rows as $result) {
$text .= $result['quantity'] . 'x ' . $result['name'] . ' (' . $result['model'] . ') ' . html_entity_decode($this->currency->format($result['total'], $order_query->row['currency'], $order_query->row['value']), ENT_NOQUOTES, 'UTF-8') . "\n";
$order_option_query = $this->db->query("SELECT * FROM " . DB_PREFIX . "order_option WHERE order_id = '" . (int)$order_id . "' AND order_product_id = '" . $result['order_product_id'] . "'");
foreach ($order_option_query->rows as $option) {
$text .= chr(9) . '-' . $option['name'] . ' ' . $option['value'] . "\n";
}
}

$text .= "\n";

$text .= $language->get('text_total') . "\n";

foreach ($order_total_query->rows as $result) {
$text .= $result['title'] . ' ' . html_entity_decode($result['text'], ENT_NOQUOTES, 'UTF-8') . "\n";
}

$order_total = $result['text'];

$text .= "\n";

$text .= '--------------------------------------------------------------------' . "\n";

if ($order_query->row['customer_id']) {
$text .= $language->get('text_invoice') . "\n";
$text .= $order_query->row['store_url'] . 'index.php?route=account/invoice&order_id=' . $order_id . "\n\n";
}

if ($order_download_query->num_rows) {
$text .= $language->get('text_download') . "\n";
$text .= $order_query->row['store_url'] . 'index.php?route=account/download' . "\n\n";
}
$text .= $language->get('text_footer');

これで、ある程度体裁の整ったテキストメールになった。
メールのフッター部分に店舗のURLとかメールとか担当者とか共通して入れたい場合は、
/catalog/language/japanese/mail/order_confirm.php の

$_['text_footer'] = 'ご質問等がございます場合は、このメールアドレスに返信してください';

この部分に、同じ要領で追記していけばいいかと思います。
注文ステータスを変更したときに送るアップデートメールのテキスト内容もこういう要領で直していきます。
なぜかアップデートのときはテキストメールだけ送られるんですね;
/catalog/language/japanese/mail/order_update.php を編集しましょう。
こっちでも注文情報とか出したいですね。。。日本語ファイルだけじゃなくて、この追加もしたほうがいいですね。
う~む。じゃあ、それは後日。やってみてから。