wordpress

Contact Form 7 リダイレクトの設定 DOMイベントで

Contact Form 7で送信完了ページにリダイレクトしたり、Googleアナリティクスのトラッキングを取るためにon_sent_okフックを使っているんですが、

on_sent_ok のフックを使用する方法は現在では非推奨になっています。この機能は2017年中に廃止される予定です。

とのこと。

on_sent_okフックを使かわないでDOMイベントで対応するそうです。
詳しくは公式サイトにも書かれていますが、備忘録として残しておきます。

on_sent_ok を DOM イベントに置き換える

送信完了後に別ページにリダイレクトする場合(サンキューページへ遷移する場合など)

http://example.com/sent_okの部分を遷移したいURLにする。

このスクリプトを該当のフォームに挿入する。
これはfunctions.phpで対応。

2行目で、「entryform」というページのみに表示させるよう条件分岐
3行目のecho~以下にスクリプトを挿入。
sent_okというURL(スラッグ)のページへリダイレクト

特定のコンタクトフォームのみに適用したい場合はコンタクトフォームのIDを指定する

上記の場合はコンタクトフォームIDが1515

Googleアナリティクスのトラッキング

イベントカテゴリーが “Contact Form”、イベントアクションが “submit” のイベントとしてトラッキング

※HTMLヘッダーに挿入する場合(このソース未検証)
※ページリダイレクトとGAトラッキング両方やるなら併せてヘッダーに挿入したほうがスマートかも

詳しくは公式サイトより

on_sent_ok は廃止されます
https://contactform7.com/ja/2017/06/07/on-sent-ok-is-deprecated/

DOM イベント
https://contactform7.com/ja/dom-events/

フォーム送信を Google Analytics でトラッキングする
https://contactform7.com/ja/tracking-form-submissions-with-google-analytics/

送信後に異なる URL にリダイレクトさせるには
https://contactform7.com/ja/redirecting-to-another-url-after-submissions/

wordpressを手動でバージョンアップ(アップデート)する

とあるサーバーでなぜか、Wordpressのダッシュボードにバージョンアップのお知らせがでないのです。

WordPress x.x が利用可能です! 今すぐ更新してください。

と普通は表示されますが、そのwordpressは4.xなのに

最新のバージョンをお使いです

と表示されたまま・・・

理由を調べる気力がなかったので、手動でバージョンアップすることに。

 

Codex:WordPress のアップグレード
https://wpdocs.osdn.jp/WordPress_%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%82%B0%E3%83%AC%E3%83%BC%E3%83%89/%E8%A9%B3%E7%B4%B0

まずは、wordpressの最新版をダウンロードしておきます。

ホーム

1.データベースのバックアップ

Mysqlのバックアップを取る(ちゃんとバックアップされているかを確認)

2.ファイルのバックアップ

wordpressのファイルをバックアップ(ちゃんとバックアップされているかを確認)

3.プラグインの停止

起動しているプラグインを全て停止する

4.wordpressの古いファイルを削除

下記以外を削除します。

  • wp-config.php
  • .htaccess(ある場合)
  • wp-contentフォルダ
  • wp-imagesフォルダ(ある場合)

5.最新のwordpressコアファイルをアップロード

  • wp-adminフォルダ
  • wp-includesフォルダ
  • wp-config-sample.php以外のファイル

6.wp-contentフォルダ内の古いファイルを削除

  • languagesフォルダ

7.最新のwp-contentフォルダのファイルをアップロード

最新のwp-content/languagesフォルダをアップロード

8.管理画面wp-adminにアクセス

データベースの更新が必要です。と表示されるので更新ボタンをクリック

9.管理画面にログインできたら、プラグインを有効に。

以上で完了。

※追記

最後に実際の表示を確認してみたら、投稿ページが「ページが見つかりません」に。
慌てず、パーマリンク設定を保存し直しました。
再度確認したら、無事表示されてました。(ほっ)

無事、手動アップデートできました、ファイルを削除するって、バックアップをとっていても緊張します・・・

