WordPressのfunctions.phpの基本の使い方

WordPressはいろいろな設定がされています。この初期設定があるから、プログラミングの知識がなくてもCMSというシステムを構築することができるのですが、自分の思うようなサイトを作りたい時、この設定を変更したいことが多々あります。

自分でテーマを作るとき、WordPressの機能をカスタマイズしたい時になどに使うのが functions.php です。知っておくと便利な機能や今までに使用してきたものなどをメモしていきます。

functions.phpはWordPressの機能をカスタムするもの

functions.php は主にWordPressの機能を追加、カスタマイズしたいことを記述します。
サイトを運用していると、WordPressのデフォルトの設定では機能が足りなかったり不要な機能があったりと、サイトの使い勝手が良くないと思うことが出てきます。
そんな時に自分の思う通りに機能を拡張・変更するために使用するのが functions.php です。

オリジナルテーマを作成するならこのファイルを編集するのは必須です。基本的な機能でいえば、サイトやページごとのタイトル設定、アイキャッチ画像の登録、不要な初期機能の削除などがあげられます。また管理画面のカスタマイズもここで設定できます。
テンプレートテーマや有料テーマなどを使っていると感じにくいですが、実は設定しないと使えない機能がいくつかあります。一から自分で作るときの注意点です。

多機能なWordPressにしようとするほど、コードが長くなり煩雑になってしまうことも。初めは機能を厳選して、必要になった時に追加していくようにした方がいいと思います。

functions.phpの設置場所

functions.php は使用するテーマフォルダのすぐ下に置きます。

インストールしたテーマを使用する場合も同様の場所にあるので、カスタマイズしたいときはここを確認してみてください。

この場所から動かすと設定した内容がうまく動作しません。もし設定したはずなのにうまく機能しない、といった場合は所定の位置にファイルがあるか確認します。

アイキャッチの有効化

ブログサイトなら特にアイキャッチは必須設定項目でしょう。もし投稿にアイキャッチが表示されない場合は、この記述があるか確認してみてください。

add_theme_support('post-thumbnails');

アイキャッチ設定は投稿タイプごとに設定することもできます。

// 投稿ページのみ
add_theme_support('post-thumbnails',array('post'));
// 固定ページのみ
add_theme_support('post-thumbnails',array('page'));

タイトルタグの出力設定

ページのタイトルタグを出力するのも必須です。add_theme_support('title-tag') がないと <title> タグは出力されません。
初期ではタイトルタグの区切り文字はハイフン（ー）。この文字を変更したい時は以下のコードを使います。

add_theme_support('title-tag');
function my_title_separator($separator) {
  $separator = '|';
  return $separator;
}
add_filter('document_title_separator', 'my_title_separator');

$separator='' のところで任意の文字を指定します。

初期設定のハイフンのままでよければ add_theme_support('title-tag') のみで大丈夫です。SEOプラグインを使用している場合はそちらでの設定で反映されると思うので、その場合もこちらの記述は不要です。

CSS、JSの読み込みをfunctions.phpに記載する

HTMLで静的サイトを作るときにheadタグ内にCSSを読み込み、JSはbodyタグの直前に。という形で記述しますが、WordPressでは直接そこに書かず、functions.phpで一元管理することが推奨されています。

WordPress本体も独自でスクリプトを読み込んでいます。その上でheadタグなどにスクリプの読み込みを記述すると、同じファイルを何回も読み込んでしまったり、正い順序で読み込まれないことがあります。またプラグインのファイルと重複することもあります。

functions.phpで読み込むことで依存関係が整理されるため、問題が出にくくなります。

CSS/JSの読み込みには、wp_enqueue_style()、wp_enqueue_script() を使います。CDNなど外部リンクもここで設定できます。
WordPressのjQueryを使わない場合は、wp_deregister_script('jquery'); というコードも忘れずに。

function add_files() {
  // WordPress本体のjquery.jsを読み込まない
  wp_deregister_script('jquery');
  // サイト共通CSS
  wp_enqueue_style('reset', get_template_directory_uri() . '/assets/css/reset.css', '', '');
  wp_enqueue_style('main', get_template_directory_uri() . '/assets/css/main.css', '', '');
  // サイト共通JS
  wp_enqueue_script('jquery', '//code.jquery.com/jquery-3.5.1.min.js', '', '', false);
  wp_enqueue_script('smart-script', get_template_directory_uri() . '/assets/js/script.js', array( 'jquery' ), '', true );
}
add_action('wp_enqueue_scripts', 'add_files');

ループのメインクエリ検索条件の変更

メインループを使って記事一覧を表示させるときの設定を変更できます。

一覧の表示件数なら、【設定 → 表示設定→１ページに表示する最大投稿数】で設定できます。ただここでは全ページ一律の設定しかできません。

TOPページでは変更したい、カテゴリーページでは並べる順序を変えたい、といった時などはfunctins.php で指定します。

function my_preget_posts($query) {
  if (is_admin() || ! $query->is_main_query()){
    return;
  }
  if ($query->is_home()) {
     $query->set('posts_per_page', 3);
     return;
  }
  if ($query->is_category()) {
    $query->set('order', 'DESC');
    $query->set('orderby', 'date');
  }
}
add_action('pre_get_posts','my_preget_posts');

【関連記事】

ウィジェット

ウィジェットもテンプレートテーマなどには付いているかと思います。

単純にメニューにウィジェットを表示させるようにするだけなら下記のコードを記述。

add_theme_support('widgets');

ウィジェットの作成・設定方法はこちら
WordPress ウィジェットを使って共通部分を設定する

管理画面のカスタマイズ

ログイン画面やアドミンバーの設定、メニュー項目の表示などをカスタマイズできます。

またサイトによって異なりますが、不要な初期機能はいくつかあります。あらかじめ表示されないように設定しておくと記事が書きやすくなりますし、混乱も少なくなります。

【詳しくはこちら】WordPressの管理画面をカスタマイズ

ショートコードを作る

ショートコードがあると記事の投稿でもphpを使うことができます。phpコードは記事の編集画面では記述できないため、記事内で何かしらphpの処理が必要になったらショートコードが必要になります。

初期設定の動きを変更するフック

functions.php では機能をカスタマイズしていきますが、初期設定の動きを変更する仕組みを、「フック」といいます。
このフックを使ってカスタマイズするのが基本になります。
function.php にコードを追加していくと、add_action() や add_filter() というコードを見かけるようになります。これらはそれぞれのフックを起動させるコードです。

2種類のフック

フックは2種類あります。

アクションフック Action Hook
フィルターフック Filter Hook

フックのコードリファレンス

アクションフック

特定の処理をする時に何かしらのアクションを実行する。任意のタイミングで関数を実行します。
add_action() という関数を使ってアクションフックを呼び出します。

フィルターフック

データベースに保存するとき、値を取得するときに変更する。
add_filter() という関数を使ってフィルターフックを呼び出します。

フックを使用する関数の書き方

add_action(action_hook, function, 優先度, 関数に渡す変数の値)
add_filter(filter_hook, function, 優先度, 関数に渡す変数の数)

「優先度」と関数に渡す変数の値・数は任意でなくてもOK。

フックの使い方

フックの使い方は以下のような流れになります。

どんな処理をするか、という関数を作成する。
特定のフックに関数を登録する。

このフックが使いこなせるとカスタマイズの幅がとても広がります。

コードでのカスタマイズが難しれけばプラグインを使う

プログラミングがよく分からなくても、コピペすれば動くコードがweb上にたくさんあります。私もよくお世話になります。

ただ必ず動くとは限りません。

エラーになった時に対応できれば問題ないのですが、そうでなければさまざまなところに影響を与えてしまうことも…

ちゃんと理解していないコードを使ってうまく動かないようであれば、エラーと格闘するのもいいですが、プラグインを使うことを検討するのも一つの手です。
どういう機能が欲しいのか、そのプラグインはないか、という感じで目当てのプラグインを探した方が早い場合もあります。

もちろん勉強の一環として自分でコードを書く、というのはとてもいいことだと思います。

バックアップはお忘れなく

functions.php のコードはテーマ全体で汎用的に使われます。おかしなコードがあると画面が真っ白になってサイトが見れなくなることも…。記述する内容を理解して使いこなしていきたいものです。

失敗してもすぐに戻せるように、functions.php を変更する際はバックアップをとっておきましょう。

カテゴリー : WordPress