Knowledge Base

WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

チェックを入れる（何かに同意する）とクリックできるようになるボタンを作る方法[jQuery＋HTML]

公開日：2021(令和3)年7月12日／最終更新日：

WordPressのカスタマイズ情報



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

通販サイトや保険の契約などを行うサイトでよく見かける「〇〇に同意しました」にチェックを入れると次の画面に遷移したりするボタン。結構大変なことするのかと思いきやWordPressでjQueryを使って案外簡単に実装できるので、紹介しておきます。

チェックを入れるとクリックが可能になるボタンのデモ

今回の方法で実装可能な「チェックを入れるとクリックが可能になるボタン」はどんなもの？ということで、早速デモをご覧いただきたいと思います。

規約および以下の重要事項について確認し、同意しました
チェックを入れるとボタンがクリックできるようになります
  1. 同意してほしい内容１
  2. 同意してほしい内容１
  3. 同意してほしい内容１

デモでは、「規約および以下の重要事項について確認し、同意しました」横にチェックを入れると、上の「購入ページへ」のボタンの色が代わり、クリックが可能になります（デモではクリックすると本サイトトップページが別タブで表示されます）。逆にチェックを入れない状態ではボタンをクリックしても何も起きません。

※文字列はコード中で変更可能、デザインはCSSで修正可能です

基本的にはコピペして文字列を変えれば同じデザイン（テーマによっては修正が必要）、同じ機能が実装できますが、以下のスキルがあるとご自身でのカスタマイズが可能です。

  • デザインコード（CSS）の編集
  • htmlおよびclass要素などの基礎知識

【基本編】まずは作ってみよう

こういうカスタマイズ記事はテーマ内のファイルをあーしてこーしてっていういきなり敷居が高いものが多いので、苦労して書いてある通りにしたのに動かない…ということもしばしばありますから、今回は投稿編集画面だけで、ひとまずその投稿だけで動作するようにしてみましょう。

各コードの解説は文末の「各コードの解説」を参照ください

０．投稿を新規作成する

これは多分この記事にたどり着いた方なら大丈夫でしょう。投稿を新規追加して編集画面が開いたら次へ進みます。

１．ボタンのHTMLを挿入する

ブロックの追加（編集画面右側の＋ボタン）をクリックして、カスタムHTMLブロックを選択します。

以下のコードをコピペします。

<div class="div-ha-buy-button">
<button id="ha-buy" class="ha-buy-button" disabled="disabled" type="button" onclick="window.open('購入ページのURL', '_blank')">購入ページへ</button>
</div>

２．チェック用項目のHTMLを挿入する

ボタンのHTMLを入れたブロックの下へ新たにカスタムHTMLブロックを追加します。

以下のコードをコピペします。

<div class="ha-check-button">
<input id="ha-buy-check" type="checkbox"><a href="規約ページのURL" target="blank" rel="noopener">規約</a>および以下の重要事項について確認し、同意しました<br><span class="ha-mini-text">チェックを入れるとボタンがクリックできるようになります</span>
</div>
<div class="ha-checkol">
<ol>
<li>同意してほしい内容１</li>
<li>同意してほしい内容１</li>
<li>同意してほしい内容１</li>
</ol>
</div>

３．チェックするとボタンを有効にするjQueryを挿入する

チェック用項目のHTMLの下へ、新たにカスタムHTMLブロックを追加します。

以下のコードをコピペします。

<script>
jQuery('#ha-buy-check').change(function() {
    // チェックが入っていたら有効化
    if ( jQuery(this).is(':checked') ){ 
        // ボタンを有効化
        jQuery('.ha-buy-button').prop('disabled', false);
    } else { 
        // ボタンを無効化
        jQuery('.ha-buy-button').prop('disabled', true); 
    }
});
</script>

４．デザインコード（CSS）を挿入する

チェックするとボタンを有効にするjQueryのブロックの下へ新たにカスタムHTMLブロックを追加します。

以下のコードをコピペします。

<style>
/***** チェックを入れるとクリック可能になるボタン *****/
.div-ha-buy-button{
margin:0 auto;
text-align:center;
margin-bottom:30px;
margin-top:16px;
}

.ha-buy-button {
    display: block;
    font-size: 1.5em;
    padding: 4px 30px;
    margin: 0 auto;
    margin-top: 16px;
    margin-bottom: 16px;
    color: #fff;
    background: #f44336;
    border: 2px solid #a22f27;
    border-radius: 8px;
    cursor: pointer;
}

.ha-buy-button:hover {
    background: #a22f27;
}

.ha-buy-button:disabled {
    color: #fff;
    background: #eee;
    border: 2px solid #eee;
    pointer-events:none;
}

.ha-checkol {
    display: flex;
    justify-content: center;
    text-align: left;
}

.ha-check-button{
display:block;
text-align:center;
}

.ha-checkol ol {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px;
    font-size:0.8em;
    padding: 0px 36px;
}

.ha-mini-text{
font-size:0.8em;
}

input#ha-buy-check {
    transform: scale(1.8);
    margin-right: 1.2em;
}
</style>

