Wordpress + WooCommerce で、カタログ機能を持つサイトを作る
- カタログサイト検討の背景
- WooCommerce をカタログとして利用しているサンプル
- （無料）YITH WOOCOMMERCE CATALOG MODE プラグイン
- Divi テーマで、メニュー右上のカートアイコンを消す
- 参考サイト
カタログサイト検討の背景
対面販売・契約が必要な高額商品・サービスを扱っているので EC サイトは不要。
しかし集客目的で、多くのバリエーションがある商品の画像や詳細はカタログ的に公開したい。しかも、コードが書けないビジネスオーナー自身で画像・説明・価格・属性などを登録させたい。
そういった場合に、EC エンジンのカート追加・チェックアウトといった機能を無効化して、カタログ機能だけをフレームワークとして使えたら楽チンですよね。
WooCommerce という、Wordpress で EC サイトを作るための言わずと知れた人気プラグインの機能を一部使って、この実装が出来たので、実装の記録です。
WooCommerce をカタログとして利用しているサンプル
信州は乗鞍高原のウェブサイト。
自治体が運営しているのか？不明ですが、乗鞍高原の宿泊施設やアクティビティを紹介しているサイトです。WooCommerce をカタログとして利用しているサンプルです。
それぞれの情報は、WooCommerce の商品カタログ上の商品として登録されているので、例えばアクティビティは、予算や人数、季節、幼児の有無といった属性によってフィルタができるようになっています。
よく考えられましたね〜！
これなら、施設や自治体の職員の方とかにも幅広く機能を解放出来そう〜。
（無料）YITH WOOCOMMERCE CATALOG MODE プラグイン
カタログモードとして使うためのプラグインはいくつか出ていますが、よくアップデート、サポートされている印象なのはこちら。
設定はめちゃくちゃシンプルで、サイドバーの「YITH」の設定画面から、以下の全てのチェックを入れておけば OK。
商品を登録した状態で商品詳細画面に行くと、「カートに追加」というボタンが消えているのがわかります。
なお、価格を登録している場合、こちらは表示されたままになります。このプラグインの有償版では、価格をマスクしたり、「見積もり」ボタンをつけたり、ということができるようです。
Divi テーマで、メニュー右上のカートアイコンを消す
多くの WooCommerce 対応テーマでは、デフォルトで右上にショッピングカートのアイコンが表示されています。
通常の EC だと、「カートの中身を確認する」ためのリンクですね。
YITH WooCommerce Catalog Mode プラグインでカート機能を無効化すると、カートへは遷移せず、トップページへ遷移するボタンとして機能するようになっていますが、できればこの表示も消したいですね。
Divi テーマを使っている場合、カートアイコンを消すのはめちゃくちゃ簡単でした。
サイドバーの Divi > テーマのオプション > General タブを一番下までスクロール > 「カスタムCSS」に以下を追記。
.et-cart-info { display:none; }
以上！消えて無くなりました〜。
参考サイト
Divi ビルダーが表示されないのはブロックエディターのせいだった
ページビルダー機能がある人気の Wordpress テーマに、Divi というものがあります。
ページビルダーがあると、適当にページを作ってもプロっぽさが出せるのでいいですよね。同じくページビルダーがある Themify はこれまで使っていましたが、Divi も触り始めました。
色々なマニュアルを見ていると、Divi には完全な WYSIWYG な「ビジュアルエディター」の他に「Divi エディター」というものがあり、Divi エディターじゃないと使えない機能・設定があるよう。
見たままではない分、使い方にくせがありそうなので、最初からこちらに慣れておこう！と思ったのですが...
ページの編集画面で切り替えができるはずが、私の Wordpress ではどこを探しても Divi エディターが出てこない。
原因は、Wordpress 5.0 から導入された Gutenberg ブロックエディターでした。
クラシックエディターを復活させるためのプラグインが色々と出ているので、それでブロックエディターを無効化すると、Divi エディターが出現しましたよ！
私は、その名もずばり Classic Editor というものを使っております。
ブロックエディタそのものは慣れると結構便利ですが、ページビルダー機能がついているテーマとの相性は悪そうですね。
同じ問題にハマってるどなたかのお役にたちますように。
エキサイトブログから Wordpress へのお引越し（移行作業編）
10年以上記されていたあるビジネスオーナーのエキサイトブログを、SEO観点から独自ドメインのWordpressサイトに移行する作業の記録です。
- 1. エキサイトブログからFC2ブログへの移行
- 2. FC2ブログから記事テキストと画像のダウンロード
- 3. Wordpress へのテキストのインポート
- 4. 画像のインポート
- 5. 一括置換ツールによる調整
- 移行作業編 まとめ
1. エキサイトブログからFC2ブログへの移行
エキサイトブログの独自ドメイン化。軽く考えていたのですが、エキサイトブログって本当に最悪で、独自ドメイン機能もなければ、エクスポート機能もAPIもないし、<head> もいじれないし Javascript も動かせない。
既存ユーザーを囲い込んでいるつもりなのでしょうが、ここまでユーザーの利便性を考えていないサービスは離れられて然るべきです。
そこで結構いろんな方が使っているのが、FC2 ブログのお引越し機能。
https://blog.fc2.com/import/import.html
提携している主要なブログサービスから全記事と画像をエクスポートして、FC2 ブログとして保存してくれる機能です。
また FC2 ブログには、記事テキストを Wordpress がインポートできる形で出力してくれる機能もありますので、ハブとして使えるわけですね。
手順はFC2ブログを新規開設して、お引越しの手続きにしたがって現行ブログ情報（URL, ID, パスワード）を入力するだけ。とても簡単です。
注意点としては、
- FC2ブログ開設から１週間はエクスポートができないので、アカウントは早めに作っておくこと
- FC2 ブログが検索エンジンにインデックス登録されてしまわないよう robots.txt の編集をしておくこと
2. FC2ブログから記事テキストと画像のダウンロード
記事テキストのエクスポート
エキサイトブログからFC2ブログへのインポートが完了したら、FC2ブログの管理画面から データバックアップ > エクスポート > 全ての記事 でダウンロード。
1テキストファイルとして記事データが出力されます。
画像のエクスポート
記事はまとめて出力できるんですが、残念ながら画像ファイルについては、一括ダウンロードができない仕様になっております。惜しい...！
100件ずつまとめられているリストを開いて手動でダウンロード... というわけにも行かないので、SiteSucker という Mac 向け無料ツールを使って一括取得します。
3. Wordpress へのテキストのインポート
移行先の Wordpress サイトで、インポートツールを準備しておきます。
ツール > インポート > Movable Type と TypePad を「今すぐインストール」をクリック。インストールが完了したら、先ほどの FC2 からエクスポートしたテキストファイルをアップし、インポートを実行。
投稿者として、既存のユーザへの割り当てを忘れずに。
4. 画像のインポート
移行先 Wordpress サイトの /wp-content/uploads/ 配下に "img" ディレクトリを作成し、そこに先ほど SiteSucker で引っこ抜いた画像をそのままコピーします。
ファイル名、階層など、何もいじりません。
十分な帯域のあるネット環境で作業しましょう〜！
5. 一括置換ツールによる調整
画像 URL の置換
画像をアップロードしただけの状態ではこれらの画像は記事からは参照されず、FC2 ブログのサーバー上の画像を参照している状態です。
自サーバー上の画像を参照させるために、Search Regex という有名な Wordpress プラグインを使います。正規表現で検索と一括置換までできるシンプルながら優れものです。
FC2 では、私の場合以下パスの配下に画像が並列に配置されていたので、
から
/wp-content/uploads
へと置換しました。
内部リンクの置換
記事内で別記事にリンクを貼っていたりする場合、こちらも置換が必要です。
＜ユーザ名＞.blog.fc2.com で検索しながら、一つ一つ修正していきましょう。
移行作業編 まとめ
エキサイトブログ が最悪すぎるせいでなかなかの作業になってしまいましたが、移行作業自体は以上で終了です。
しかし、SEO を目的に独自ドメインに移行したのであれば、このまま元ブログを放置しておくとコピーサイトとしてペナルティを受けてしまう恐れも！
何かしらの方法で、 URL が変わりブログが移行したというシグナルを Google さんに示し、これまで蓄積したドメインパワーも引き継いでいく必要があります。
カスタマイズ性の低いエキサイトブログではできることも限られてくるので、これまた大変。。。また別記事にて。
SiteSucker で無料ブログ（FC2 Blog）から画像データを全て引っこ抜く
とあるビジネスオーナーの方が10年以上マメに記されていた無料ブログ（エキサイトブログ）の全コンテンツを 、SEO 的な観点から Wordpress に移行する必要が出てきました。
全行程は別記事に記載しています。
本記事では、 FC2 ブログ上の全画像をローカルに保存した方法を記録。FC2ブログ以外の無料ブログでも使えます！
利用ツール SiteSucker
https://ricks-apps.com/osx/sitesucker/
AppStore で買うと 4.99 ドルかかっちゃうので、Previous Version からダウンロードしました（ごめんなさい）。
Mac OS Mojave 10.14.14 でも SiteSucker 2.4.6 で問題なく動きました。
Web URL
起動時に出てくる Web URL 欄には、対象のブログURLを入れます。
FC2 ブログであれば、こんな感じ。
Settings
Ignore Robot Exclusions にチェック
robots.txt で検索エンジンにクロールさせないようにしている場合、SiteSucker は見に行けません。
ここにチェックを入れることで強制的にアクセス許可します。
今回は、別の無料ブログ（エキサイトブログ ）からの移行手段として一時的に FC2 ブログに退避しているだけで、robots.txt は全て disallow にしているので、必須でした。
Path Constraint
Host に設定。当該ホスト配下の URL は全て見に行きます。
無料ブログの場合は、今思えば Subdomains にした方が捜査時間の節約になったかも？
でも最後にダウンロード対象のパス設定もするので、そんなに変わらないかもです。
Download Folder
デフォルトだと「ダウンロード」に落とされるけど、ダウンロードファイルが大量になる場合、あらかじめ任意のフォルダを作って指定しておいた方が良いですね。
File Types
Images にチェック。
Images にチェックしても、SiteSucker が画像データを集める都合上、HTML ファイルも一緒に落とされてきます。
Even though you may only want to download images, SiteSucker still needs to download HTML files since it needs the hypertext links in order to find all the images.
However, you can have SiteSucker delete HTML files after they are downloaded and analyzed by selecting the Delete After Analysis setting in the File Modification pop-up under the General settings.
https://ricks-apps.com/osx/sitesucker/archive/2.x/2.6.x/2.6/manuals/en/pgs/FAQ.html
後から削除する設定にもできるようです。
Paths > Paths to Include
ダウンロード対象の URL のパスを指定します。
あらかじめブログ画像を右クリックするなどして URL を調べておくと、ブログのサーバとは別のサーバに配置されていることがわかります。
のような感じ。
URL をここに記載しておくと、このパスが含まれる画像のみ落としてきます。
上記の設定をして実行すると、指定したフォルダにガンガン画像が落ちてきます。わーい！
Gmail で独自ドメインメールの送受信する (iPhone も)
お名前.com などで取得した独自ドメインのメールアドレスを Gmail に転送して、Gmail で受信する設定は比較的簡単に出来ます。おそらく、多くのドメイン販売業者さんが無料で提供ているサービスかと思います。
（追記：2019年8月からお名前.com からの転送も有料になりました！）
しかしながら、独自ドメインメールの送信を行おうとすると、お名前ドットコムでは月額42円からの お名前メール への登録が必要とのこと。そこで、送受信ともに Gmail で一元管理して、Gmail を擬似メールクライアント的に扱うための設定です。
- 0. （やってなければ）Gmail アカウントで二段階認証を有効にしておく
- 1. (受信) 独自ドメインのメールアドレス宛メールを Gmail に転送する設定
- 2. (送信) Gmail から別のアカウントでメール送信する設定
- 3. (iPhone) iPhone のメールアプリから送受信できるようにする
0. （やってなければ）Gmail アカウントで二段階認証を有効にしておく
Gmail アカウントで二段階認証を有効にしていない場合は、囲碁のステップで必要になるので、有効にしておきます。2019年9月現在、新規に作成した gmail アドレスではデフォルトで無効になっていました。
1. (受信) 独自ドメインのメールアドレス宛メールを Gmail に転送する設定
お名前.com Navi の場合、ログイン後 "オプション設定" タブ > "転送Plus" の "メール転送設定" から、独自ドメインメールを作りたいドメインの "設定する" をクリック。
"新規追加" の転送元メールアドレスには、運用したい独自ドメインメールアドレスを入力。転送先メールアドレスには、Gmail のアドレスを入力。フィルタや自動返信の設定もここで出来るが Gmail にまとめたいので、以上で完了。
2. (送信) Gmail から別のアカウントでメール送信する設定
Gmail の SMTP サーバを借りて、独自ドメインメールからと見せかけたメールを送る設定です。
まず、アプリ パスワードでログイン - Google アカウント ヘルプ から、アプリパスワードを生成しておく必要があります。"アプリを選択" は (その他) で、適当な名前を入れておけば OK。生成された 16桁のパスワードをコピーしておく。
転送先の Gmail 画面にて右上の歯車アイコン > "設定" > "アカウントとインポート" タブに移動。"名前" セクションの "他のメールアドレスを追加" をクリック。
名前, メールアドレスにそれぞれ、独自ドメインメールの方の名前とアドレスを入力。エイリアスとして扱います にチェックを入れ、次へ。
認証が完了すると確認のメールが独自ドメインメール宛に送られるので、指示にしたがって承認をすると、Gmail からのメールを差出人に独自ドメインが選択出来るようになってます。デフォルトをどれにするかのルールも設定画面から指定可能。
さて、以上を設定しても、通常通り iPhone から Gmail アカウントを追加しただけでは、iPhone のメールアプリからメールを作成しても、差出人が xxx@gmail.com のアドレスしか選択出来ません。もし日常的に iPhone でメールを返信することが多い場合は 3. も実施。
3. (iPhone) iPhone のメールアプリから送受信できるようにする
まず iPhone の認証用に、再度アプリパスワードを生成しておきます。
次に iPhone を準備。iPhone の設定の "パスワードとアカウント" から、"アカウントを追加" をクリック。ここで Google で追加せず、"その他" > "メールアカウントを追加" を選択します。新規アカウント設定画面にて、以下を入力。
次に受信メールサーバ、送信メールサーバそれぞれの設定です。
受信メールサーバの設定
送信メールサーバの設定
Polylang プラグインでデフォルト言語から別言語ページへのリダイレクトが発生した
Polylang で3ヶ国語運用している Wordpress サイトのトップページの読み込みが劇的に遅いことに気づき、WebPageTest で見てみると TTFB が 15秒とかありえない値でした。
最初は Polylang が原因とはわからずサーバ側リソースがサチっているのかと思ったけれど、ここまで遅いのはデフォルト言語のページだけで、他言語ページへはサクサク動く。ググってみるとまさにこれで、一旦デフォルト言語から英語ページにリダイレクトした上でまたデフォルト言語に戻るという訳のわからない挙動をしているよう。
Topic: Polylang slow TTFB | WordPress.org
そういえば、デフォルト言語を表示させたいのに第２言語で勝手に表示されてしまったり、意図しない動きをすることがたまにありました。見ないふりしてたけど。
フォーラムに記載の通り、Language の Setting から、ブラウザ言語の自動検知を無効にしたら治りました。焦った。
Wordpress サイトを Xdomain 無料サーバから AWS Lightsail に移行
独自ドメイン取得のついでに Xdomain の無料サーバ上に構築していた Wordpress サイト。無料でメールも使えるし、昔ながらの素朴な管理画面で気に入っていたですが、モバイルだとどうしても広告が出てしまい、やはり気になる... ということで、有料サーバに移管することにしました。
お引っ越し先は、月額わずか3.5ドルの AWS Lightsail サーバに決めました。Lightsail は、事前定義済みのアプリケーションが使える VPS のようなもの。EC2のような複雑な設定は不要で、Wordpress も一瞬で動かせます。
移行には、最高に簡単だと名高い All-in-One WP Migration を使ったのですが、なぜかいくつかハマってしまいましたので、解決までの記録も残しておきます。
- 1. Lightsail インスタンスの作成と Wordpress のインストール
- 2. All-in-One WP Migration で移行作業
- 3. Xdomain の管理画面にて Lightsail インスタンスへドメインの振り替え
1. Lightsail インスタンスの作成と Wordpress のインストール
EC2 と比べてかなり直感的にインスタンスを作れるようになってます。Wordpress サーバを選択し、ポチポチやって行くとインスタンスの作成が出来てしまいました。ホームディレクトリの "bitnami_application_password" というファイルに、Wordpress 管理画面の初期パスワードが記載されているので、確認して http://<グローバルIPアドレス>/wp-admin から、ユーザ名 user でログイン可能。
なお、ここでは Wordpress の設定は何も変更しなくて大丈夫。All-in-One Migration プラグインが、管理ユーザをはじめ、あらゆる設定を移してくれるからです。
初期状態では、ブラウザで Wordpress サイトを確認すると右下に bitnami のアイコンが表示されてしまっていますが、設定で消しておきます。
sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1 sudo /opt/bitnami/ctlscript.sh restart apache
また、最初に払い出されるグローバル IP アドレスは固定IPではなく、スナップショットから復元するとIPが変わってしまいます。Lightsail の管理画面から固定グローバルIPに変更します。"ネットワーキング" タブから、静的IPアドレスを作成し、先ほど作ったインスタンスにアタッチ。完了すると、グローバルIPの表示にピン留め表示がされます。
ドメインの振り替えは、移行作業後に行います。
2. All-in-One WP Migration で移行作業
移行元の Xdomain 無料サーバ上の現行Wordpress、Lightsail サーバ上の初期状態の Wordpress それぞれでプラグインをインストール & アクティベートします。
以降元のプラグイン画面にて、EXPORT TO FILE を選択。ファイル以外の方法でエクスポートすることも出来ますが、無料版はファイルのみです。
ハマりポイント：エクスポートファイルをダウンロード出来ない
エクスポートが完了したので、ダウンロードボタンをクリックすると、500 Internal Server Error。ブラウザからダウンロード出来ないのは、おそらくエックスドメインサーバ側の制限かと思われます。代替策として、wp-content/ai1wm-backups にエクスポートファイルが吐き出されているので、FTP でダウンロード出来ました。
ハマりポイント：エクスポートファイルをインポート出来ない
取得したファイルを、移行先の Wordpress へインポートしようとすると、"Unable to Impoert - unable to open file for reading" とのエラー。
まずは、Wordpress にアップロードできるメディアファイルの上限を超えていることが原因ではなかろうかということで、 .htaccess や wp_config.php を修正したもののうまく行かず。結局、サポートフォーラムで作者が案内していた以下のプラグインを使うとインポートに成功しました。
import.wp-migration.com
私と同じく FILE でのインポートが出来ない場合の設定変更など諸々をやってくれ、無償版で許容される 512MB までのファイルをインポート出来るようにしてくれます。インポートが成功すると、パッと見は同じサイトが出現。
3. Xdomain の管理画面にて Lightsail インスタンスへドメインの振り替え
さて、取得しているドメインを、旧 Xdomain 無料サーバから Lightsail インスタンスへと振り向けます。
Lightsail では無料で DNS サーバを使えるのでそちらに切り替えても良いのですが、あいにく Lightsail にはメールサービスは付いていません。Xdomain の無料メールサーバを Gmail に転送して独自ドメインメールとして愛用していたので、DNS サーバは継続して Xdomain 側を利用し、A レコードの IP アドレスのみ Lightsail インスタンスのものに書き換えて対応です。
さて、これでほぼ完成か？と思いきや、なんだかおかしい。
ハマりポイント：ドメインで新サイトにアクセスは出来るものの、アドレスバーにIPアドレスが表示されてしまう
All-in-One Migration は、移行時点でのサイト URL を元に Wordpress アドレス、サイトアドレスを書き換えてしまいます。そのため、各ページのパーマリンクには移行時点での URL であった IP アドレスが使われているし、アドレスバーに表示されてしまうのもそのためでしょう。
Wordpress ダッシュボードの Setting から、Wordpress アドレスとサイトアドレスの両方を独自ドメインに書き換えましたが、それだけでは挙動戻らず。MySQL を直接触って更新しなきゃいけないのかな（情弱）、慣れてないので怖いわ、とビビっていましたが、教えてもらった以下の方法で安全に URL を書き換えることが出来ました。
On your website, go to All-in-One WP Migration -> Export page.
Under advanced settings check every options exception “Do not export database” – this will export only the database and exclude plugins, themes, uploads.
Next, you need to use find/replace tool.
In Find field enter your ip address of the site, e.g. (127.0.0.1)
In Replace field enter the site url: hogehoge-siteurl.com
Do not include http:// part.Export to file then import from file on the same site. This should replace all instances of the IP address in the database with your domain name.
なるほど、こういったメタデータのみの書き換えにもこのプラグイン使えるのね。便利です！
今振り返ってみると、ドメイン切り替えのタイミング前にアドレス系は書き換えておくべきだったのではないかと。また同じような機会があれば、こちらのサイトを参考にさせていただこうと思います...。
hacknote.jp
WordPressに限らないWebサイト移行作業の一般的な流れですが、新サーバーに切り替える前からでもドメインで確認できるようにhostsの設定を行います。
SSL 化などの 残タスクは残っていますが、いったんはこれで終了。無事に、モバイル広告を出さないサイトにすることが出来ました。
