【WordPress】yStandardカスタマイズ、過去に付与したclassを見出し(h2)から一括削除

cssで装飾していて、もっといい方法が見つかった時などには過去に付与したclassを削除したいものです。今回はjQueryのremoveClass()を利用して、見出し(h2)に付けたclassを一括削除してみたいと思います。

※テーマの</head>や</body>の位置が分かっていることが前提です。

使用テーマはyStandardです。

目次

Google Hosted Libraries 

https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js

WordPressには標準でjQueryが使えるようになっていますが、Google Hosted Librariesを利用します。

カスタマイズの[ys]高速化→JavaScript・jQueryの読み込み設定(上級者向け)と進みます。CDN経由でjQueryを読み込むの欄にjQueryのurlを入力します。

Google Hoseted LibrariesのページのjQueryの3.x snippetには<script>がついているので、コピペするときにはurlだけを貼り付けてください。

</body>の直前にremoveClass()

<script type="text/javascript">
$(function(){
  $('h2').removeClass('kctai');
});
</script>

テーマフッター(footer.php)の</body>直前にこのコードを挿入します。’kctai‘の部分には削除したいclass名を代入してください。編集には子テーマの利用が望ましいです。

正しく読み込まれていれば、見出し(h2)に付与していたclassの装飾が消えているはずです。

</body>の直前以外の場合

<script type="text/javascript">
$(document).ready(function(){
  $('h2').removeClass('kctai');
});
</script>

例えば<head>内など</body>の直前以外に記述する場合は、いろんなものを読み込んだ後にjQueryを読み込む設定が望ましいです。

$(document).ready(function(){ここに処理コード});のかたちになります。

こんな感じで見出し(h2)に付与したclassの一括削除を試みてみました。参考になれば幸いです。