また変更するかもしれませんが、右のサイドバーにおみくじを設置してみました！
おみくじ自体は簡単なもので、ボタンをクリックしたらランダムに表示される画像を３秒後に止める仕様になっています。
WordPressにjavascriptで作ったものをどうやって反映させればいいのか分からなかったので、
同じような悩みを持っている人の参考になれば幸いです。
本記事は作成してあるものをWordPressへ反映する方法なので、プログラミングの説明は省きます！
ウィジェットのカスタムHTMLを使う
サイトに反映する場合は、ウィジェットにカスタムHTMLというのがありますので、そちらのウィジェットを使います。
メニュー→外観→カスタマイズ→ウィジェットから表示させたい場所にカスタムHTMLを追加します。
※サイドバーなら「メインサイドバー」の＋をクリック
そこにVScodeなどで作ったコードを張り付けます。
その際、別ファイルの読み込みはできませんので、VScodeでファイルをそれぞれ別けているのであればHTMLファイルにすべてCSSとかJavascriptとかを張り付ける必要があります。
CSSなら<style></style>で囲って、Javascriptなら<script></script>で囲う感じですね！
※CSSなら</head>直前 Javascriptなら</body>の直前が良いかと思います。
ちゃんと反映されているかはカスタムHTMLのプレビューで確認できます。
画像の読み込みについて
画像については、WordPressの画像保存場所に読み込みにいかなくてはならないので、
画像URLをコード上に張り付けます。
画像URLは下記の場所にあります。
※使用する画像は予めWordPressにアップロードしておきましょう。
メニューの「メディア」から「ライブラリ」を選択していただき、対象のメディアファイルを選択します。
上記の赤枠に囲われたところのURLが画像の保管場所なので、コードに上記URLを張り付けます。
画像コードの部分をすべて対象の画像ファイルに置き換えたら完了です。
まとめ
他にも色々方法はあるかもしれませんが、今回は自分が想像通りうまくいった方法をご紹介しました。
分かりづらいところがありましたらすみません！
