このページの本文へ

フロントエンドエンジニアのblog

有限会社Willさんいん

Willさんいんのフロントエンドエンジニアの blog です。HTML や CSS、JavaScript などのフロントエンド技術や WordPress のカスタマイズ、Webアクセシビリティなどについて、備忘録を兼ねて不定期で書いています。

Welcart の定期購入のカート遷移中にお客様情報入力ページで購入者情報入力フォームを表示して会員登録を必須にする

WordPress のショッピングサイト構築プラグイン Welcart で、定期購入プラグイン WCEX Auto Delivery を利用した場合、定期購入商品をカートに入れてお客様情報入力ページに遷移すると、ログインフォームのみが表示されます。そのため、新規の購入者は「新規会員登録はこちら」をクリックして別画面で会員登録をする必要があります。

定期購入は会員登録が必須となっているための仕様と思われますが、通常購入の場合はお客様情報入力ページで購入者情報の入力と同時に任意で会員登録ができるので、これと同じように定期購入の場合でも、お客様情報入力ページでそのまま会員登録ができた方がフローが統一され、分かりやすいのではないかと思います。

そこで検索すると、Welcart のテクニカルノートに「【Auto Delivery】定期購入時のカート遷移中に会員登録フォームの表示カスタマイズ」というドンピシャな記事があったのですが、これは Welcart Basic のテーマを使用した場合のもので、Welcart Basic 独自の関数が使われているため、WCEX Auto Delivery 同梱の wc_customer_page.php を使用したオリジナルテーマには当てはまりません。

また、「次へ」ボタンの非表示だけでなく、パスワード欄の表記なども変更した方がよいので、そのカスタマイズを考えてみました。

“Welcart の定期購入のカート遷移中にお客様情報入力ページで購入者情報入力フォームを表示して会員登録を必須にする” の続きを読む »

bxSlider のカルーセルで一度に複数枚を表示する場合に1枚目を画面の中央に配置する

bxSlider でカルーセル表示をするとき、1枚目(カレント)のスライドが左端に表示されます。これを中央に表示したいのですが、bxSlider のオプションにはそのような設定はありません。

常に3枚のスライドを表示して1枚目を中央に表示する方法とか、1枚を表示してその左右に前後のスライドの一部を表示する方法は様々な記事で紹介されているのですが、それらは表示枚数が固定であることが前提です。

しかし今回やりたかったのは、画面の幅に応じて一度に表示されるスライドの数が変動する場合に、1枚目(カレント)のスライドを中央に配置すること。つまり、レスポンシブ対応で画面幅が違っても各スライドのサイズは変わらず、例えば PC 画面では5枚、タブレット端末では3枚、スマホでは1枚が表示され、その1枚目(カレント)を中央に、さらに左右には前後のスライドの一部が見えている状態にしたいということです。

そして試行錯誤の末、以下の方法で実現することができました。試行錯誤の割には、CSS でマージンを設定するだけという、実に単純なものですがw

“bxSlider のカルーセルで一度に複数枚を表示する場合に1枚目を画面の中央に配置する” の続きを読む »

iframe でWebページを埋め込んで縮小表示する(レスポンシブ対応)

この記事は2020年9月20日に書かれたものです。情報が古い可能性がありますのでご注意ください。

当Webサイト内、Web制作&システム開発サイトの制作実績ページで表示しているWebページのサムネイル。当初はサムネイル自動生成ツールを使用していました。その後、半年前から各々の制作実績のページでレスポンシブ Web デザインによる PC、タブレット、スマホそれぞれの画面を表示するようにしたのですが、サムネイル自動生成ツールではPC画面を縮小して取得することしかできず。仕方なく、それぞれのスクリーンショットを撮って貼り付けてました。

しかし、新しいサイトを追加する度に3種類のスクリーンショットを撮る必要がありますし、時が経つとスクリーンショットが古くなるので定期的に撮り直す必要があり。そこで、少々強引ですが、Webページそのものの PC、タブレット、スマホそれぞれのサイズの画面を、インラインフレーム( iframe タグ)で埋め込んで表示することにしました。

ただ、それぞれのサイズのWebページをサムネイルのように縮小表示する必要があり、更にレスポンシブにも対応させる必要がありました。

“iframe でWebページを埋め込んで縮小表示する(レスポンシブ対応)” の続きを読む »

Jetpack のパブリサイズ共有をカスタム投稿タイプと特定のカテゴリの投稿のみに適用する

この記事は2020年8月9日に書かれたものです。情報が古い可能性がありますのでご注意ください。

WordPress の投稿を自動で Facebook ページに投稿したい案件があり、当初、自動投稿に特化し機能も豊富な NextScripts: Social Networks Auto-Poster (SNAP) というプラグインを使用しようと設定を進めていましたが、“Invalid Scopes: manage_pages, publish_pages.” という警告が出て、どうにも連携することができず。

どうも、テストアプリを作成したり、レビュー申請ビデオを作成して Facebook の審査を受けなければならないなど、いろいろ面倒っぽいので、SNAP の利用は諦め、API が不要な Jetpack プラグインを利用することにしました。Jetpack はアクセス解析やセキュリティ対策など、30種類以上もの機能がパックになっているプラグインですが、この中にある Facebook や Twitter などの SNS と連携できる「パブリサイズ共有」の機能を使用します。

ただ、自動投稿に特化したプラグインではないので、デフォルトではカスタム投稿タイプに対応していません。また、今回カスタム投稿タイプの投稿全てと、標準の投稿の内、特定のカテゴリの投稿のみを Facebook に自動投稿せる必要があるのですが、カテゴリを選択できる機能もないので、カスタマイズしてみました。

“Jetpack のパブリサイズ共有をカスタム投稿タイプと特定のカテゴリの投稿のみに適用する” の続きを読む »

WordPress からテーマのテンプレートを使って CSV を書き出す

この記事は2020年7月11日に書かれたものです。情報が古い可能性がありますのでご注意ください。

WordPress からカスタム投稿タイプの投稿データとそれに関連するデータを CSV で出力したい案件があり、テーマの中のテンプレートを使って実現してみました。

投稿データを CSV で出力できるプラグインはあるようですが、今回一定の条件で絞り込んだり、Advanced Custom Fields の「投稿オブジェクト」カスタムフィールドで紐付けた、別のカスタム投稿タイプの投稿データを一緒に出力する必要があったため、特定のページのテンプレートを作成する要領で実現できないかと考えました。

7年くらい前まで Movable Type を使っていましたが、Movable Type のテンプレートは静的ファイルを書き出すので、書き出すファイル名と拡張子を指定すれば、CSV などのテキストファイルを書き出すことも、CSS や JavaScript のファイルに MT タグを使って、セレクタや値を代入したり変数をループで処理したりすることができました。

一方、WordPress のテンプレートは動的に Web ページを表示するものなので、Movable Type のように簡単には行きません。

でも、以前 WordPress に FullCalendar を組み込んだ際、カレンダーに投稿データを読み込むための JSON 形式のファイルをテンプレートを使って作成したり、同じように Google Map に投稿データからマーカーを生成するための XML 形式のファイルをテンプレートを使って作成した経験がありましたので、まずは同様の方法で CSV 形式のファイルを作成してみました。

“WordPress からテーマのテンプレートを使って CSV を書き出す” の続きを読む »

記事一覧 »

page top