WordPress functions.phpとは？意味や書き方・記載場所

WordPressの編集を始め、もう少しテーマをカスタマイズしたいと思った時、必ず編集が必要になってくるのがfunctions.phpというファイルです。

本記事では、Wordpress内にあるfunctions.phpについて意味や役割、記載場所、注意点、編集例を解説していきます。

functions.phpの意味・役割

functions.phpは、Wordpressのプラグインのように、WordPressの動作やテーマ動作・各種機能をカスタマイズ・追加できるファイルです。

上記のfunctions.phpを編集することで下記のようなことが可能となります。

WordPress動作やテーマ動作のカスタマイズ
自作の関数の定義
自作ショートコードの定義
CSSやJavascriptの読み込み

functions.phpの記載場所

この便利なfunctions.phpですが、記載場所は2つの方法にて確認することが出来ます。

管理画面で確認・編集する方法

functions.phpは管理画面からも確認することが出来ます。管理画面の「外観」ー「テーマファイルエディタ」ー「テーマのための関数」を選択すると、functions.phpを確認することが出来ます。

ただし、一般的には次のFTPを使って編集することが多いです。

フォルダを辿って確認・編集する方法

functions.phpは各テーマフォルダの中に入っていますので、下記のパスをたどればすぐに見つかります。

functions.phpのパス

"Wordpressのインストールディレクトリ" / themes / "テーマフォルダ名" / functions.php

合わせて読みたい記事

WordPressをすでにサーバー上で運用されている方は、FTPツールを使う必要があります。使われたことが無い方は、「【FTPとは？FTPの意味や仕組み・有名なFTPソフト」をご参照ください。

functions.phpの編集例

functions.phpに記述する内容は多種多様ですが、ここでは代表的なfunctions.phpの編集例をいくつかご紹介いたします。

自作の関数の定義

まず自作の関数を定義することができます。下記は「Hello,World」と出力するだけの関数を定義しました。

function my_function(){
    echo 'Hello,World';
}

function my_function(){

echo 'Hello,World';

}

この関数は、同じくfunctions.php内でフックという機能を使って指定の箇所・タイミングで実行・出力したりショートコードにすることができます。

後述で具体的に自作関数を利用してCSSやJavascriptを読み込み・出力したり、ショートコードとして利用したりするやり方をご紹介します。

他にも、使いたいテンプレートphpで自作関数を呼び出したりなど、いろいろな使い方ができます。

■先ほどのmy_function()を任意のテンプレートphpから呼び出す場合

<?php my_function(); ?>

1	<?php my_function(); ?>

CSSやJavascriptを読み込む

functions.phpから独自のCSSやJavascriptを読み込むことができます。

my_script()という関数を定義してその中でcssやJavascriptを読み込み、アクションフックという機能を利用して、適切なタイミングに関数を実行するように定義しています。

function my_script(){ 
    //cssの読み込み
    wp_enqueue_style( $handle, $src, $deps, $ver, $in_footer);
    //javascriptの読み込み
    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
}
//アクションフックの指定
add_action('wp_enqueue_scripts', 'my_script');

function my_script(){

//cssの読み込み

wp_enqueue_style( $handle, $src, $deps, $ver, $in_footer);

//javascriptの読み込み

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

}

//アクションフックの指定

add_action('wp_enqueue_scripts', 'my_script');

読み込み関数の引数を解説します。

$handle・・・CSS、Javascriptを区別するための名称(必須)
$src ・・・CSS、JavascriptのURL(必須)
$deps ・・・CSS、Javascriptの読み込み順を配列で指定
$ver ・・・CSS、Javascriptのバージョン指定
$in_footer ・・・CSS、Javascriptの読み込み位置を指定。指定方法はtrueでbodyタグの終了直前、falseでheadタグの終了直前。デフォルトはfalse。

具体的な記述例は下記のとおりです。