Contact Form7・Googleアナリティクスでコンバージョン設定

WordPressの問い合わせフォームでは必ずと言っていいほどお世話になっているContact Form7。
GoogleアナリティクスでContact Form7のコンバージョンを計測するための設定を備忘録として残します。

Contact Form7の設定

ContactForm7の管理画面、「その他の設定」に以下の内容を設定します。ContactForm7で、on_sent_okというjavascriptのアクションフックが用意されています。

基本の形は

ラベル、値は省略可。
下記は、資料送付申し込みフォームの場合の設定。

contactform7%e3%82%b3%e3%83%b3%e3%83%8f%e3%82%99%e3%83%bc%e3%82%b7%e3%82%99%e3%83%a7%e3%83%b3%e3%82%bf%e3%82%af%e3%82%99%e8%a8%ad%e5%ae%9a

公式サイト:フォーム送信を Google Analytics でトラッキングする
http://contactform7.com/ja/tracking-form-submissions-with-google-analytics/

Goolgeアナリティクスの設定

Googleアナリティクスで目標の設定をします。
目標を設定するには、「管理」>「ビュー」の中にある「目標」です。
「新しい目標」をクリックし、新規登録します。

1〜3まで目標設定のステップがあります。

1.目標設定

「カスタム」を選択して続行を押します。

%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9

2.目標の説明

名前は、Googleアナリティクス上で表示される目標の名前、任意の名前を入力。
タイプは「イベント」を選択。

%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9%e3%82%a4%e3%83%98%e3%82%99%e3%83%b3%e3%83%88%e8%a8%ad%e5%ae%9a

3.目標の詳細

イベント条件を設定します。内容は、先にContactFomr7で設定した通りに、入力します。

カテゴリ:先頭が一致 Contact Form
アクション:等しい submit
ラベル:等しい 送付申し込み完了
値:完全一致 1

※値の部分は「完全一致」にしましたが、ちょっと怪しい。未確認事項です。

%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9%e3%82%a4%e3%83%98%e3%82%99%e3%83%b3%e3%83%88%e6%9d%a1%e4%bb%b6

これで、設定完了。
計測されるかどうか1〜2日後にGoogleアナリティクスで確認を。

Advanced Custom Fields で画像出力する

WordPressのプラグイン「Advanced Custom Fields」で画像を出力させるときのメモ

Advanced Custom Fieldsの設定側で、画像の「返り値」を何にしたかで、出力方法が異なる

返り値の種類は、画像オブジェクト、画像URL、画像IDの3つ。

画像オブジェクト

画像に関する情報を色々取得できます。

公式サイトの詳細ページ
https://www.advancedcustomfields.com/resources/image/

画像オブジェクトで出力するサンプル

画像URL

画像のURLをそのまま返します。
画像をそのまま出力したいときには一番簡単ですね。

画像ID

文字通り画像のIDを出力します。
IDを使ってサイズなどを指定することもできます。

公式サイトから

ワイド、ハイトを指定する

カテゴリーの画像を設定して出力する

Advanced Custom Fieldsでカテゴリ用のフィールドをしてする場合は、位置のルールを「Taxsonomy Term」に設定しカテゴリを選ぶ。

 

Contact Form 7でajaxzip3を使う為のメモ(コピペ用)

WordPressで問い合わせフォームを作るときは
Contact Form 7
http://contactform7.com/ja/docs/
です。だいたい

Contact Form 7で郵便番号から住所を自動入力するために使うのは

ajaxzip3
https://github.com/ajaxzip3/ajaxzip3.github.io
です。だいたい
同じような機能のプラグインもあります。
zipaddr-jp
https://wordpress.org/plugins/zipaddr-jp/

どちらでもよいと思いますが、個人的な好みでajaxzip3を使っています。簡単に設定できるようにコピペ用としてメモします。

Contact Form 7で住所自動入力できるajaxzip3を使う方法

郵便番号(ワンボックス)+住所の場合(&bootstrap3)

郵便番号の入力が1つのテキストボックスで住所の入力も1つのテキストボックスの場合(Bootstrap3を使ってくくります)

