前回までに、style.css
にテーマ情報を記載して、index.php
にHTMLとWordPressの関数を設置しました。今回はfunctions.php
を作っていきます。では、そもそもfunctions.php
というファイルは何をしてくれるのでしょうか?
functions.phpとは
以前、WordPressにはテーマとプラグインというものがあり、それぞれテーマはデザイン部分、プラグインは機能部分を任されていると説明しました。
図で表すとこのようなイメージを持っていただくとわかりやすいかと思います。
ウェブサイトは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マークアップを設定します。
フィードリンクの設定
フィードリンクの設定はとても簡単で、以下のように記述するだけです。(上記15行目を参照)
add_theme_support( 'automatic-feed-links' );
これで設置は完了します。
投稿サムネイル
投稿サムネイルについても、フィードリンク同様とても簡単な記述で済みます。(上記18行目を参照)
add_theme_support( 'post-thumbnails' );
これで設置完了です。
HTML5マークアップ
HTML5にマークアップする場合にはちょっと上の2つよりは記述が複雑化します。
add_theme_support
でhtml5
を指定した後に、配列でどこをHTML5としてマークアップするのかを指定します。
今回の場合では、検索フォーム・コメントフォーム・コメントリスト・ギャラリー・キャプション部分をしています。(上記26行目から参照)
wp_nav_menu()でメニューエリアを設定
ヘッダー部分にメニューを設置することを考えているので、管理画面で項目を設定できるようにメニューエリアを一つ設置しておきたいと思います。
その場合にはwp_nav_menu()
を利用します。こちらも配列の中にメニューエリアを設定していく形になります。(上記21行目から参照)今回はPrimaryという名前のメニューを設定しました。
最後にアクションフックを登録
再度にadd_action()
を利用して、アクションフックを登録します。ここではafter_setup_theme
アクションにoleindesign_setup
というファンクションを設定します。これで、設定した基本設定がWordPressに反映されます。
コンテンツ幅を設定する
コンテンツ幅とはテーマ機能の一つで、oEmbed埋め込みや投稿内の画像の幅などを設定することができます。現段階では、コンテンツ幅(ブログ記事部分の幅サイズ)が決まっていないので、とりあえずの数値を設定しておくことにします。後ほど、開発が進み決定した際には変更することにします。
記述としてはこのように記述しています。この640
という部分がコンテンツ幅のピクセル数となっています。そして、先ほどと同じようにafter_setup_theme
アクションにフックする形で設定しています。
ちなみにコンテンツ幅の後に入力してある0
というのは、関数が実行される優先順序を指定しています。少ないほど優先順位が高くなります(初期値:10)。ですので0
ということは一番優先順序が高いということになります。
ウィジェットエリアを設定する
サイドバーでウィジェット機能を利用したいと考えているので設定してみます。
設定するファンクションを設定し、widgets/init
アクションにフックする形で設定します。
設定できる項目としてはたくさんありますので、こちらを参照していただくとわかりやすいかと思います。すべてを設定しないと動かないわけではないので、とりあえず設定してみて必要な項目を入れながら試してみると良いでしょう。
まとめ
今回は、だいたいのテーマ作成でfunctions.php
に記述する内容の紹介をしました。次回は、こちらのfunctions.php
に追記する形でスタイルシートを読み込んでいきたいと思います。