【AFFINGER6】記事ごとに個別のカスタムCSSやJavaScriptを挿入する

やりたいこと:
AFFINGER6で、その記事だけで動作するCSSやJavaScriptを挿入したい

WordPressテーマの中には、記事ごとに個別のカスタムCSSやJavaScriptを簡単に挿入できる機能を備えるものも多い(例:Cocoon)。

AFFINGER6では「head / footerに出力するコード」にタグを記述する必要がある。

カスタムCSS

装飾したい要素をHTMLとして編集し、class属性またはid属性を付与しておく。

<p class="custom-class">classにCSSを適用させる</p>
<p id="custom-id">idにCSSを適用させる</p>

投稿画面(エディター)の下の方にある「head / footerに出力するコード」のwp_headにstyleタグを挿入する。

<style>
  /* ここにCSSの内容を記述 */
  .custom-class { color: red; }
  #custom-id { color: blue; }
</style>

▼正常にCSSが適用された。

class/idの付与はブロックの設定からでもOK

ブロック単位でclassやidを付与したい場合は、ブロック > 高度な設定から指定することも可能。

idは「HTML アンカー」、classは「追加 CSS クラス」に記述する。

カスタムJavaScript

ページ読み込み時にJavaScriptを実行したい場合も同様。

<script>
  alert("アラートを表示！");
</script>

「head / footerに出力するコード」のwp_headまたはwp_footerにscriptタグを書く。

保存エラーになる場合は、サーバー側のファイアウォール設定を無効化する必要がある。