function my_script(){ 
    //cssの読み込み
    wp_enqueue_style( 'style-css', get_template_directory_uri() . '/css/style.css', array(), '1.0.0' );
    //javascriptの読み込み
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true );
}
//アクションフックの指定
add_action('wp_enqueue_scripts', 'my_script');

function my_script(){

//cssの読み込み

wp_enqueue_style( 'style-css', get_template_directory_uri() . '/css/style.css', array(), '1.0.0' );

//javascriptの読み込み

wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true );

}

//アクションフックの指定

add_action('wp_enqueue_scripts', 'my_script');

(※)get_template_directory_uri はテーマフォルダまでのパスを返す関数です。 WordPressでパスを記載する時によく使いますので、覚えておくと便利です。

CSSやJavascriptを読み込む際にheader.phpやfooter.phpに直接CSSやJavascriptを記述することも可能ですが、WordPressではCSSやJavascriptはunctions.phpで読み込む方が一般的です。

自作ショートコードの定義

functions.phpで自作のショートコードを定義することもできます。

今回は、先程の関数をショートコード化していきます。

function my_function_short(){
    return 'Hello,World';
}
add_shortcode('hello', 'my_function_short'); //ショートコード化する関数

function my_function_short(){

return 'Hello,World';

}

add_shortcode('hello', 'my_function_short'); //ショートコード化する関数

自作の関数を呼び出す方法には、ショートコードを使うという方法があります。

ショートコードとは"[]"の中に関数名を記載することで、投稿記事内でその関数を呼び出すことが出来るというものです。

注意していただきたいのが, 関数の中の処理が "echo"から"return"になっていること、add_shortcodeというショートコード化する関数の記載が増えていることです。

この関数によって、my_function_shortという関数を[hello]というショートコードで呼び出せるようになっています

ショートコードの記載の方法は簡単で、稿記事内に[hello]を入れるだけです。

すると下記のようにショートコードを通じて「Hello,World」が表示されます。

アイキャッチの設定画面を表示する

自作テーマの場合、WordPressデフォルトの動作を制御するためにfunctions.phpに記述することもあります。

下記は投稿のアイキャッチの設定画面を表示する方法です。my_setupという関数を定義して、アイキャッチ画像を有効化しています。

そして、my_setupという関数を実行するタイミングを定義しているのが、 add_actionという関数です。

function my_setup(){
    add_theme_support('post-thumbnails'); // アイキャッチ画像を有効化
}
add_action('after_setup_theme', 'my_setup');//アクションフック functions.phpが読み込まれた直後に実行

function my_setup(){

add_theme_support('post-thumbnails'); // アイキャッチ画像を有効化

}

add_action('after_setup_theme', 'my_setup');//アクションフック functions.phpが読み込まれた直後に実行

なお、アイキャッチの画像を有効にするだけの場合は、上記コードのみで良いですが、他の機能をまとめて有効化する場合もよくあります。

function my_setup(){
    add_theme_support('post-thumbnails'); // アイキャッチ画像を有効化
    add_theme_support('title-tag'); // タイトルタグの表示
    add_theme_support('html5', array( //html5による出力をしたい場合の設定
    'search-form',
    'comment-form',
    'comment-list',
    'gallery',
    'caption',
    ));
}
add_action('after_setup_theme', 'my_setup');//アクションフック functions.phpが読み込まれた直後に実行

function my_setup(){

add_theme_support('post-thumbnails'); // アイキャッチ画像を有効化

add_theme_support('title-tag'); // タイトルタグの表示

add_theme_support('html5', array( //html5による出力をしたい場合の設定

'search-form',

'comment-form',

'comment-list',

'gallery',

'caption',

));

}

add_action('after_setup_theme', 'my_setup');//アクションフック functions.phpが読み込まれた直後に実行

functions.phpを編集する際の注意点

functions.phpはたくさんのカスタマイズが可能ですが、その分非常にデリケートなファイルです。

全角スペースを一つ入れるだけで、ホームページが真っ白になってしまったりしてしまいます。

