WORDPRESS

【WordPress】functions.phpでヘッダやフッタへコードを追加する

更新日:

WordPressのheadタグやfooterエリアへfunctions.phpを使ってコードを追加する方法です。テーマファイルにheader.phpがみつからない場合や既存ファイルを修正せずにCSSやJSファイルを追加したい時などにおすすめです。

function.phpを修正する場合は必ずバックアップをとってから行ってください。間違えるとページが表示されないなどの不具合が出る場合があります。自己責任でお願いします。

function.phpは使用しているWordpressのテーマフォルダ内にあるのでこのファイルに記述を追加します。

/wp-content/themes/[有効なテーマフォルダ]/functions.php

headタグ内に追加する

<head></head>タグ内に追加されます。

// WordPressのheadタグに追加
add_action( 'wp_head', 'add_to_head' );
function add_to_head() {
  echo 'ここに追加したいタグ';
}

add_to_head の部分には実行したい関数の名前を入れます。

例）font awesomeのCDNを読み込む

よく使う例としてfont awesomeが使えるようCDNを読み込ませる場合、次のように記述します。

// Add FontAwesome

add_action( 'wp_head', 'add_to_fontawesome' );
function add_to_fontawesome() {
  echo '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />';

}

※ font awesomeのバージョンなどは次のリンクより適時変更ください。
font-awesome – Libraries – cdnjs – The #1 free and open source CDN built to make life easier for developers

footエリアに追加する

</body>タグの前あたりに追加されます。Googleのタグ設定などでよく使われるかと思います。

// WordPressのfooterタグに追加（複数行）
add_action( 'wp_footer', 'add_to_footer' );
function add_to_footer() {
  echo <<< EOM
  <script>
  /* JavaScriptのコードを記述 */
  </script>
  EOM;
}

関連記事：