簡単だけど諸刃の剣な方法

一番簡単な手法としては、管理画面の[外観] – [CSS編集]からCSSについては編集できます。

この画面では、CSSの変更結果を微調整しながらカキカキできるのが利点で、とても便利なのです。

その他の手法として、[外観]-[テーマ編集]からテーマの「style.css」に追記数する手法もあります。

しかし、問題もあります。
このCSSはテーマの設定値として紐づいているので、テーマを変えると消えてしまいますし
テーマのアップデートで消えてしまったこともあります。
また、テーマ編集については、そもそもこの画面から編集するのは危険です。間違ってからのテキストデータがPOSTされた場合全て消えてしまう可能性もあります。(一度ありました。)

膨大な時間を掛けて構築したCSSが消えてしまうと、もう呆然となってしまいます。。

そのため、Web一般で用いられているように、外部ファイルとして保存されたCSSやJavascriptを利用して編集する手法を取りたいと思います。

ローカルにソースファイルを保持できるので、万が一サーバー上のファイルが消えても復旧可能なので、やはりこっちの方がしっくりきます。
またbootstrapなどの任意のCSSフレームワークを入れたいなんて要望もあるかと思います。

概要

やり方の概要としては「wp enqueue script」関数を利用して、登録を行います。
header.phpに直接書くやり方ももちろんありますが、WordPressの機能を利用して登録していくのが一般的なようです。
関数リファレンス/wp enqueue script – WordPress Codex 日本語版

書き方

以下のように、functions.phpの最後の行に追記します。なお、編集する際にはコピーを取って戻せるようにしてください。
間違って記述するとサイトが動かなくなります。

書き方例：

/**
* スクリプトとスタイルを正しくエンキューする方法
*/
function load_my_scripts1() {
wp_enqueue_style( 'mystyle1', 'url' );
wp_enqueue_script( 'mystyle2', 'url', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'load_my_scripts1' );

“url“にCSSやJavascriptを記述します。

ローカルスクリプトの URL は絶対に直接書き込むべきではない。代わりに plugins_url (プラグイン向け) と get_template_directory_uri (テーマ向け) を使って適切な URL を取得する。リモートのアセットはプロトコルに影響されない URL で指定できる。

とあるため、プラグインフォルダの下のスクリプトやテーマフォルダのスクリプトの場合にはURLを直接書き込まないようにしましょう。

具体的なやり方を次から説明するので、参考にしてください。

CSSやJavascriptの置き場所

テーマを世界中に公開するのでなければ、基本的にどこに置いてもいいと思います。管理しやすい方法が良いと思いますので。

私は、Web一般で用いられている作法で置いた方がわかりやすいと思っています。

wordpressのルートディレクトリの下に「assets」フォルダを作成してその下に「css」ディレクトリ、「js」ディレクトリを新規に作り、それぞれCSSをJavascriptを放り込んでいます。

例えば、CSSフレームワークbootstrapのcssとjsを適用したい場合には、ダウンロードしたソースを、次のように作成したディレクトリに入れます。

置いたスクリプトをWordPressで読み込むように登録する

上記方法で、スクリプトを置いただけではまだ読み込まれません。

次の登録を行います。上で説明したようにwp_enqueue_scriptsを使います。

それではfunctions.phpに書いてみましょう。(必ずファイルのバックアップを取ること)

function load_bootstrap() {
wp_enqueue_style( 'bootstrap-css', '/assets/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-js', '/assets/js/bootstrap.min.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'load_bootstrap' );

そしてサイトを表示させます。

さらに、本当に読み込まれているか「ChromeのDeveloperツールなど」で確認すると。

ちゃんとassetsディレクトリの下にあるCSSとJSが読み込まれているのが確認できます。

これでデザインも自由自在ですね！

今回はbootstrapを用いましたが、もちろん同じように自作したCSSやJSを設置して反映させることもできます。
またfunctions.phpのURLのところにCDNのURLを入れても読み込ませることができます。

それではまた。