WordPressでカスタマイズ用CSSを記入できる箇所は、親テーマのstyle.css、子テーマのstyle.cssなどがあるが、標準では追加CSSという入力欄も使用できる。追加CSSの動作を検証する。
追加CSSの使用方法
追加CSSの入力欄は、ダッシュボードにログインし、外観＞カスタマイズに移動すると、左パネルの最下部に表示される。
使用方法の注意書きには、主にキーボードショートカットについて書かれている。
サイトの外観とレイアウトをカスタマイズするには、ここに独自の CSS コードを追加してください。
キーボードナビゲーションの利用方法:
- 編集エリアの中で Tab キーを押すと、タブ文字を入力します。
- このエリアから移動するには、Esc キーを押した後に Tab キーを押します。
- スクリーンリーダー利用者: フォームモード利用中は、Esc キーを2回押す必要があります。
エディターは自動的にコードシンタックスをハイライトします。プレーンテキストモードを利用するには、ユーザープロフィールから無効化することができます。
入力方法としては、通常のスタイルシートと同様で良い。ホームページの段落の文字色を赤にしたい場合は下記のようになる。
追加CSSの入力欄にスタイルを記述すると、右側のプレビューでリアルタイムで反映される。確定して保存する時は必ず、公開ボタンをクリックする。
追加CSSが追記される場所
ソースを確認すると、<head>の終了タグ直前に、<style>タグとして追加されていた。コメントアウトした/* 追加CSS */もそのまま反映されている。
<style type="text/css" id="wp-custom-css">
/* 追加CSS */
.home p {
color: red;
}
</style>
</head>
<body class="home">
追加CSSが保存される場所
追加CSSで入力したCSSは、custom_cssという投稿タイプとしてデータベースに保存される。カラムはpost_content。
/* 追加CSS */
.home p{
color:red;
}
追加CSSの仕組み
<body>終了タグ直前に追加CSS（カスタムCSS）が差し込まれていることからわかるように、追加CSSはwp_headアクションを使って headセクションへカスタムCSSを追加している。