【WordPress】ボタンで背景色を切り替えるやり方【プラグイン不要】

JavaScriptを使いますが、カンタンです。

短いJavaScriptを、記事内のソースコードに貼りつけ、ボタンによって各要素の背景色を変更できるようにします。すこしだけ下準備がいります。

以下、WordPressでの方法がなかなかみつからなかったので、勉強とメモがてら書いておきます。

この記事の目次

デモ
やり方
解説
記事そのものの背景色を変える場合
まとめ

デモ

下のボタンでここのボックスカラーが変更されます。

下のボタンで記事そのものの背景色が切り替わります。

やり方

下準備

「onclick属性」を今回使用します。

ただし、onclick属性は「自動整形」で消去される仕様があります。

自動整形

WordPressには「wpautop」という自動整形機能がある。空のpタグが勝手に入ってしまったり、brタグが勝手に消えたり。便利なときもあるけれど、だいたいジャマ。

まず、この自動整形がonclick属性で効かないように、子テーマのfunctions.phpに数行記述します。

//onclick属性が消えないようにする
function custom_editor_settings( $initArray ){
	$initArray['body_id'] = 'primary';	
	$initArray['body_class'] = 'post';	
	$initArray['valid_children'] = '+body[style],+div[div|span],+span[span]+button[onClick],+input[onClick]';
        
	$initArray['verify_html'] = false;
	return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

上のコードでは、onclickに加え、style/div/spanの自動整形もオフにしています。（oneclick以外の自動整形オフが不要なら、その部分は削除してください）

参考にさせて頂いた記事

http://unlimited-otaku-life.com/2018/01/31/function-php/

これで記事内でonclick属性が使えるようになりました。

記事内にJavaScriptを書く

<div>
<script>
function changeBoxColor( newColor ) { document.getElementById('irobox').style.backgroundColor = newColor; }
</script>
</div>

JavaScriptは、<div></div>で囲んでソースコードに置きます。ソースコードは「表示」から開けます。

このJavaScriptを読み込んでおくことで、次に設置するボタンを動作させます。

詳しい解説はひとまず後回し。

ボタンを設置

<p>
<input type="button" value="緑" onclick="changeBoxColor('#008000');" />
<input type="button" value="青" onclick="changeBoxColor('#0000ff');" />
<input type="button" value="黄" onclick="changeBoxColor('#ffff00');" />
<input type="button" value="赤" onclick="changeBoxColor('#ff0000');" />
<input type="button" value="戻す" onclick="changeBoxColor('transparent');" />
</p>

JavaScriptの下に、ボタンのコードを追記します。

色を変えるボックスを用意

<table id="irobox" style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 100%;"> </td>
</tr>
</tbody>
</table>

仕上げです。なんでもいいですが、今回はテーブルにしました。

記事内の好きな位置に置いてください。ポイントは「id値」です。先述したJavaScriptと同じid値にします。

これで完成。デモに載せたものと同じものができます。

以下、解説です。

解説

勉強ついでに長々しく書いてるのであしからずです。

<div>
<script>
function changeBoxColor( newColor ) { document.getElementById('irobox').style.backgroundColor = newColor; }
</script>
</div>

divタグで囲むことで、記事内でJavaScriptを動作させます。

参考にさせて頂いた記事

WordPress の投稿記事に JavaScript を直接書いて動作させる

function changeBoxColor( newColor ) {
 document.getElementById('irobox').style.backgroundColor = newColor;
}

↑ 見やすいよう少し改行しました。

ここではまず、「changeBoxColor」という関数を定義しています。

「( newColor )」の部分は、引数（ひきすう）と呼ばれるものです。引数を使うことで、関数に処理内容を引っぱる──渡すことができます。

参考にさせていただいた記事

https://www.epano-school.com/blog/mamechishiki-25/

document.getElementById('irobox').style.backgroundColor = newColor;

↑ これがchangeBoxColor関数の処理内容部分です。

「getElementById」は、指定したid値の要素を、Elementオブジェクト（HTMLやXML）として返すメソッドです。

「document.getElementById(‘id値’)」という書き方をします。今回は「irobox」がid値になります。

参考にさせていただいた記事

JavaScriptでgetElementByIdを使う方法！HTML要素を取得する | TechAcademyマガジン

Elementオブジェクト | JavaScript プログラミング解説

「style.backgroundColor」は、要素の背景色を設定するプロパティです。プロパティというのは、オブジェクトが持つ属性のことです。

参考にさせていただいた記事

style.backgroundColorプロパティ - JavaScript（ジャバスクリプト）リファレンス

つまり、「document.getElementById(‘irobox’)」でid値を指定しつつ、「.」で「style.backgroundColor」プロパティと繋いで、id値「irobox」の背景色を引数（newColor）の文字列に変更できるようにします。これが「changeBoxColor」関数の処理内容です。

あとはボックスにid値「irobox」を指定し、ボタンのonclick属性に「chageBoxColor(‘背景色’)」を追加すればOK。

<table id="irobox" style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 100%;"> </td>
</tr>
</tbody>
</table>

↑ テーブル（ボックス）のid値に、「irobox」を指定しています。

<p>
<input type="button" value="緑" onclick="changeBoxColor('#008000');" />
<input type="button" value="青" onclick="changeBoxColor('#0000ff');" />
<input type="button" value="黄" onclick="changeBoxColor('#ffff00');" />
<input type="button" value="赤" onclick="changeBoxColor('#ff0000');" />
<input type="button" value="戻す" onclick="changeBoxColor('transparent');" />
</p>

↑ ボタンのonclick属性（クリックされたら反応）に、先程つくった「changeBoxcolor関数」を指定しています。

「changeBoxcolor(‘好きな色’);」です。「好きな色」部分が、関数の引数「newcolor」に該当します。

参考にさせていただいた記事