ここまで終わったら「下書き保存」をクリックして、プレビューしてみましょう。

・・・どうでしたか？冒頭のデモと同じものが表示され、動作しましたか？（コピペしたコードではクリック後の遷移先は、ページが見つからないため、404ページになります）。

もしも動かない場合には次項の「チェックを入れてもボタンがクリック可能にならないときは」を確認してみてください。

正常に動作したら、以下の内容と、表示する文字列を任意のものへ変更すれば設置完了です。

  1. 「ボタンのHTML」の中の「購入ページのURL」を実際のURLへ変更
  2. 「チェック用項目のHTML」の中の「規約ページのURL」を実際のURLへ変更

チェックを入れてもボタンがクリック可能にならないときは

jQueryが有効になっていないかも知れません

使用しているテーマやプラグイン、ご自身で挿入したカスタマイズコードなどによって、jQueryが動かないようになっているかも知れません。先ほど挿入した「チェックするとボタンを有効にするjQueryを挿入する」で挿入したコードを以下のコードと入れ替えてみてください。

<script type="text/javascript" src="/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>
<script>
jQuery('#ha-buy-check').change(function() {
    // チェックが入っていたら有効化
    if ( jQuery(this).is(':checked') ){ 
        // ボタンを有効化
        jQuery('.ha-buy-button').prop('disabled', false);
    } else { 
        // ボタンを無効化
        jQuery('.ha-buy-button').prop('disabled', true); 
    }
});
</script>

入れ替えたら再び下書き保存後、プレビューで確認してみてください。

コードの読み込み順に問題があるかも知れません

環境によっては挿入したカスタムHTMLブロックの順番の問題で正しく処理されていないのかも知れません。

問題となるのは「チェック用項目のHTMLを挿入する」と「チェックするとボタンを有効にするjQueryを挿入する」のカスタムHTMLブロックの順番ですので、上下を入れ替えます。

入れ替えたら再び下書き保存後、プレビューで確認してみてください。

この２つの措置をされても動作しない場合は、その他の要因が考えられ、詳細に調べて対処するスキルが必要になりますから、残念ながら貴サイトへの導入は断念された方がよいでしょう。

うまく動作したら、次項の手順で貴サイトのどの固定ページ、投稿でも使えるようにいきましょう。

【応用編】サイト内全体で機能を使えるようにするには

ここまでの説明した４つのカスタムHTMLブロックを、同意したらクリックできるボタンを設置したい任意の投稿・固定ページへ挿入すればその投稿・固定ページでは動作しますが、以下の措置をすることで、２つのブロックを省くことができるようになります。使用頻度が高いサイトでは以下のようにしておくとよいでしょう。

親テーマへの直接カスタマイズはおすすめしませんので、子テーマを使用している前提での内容となります。

ここから先のカスタマイズには、以下のスキルが必要です。

  • テキストエディタを使ってUTF-8(BOMなし)で新規にファイルの作成ができる
  • FTPクライアントツールやサーバーのファイルマネージャーなどを使って子テーマ内へファイルを転送することができる
  • 子テーマのfunctions.phpへコードの追加ができる（エラー時には対処できる）
  • 子テーマのstyle.cssまたは、テーマの「追加CSS」へコードの追加ができる

１．jQueryをファイルにして子テーマ内へアップロードする

１．パソコンのテキストエディタを開き、以下のコードをコピペします。

jQuery('#ha-buy-check').change(function() {
    // チェックが入っていたら有効化
    if ( jQuery(this).is(':checked') ){ 
        // ボタンを有効化
        jQuery('.ha-buy-button').prop('disabled', false);
    } else { 
        // ボタンを無効化
        jQuery('.ha-buy-button').prop('disabled', true); 
    }
});

２．ファイル名を「check-button」、ファイル形式を「.js」にし、UTF-8(BOMなし)で保存します

UTF-8(BOMなし)?という方はそのまま何もしないで保存してもうまく動作するかも知れませんが、あまりおすすめしません。

３．子テーマ内（functions.phpやstyle.cssと同じ階層）へ「check-button.js」をアップロードします。

２．functions.phpでjQueryを読み込ませる

子テーマのfunctions.phpを開き、末尾へ以下のコードを追加し、保存します。

/***** チェック機能付きボタン *****/
if ( !function_exists( 'ha_check_button_init' ) ){
function ha_check_button_init(){
  wp_enqueue_script( 'check_button_script', get_stylesheet_directory_uri() .'/check-button.js', array('jquery'), '1.0.0' );	
}
}
add_action( 'wp_enqueue_scripts' , 'ha_check_button_init' );//jsの出力

３．style.cssまたはテーマの「追加CSS」へデザインコードを追加する

子テーマのstyle.cssまたは、テーマカスタマイザーの「追加CSS」を開き、末尾へ以下のコードを追加して保存します。

/***** チェックを入れるとクリック可能になるボタン *****/
.div-ha-buy-button{
margin:0 auto;
text-align:center;
margin-bottom:30px;
margin-top:16px;
}