設置イメージcontact-form-7%e3%81%a8ajaxzip3%e3%82%b5%e3%83%b3%e3%83%95%e3%82%9a%e3%83%ab

Contact Form 7での設定

WordPressでの設定(スクリプトの読み込み)

functions.phpにajaxzip3のスクリプトの読み込みを追加する設定

まずajaxzip3を実行する関数用のファイルを作成(useajaxzip3,js)という名前にしました。

ファイルの中身は

wordpressのテーマディレクトリにあるjavascript用のディレクトリに保存。

functions.phpを以下のように編集

 

郵便番号(ワンボックス)+都道府県+住所の場合(&Foundation6)

郵便番号テキストボックスと都道府県+住所の組み合わせの場合
こちらはFoundation を使ってマークアップした場合
http://foundation.zurb.com/

設置イメージ
contact-form-7%e3%81%a8ajaxzip3%e3%82%b5%e3%83%b3%e3%83%95%e3%82%9a%e3%83%ab2

Contact Form 7の設定

WordPress側の設定

これは前述と同様ですが、useajaxzip3.jsの中身は以下のようにします。

 

Advanced Custome Fields の項目上限数

WordPressのカスタムフィールドを柔軟に追加できる高機能なプラグイン「Advanced Custom fields」
https://www.advancedcustomfields.com/

せっかく登録したのに、なぜか消えている・・・というショックな出来事が何回か続いたため調べてみました。

どうやら、php.iniの max_input_vars の設定によるもののようです。
Dos攻撃を防ぐ目的で、PHP5.3.9から導入されたもので、設定数以上の変数が送られてくるとその部分は削除されるようになっています。

そのため、Advanced Custom Fieldsである程度の数を設定すると消えてしまうということです。
Advanced Custom Fields自体に上限があるわけではなく、PHPの仕様によるのですね。

今回、XSERVERを利用していたのですが、64項目あたりでそれ以降が消えていました。

解決方法は、

  • max_input_varsの設定を変更する
  • フィールドグループを分割する

の2つの方法です。

max_input_varsはphp.iniが編集できるサーバーであれば設定変更は可能ですが、サーバーへの負荷にも関わることなので、後者のフィールドグループを分割するのがよいと思います。

WordPressインストール後にディレクトリ名を変更する

WordPressをインストールした後にディレクトリ名を変更したくなった時用のメモ。

例として
変更前URL  ドメイン/wp/wp-login.php
変更後URL  ドメイン/new/wp-login.php

  1. 変更前のWordpressURL(/wp/wp-login.php)でログイン
  2. 設定→一般から、WordPress アドレス (URL)とサイトアドレス (URL)を変更したいディレクトリ名に変更する
    wordpress一般設定
  3. 「変更を保存」するとページがNot Foundに。
    notfound
  4. これはこのまま置いておく。
    ディレクトリ名を変更したい名前に変更
    ここでは「wp」を「new」に変更
  5. 変更後のURLで改めてアクセスする
    /new/wp-login.php
  6. ログインすると、NotFoundのままだったりするけど、なんどがリロードしたら通常通りアクセスできるようになりました。
  7. 完了!

 

WordPress サイトURLをサブディレクトリからルートに変更

タイトル通り、サブディレクトリにインストールしたWordpressのサイトURLをルートに変更する手順と403エラーの対処法。

すでにサブディレクトリ(例:wp)にインストールしている場合を想定。

 

1)管理画面>設定>一般 サイトアドレスのみ変更

現在の設定
WordPress のアドレス (URL):http://example.com/wp
サイトアドレス (URL):http://example.com/wp

変更後
WordPress のアドレス (URL):http://example.com/wp
サイトアドレス (URL):http://example.com/

2)index.phpと.htaccess をルートへコピー

WordPressのインストールディレクトリにあるindex.phpと.htaccess  をルートディレクトリにコピーする

※パーマリンクの設定をしていない場合、.htaccessは生成されていない場合もあり