(最近のWordpressでは真っ白にはならず、エラー画面が表示されるようになっています)そうならないために覚えておいてほしい注意点があります。

バックアップを取る
子テーマに書く
PHPの文法で書く
問題が起きたときの対処を知っておく

バックアップを取る

大前提ですが、問題が起きる起きないに関わらず、変更前の状態を保存しておくことは大切なことです。

フォルダを辿ってfunctions.phpを編集される方は、ファイルを直接コピーしてください。

管理画面からファイルを編集される方は、ご自身のパソコンにあるエディタソフトにファイルの中身をコピーしてください。なお、ファイルの保存の際にUTF-8という形式で保存する事を忘れないでください。

そして最後に、自分が取ったバックアップファイルでちゃんとWordpressが表示されるか確認しておいてください。

慣れていないとバックアップファイルの取り方も間違ってしまうため、ここまでしっかりと確認できていれば、何が起きても元に戻すことが出来ます。

子テーマのファイルに書く

有名な既存のテーマには子テーマが用意されています。

こちらのfunctions.phpを使うことで、親のfunctions.phpに手を加えなくて良い、親テーマのコードが書かれていない等のメリットがあります。

間違って大切なコードを消す心配がなく、スッキリした状態で編集出来るためおすすめの方法です。

PHPでの文法で書く

functions.phpはPHPというプログラミング言語で書かれています。

HTMLという言語とは異るため、そもそもの文法が異なります。そのため、同じように書くことは出来ません。

よくある失敗は「全角の空白を入れてしまう」「コメントアウトの方法を間違ってしまう」「セミコロンが入ってない」「""が””になっている」「そもそも編集例が間違っている」があります。

以下によくある失敗を含むコードを記載しますので確認してみてください。

function hoge(){
    <!-- 間違ったコメントアウト -->
    　$hogevar=”hoge”
}

function hoge(){

　$hogevar=”hoge”

}

また、上記コードをvscodeで記載した場合の見え方を下に記載します。

vscodeはプログラミングの際にエディタとして使われることの多いフリーのソフトです。プログラミング言語に合わせて色をつけてくれたりするので非常に便利です。

特に、わかりにくい全角空白や全角ダブルクオーテーションに色がついて見えたりするので、間違いを探しやすくなります。もちろん、メモ帳等のテキストエディタでも編集は可能ですが、可能であればvscodeでの編集をおすすめします。

vscode上で正しく記述した場合は以下の様になります。

問題が起きたときの対処を知っておく

画面が真っ白になったり、エラーが発生した時は、まず、バックアップファイルで元の状態に戻せるか確認してください。functions.phpを編集してエラーが起きた場合これですぐに復元できます。

そして、どこが間違っているのか、上記のようなよくある間違え方をしてないか確認してみてください

まれに管理画面にも入ることが出来なくなる場合がありますが、もし、管理画面でfunctions.phpをいじっていてそのような状態になった場合は、FTPツールを用いてfunctions.phpを復元してください。

問題が起きた時に焦ってしまうと関係のないファイルをいじってしまったりしてしまうので、焦らず問題は起こるものだと思って対処すると良いです。

まとめ

まとめです。今回はWordpress内にあるfunctions.phpについて意味や役割、記載場所、注意点、編集例を解説しました。

WordPressの編集を始め、もう少しテーマをカスタマイズしたいと思った時、必ず編集が必要になってくるのがfunctions.phpというファイルです。

function.php	解説
意味・役割	WordPressのプラグインのように振る舞って、その機能の追加をすることが出来るファイル
記載場所	・実際のパス "Wordpressのインストールディレクトリ" / themes / "テーマフォルダ名" / functions.php ・管理画面上での記載場所「外観」ー「テーマファイルエディタ」ー「テーマのための関数」
注意点	・バックアップを取る・子テーマのファイルに書く・phpの文法で書く・問題が起きたときの対処を知っておく
編集例	・アイキャッチの設定画面を表示する・自作の関数の定義・自作ショートコードの定義・CSSやJavascriptの読み込み