WordPressに自作のCSS・JavaScript・HTMLを追加するには? – Simple Custom CSS and JS

WordPress を利用していると、ここの見た目を変更したい、こんな機能を追加したいなどなど、さまざまな変更や機能追加をしたくなってきますが、そんなときに必要になるのが CSS(スタイルシート)や JavaScript です。

この記事では自作の CSS・JavaScript・HTLM を WordPress に追加する方法について解説していきます。

 

追加 CSS

WordPress には CSS を追加するための機能が最初から用意されており、画像のように、ダッシュボード > 外観 > カスタマイズ内の 追加 CSS という場所で、スタイルシートを追加することができるようになっています。

しかし、この機能はテーマに依存してしまうので、テーマを変更したときに追加したスタイルシートが効かなくなってしまうという問題があります。テーマは絶対に変えない!という方はそれでいいと思いますが、部屋の模様替えをするように、時々見た目を変えたくなったりしますよね?

そういった場合に備えて、日頃からテーマに依存しない形で CSS や JavaScript を追加していきましょう。

Simple Custom CSS and JS


このプラグインを利用すると、テーマに関係なく、CSS・JavaScript・HTMLのコードを追加していくことができるようになります。

ダッシュボード > プラグイン > 新規追加で、Simple Custom CSS and JS を検索してインストール&有効化してください。

プラグインのインストール方法がよくわからない方は、以下のページを参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

使い方


1. スタイルシートを追加してみる

インストールが終わると、ダッシュボードに Custom CSS & JS という項目が表示されていると思います。そこから Add Custom CSS を選んで、スタイルシートを追加してみましょう。

 

2. スタイルシートのタイトルを入力する

画像赤線の ここにタイトルを入力 と書かれているフォームに、スタイルシートのタイトルを入力してください。これは自分で管理するためのタイトルなので、覚えやすいタイトルを入力しておくといいでしょう。

 

3. スタイルシートを入力する

タイトルを入力したら、下のフォームに /* */ で囲まれた英文がありますので、これをすべて削除して、代わりにスタイルシートを入力してください。画像では <strong>タグを赤くするスタイルシートを入力しています。

入力が終わったら、右にある 公開 ボタンを押してください。公開ボタンを押すと、ブログにスタイルシートが適用されます。

 

4. 管理画面で確認する

メニューの All Custom Code を押すと、先程入力したスタイルシートが表示されています。この画面では、入力した CSS・JavaScript・HTML を管理することができ、星マークを押して、公開・非公開を切り替えることができます。

★は現在公開中で、☆は非公開の状態です。不要になったコードがある場合は、このページで非公開に設定しておきましょう。

今回は例としてスタイルシートを入力してみましたが、同じような形で JavaScript と HTML のコードも入力することができます。

Options について


スタイルシートや JavaScript を入力するフォームでは、オプションを設定することができます。そのオプションの各項目について解説します。

Linking type

External File: 入力した CSS・JavaScript を外部ファイルにして、以下のような形で読み込みます。

<link rel='stylesheet' id='1235-css' href='https://gameusers.org/dev/blog/wp-content/uploads/custom-css-js/1235.css?v=9179' type='text/css' media='all' />

Internal: ソースのタグ内にそのまま表示されます。

<style type="text/css">
strong {
 color: red;
}
</style>

Where on page

Header: HTMLのソースの上部、<head>タグ内に表示されます。CSS は上部に表示されるのが普通なので、CSSの場合は Header を選択しておくといいでしょう。

Footer: HTMLのソースの下部に表示されます。JavaScript の場合は、Footer を選んでください。上の方に JavaScript のコードがあると、JavaScript をすべて読み込んでから HTML の読み込みが始まりますので、ページの表示が遅くなってしまいます。特別な場合を除いて、基本的には Footer を選んでおくのが正解です。

Where in site

in Frontend: ブログのトップページや記事のページなど、誰もが見れるページに表示されます。

in Admin: ダッシュボードなど、管理者用のページに表示されます。

On Login Page: ログインページに表示されます。

このプラグインでなにができるの?


この記事を見ただけではなにができるのかよくわからないと思いますが、このプラグインを利用すれば、本当にいろいろなことができるようになります。

このブログでは Simple Custom CSS and JS を利用して、リストの見た目を変更する方法、スクリプトを利用して便利な機能を追加する方法、Web フォントで文字を綺麗にする方法などを解説していきますので、ぜひそちらもチェックしてみてください。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)