functions.phpのことはじめ – WordPressテーマをゼロから作る

前回までに、style.cssにテーマ情報を記載して、index.phpにHTMLとWordPressの関数を設置しました。今回はfunctions.phpを作っていきます。では、そもそもfunctions.phpというファイルは何をしてくれるのでしょうか?

functions.phpとは

以前、WordPressにはテーマとプラグインというものがあり、それぞれテーマはデザイン部分プラグインは機能部分を任されていると説明しました。

dev-wp-theme-04_01

図で表すとこのようなイメージを持っていただくとわかりやすいかと思います。

ウェブサイトはWordPressで運用しているので、母体としてはWordPressということになりますが、そこにはデザイン的な部分をサポートするテーマと、機能的な部分をサポートするプラグインが母体のWordPressと合わさって機能していきます。

そして、これから作るファイルfunctions.phpですが、動きとしてはWordPressのプラグインのような働きをします。

WordPress公式で無償配布されているプラグインはすべて、テーマを選ばずどのテーマでも機能するように作られています。そして、同じように無償配布されているテーマに関してもすべてプラグインを選ばずどのプラグインでも機能するように作られています。ですので、テーマ固有の機能を設定するものがテーマ内にないといけないということになります。

要するに、テーマ固有の機能を設定するファイルということになります。

プラグインとfunctions.phpの違い

こちらは絶対に知っていないといけないというわけではありませんが、プラグインとfunctions.phpの違いについて簡単にまとめておこうと思います。

  • 専用のヘッダーテキストが必要かどうか
  • wp-content/pluginsに保存するかwp-content/themesに保存するかの違い
  • プラグインは有効化を行うと機能し、functions.phpは有効化されているテーマのディレクトリにある場合のみ機能する
  • プラグインはすべてのテーマに対して機能、functions.phpはそのテーマに対してのみ機能
  • プラグインは一つの用途を持つのみ、functions.phpは多くの異なる用途を持たせることができる

といったような違いがあります。詳しくは下記を参照してみてください。

参照:https://wpdocs.osdn.jp/functions.php_%E6%A6%82%E8%AA%AC

functions.phpファイルを作る

では早速、functions.phpファイルを作っていきましょう。

以前作成したテーマフォルダ(連載ではod5.0というフォルダ名)の中にfunctions.phpというファイルを新規作成します。functionsと複数形なので気をつけて下さい。ファイル名を間違えるだけでも読み込まれません。

コードを入力していきます

そして、まずは以下のようにコードを入力していきます。

ファンクション名のつけ方について

上のコードの冒頭に「Must put oleindesign on head of function name」という記述があります。これは僕が個人的に書いたものなのですが、ファンクション名の前に独自の名前を設置することによって、プラグインなどに含まれるファンクション名とバッティングしないようにしています。

例えば、今からfunctions.phpで基本設定を書いていこうと、先ほどのコードで準備しました。そのファンクション名がoleindesign_setupというファンクション名です。そして、そのファンクション名をfunction_exists処理をしています。

function_existsとは

function_existsでは、指定した関数が定義されているかどうか、ということを確認できます。例えば、

上のコードでは、sample_funcという関数が定義されていない場合のみif分岐の中の処理が実行されます。function_existsだけであれば「〜が定義されていれば〜」という処理になり、定義されている場合にはif分岐の中の処理が実行されるのですが、その前に!が入っていることに注意してください。!は条件分岐の内容を逆にする意味があります。

ということは、! function_exists()「〜が定義されていない(=「いる」の反対)場合〜」ということになります。ちょっと小難しいですが、慣れれば比較的簡単に読み解くことができるようになります。

そして、WordPressで新しい関数を定義する場合には、ほぼ必ずこの処理を行うと覚えておいてください。ですので、何度も同じような内容の処理を書くことになりますので、すぐに覚えられるでしょう。

基本設定をする

では、引き続きfunctions.phpにテーマの基本設定となる部分を記述していきます。そして、コードはこのようになります。

add_theme_supportでの設定

上のコードを見るとadd_theme_supportという関数で色々と設定してあることがわかると思います。

add_theme_supportでは、テーマやプラグインで特定のテーマ機能をサポートすることを許可することができます。追加できる機能としては以下のようなものがあります。

  • 投稿フォーマット
  • 投稿サムネイル
  • カスタム背景
  • カスタムヘッダー
  • フィードリンク
  • HTML5マークアップ
  • Titleタグなどなど

今回はフィードリンク・投稿サムネイル・HTML5マークアップを設定します。

参照:https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support

フィードリンクの設定

フィードリンクの設定はとても簡単で、以下のように記述するだけです。(上記15行目を参照)

add_theme_support( 'automatic-feed-links' );

これで設置は完了します。

投稿サムネイル

投稿サムネイルについても、フィードリンク同様とても簡単な記述で済みます。(上記18行目を参照)

add_theme_support( 'post-thumbnails' );

これで設置完了です。

HTML5マークアップ

HTML5にマークアップする場合にはちょっと上の2つよりは記述が複雑化します。

add_theme_supporthtml5を指定した後に、配列でどこをHTML5としてマークアップするのかを指定します。

今回の場合では、検索フォーム・コメントフォーム・コメントリスト・ギャラリー・キャプション部分をしています。(上記26行目から参照)

wp_nav_menu()でメニューエリアを設定

ヘッダー部分にメニューを設置することを考えているので、管理画面で項目を設定できるようにメニューエリアを一つ設置しておきたいと思います。

その場合にはwp_nav_menu()を利用します。こちらも配列の中にメニューエリアを設定していく形になります。(上記21行目から参照)今回はPrimaryという名前のメニューを設定しました。

参照:https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu

最後にアクションフックを登録

再度にadd_action()を利用して、アクションフックを登録します。ここではafter_setup_themeアクションにoleindesign_setupというファンクションを設定します。これで、設定した基本設定がWordPressに反映されます。

参照:https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_action

コンテンツ幅を設定する

コンテンツ幅とはテーマ機能の一つで、oEmbed埋め込みや投稿内の画像の幅などを設定することができます。現段階では、コンテンツ幅(ブログ記事部分の幅サイズ)が決まっていないので、とりあえずの数値を設定しておくことにします。後ほど、開発が進み決定した際には変更することにします。

記述としてはこのように記述しています。この640という部分がコンテンツ幅のピクセル数となっています。そして、先ほどと同じようにafter_setup_themeアクションにフックする形で設定しています。

ちなみにコンテンツ幅の後に入力してある0というのは、関数が実行される優先順序を指定しています。少ないほど優先順位が高くなります(初期値:10)。ですので0ということは一番優先順序が高いということになります。

ウィジェットエリアを設定する

サイドバーでウィジェット機能を利用したいと考えているので設定してみます。

設定するファンクションを設定し、widgets/initアクションにフックする形で設定します。

設定できる項目としてはたくさんありますので、こちらを参照していただくとわかりやすいかと思います。すべてを設定しないと動かないわけではないので、とりあえず設定してみて必要な項目を入れながら試してみると良いでしょう。

参照:https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_sidebars

まとめ

今回は、だいたいのテーマ作成でfunctions.phpに記述する内容の紹介をしました。次回は、こちらのfunctions.phpに追記する形でスタイルシートを読み込んでいきたいと思います。

WordPress 6.5.x 対応版を出版しました

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。