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で表示・非表示