3)ルートにコピーしたindex.phpを編集

以下の通り修正する

修正前

修正後

4)パーマリンク設定を更新

ログイン後、パーマリンク設定を更新する

 

※403エラー(Forbidden)が出た場合

これはCPIレンタルサーバの場合だけかもしれませんが、サイトURLを変更したら403エラーがでました。

ルートディレクトリにある.htaccessに以下を追記

これで正常に表示されるようになりました。

 

WordPress + Welcart ショッピングサイト全体をSSL化

WordPress でECサイトが作れる無料のプラグイン Welcart 。

何度か使わせていただいています。
国産のプラグインなので日本語によるマニュアル等も充実しているのもありがたいです。
ちょっと古いけど本も出版されています。(私も購入済み)

WordPressでオリジナルテーマを作る要領でショッピングサイトも構築できる感じでしょうか?

このWelcartで最近ECサイトを制作したのですが、サイト全体をSSL化したくてちょっと手間取ったので覚書として。

まずはレンタルサーバ。
ショッピングサイトですが、はじめは小規模スタートなので、レンタルサーバも格安レンタルサーバーに。

ロリポップも検討しましたが、ネットオウルの月額250円の格安レンタルサーバー「ミニバード」に決定。

ミニバードは、以前から利用していて特に障害もなく、レスポンスも悪くないので気に入っています。
さらに、同じグループのSSLBOXを利用すれば、最安年間5990円で独自SSL証明書が取得できるのに惹かれました。
レンタルサーバー代と合わせても、
ミニバード12ヶ月契約で3000円(年間・税抜)
SSL証明書(CoreSSL) 1500円(年間・税抜)
プラスミニバードで独自SSLを利用するのに、固定IPオプションが必要なので
ミニバード固定IPオプション 5000円

合計9500円(税抜き)程度で独自SSL+レンタルサーバーが使えます。
カラーミーショップをレンタルするのもいいけれど、いろいろ自由にできるWordPress+Welcartを使うならこれで満足かと。

SSL導入は1日程度で完了。

WordPressインストールしてWelcartも設定しました。

ここで昨今、Googleさんも常時SSLを推奨していたり、SSL化しているかしていなかも検索順位に影響しているとか。

そんなこともあるのでこのサイトも全体的にSSLにしよう!ということに。

WordPressでの設定は、設定>一般で「WordPress アドレス (URL)」「サイトアドレス (URL)」を両方ともhttpsから始まるURLに変更。
FireShot Capture 45 - 一般設定

Welcartでも、システム設定ページで、「WordPress のアドレス (SSL)」「ブログのアドレス(SSL)」を同じようにhttpsで入力。

FireShot Capture 46 - システム設定

ここで私は最初「SSLを使用する」にチェックを入れていました。

で、トップページを表示してみると無事SSL化されたページになっているのですが、カテゴリーや商品ページはなぜか、httpのまま・・・。

なぜなのかわからず、.htaccessを設定して強制的にSSL化するように設定しても変わらず。。。https化するプラグインが必要なのかとも思っていましたが、

いろいろ調べたところ、この「SSLを使用する」にチェックを入れてたことが原因でした。
Welcartのコミュニティに詳細が。

「SSLを使用する」というオプションは「SSLの切り替えを行う」と言う意味のものです。常時SSLではもう切り替えは行いませんので、チェックを外すという事になります。

SSL とスマホでの購入について
http://www.welcart.com/community/archives/76773

そういうことだったのですね!

FireShot Capture 46 - システム設定2

SSLを使用するのチェックをはずし、httpでアクセスしてきた場合にhttpsにリダイレクトしてくれる.htaccessを設置。

無事、サイト全体をSSL化することができました!

これに伴い、Google Search consoleやGoogle analyticsもhttpsから始まるURLに変更しました。

 

今回契約したサービス。

「ミニバード」月額250円(税抜)からの個人向けレンタルサーバー
もっとディスク容量が欲しい人には上位プランのサービスもあります。


年額990円(税抜)からの格安SSL証明書サービス【SSLボックス】