月別アーカイブ: 2014年7月

googleウェブサイト翻訳ツールの設定と確認

2014-07-30_161231

↑こういうヤツ。

 

googleウェブサイト翻訳ツールへアクセス

https://translate.google.com/manager/website/?hl=ja

ログインとサイトの登録が必要です。

サイトURLとか元の言語を設定し、表示言語や表示モードを選択。

↓こんな感じで設定

2014-07-30_163716

詳細設定の「ユーザーの言語がページの言語と異なる場合に~~~」はチェックを入れておくと
日本語以外でアクセスしたときに自動で↓のような翻訳バナーがページ上部に出る。

2014-07-30_163656

日本語のときはでないので、チェックしておくとユーザーが翻訳ツールを見つける手間が省けて親切。

 

コードをコピーして自分のサイトに貼り付ける。

「コードを取得」をクリックし、出てきたコードをコピーして自分のサイトにペースト。

これだけ。表示を確認するとこんな感じ↓

2014-07-30_164426

日本語にもチェックを入れたけど、今表示されている言語と一緒だと表示されない。

英語に翻訳した後は「日本語」も出てくる。↓

2014-07-30_164757

 

現地表示の確認

これで設定は完了!

でも、そもそも「英語」とか「スペイン語」とかって日本語で表示されちゃってるけど
海外の方が読めるの?意味なくない?

とか、クライアントが不安がっていたらちゃんとユーザーの使用言語に自動で切り替わるんですよ~って説明して確認画面まで見せてあげると完璧。

訪問者のブラウザのデフォルト言語で切り分けしてるっぽいので、ブラウザのデフォルトの言語設定を変更して表示を確認。
今回はFireFoxで。

ツール⇒オプション⇒コンテンツ⇒言語設定を開き、英語とか確認したい言語を上にもってくる。

2014-07-30_170030

「OK」で閉じて、ページを更新するとこんな感じでちゃんと英語に↓

2014-07-30_170257

「言語を選択」がちゃんと「Select Language」になって、選ぶ言語も英語表示になってます。
これで安心です。

 

自動翻訳のため、精度はやっぱりまだ微妙。
でもとりあえず多言語化したいって時には超簡単で便利なツールです。

 

jQuery masonryはIE7非対応なので・・・

いや~まさか今!この時代に!masonryを使ったグリッドレイアウトでまさかのIE7対応することになるとは!
やっとIEの呪縛から抜け出せてきた今日この頃でしたのに!

しかしクライアント様のサイトのエンドユーザー様様にIE7を使ってらっしゃる方がいるというのならばなんとか対応してあげたいところ。

結論から言うと、別のプラグインを使うべき。

私が乗り換えたのは↓こちら

jquery.vgrid.js
http://blog.xlune.com/2009/09/jqueryvgrid.html

5年も前のプラグインですね。にょろにょろ動くグリッドレイアウトが流行ったのももうそんな昔・・・
しかしここにきてとてもお世話になったので、作者様には感謝です。

 使い方はサイト&demoのソースを見ればOK。
masonryとほぼ同じ。

日本の方が作ったプラグインなので、説明が日本語なのも嬉しポイント。

 

bxSliderでmode:fadeが効かない

カスタマイズがしやすくて、設置も簡単で言うことなしの万能スライダーbxSlider。
大好きすぎてスライダー実装する制作では8割がたこのスライダーを使用しています。
メインビジュアルだけでなく、スライド系のところはもう全部これ。

http://bxslider.com/

そんな大好きなbxSliderでフェードモードが効かないという状況に陥り、ググってもダメで、いろいろやってみて解決したのでメモ。

fade:’mode’が効かない

「mode:’fade’」とオプション指定すると、横スライドではなくフェード切り替えになるはずなのですが、
なぜか画像が出ない。一枚も。

「mode:’horizontal’」とか「mode:’vertical’」は問題ないのに。なぜ・・・

解決:overflowが問題でした。

ulにoverflow:hiddenしていたことが原因でした。。
フロートするリストが多くて、フロートクリア用に全部まとめてul{overflow:hidden}ってな感じで指定しちゃってたのがまずかった。

設定を解除するか、bxSliderを使うulだけ「overflow:visible;」に設定すればOK。

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');

↑こんな風に。

とっても簡単。