SWELLを独自カスタマイズしたい方向けに、HTML・CSS・JavaScript・PHPのコードを追加する方法の一例を紹介します。
SWELLだけではなく、WordPress共通の基礎知識も押さえられますので、ぜひ以下をご覧ください。
ここで紹介するのはあくまで一例で、その他にも様々な方法がある点にはご留意ください。ただし、親テーマに直接コードを追加することだけは、絶対に行わないでください（テーマを更新すると、追加したコードが消えてしまいます）。
また、特に子テーマやCode Snippetsプラグインなどを用いる場合には、事前にファイルやデータベースのバックアップを取るようにしましょう。できるだけ、テスト環境（Localなど）で事前にテストしておくとベストです。
自分でfunctions.phpを編集する場合や、Code Snippetsプラグインを使用してコードを追加する場合、コードの追加の仕方を誤ったときにWordPress自体がエラーが発生して、サイトが閲覧できなくなることがあります。そうした場合の注意点を以下の記事にまとめたので、ぜひご覧ください。
HTMLを追加する
記事の任意の場所【他のテーマでも共通】
ブロックの、ウィジェット > カスタムHTMLブロックを使用する。
ウィジェット【他のテーマでも共通】
ウィジェット > カスタムHTMLウィジェットを使用する。
その他の場所
SWELLでHTMLを追加できる、その他の場所の一例を紹介します。
- 外観 > カスタマイズ > 高度な設定（
</head>直前・<body>直後・</body>直前） - 外観 > カスタマイズ内の、その他の任意の場所（HTMLの追加を受け付けない場所もあります）
- SWELL設定 > 広告コード
- 外観 > メニュー > ナビゲーションラベル【他のテーマでも共通】
- アクションフックなど
他に探した方は、良かったら教えてください。
<head>直後付近にHTMLを挿入したい場合
<head>直後に挿入することはテーマの仕様上できませんが、<meta name="viewport" ~タグの直後であれば、子テーマのfunctions.phpやCode Snippetsプラグインなどを用いて、以下のコードでHTMLを追加することができます。
以下の場合には、全ページにCSSが読み込まれます。
add_action('wp_head', function() { ?>
<!-- ここにコードを挿入する -->
<?php }, 1);コードを工夫すれば、各ページごとに出力するHTMLを変えることも可能です。
どうしても<head>直後が良い場合
あまり推奨しませんが、子テーマを使用してheader.phpを編集してください。
CSSを追加する
サイト全体にCSSを追加する【他のテーマでも共通】
追加CSS
通常は追加CSSが用いられます。外観 > カスタマイズ > 追加CSSを使用します。
フロント画面・管理画面（エディター画面等）内の両方にCSSが適用されますが、テーマを変更すると追加CSSは継承されません（親テーマから子テーマへの変更は問題ありません）。
子テーマのstyle.css
子テーマのstyle.cssを使用する方法もあります。子テーマは会員サイトからダウンロードしてください。
外観 > テーマエディター > SWELL CHILD: スタイルシート (style.css) を編集します。ここで編集したCSSは、フロント画面のみに反映されます。
任意の投稿・固定ページのみCSSを追加する
ブロックエディター下部の カスタムCSS &JS > CSSを使用します。
サイト全体または一部のページにCSSを追加する【他のテーマでも共通】
カテゴリーページのみCSSを読み込ませたい場合など、上記では対応できない場合に子テーマのfunctions.phpやCode Snippetsプラグインなどを用います。
サンプルコード
以下の場合には、全ページにCSSが読み込まれます。
add_action( 'wp_head', function () { ?>
<style>
/* ここにコードを挿入する */
</style>
<?php } );JavaScriptを追加する方法
サイト全体または一部のページにJavaScriptを追加する【他のテーマでも共通】
サイトの全体またはカテゴリーページを含む一部のページにJavaScriptを追加する場合、上記同様に子テーマのfunctions.phpやCode Snippetsプラグインなどを用います。
サンプルコード
以下の場合には、全ページにJavaScriptが読み込まれます。
add_action( 'wp_footer', function () { ?>
<script>
/* ここにコードを挿入する */
</script>
<?php } );任意の投稿・固定ページのみJavaScriptを追加する
ブロックエディター下部の カスタムCSS &JS > JSを使用します。
PHPを追加する方法【他のテーマでも共通】
子テーマを使うか、Code Snippetsプラグインなどを用います。
他の人には出ていないけど、この現象もしかしたら自分のコードのせいかも？
テーマの更新を行った後など、他の人には発生していない現象で、自分だけにしか発生していない現象があったら、もしかしたら自分のコードによる影響かもしれません。
追加したコードの意味をしっかり把握していくと、そういったことが発生しても自力で解決できる可能性が高まります。
