wordpress:wordpressの投稿記事内でjavascriptを使用する

投稿記事内で直接javascriptを記述し動作させようとしたが、投稿記事内ではscriptが機能しないらしいです。
なので今回は投稿記事内でjavascriptを動作させるために「inline-javascript」というプラグインを導入した際の方法をメモ。
「inline-javascript」インストールしてプラグインを「有効化」します。

■ 使用方法

[inline](使用するjavascriptを記述)[/inline]

[inline][/inline]で囲むだけで、正常に動作しました。

■ 使用例

[inline]
<script type="text/javascript">
    alert('wordpressの投稿記事内でjavascriptを使用');
</script>
[/inline]

※しかし、「inline-javascript」を有効にした際にサイト全体の表示(改行)などが崩れてしまった為、「Custom CSS and JS」をインストールして使用しています。

「Custom CSS and JS」の導入方法・使い方については「coliss」さんの、
WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS
を参考にさせていただきました。

jQuery:jQueryを使用して<div>要素の表示・非表示

jQueryを使用して<div>要素をクリックした場合、別の<div>要素の表示・非表示を行いました。
また、jQueryを使用せずにjavascriptでも行った場合の方法を記載します。
jQuery日本語リファレンスを参考にしました。

■ jQueryメモ

toggle()

各要素のうち、表示状態にあるものを非表示にし、非表示状態にあるものは表示状態にします。

■ 使用例(jQuery)

[javascript]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    // 「id="jQueryBox"」を非表示
    $("#jQueryBox").css("display", "none");

    // 「id="jQueryPush"」がクリックされた場合
    $("#jQueryPush").click(function(){
        // 「id="jQueryBox"」の表示、非表示を切り替える
        $("#jQueryBox").toggle();
    });
});
</script>

[HTML]

<div id="jQueryPush">クリック(jQuery)</div>
<div id="jQueryBox">
    <p>jQueryを使用し表示・非表示</p>
</div>

■ サンプル(jQuery)

【ここをクリック(jQuery)】

jQueryを使用し表示・非表示

■ 使用例(javascript)

[javascript]

<script type="text/javascript">
window.onload = function(){
    Box = document.getElementById("javascriptBox");        // 「id="javascriptBox"」をBox変数に格納
    Push = document.getElementById("javascriptPush");    // 「id="javascriptPush"」をPush変数に格納
    Box.style.display = 'none'; // Box変数のstyleを「display: none;」にする

    // Push変数がクリックされた場合
    Push.onclick = function(){
        // 「id="javascriptBox"」が「display: block;」の場合、クリックすると「display: none;」にする。
        // また「id="javascriptBox"」が「display: none;」の場合、クリックすると「display: block;」にする。
        Box.style.display = Box.style.display == 'block' ? 'none' : 'block';
    }
}
</script>

[HTML]

<div id="javascriptPush" onclick="return false;">クリック(javascript)</div>
<div id="javascriptBox">
    <p>javascriptで表示・非表示</p>
</div>

■ サンプル(javascript)

【ここをクリック(javascript)】

javascriptで表示・非表示

javascript:javascriptで文字列を連結

javascriptで文字列を連結させたい場合は、「+」演算子を使用する。
「+」演算子は文字列の連結以外にも加算などでも使用するので数字などの連結の際は注意する。
加算と文字列結合を両方とも行う場合にミスをしてしまう可能性が多いので、数値の加算をする際は括弧を使用する。

■ 文字列結合

[文字列] + [文字列]

■ 使用例1

<script type="text/javascript">
str = '文字列' + '連結';
alert(str);
</script>
文字列連結

■ 使用例2

<script type="text/javascript">
str = '10' + '10';
alert(str);
</script>
1010

■ 使用例3

<script type="text/javascript">
str = 10 + 10;
alert(str);
</script>
20

javascript:javascriptでphpのnumber_formatを使用

javascriptでphpのnumber_formatを使用する方法。
金額などを表示する際に結構使えるかも。
※少数点がない場合のみで使用する

■ 使用例

<script type="text/javascript">

// 「,」区切りで出力
function number_format(num) {
return num.toString().replace(/([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,');
}

var num = 1000000;

alert(number_format(num));

</script>

■ 出力結果

1,000,000

Javascript:新しいウィンドウを開く、閉じる

■ リンクをクリック時、新しいウィンドウをサイズ指定して開く

<a onclick="window.open('http://hoge.com/hoge.html', '', 'width=600,height=600'); return false;" href="http://hoge.com/hoge.html">新規ウィンドウ</a>
<a href="javascript:void(0);" onclick="window.open('http://hoge.com/hoge.html', '', 'width=600,height=600');">新規ウィンドウ</a>

■ ウィンドウを閉じるリンク

<a href="javascript:close();">閉じる</a>