【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以外の自動整形オフが不要なら、その部分は削除してください)

 

参考にさせて頂いた記事

function.phpにコピペするだけ。wordpressでonclick属性などが消える問題を解決。 | Unlimited Otaku Life
以前、記事内にonclick属性を使ったリンク付きのボタンを配置しようと思ったのにWPの仕様で書いても書いても消されてイライラしたのでメモ。 この現象はビジュアルエディターとテキストエディターを切り替えた時に起こるらしいのですが、この他にもいろいろな属性が記事内で消えてしまうというのは問題視されている模様。 情報はいろ

 

これで記事内で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 を直接書いて動作させる
WordPress の投稿記事内に JavaScript を書いて動作させたい場合の話。調べたところ、プラグイン使えなど少し面倒臭い情報が多かったのですけど、プラグインを使わずに以下の方法で動きました。--- 環境 ---WordPress...

 

 

<script></script>の部分が、JavaScriptです。


なおJavaScriptでは、「function 関数名(引数){処理内容}」というフォーマットで、関数を定義します。

 

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

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

 

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


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

 

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

404 Not Found

 

 

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

 

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


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


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


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

JavaScriptでgetElementByIdを使う方法!HTML要素を取得する
初心者向けにJavaScriptでgetElementByIdの使い方について解説しています。JavaScriptの一番基本になるメソッドでいくつかサンプルプログラムを書いています。基本的な使い方を理解しておきましょう。
Elementオブジェクト | JavaScript プログラミング解説

 

 

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

 

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

style.backgroundColorプロパティ - JavaScript(ジャバスクリプト)リファレンス
JavaScriptにおけるDOMのStyleオブジェクトのstyle.backgroundColorは、要素のスタイル属性のbackground-colorプロパティの値を取得、もしくは、設定するプロパティ。background-colorプロパティは、要素の背景色を指定することができる。

 

 

つまり、「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」に該当します。

 

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

任意の要素(ブロックなど)の背景色を動的に変更する方法 - JavaScript TIPSふぁくとりー
任意の要素の背景色をJavaScriptで動的に変更したい場合は、document.getElementById('対象ID名').style.backgroundColorを使います。getElementByIdメソッドで装飾対象を特定するため、あらかじめHTML側の対象要素にid名を振っておく必要があります。

 

なおid名は唯一無二なので、そのidを持つ要素は、ページ内に1つである必要があります。また、別々の要素の背景色を変更するなら、関数名も別々にします。

 

 

記事そのものの背景色を変える場合

 

WordPressの記事部分のid値を調べればOKです。


基本的に「main」で共通していると思います。なので上記の「irobox」部分を、「main」に書き換えればOKです。

 

 

まとめ

 


functions.phpで自動整形をオフにして、記事内のソースコードにJavaScriptとボタンを設置すればいいんだね!


JavaScriptがわからなくてもカンタンにできるな

 

「小説家になろう」に背景色を変更するボタンがあって、WordPressでも同じことができないかなーとおもって調べました。


まだJavaScript勉強しはじめたばっかりなんで、なんかヘンなこと言ってるかもしれませんが……その時はご指摘いただければ幸いです。


関連

【読書感想】いちばんやさしいJavaScript入門教室【おすすめ本・2018年発刊】

 

今回は以上です。良きWordPressライフを────ではまたφ(・ω・ )

 

スポンサーリンク
タイトルとURLをコピーしました