「かっこいい動きのパーツを見つけたけど、うちのサイトはWordPress。どこに貼ればいいの？」——制作の現場でいちばん多い質問です。結論から言うと、HTML/CSS/JSの3ファイルで完結しているパーツなら、WordPressには3つの貼り方があります。この記事では、いちばん簡単な方法から順に、実際の手順と注意点をまとめます。
方法1: カスタムHTMLブロックに貼る（いちばん簡単）
投稿や固定ページの本文に貼るなら、ブロックエディタ（Gutenberg）の「カスタムHTML」ブロックが最短です。
1. 編集画面で「＋」→「カスタムHTML」を選ぶ 2. パーツの index.html のうち、<body> の中身だけをコピーして貼る 3. 同じブロックの中に、<style> タグで style.css の中身、<script> タグで script.js の中身を続けて貼る
つまり、こういう1つの塊にします。
<!-- パーツのHTML（bodyの中身） -->
<div class="my-part">……</div>
<style>
/* style.css の中身 */
</style>
<script>
/* script.js の中身 */
</script>
プレビューで動きを確認できたら公開するだけ。テーマもプラグインも触らないので、失敗してもブロックを消せば元通りです。まずはこの方法から試してください。
方法2: テーマのテンプレートに貼る（トップページのヒーローなど）
「サイトの顔になるヒーロー演出をトップに置きたい」ような場合は、テーマ側に組み込みます。
- クラシックテーマ: 子テーマの
front-page.phpなど、表示したいテンプレートにHTMLを貼り、CSS/JSはwp_enqueue_style/wp_enqueue_scriptで読み込むのが行儀の良い形です（手早く済ませるならテンプレートに<style><script>を直書きしても動きます） - ブロックテーマ（FSE）: サイトエディターでテンプレートを開き、方法1と同じ「カスタムHTML」ブロックを置けばOKです
画像を使うパーツは、画像をメディアライブラリにアップロードして、コード内の img/〇〇.jpg のようなパスをアップロード後のURLに書き換えるのを忘れずに。
方法3: ページビルダーのHTMLウィジェットに貼る
ElementorやSWELLのような環境でも考え方は同じです。「HTML」ウィジェット（またはコードブロック）に、方法1と同じ塊を貼るだけ。ビルダーのデザイン設定とパーツのCSSが同居するので、次の章の「崩れたときの対処」を先に読んでおくと安心です。
崩れたとき・動かないときの対処法
1. デザインが崩れる → クラス名の衝突を疑う テーマ側に同じクラス名（.card や .hero など）があると、スタイルが混ざります。パーツ側のクラス名に接頭辞を付けて（.card → .mp-card のように、HTML・CSS・JSの3か所を同時に置換）解決できます。AIカスタマイズプロンプトを使う場合は「クラス名に mp- の接頭辞を付けて」と一言添えれば、書き換え済みのコードが返ってきます。
2. 動きだけが動かない → JS最適化プラグインを疑う Autoptimize・LiteSpeed Cache・WP Rocketなどの「JS遅延読み込み／結合」機能は、動きのスクリプトを壊すことがあります。プラグインの除外設定に該当スクリプトを追加するか、そのページだけ最適化をオフにして切り分けてください。
3. GSAPを使うパーツが動かない → 読み込み順を確認 スクロール演出系のパーツは GSAP というライブラリを使うものがあります。gsap.min.js → ScrollTrigger.min.js → パーツの script.js の順番で読み込まれているか確認してください。順番が逆だと何も起きません。
4. スマホで横スクロールが出る 貼り付け先のテーマに overflow の指定がない場合、html, body { overflow-x: clip; } をCSSに1行足すと解決することがほとんどです。
まるごと1ページ作るなら、逆の順番もあり
既存のWordPressに部品を「足す」のではなく、キャンペーンLPのような1枚ものを作るなら、先にAIプロンプトで完成HTMLを作って、固定ページのカスタムHTMLブロックに丸ごと貼る（またはHTMLファイルをそのままサーバーに置く）ほうが速いこともあります。部品を組み合わせた実例はこちらで公開しています。
まとめ
- まずはカスタムHTMLブロック——テーマを触らず安全に試せる
- テンプレート組み込みは子テーマ＋enqueueが正攻法
- 崩れたら「クラス衝突」「JS最適化プラグイン」「GSAPの読み込み順」の3つを順に疑う
motionAETHERの部品はすべてHTML/CSS/JSの3ファイル完結・依存は同梱GSAPのみなので、この記事の手順がそのまま使えます。カタログの「AI用プロンプト」を使えば、貼り付け先に合わせた書き換え（接頭辞・色・文言）もAIに任せられます。