functions.phpの基本の使い方

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

自分でテーマを作るとき、WordPressの機能をカスタマイズしたい時になどに使うのが functions.php です。

functions.phpの設置場所

functions.phpはテーマフォルダのすぐ下にあります。
ここから動かすとうまく動作しませんので、動かさないようにします。

functions.phpはカスタマイズしたい機能を書くところ

主にWordPressの機能を追加、カスタマイズしたいことをfunctions.phpに記述します。
管理画面のカスタマイズも設定できます。

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

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

付けておきたい基本機能

アイキャッチの有効化
タイトルタグの出力設定

この2つは必須だと思います。add_theme_support() を使って以下のように記述します。

add_theme_support('post-thumbnails');
add_theme_support('title-tag');

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

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

初期ではタイトルタグの区切り文字は「ー」ハイフン。この文字を変更したい時はこのコードを使います。

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

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

CSS、JSの読み込み

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 );
  // singleページ専用JS
  if (is_single()) wp_enqueue_script('smart-single-script', get_template_directory_uri() . '/js/single.js', "", '', true);
}
add_action('wp_enqueue_scripts', 'add_files');

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

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

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

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

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');

管理画面のカスタマイズ

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

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

詳しくはこちら
WordPress管理画面のカスタマイズ – GUAVAmemo

ショートコードを作る

ショートコードがあると記事の投稿でもphpを使うことができます。（通常は使えない）記事に何かしらphpの処理が必要になったら、ショートコードを作ります。

ウィジェット

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

私はいつも自作テーマを作っていたのですが、正直必要がなかったのでこの機能を使用してませんでした。
案件によって必要になったことがあったのでメモとして…

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

add_theme_support('widgets');

もっとちゃんと調べたら、カスタマイズ・作成方法などを追記します（_ _）

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

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