公開日:

[:ja]【3分で解決】WordPressテーマの通貨表示$(ドル)を¥(円)にする簡単な方法[:]

[:ja]海外サイトでオシャレなWordPressテーマを購入後、「通貨の表示を変えたいけど、そんなオプションがテーマに無い!」なんて経験ありませんか?
出力用テンプレートファイル見つけて、通貨マーク全部手書きで変更するのって、非効率ですよね。

そんな時に便利な海外サイトで購入した不動産サイトや、ショッピングサイト用のWordPressテーマで、通貨マークの出力を変更する簡単なカスタマイズ方法をご紹介します。

$(ドル)の出力を¥(円)に変更する場合のサンプルコード

 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
$(function(){
	$('body').each(function(){
		var txt = $(this).html();
		$(this).html(txt.replace(/\$/g,'\¥'));
	});
});
</script>

 

サンプルコードの設置場所は、テーマ内にあるheader.phpファイルです。
テーマファイルのファイルはダッシュボード内の左手に表示されている「外観」→「テーマ編集」をクリック。画面右側に表示されているテーマ一覧の「ヘッダー(header.php)」表示されます。

以下、コピーした例です。

<head>
//テーマごとに記述があります。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
$(function(){
	$('body').each(function(){
		var txt = $(this).html();
		$(this).html(txt.replace(/\$/g,'\¥'));
	});
});
</script>
<?php wp_head();  ?>
</head>

ポイントは、「head」の内部に記載することと、wp-headの上にコピーすることです。
一行目のjqueryファイルは、サーバー内に設置してもかまいません。

以上で、作業は完了です。

€(ユーロ)を、¥(円)に変更する場合のコード

ドルではなく、ユーロの通貨マークを、円に変更したい場合は以下のサンプルコードです。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
$(function(){
	$('body').each(function(){
		var txt = $(this).html();
		$(this).html(txt.replace(/€/g,'\¥'));
	});
});
</script>

ドル、ユーロ以外にも利用可能です。
今回対象となった通貨マークを、変更したい通貨に合わせるだけですね。

¥(円)マークを海外の通貨にする場合のコード

ドルやユーロなど海外の通貨から円マークに表示変更する方法とは逆に、円マークを海外の通貨(ドル)にする場合は以下の通りです。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
$(function(){
	$('body').each(function(){
		var txt = $(this).html();
		$(this).html(txt.replace(/\¥/g,'\$'));
	});
});
</script>

今回のカスタマイズは、jQueryの「replace()」を使ったシンプルなコードです。
replaceは、英単語のreplace、つまり置き換えると意味ですね。「どこどこにあるAを、Bに置き換える」という用途で使います。

サイト全体ではなく、特定の箇所にあるAのみをBに変更といったアレンジも可能です。
「場所」を任意のIDまたはclassにすることで、「どこどこ」を指定することが可能です。

<script>
$(function(){
	$('場所').each(function(){
		var txt = $(this).html();
		$(this).html(txt.replace(/置き換え「A」/g,'置き換え「B」'));
	});
});
</script>

例えば、「id#test」内にある「before」という文字列を、「after」に置き換えたいという場合は、以下のように記述します。

<script>
$(function(){
	$('#test').each(function(){
		var txt = $(this).html();
		$(this).html(txt.replace(/before/g,'after'));
	});
});
</script>

このコードをアレンジして使うときの注意点ですが、¥や$等の通貨マーク等の特殊な記号を使う場合、そのままでは使えないという点です。
「$」や「¥」は、プログラム上、特別な役割を持つ記号です。置き換え対象の文字列として指定したい場合、「文字列ですよ(これをエスケープシーケンス)」と指定する記述があります。

今回紹介したサンプルコードは、エスケープシーケンスを使っています。そのままでも使えますがアレンジして使って動作しない場合、正しくエスケープシーケンスが使えているかどうかを確認しましょう。

[:]


人気記事 初心者でも可能なSEO対策って何?


人気記事 【ゼロから始める】副業ブログで月5万円を稼ぐ!当社スタッフが試してみた方法と成果を公表


この記事を書いた人
うくさ

うくさ IT業界歴18年です。当カスタマイズネット所属エンジニア。
ワードプレス、シスコシステムズ社製ネットワーク機器担当。


この記事の関連記事



新着コラム