ITメモ
Make SiteMap Word Press




【Word Press】「Javascript」「CSS」を使う方法



「Word Press」は、自身でカスタマイズすることができるので、
自身で作成した「Javascript」「CSS」「PHP」などの外部ファイルを 読み込んで使用することができます。






「Word Press」で「Javascript」「CSS」を使う方法


「Word Press」で「Javascript」「CSS」などを使う方法は、
・プラグインを使う
・エディタに直接記入する
・外部ファイルとして読み込む
などの方法がある。


Back


「プラグイン」を使う方法

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

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


Back


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

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


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

<script>
「Javascript」のプログラムコードを記述
</script>


Back


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

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

直接記述できるが、1つ1つのタグに記述しなければいけないので、
複数のタグに同じ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」の外部ファイルを読み込む方法

<script src="「Javascript」のURL" type="text/javaScript" charset="utf-8"></script>

<script src="<?php echo get_template_directory_uri() ?>/ファイル名.js" type="text/javaScript" charset="utf-8"></script>


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

<link rel="stylesheet" href="外部スタイルシートのURL" media="all">

<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/ファイル名s.css" media="all">




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


下記のように入力すると、上記の「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