.ha-buy-button {
    display: block;
    font-size: 1.5em;
    padding: 4px 30px;
    margin: 0 auto;
    margin-top: 16px;
    margin-bottom: 16px;
    color: #fff;
    background: #f44336;
    border: 2px solid #a22f27;
    border-radius: 8px;
    cursor: pointer;
}

.ha-buy-button:hover {
    background: #a22f27;
}

.ha-buy-button:disabled {
    color: #fff;
    background: #eee;
    border: 2px solid #eee;
    pointer-events:none;
}

.ha-checkol {
    display: flex;
    justify-content: center;
    text-align: left;
}

.ha-check-button{
display:block;
text-align:center;
}

.ha-checkol ol {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px;
    font-size:0.8em;
    padding: 0px 36px;
}

.ha-mini-text{
font-size:0.8em;
}

input#ha-buy-check {
    transform: scale(1.8);
    margin-right: 1.2em;
}

４．表示・動作テストをする

テーマファイル内へのファイルの転送、コードの追加などが終わったら、新規に投稿を作り、以下のカスタムHTMLブロックを挿入します。

ボタンのHTML

<div class="div-ha-buy-button">
<button id="ha-buy" class="ha-buy-button" disabled="disabled" type="button" onclick="window.open('購入ページのURL', '_blank')">購入ページへ</button>
</div>

チェック用項目のHTML

<div class="ha-check-button">
<input id="ha-buy-check" type="checkbox"><a href="規約ページのURL" target="blank" rel="noopener">規約</a>および以下の重要事項について確認し、同意しました<br><span class="ha-mini-text">チェックを入れるとボタンがクリックできるようになります</span>
</div>
<div class="ha-checkol">
<ol>
<li>同意してほしい内容１</li>
<li>同意してほしい内容１</li>
<li>同意してほしい内容１</li>
</ol>
</div>

終わったら下書き保存後、プレビューして確認します。

デザインが崩れる（おかしい）場合は、キャッシュをクリア（キーボードの「Ctrl」＋「F5」）をしてみてください。

他の投稿や固定ページへこの機能を持つボタンを設置する時は、「ボタンのHTML」と「チェック用項目のHTML」を挿入するだけで動作するようになります。

各コードの解説

最後に、今回のカスタマイズで何をしているのかを理解いただきたいと考え、各コードの簡易解説をしておきます。

基本となるのは「チェックが入ったら、入ってなかったら」で処理を分けるjQuery、以下のコードになります。

jQuery('#ha-buy-check').change(function() {
    // チェックが入っていたら有効化
    if ( jQuery(this).is(':checked') ){ 
        // ボタンを有効化
        jQuery('.ha-buy-button').prop('disabled', false);
    } else { 
        // ボタンを無効化
        jQuery('.ha-buy-button').prop('disabled', true); 
    }
});

jQueryのコードは、通常接頭辞に「$」を使いますが、WordPressでは変数と区別するため、jQueryですよ！という宣言にかえてやる必要がありますから、上記コードもそのようにしています。

そして、コードの動作は結構単純で、「#ha-buy-check」というIDを持つ要素に対して、チェックがあるかないかで「.ha-buy-button」というCSSクラスが割り当てられている部分に「disabled」というボタンタグ特有の「ボタンを有効にするか」「ボタンを無効にするか」という処理をさせています。

設置方法で紹介した各HTMLソースをご覧いただくと、「#ha-buy-check」は同意するかどうかのチェックボックスに、「.ha-buy-button」はボタンに割り当てられているので、チェックボックスにチェックが入っていない状態ではボタンは「disabled(無効)」になり、チェックが入っていれば通常のクリック可能なボタンになるという仕掛けです。

そして「disabled」と処理されたボタンには「:disabled」という疑似要素が付加されるので、デザインコード（CSS）上で疑似要素のあるボタンとないボタンのデザインを変えているのです。

と偉そうに解説してますが、jQueryのコード自体は次項の参考にさせていただいたページのほぼまんま（IDやクラスは私が使いやすいものへ変えてます）で、仕組みを理解してHTMLとCSSは自分で作ったというのが正直なところです。

しかしながら、いろいろと調べてできなかったという方もきっと多いと思い、今回の記事を公開させていただきました。

誰かの参考になれば幸いです。

参考にさせていただいたページ

今回の機能を実装するにあたり、参考にさせていただいたページです。

【jQuery】チェックしたら有効になるリンクボタン

jQueryでフォームのボタンを有効・無効にする

本記事の更新（変更）履歴

更新日更新内容
2021年 7月12日チェックを入れる（何かに同意する）とクリックできるようになるボタンを作る方法[jQuery＋HTML]を公開しました
2021年 7月13日内容の微修正を行いました
2021年 7月31日紹介しているCSSコードの修正をしました
（ボタン有効化時のマウスポインタを手マークにする、同意のチェックボックスを大きくする等）
アバター画像

Knowledge Base管理人

☆WordPressの使い方やテーマカスタマイズなどに役立つ情報、有用なプラグインの紹介などを行っています



Knowledge Base
WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです