ふぐこの記事では【WordPressにstyle.css以外の自作cssを追加したいときに試す方法】をご紹介していきます。
復習：WordPressのCSSは「style.css」
WordPressテーマのスタイルシートは各テーマのフォルダにある「style.css」に記述されています。
スタイルシートを書き換える方法
追加CSS
一つは管理画面のメニュー
「外観 ＞ カスタマイズ」を開いて追加CSSにCSSを書いていく方法です。
「追加CSS」の中には直接追加したい分のCSSを書いていくことができます。
「追加CSS」に保存した内容は,headタグで展開されます。
「追加CSS」のメリット
追加CSSの内容はデータベースへ保存されるため
テーマを間違えてアップデートしてしまったときに変更済の内容が消えるということがありません。
管理画面から直接書き込めるのもメリットの一つ。
FTPソフトでサーバーのstyle.cssを直接編集しなくて良いため、ちょっとだけ変更させたいけど権限をもっていないといったユーザーが変更するときに便利です。
権限を分けてWordPressサイトを運営している、WEB制作会社に任せっきりだけれども自分の手で編集したいといったときに便利な機能です。
「追加CSS」のデメリット
CSSの記述場所を増やしてしまうことで
管理が大変になります。
にわとりとハマっているときに「実は追加CSSへ書き込みされていて記述が読み込まれていた」というケースの場合には面倒ですね。
スタイルシートの追加
WordPressで読み込まれるのはstyle.cssです。
style.css以外にも複数のCSSを読み込ませたい！という場合があります。
style.css以外に自作のCSSで「style2.css」を作って読み込ませたいという場合にどうしたら良いでしょうか？
「style2.css」はstyle.cssと同じ階層にUPされているものとします。
headタグ中に追記する
多くのテーマのheader.php内にあるheadタグの中に
CSSを読み込ませる記述を書き込みます。
ちなみに現在使っているテーマのCSSを呼ぶ書き方は
<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" />
となります。
ソース表示したときには↓の内容でブラウザに読み込まれます。
「style2.css」を読み込ませる場合には、
@importで他のCSSを読み込ませる。
style.css内に@import を使うと他のCSSを読み込ませる（importする）ことができます。
@import "style2.css";
とても簡単でお手軽なのですが、
@importの場合にはlink要素でCSSを読み込ませるときより
httpのリクエスト数が増えるので、読み込み速度が遅くなります。
WEBページの表示速度を求めるなら使うのはNGです。
上級編:function.phpにWordPress関数を書き、他のCSSを読み込ませる
style.cssを読み込ませる記述は
wp_head();の中で処理されています。
function.phpに読み込ませるCSSを変更する記述を書き加えると
cssの読み込ませる場所や順番を指定できます。
function.phpでphpのエラーを起こしてしまうと
画面が真っ白になってページが表示されなくなります。
編集する前には必ずバックアップを取って作業したほうが無難です。
使用する関数はwp_enqueue_style()です。
関数リファレンス/wp enqueue style – WordPress Codex 日本語版
<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
下の関数をfunction.phpへ追記することで
wp_head内にCSSのlink要素を追加できます。
function add_stylesheet() {
wp_enqueue_style(
'main-style',
get_template_directory_uri().'/style2.css'
);
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );
コメント