contactform7で確認画面実装手順メモ

毎回使うので、メモしとく。

①ライブラリのダウンロード

aulta様様のサイトより、jsとcssをダウンロードします。
http://aulta.jp/library/wordpress/contactForm7Confirm.html

②jsファイルの編集

contact-form7-confirm.jsを編集します。
編集方法は上記サイトに詳しく乗っていますが、こんな感じ↓

	var option = {
		pages : [
			{
				'path' : ['/contact/','/contact'],//ファイル名を入れる(複数の場合⇒ ['/inquiry/', '/inquiry2/', '/inquiry3/'])
				'button' : {
					'areaClassName' : 'btns',	//	<p class="btns">[submit "送信"]</p>
					'confirm' : '<input class="button-confirm" type="button" value="確認画面へ" />',	//	html
					'rewrite' : '<input class="button-rewrite" type="button" value="戻って編集" />'	//	html
				}
			}
		],

●【path】はコンタクトフォームを使用するページのファイル名。スラッシュの有り・無しにも注意。
とりあえず両方入れとく。

●【areaClassName】は送信ボタンを囲む要素のクラス名を指定。
contactform7の設定画面で↓のようにクラス名つけた要素で囲んでおくこと!

③contactform7でsubmitを囲む要素に②で設定したClass名をつける。

<p class="btns">[submit "送信"]</p>

④CSSの編集

contact-form7-confirm.cssでデザインの編集。

⑤jsとcssをリンク&アップロード。

head内でcssとjsをリンクして、アップロードすればOK!

とっても簡単ステキ!

 

 上手く行かないときは

●ヘッダとフッタにアレを読み込まないと変になるかも。

▼アレ

//</head>の前に
<?php wp_head(); ?>


//</body>の前に
<?php wp_footer(); ?>

 

●リンクちゃんとできてる?

●パスとクラス名合ってる?

 

 

郵便番号から住所自動入力Ajax(contactform7)

問い合わせフォームで郵便番号を入力すると自動で住所が途中まで出てくるようにします。

実装方法はとってもとっても簡単。数行のコードで実装できます。
実装方法は以下のサイトを参照。
https://code.google.com/p/ajaxzip3/

contactform7で住所自動入力を実装したい

WordPressの問い合わせフォームといえばcontactform7。
contactform7で郵便番号を入れたら住所が自動で出てくるカタチにしたいときも
上記ajaxzip3が役立ちます。

contactform7の設定でinputに「onKeyup」とか「onClick」を付けられればいいのだけど、
めんどくさそうだったのでjQueryで対応。

①郵便番号を入力するinputにclassかIDを付けておきます。

▼contactform7側で作成したタグ。

[text zip id:zipcode]

②住所を出力するinputのnameを確認。

▼contactform7で作成したタグ。nameは「address01」になります。

[text address01]

③Ajaxzip3を読み込み&jQueryでキーアップイベントを書く

▼headでもbodyでも好きなところ(jQuery本体より後)でAjaxzip3を読み込む。
その後jQueryでkeyup(キーボードのキーが押され、上がった時)に住所を出力するコードを記述。

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
<script>
$(function(){

	$('input#zipcode').on('keyup',function(){
	AjaxZip3.zip2addr(this,'','address01','address01');
	});

});
</script>

住所を都道府県とそれ以降に分けたい場合は出力用テキストボックスを2つ用意して、

	AjaxZip3.zip2addr(this,'','address01','address02');

↑こんな風に。

とっても簡単。

 

EC-CUBE2.13系でページにブロックを読み込む

デザイン管理>PC>ページ詳細設定で編集するec-cubeの「ページ」に
作成したブロックをインクルードしたくて、できたのでメモ。

▼ページ詳細の中の好きな場所に

<!--{include file=`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/xxx.tpl}-->

これをいれればOK。「xxx.tpl」のところはブロックのファイル名にしてください。

 includeの記述はバージョンによって異なるみたい。

wordbookerからSocial Networks Auto Posterに乗り換えてはまった罠

FB投稿(リンクシェア)が一般に公開されない!

wordbookerが設定も簡単で重宝していたのですが、今月あたりから使えなくなり、サポートも終了とのことで乗り換えプラグインを探すことに。

いろいろ調べて「Social Networks Auto Poster」が便利そう!で入れてみました。

wordbookerではAppを作る必要がなかったのですが、
Social Networks Auto PosterではFB Appを作成しAppIDとPWが必要になります。
そこが面倒だったのですが、設定もわかりやすく、無事WP投稿がFBのタイムラインに反映されてよかったよかった。

と、安心してたら問題が。。。

FB投稿(リンクシェア)が一般に公開されない!

FB管理者で入って確認するとちゃんと反映されてるし一般公開になってるのに
ログアウトしてFBページを見てみると反映されていない。。

原因はプラグインじゃなくてFB APP

Appについて無知だったことが一番の原因なんですが・・・

▼赤枠の部分がじゃなくてになっていたら要注意。
マウスを当てると「not available to all users because your app is not live」になります。
つまり、「アプリが生きていないため、すべてのユーザーが利用できない」ってこと。

fbapp

こりゃいかん。

解決策

①まずSetting(設定)画面でメールアドレスを入力し、変更を保存。

fbapp2

②次にStatus&Reviewを開き、「公開しますか?」的な英文の横のボタンをクリックしYesに。

fbapp3

なんかウィンドウがでてきたら「承認」をクリック。

▲さっきだった部分がになります。

 

これで完了。

今まで公開されていなかった投稿も全部一般にも公開されました!

 

 

 

 

 

良く使うTwitterウィジェットカスタマイズ

・ベースはダーク。
・ヘッダー/フッターなし。
・背景色なし。
・スクロールバーなし

<a class="twitter-timeline" data-theme="dark" data-dnt="true" href="https://twitter.com/sampledesuyo" data-widget-id="365155945216614402" data-chrome="noheader nofooter transparent noscrollbar"data-link-color="#CCCCCC">@サンプルですよ からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

 使うときは↑をコピペして、

href="https://twitter.com/sampledesuyo" data-widget-id="365155945216614402"

の部分を自分のに変更する。

▼実際の表示(親divに背景色#333指定)


幅と高さはスタイルシートで。

iframe{
width:100% !important ;
height:200px !important;
}

box-shadowが効かない

box-shadowを付けたいボックスの下の要素にbackgroundが入っているとbox-shadowが効かない・・・というか見えなくなってしまう。

↓の図でいうと、1番目のDIVは2番目のDIVのbackgroundがnoneなのでシャドウが効いてる。
2番目のDIVは3番目のDIVにbackgroundが入っているため効かなくなっている。
3番目のDIVは下に何もないので効いてる。

2014-06-23_011948

 

解決策

▼効かなくなってしまったボックスにこれをつける

div#box02{
	position:relative;
	z-index:2;
}

z-indexの値は適当に。

2014-06-23_012726

 

 

 

TinyMCE Advancedを最新版にしたら・・・

文字カラーとかを自由に設定できる「その他の色」カラーピッカーがなくなってしまった!!

▼バージョンアップ前にあった「その他の色」。クリックするとカラーピッカーが出てくる。

2014-06-11_045233

▼TinyMCE Advanced 4.0に更新したら「その他の色」がない!

2014-06-11_045452

http://www.laptoptips.ca/projects/tinymce-advanced/より

 The “More Colors” dialog is missing

This is a change in TinyMCE 4.0. By default is includes only pre-defined colors. If you prefer to select custom colors, try the TinyMCE Color Picker plugin.

・・・TinyMCE Color Pickerっていうプラグインを使えと。

▼入れてみた。

2014-06-11_050009

▼「Add a color」をクリックするとカラーピッカーが出て

2014-06-11_050043

▼「Apply」をクリックすると

2014-06-11_050115

▲ここに登録されるみたい。新規投稿のときもこの色は残ってて便利かも。

この最新バージョン、他にも使えなくなってしまった機能がいろいろあるらしい。。
テーブルのセルの背景色とか。

そんなときはめんどいけど前のバージョンをインストールしなおしたほうが早いかも~

▼ここから好きなバージョンをげっとできます。

http://wordpress.org/plugins/tinymce-advanced/download/

 

 

EC-CUBEで「複数のお届け先」機能を無効に

EC-CUBEのデフォルト機能「複数のお届け先」。これが、送料無料のときどうするかとかいろいろやっかい。
ならいっそこの機能を解除してしまえばいいじゃない。

管理画面から簡単に設定できる。

管理画面に入り、【システム設定】>【パラメーター設定】へ

USE_MULTIPLE_SHIPPING】のパラメーター値を【false】にするだけ。

20140607

以上

 

 

WPでindex.phpがリダイレクトされて困る

静的なページのサイトをWPに移行するときに、とりあえず今のサイトはそのままで同じディレクトリにWPインストールして制作を進めることってよくありますよね?

ユーザーからは基本的にhttp://example.com/index.tmlが見える。
制作のチェック時はhttp://example.com/index.phpにアクセスして表示を確認ってこと。

それをやろうとしたところ、どうしてもhttp://example.com/index.phpからhttp://example.com/にリダイレクトされてしまう。。

困った。

 

解決

.htaccessのチェック

.htaccessを確認してサイトURL統一のため(SEO対策)の▼コレ系の記述があったらコメントアウトしておく。

RewriteCond %{THE_REQUEST} ^.*/index.(html|php)
RewriteRule ^(.*)index.(html|php)$ http://%{HTTP_HOST}/$1 [R=301,L]

▼コメントアウトの方法は#を先頭につけるだけ。

# RewriteCond %{THE_REQUEST} ^.*/index.(html|php)
# RewriteRule ^(.*)index.(html|php)$ http://%{HTTP_HOST}/$1 [R=301,L]

 

wp-includes/canonical.phpの一部を変更

参考にしたページ⇒http://ja.forums.wordpress.org/topic/1112

「wpncludes」の中の「canonical.php」を開く。

▼WP3.8.1だと、342行目の1行をコメントアウト。

	// trailing /index.php
// 	$redirect['path'] = preg_replace('|/' . preg_quote( $wp_rewrite->index, '|' ) . '/*?$|', '/', $redirect['path']);

	// Remove trailing spaces from the path
	$redirect['path'] = preg_replace( '#(%20| )+$#', '', $redirect['path'] );

これで解決

 注意点

・WP3.7ぐらいから勝手にマイナーアップデートされるようになってるので、そのたびにやらなきゃダメです。
・オープンしてしまえば逆にURLが統一されるのでイイコトなので戻しておきます。

 

 

EC-CUBEでスマホ切り替えとかいらない場合

EC-CUBEはスマホでアクセスした場合自動でテンプレートがスマホ用に切り替わりますが、PCサイトをレスポンシブにしてたり、スマホでもPCサイトで見せたかったりする場合の対処方法。

【data/class/SC_Display.php】を編集

▼140行目あたり

    /**
     * 端末種別を判別する。
     *
     * SC_Display::MOBILE = ガラケー = 1
     * SC_Display::SMARTPHONE = スマホ = 2
     * SC_Display::PC = PC = 10
     *
     * @static
     * @param          $reset boolean
     * @return integer 端末種別ID
     */
    public static function detectDevice($reset = FALSE)
    {
        if (is_null(SC_Display_Ex::$device) || $reset) {
            $nu = new Net_UserAgent_Mobile();
            $su = new SC_SmartphoneUserAgent_Ex();
            if ($nu->isMobile()) {
                SC_Display_Ex::$device = DEVICE_TYPE_MOBILE;
            } elseif ($su->isSmartphone()) {
                SC_Display_Ex::$device = DEVICE_TYPE_SMARTPHONE;
            } else {
                SC_Display_Ex::$device = DEVICE_TYPE_PC;
            }
        }

↑ここで振り分けが行われているので、全部PC版で見せるなら
▼こんな感じにいらない部分をコメントアウト(//)しちゃう。

    /**
     * 端末種別を判別する。
     *
     * SC_Display::MOBILE = ガラケー = 1
     * SC_Display::SMARTPHONE = スマホ = 2
     * SC_Display::PC = PC = 10
     *
     * @static
     * @param          $reset boolean
     * @return integer 端末種別ID
     */
    public static function detectDevice($reset = FALSE)
    {
        if (is_null(SC_Display_Ex::$device) || $reset) {
            $nu = new Net_UserAgent_Mobile();
            $su = new SC_SmartphoneUserAgent_Ex();
//           if ($nu->isMobile()) {
//                SC_Display_Ex::$device = DEVICE_TYPE_MOBILE;
//            } elseif ($su->isSmartphone()) {
//                SC_Display_Ex::$device = DEVICE_TYPE_SMARTPHONE;
//            } else {
                SC_Display_Ex::$device = DEVICE_TYPE_PC;
//            }
        }

これでOK。