WordPressでサイトを作成している時、管理画面にオリジナルのメニューを追加できたらいいな…そんなことを思ったことはありませんか?
実はこれ、WordPressの「アクションフック」という機能を使うととても簡単にできるんです。
「複雑なプログラムは書けないし難しそう…」と思っている方も安心してください。コードはとてもシンプルで、追加場所(functions.php)さえ間違えなければ誰でも簡単にできてしまいます。
今回はその追加場所と追加方法を紹介します。
アクションフックとは
アクションフックとは、WordPressにオリジナルの処理を追加したい時に使える機能です。
オリジナルの処理といっても複雑なものに限らず、「どうしてもこのポイントで〇〇を出力したい」など、シンプルなものでもOK。
既存のWordPressテーマに何か独自のアクションや処理を盛り込みたい時に使います。
こんな時に使える!
・ヘッダーやフッターにバナーを追加する
・投稿の記事抜粋表示が長いので50文字にする
・投稿をデフォルトの投稿順ではなく更新順に並び替える
私の場合は、サイトに設置したフォームの回答内容をWordPressの管理画面に出力するために使いました。
このように、デフォルトのWordPressの挙動とは異なるオリジナルの挙動を追加する時に使います。
アクションフック設置の流れ
アクションフックの設置の流れはとてもシンプル!
以下の3ステップで簡単にアクションフックを追加できます。
- “functions.php”のバックアップをとる
- “functions.php”内の任意の場所にadd_action関数を挿入
- add_actionで呼び出す関数(挿入したいオリジナルの処理を記述した関数)の定義
functions.phpとは
前述の通り、アクションフックは”functions.php”というファイル内に挿入します。
“functions.php”はWordPressに必須のファイルの一つであり、WordPressの動作や様々な機能についてのコードを記載する場所です。拡張子からわかる通りPHP言語で書かれています。
“functions.php”を編集することで、WordPressの様々な部分・機能をカスタマイズすることができます。
今回は管理画面にメニューを追加したいわけですが、管理画面のカスタマイズもこの”functions.php”内ですることができます。
ただし、裏を返せばそれだけ重要なファイルであるということですので、編集する際には事前にバックアップをとっておくのがオススメです。
“functions.php”はどこにある?
よくWordPressのカスタマイズを紹介しているサイトで「functions.phpに~を追加しましょう」と書かれていたりします。しかし、肝心の”functions.php”の場所の記載がないため、最初は「そもそもどこにあるの?」とこの時点で躓いてしまいます。
ディレクトリから直接アクセスする場合と、WordPressの管理画面からアクセスする場合の2パターンのアクセス方法があります。
前述の通り重要なファイルですので、アクセスしたらまずはバックアップをとりましょう!
“functions.php”単独でバックアップする方法は後述しますが、せっかくだからWordPress全体のバックアップをとっておきたい!という方は以下の記事をご参照ください。
①ディレクトリから”functions.php”にアクセスする
ディレクトリ内では、以下の場所に”functions.php”が格納されています。
wp-content > themes > テーマのフォルダ > functions.php
編集する際は、テキストエディタなどで開くと編集できます。
テキストエディタで開いた後、「名前をつけて保存」を使って新規ファイルとしてバックアップをとっておくと良いでしょう。
②WordPressの管理画面から”functions.php”にアクセスする
WordPress管理画面のメニューの中から「外観」>「テーマファイルエディター」を選択します。
右側にファイル一覧が表示されるので、その中から”functions.php”を探します。
こちらの方法の場合、WordPressの管理画面から直接ファイルを編集することができます。
まずは全部コピーして、テキストエディタなどに貼り付けてバックアップとして保存しておきましょう。
WordPressの管理画面にオリジナルメニューを追加するための関数
いよいよ肝心のオリジナルメニューの作成です。
以下二つの関数を使います。(関数の細かい説明はいいから早くコピペできるものが見たい!という方は読み飛ばしOKです)
add_action関数
add_action関数は、WordPressに標準実装されている「アクションフック」に対して、オリジナルの処理を追加することができる関数です。
ここで言う「アクションフック」とは、あらかじめWordPress内に用意されている処理を挿入できるポイントのことです。
関数は以下の通りです。
add_action( 'アクションフック名(オリジナルの処理を追加する場所)', '関数名' );
第一引数ではWordPressの「どこに」独自の処理を埋め込みたいのか指定します。
第二引数では、任意の関数名を指定します。この関数の中身を独自に記載することで、指定された場所でその関数の処理を呼び出すことができます。
よく使われるアクションフックについては以下を参照してみてください。
add_menu_page関数
add_menu_page関数は、今回の目的である管理画面に独自のメニューを追加するための関数です。
add_menu_page( '①追加したいメニュー名', '①追加したいメニュー名','②権限', '③スラッグ名', '④コールバック関数', '⑤アイコンファイルのURL', ⑥項目位置 );
ここで、①~⑥は任意の文字列や値をいれることになります。
順に解説していきます。
①管理画面に追加したいメニュー名を記載します。(一つ目はページのタイトル、二つ目はメニューのタイトルですが同じものでOK)
②メニューを表示するために必要なログインユーザーの権限を指定します。
③追加したいメニューのURLスラッグを指定します。
④追加したいメニューページで何を表示/処理するか定義した関数の関数名を記載します。こちらは任意の関数名を指定可能です。関数の中身は別途定義する必要があります。
⑤管理画面に追加したいメニューに表示するアイコンの画像URLを指定します。
⑥追加したいメニューをどこに表示するかの表示順を指定します。このパラメータを省略すると、新しいメニューは自動的に最下部に追加されます。
表示順の詳細は以下をご参照ください。
【コピペでOK!】WordPressの管理画面にオリジナルメニューを追加
WordPressの管理画面にオリジナルのメニューを追加するためには、“functions.php”の中に以下のアクションフックを書き込みます。
add_action( 'admin_menu', 'register_my_custom_menu_page' );
function register_my_custom_menu_page(){
add_menu_page( '追加したいメニュー名', '追加したいメニュー名','manage_options', 'new_menu', 'my_custom_menu_page', '',30);
}
これで「追加したいメニュー名」をメニュー名としたメニューがWordPressの管理画面に以下の通り追加されたはずです。(今回は「サンプル」というメニューを作ってみました)
このメニューをクリックすると、new_menuをスラッグとしたメニューページが開かれます。
追加したメニューの中身を定義する
メニューは追加できたものの、中身はまだ白紙の状態です。
メニューの中身は、「④コールバック関数」(今回の場合はmy_custom_menu_page)を定義することで作成することができます。
例えば、タイトルを表示させるには以下のコードを”functions.php”に追加します。
function my_custom_menu_page(){
echo "<h2>タイトル</h2>";
}
このように、関数の中に通常のPHPやHTMLを記載すればOKです。
今回の場合、以下のように表示されます。
まとめ
今回は、WordPressの管理画面に独自のメニューを追加する方法を解説しました。
管理画面のカスタマイズというと難しそうなイメージをもつかもしれませんが、たった数行のコードで追加することができます。
基本のサイトは全てWordPressの既存のテーマで作成できるけど、どうしても独自メニューを一つ追加したい…そんな時に試してみてください!