--- title: "functions.phpのことはじめ – WordPressテーマをゼロから作る" canonical_url: "https://olein-design.com/blog/dev-wp-theme-04" language: "ja" date_published: "2016-10-03T09:00:42+09:00" date_modified: "2016-10-03T09:00:42+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "WordPress" post_tag: - "WordPress" --- # functions.phpのことはじめ – WordPressテーマをゼロから作る 前回までに、`style.css`にテーマ情報を記載して、`index.php`にHTMLとWordPressの関数を設置しました。今回は`functions.php`を作っていきます。では、そもそも`functions.php`というファイルは何をしてくれるのでしょうか？ ## functions.phpとは 以前、WordPressには**テーマとプラグイン**というものがあり、それぞれ**テーマはデザイン部分**、**プラグインは機能部分**を任されていると説明しました。 ![dev-wp-theme-04_01](https://olein-design.com/wp-content/uploads/2016/10/dev-wp-theme-04_01.jpg) 図で表すとこのようなイメージを持っていただくとわかりやすいかと思います。 ウェブサイトは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](https://wpdocs.osdn.jp/functions.php_%E6%A6%82%E8%AA%AC) ## functions.phpファイルを作る では早速、`functions.php`ファイルを作っていきましょう。 以前作成したテーマフォルダ（連載では**od5.0**というフォルダ名）の中に`functions.php`というファイルを新規作成します。function**s**と複数形なので気をつけて下さい。ファイル名を間違えるだけでも読み込まれません。 ### コードを入力していきます そして、まずは以下のようにコードを入力していきます。 ### ファンクション名のつけ方について 上のコードの冒頭に**「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](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にマークアップする場合にはちょっと上の２つよりは記述が複雑化します。 `add_theme_support`で`html5`を指定した後に、配列で**どこを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](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](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](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`に追記する形で**スタイルシート**を読み込んでいきたいと思います。