wp_headにcssを読み込むための文章やscriptを埋め込むためのfunction.php編集

ファイルの読み込み WordPress

function.phpでのcss、Js、jQueryの読み込みを整頓してスッキリしたい…今回のテーマです。整理整頓とても大事。

  • 子テーマで作成編集をしているのだけどcssの読み込みの順番で思い通りのcss編集ができない
  • 必要のないページでプラグイン用のJsファイルやcssファイルを読み込んでいる
  • カスタマイズをするのにJsファイルやcssファイルを必要なところで読み込みたい
  • ヘッダーに埋め込みたいスクリプト、cssスタイルがある

いままでWordpressの編集をしていて、よく引っかかっていたところです。使用頻度がとても高いので整理整頓しておきます。

function.phpの編集があります。ftpソフトを使用してバックアップをとってからの編集をしてください。

ソリシティではftpソフトFileZillaを使用して、function.phpをダウンロード後に複製をする。それから片方にはファイル名に-oldと追加してバックアップをとっています。

wp_enqueue_styleの解説

便利なcss用のwp_enqueue_style()ですがCodexの文章をかみ砕いてみます。ちなみにJsファイル用はwp_enqueue_script()

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
$handle
(文字列) (必須) このスタイルシート読み込みに名称を付ける。
初期値: なし
$src
(文字列|真偽値) (オプション) スタイルシートのURL。例は親テーマの中のcssフォルダの中のcssファイルを指定している。例: get stylesheet directory uri() . ‘/css/animate.min.css’
初期値: 空文字列
$deps
(array) (オプション) このスタイルシートより前に読み込まれる必要があるスタイルシート。
初期値: array()
$ver
(文字列|真偽値) (オプション) スタイルシートのバージョン番号を指定する文字列。つけるといいことがある
初期値: false
$media
(文字列|真偽値) (オプション) スタイルシートが定義されているメディアを指定する文字列。あまり使うことがない
初期値: ‘all’

親テーマや子テーマのURL指定

通常子テーマを使用していないとき、または子テーマを使用していて親テーマを呼び出すときは
get_template_directory()

子テーマでは
get_stylesheet_directory_uri()

使用例

使ったことのある使用例をこちらにつづっていきます

cssファイルの差し込み

アニメーションをサイトに導入したくて、cssファイルを読み込みました。

function.phpへ追加した文は以下になります。cssをアップロードする位置は子テーマフォルダの中にcssフォルダを作成して中に入れました。

function animation_01_scripts() {
  wp_enqueue_style( 
    'animation_01_scripts-style',
    get stylesheet directory uri() . '/css/animate.min.css'
  );
}
add_action( 'wp_enqueue_scripts', 'animation_01_scripts' );

スクリプトの読み込み

Jsファイルの読み込み文がこちらになります。ローディング画面の挿入のために使いました。

function loading_scripts() {
  wp_enqueue_script( 
    'loading-script', 
    get_stylesheet_directory_uri() . '/loading.js' ,
    array( 'jquery' )
  );
}
add_action( 'wp_enqueue_scripts', 'loading_scripts' );

スクリプト文の挿入

スクリプトを直接head部分に書き込むための文章になります。短いスクリプトは埋め込んでしまったほうが良い気がします。

function hook_javascript() {
  ?>
   <script>
     alert('Page is loading...');
   </script>
  <?php
}
add_action('wp_head', 'hook_javascript');