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

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

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

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

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

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

wp_enqueue_styleの解説
1. 親テーマや子テーマのURL指定
使用例

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）（オプション）このスタイルシートより前に読み込まれる必要があるスタイルシート。

$ver: （文字列|真偽値）（オプション）スタイルシートのバージョン番号を指定する文字列。つけるといいことがある

$media: （文字列|真偽値）（オプション）スタイルシートが定義されているメディアを指定する文字列。あまり使うことがない

親テーマや子テーマの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');

アドセンスを<head>に差し込むときの例です。内容はアドセンスの自動広告になります。

// アドセンス差し込み
function meta_headcustomtags() {
    $headcustomtag = <<<EOM
    (adsbygoogle = window.adsbygoogle || []).push({
        google_ad_client: "～アドセンスコードより～",
        enable_page_level_ads: true
    }); 
    EOM;
echo $headcustomtag;
}
add_action( 'wp_head', 'meta_headcustomtags', 99);