css,jsが反映されない

Question

以下リンクのCodepen上では動作しているのですが

ワードプレスのhtmlブロックに同じように１つのブロック内にHTML,CSS,JSを記述しても
HTMLのみしか反映されません。

恐らく書き方が悪いのと思いますが、初心者なのでいまいち書き方がわかりません。
どなたかアドバイスお願いいたします。

以下ワードプレスのHTMLブロック内に記述したコード

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <div class="policy"> <input type="checkbox" id="chkbox" name="policy_doui" value="1"> <label for="chkbox">「個人情報の取り扱いについて」に同意する</label> </div> <div class="submit_btnarea"> <button type="submit" value="内容を確認する" class="form_btn" id="submit" disabled="disabled">内容を確認する</button> </div>

.policy{
margin: 20px auto;
text-align:center;
}
.submit_btnarea {
width: 360px;
margin: 0 auto;
}
.form_btn{
background: #005183;
border: 1px solid #fff;
color: #fff;
width: 100%;
padding: 10px;
font-size: 16px;
cursor: pointer;
transition: all .5s ease-out;
position: relative;
}

.form_btn:hover{
border: 1px solid #005183;
background: #fff;
color: #005183;
}
button[type="submit"][disabled] {
background-color: #fff;
color: #ccc;
border-color: #ccc;
cursor: default;
}

button[type="submit"][disabled]:hover{
opacity:1;
}

$(function() {
$(function() {
$('#submit').attr('disabled', 'disabled');
$('#chkbox').click(function() {
if ( $(this).prop('checked') == false ) {
$('#submit').attr('disabled', 'disabled');
} else {
$('#submit').removeAttr('disabled');
}
});
});
});

Comments

[m.ts10806]

コードはマークダウンのcodeにてご提示ください。
あと「WordPress」タグは必要です。

Answer 1

CSSをHTML内に記述する場合、<style></style>タグで囲みhardタグ内に、JSは<script></script>タグで囲んでbodyタグ内に記述する必要があります。
なので、これらのタグで囲まないと無効となります

Answer 2

ワードプレスのhtmlブロックに

htmlコード以外無効なのでは？
jQueryはデフォルトで読み込まれてるとは思うので不要かとは思いますが、任意のバージョン使いたいならヘッダーに記述する必要があると思います。
cssも外部リンクにしたほうが良いです。