自分の用途にあった「プラグイン」を「Word Press」でインストールすれば、すべて準備をしてくれるので、凄く簡単。
特に知識も必要ないので簡単。

「Word Press」の管理画面で、「プラグイン」メニューから
「プラグイン」を検索して、インストールすることができる。
プラグイン設定なども管理画面でできるようになっている。

Back

エディタで直接「Javascript」を記入する方法

「Javascript」などの知識があれば、
「Word Press」の「エディタ」や「FTP」などを使って、
直接ファイルに記述することも可能。
「script」タグで囲い込むことで、
「HTML」文書内の「head」タグ「body」タグ内に、
比較的自由に記述することが可能。

「Javascript」をファイルに記述する書式

Back

エディタで直接「CSS」を記入する方法

「CSS」をファイルに直接記述するには、
「HTML」タグに「Style」プロパティを利用して記述する方法がある。

直接記述できるが、１つ１つのタグに記述しなければいけないので、
複数のタグに同じCSSを適用する場合には不便。

その場合には、「HTML」ファイルの「head」タグの間に、
内部スタイルシートのエリアを作成する方法がある。内部スタイルシートは、そのページのみに適用となるスタイルシート。
「head」タグの間に、「style」要素を設け、
その中に「CSS」を記述する。

「CSS」をファイルに直接記述する書式

<div style="「CSS」のスタイルコードを記述">
「HTML」のプログラムコードを記述
</div>

内部スタイルシートの書式

<head> <style type="text/css"> ↓CSSを記述するエリア↓↓↓↓↓↓↓↓ div {
color: #555555;
background-color: #DDDDDD;
boroder-bottom: solid 1px #888888;
font-size: 1.5em;
}
↑CSSを記述するエリア↑↑↑↑↑↑↑
</style> </head>

Back

外部ファイルを読み込む方法

外部ファイルとして「Javascript」「CSS」を読み込むには、
テーマフォルダ内の「header.php」ファイルに記述して、外部ファイルを取り込む。
「Javascript」と「CSS」では、書式が異なるので注意。

一番簡単に「Javascript」の外部ファイルを読み込む方法

一番簡単に「CSS」の外部スタイルシートを読み込む方法

推奨されているプログラムで出力してもらう方法

下記のように入力すると、上記の「script」タグに出力してくれる。
推奨の記述方法は、「function.php」に、
他の「Javascript」「CSS」の記述の下に追記する形になる。

「Javascript」と「CSS」では、第五引数・メソッドなどが異なるが、
扱い方は同じ。

推奨の書式を記述する場所

テーマディレクトリの「function.php」ファイル。
「function.php」ファイル内に、同様の書式の関数があるので、
そこに追記する形になる。

「Javascript」の外部ファイルを読み込む書式

<?php
function add_my_scripts() {
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
wp_enqueue_script( '任意のハンドル名(ID名の一部になる)', 'ファイルのURL' ),array( 'jquery' ), 'バージョン情報', false);
wp_enqueue_script( '任意のハンドル名(ID名の一部になる)', get_theme_file_uri( '/ディレクトリ名/ファイル名.js' ),array( 'jquery' ), 'バージョン情報', false);

}
add_action('wp_enqueue_scripts', 'add_my_scripts');
?>

引数	説明
$handle	任意のハンドル名。任意のハンドル名(ID名の一部になる) ID名は、ファイルに1つなので、ファイルごとに異なるハンドル名が必要らしい。
$src	読み込む「JavaScript」ファイルのURL。 get_theme_file_uri( '/ファイル名.js' ) URL取得系関数によって書式は異なるので注意。
$deps	依存ファイル「デフォルト＝「array('')」「WordPress」に同梱されている「jQuery」ファイルの場合＝「jquery」「Javascript」は「jquery」と記述するらしい。
$ver	バージョン情報。バージョン（ファイル名の末尾に追加される）
$in_footer	スクリプトの読み込み位置を指定する。・「true」＝「閉じBODYタグ」前・「false」＝「閉じHEADタグ」前に出力される。デフォルトは「false」。

「CSS」の外部スタイルシートを読み込む書式

<?php
function add_my_css() {
wp_enqueue_style( $handle, $src, $deps, $ver, $media);
wp_enqueue_style('任意のハンドル名(ID名の一部になる)', 'ファイルURL',array( 'テーマ名-style' ),'','all');
wp_enqueue_style('任意のハンドル名(ID名の一部になる)', get_theme_file_uri('/ディレクトリ名/ファイル名.css'),array( 'テーマ名-style' ),'','all');
}
add_action('wp_enqueue_scripts', 'add_my_css');
?>

引数	説明
$handle	任意のハンドル名。 ID名の一部として使われる。 ID名はファイルに一つのみなので、ファイルそれぞれで異なるハンドル名が必要らしい。
$src	読み込む「JavaScript」ファイルURL get_theme_file_uri( '/ファイル名.js' ) URL系関数によって書式が異なるので、注意。
$deps	依存ファイル「デフォルト＝「array('')」。「WordPress」に同梱されている「jQuery」ファイルの場合＝「jquery」「Javascript」は「jquery」と記述するらしい。
バージョン情報	バージョン（ファイル名の末尾に追加される）
$Media	「CSS」を適用するメディアを指定できる。「all」は、すべてのメディアを対象にしているという意味。

「CSSスタイルシート」と「JavaScript」をまとめて読み込む書式

<?php
function add_my_files() {
//スタイルシートの読み込み
wp_enqueue_style( $handle, $src, $deps, $ver, $media);

//JavaScript の読み込み
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
//アクションフック（wp_enqueue_scripts）への登録
add_action('wp_enqueue_scripts', 'add_my_files');
?>

"<?php
function add_my_files() {
//JavaScript の読み込み
wp_enqueue_script(
'js-script',
get_theme_file_uri( '/ファイル名.js' ),
array( 'jquery' ),
'',
false
);

wp_enqueue_script(
'js-script-min',
get_theme_file_uri( '/ファイル名.min.js' ),
array( 'jquery' ),
'',
false
);

//スタイルシートの読み込み
wp_enqueue_style(
'css-style',
get_theme_file_uri( '/js/vegas/vegas.css' ),
array( 'vegas-style' ),
'',
'all'
);
}

wp_enqueue_style(
'css-min-style',
get_theme_file_uri( '/js/vegas/vegas.min.css' ),
array( 'vegas-style' ),
'',
'all'
);
}

//アクションフック（wp_enqueue_scripts）への登録
add_action('wp_enqueue_scripts', 'add_my_files');
?>

スタイルシートと JavaScript の読み込みに使えるアクションフック

wp_enqueue_scripts – サイト公開側に読み込む場合
login_enqueue_scripts – ログイン画面に読み込む場合
admin_enqueue_scripts – 管理画面に読み込む場合

Back