ビジネス向けWEBサイトをつくる

WordPressのテーマ・子テーマで使用するfunctions.phpとは何か?

本ページはプロモーションが含まれています

まず、多くの方のWordPressを知るきっかけは、ホームページを作りたいと思ったからだと思います。

その動機は、アフィリエイトがやりたいとか、自分の持っている技術をアピールしたいとか、自社商品を売りたいとか、様々でしょう。

WordPressに出会えば、ホームページを持つという最初の目的は簡単に達成出来ます。

しかし、その後、WordPressをもっと知りたい、ホームページのレイアウトや機能を修正したいと思う方も少なからず、いらっしゃるでしょう。

このブログでは、そういった方のヘルプも行いたいと思っています。

そこで、何か技術的なことを紹介しようとした場合、どうしても子テーマを作って、「functions.php」を修正することになってしまいます。

これは「functions.php」を説明しておかないと、前に進めないということになりました。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

functions.phpとは

functionの意味を調べると

fuction = 「機能」「関数」

ということが分かります。

WordPressでもこの意味で使われており「functions.php」は機能に関係したphpファイルです。

面白いのはWordPressがページをブラウザーに表示する際には必ず読み込まれるということです。

つまり、この「functions.php」に何かを記載しておけば、必ずページに反映されます。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

関数を記載する場所

先ほど「何か」と書きましたが、「functions.php」には関数を書きます。

関数とは決まった処理をさせるための命令の集まり

意味を書いても分かりにくいので、実例を示します。

このページは「STORK19 」というテーマで表示されています。

このテーマは子テーマも同時に配布されています。

その子テーマを見れば最もシンプルな「functions.php」が分かっていただけると思います。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

STORK19の子テーマの内容

STORK19の子テーマファイルは「jstork19_custom」フォルダーに入っています。

jstork19_customフォルダーの構成
  • functions.php
  • screenshot.png
  • style.css
  • yarpp-template-relative.php
functions.php関数のテンプレートファイル
screenshot.png子テーマのスクリーンショット。WordPressの管理画面「外観」→「テーマ」で参照できます。
style.css子テーマを装飾する(ページのデザインを決める)cssファイル
yarpp-template-relative.php関連記事に関係するファイル。私は子テーマでこのファイルを初めて見ました。他社のテーマでは見たことがありません。

問題の「functions.php」の中を見てみましょう。

<?php

// 子テーマのstyle.cssを後から読み込む(削除禁止)
add_action( 'wp_enqueue_scripts', 'stk_add_child_stylesheet' );
function stk_add_child_stylesheet() {
    wp_enqueue_style( 'stk_child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('stk_style')
    );
}

// カスタマイズでコードを追記する場合はここよりも下に記載してください

解説

「add_action( ‘wp_enqueue_scripts’, ‘stk_add_child_stylesheet’ );」はアクションフックといわれるもので、簡単に説明すると

WordPressがスクリプト読み込みを行う際(’wp_enqueue_scripts’を実行する際)に「stk_add_child_stylesheet」の内容も処理してね。

という指示です。

「function stk_add_child_stylesheet()」以降が関数です。

親テーマのCSS ID「stk_style」の下に子テーマのCSS IDを「stk_child-style」 として、子テーマフォルダーの中の「style.css」を読み込んでね。

ということが書いてあります。

実際にページのHTMLは以下のようになります。

<link rel='stylesheet' id='stk_style-css' href='https://www.theme3.net/wp-content/themes/jstork19/style.css?ver=3.18.1' type='text/css' media='all'/>
<style id='stk_style-inline-css' type='text/css'>
<!-- インラインCSSの記述省略 -->
</style>
<link rel='stylesheet' id='stk_child-style-css' href='https://www.theme3.net/wp-content/themes/jstork19_custom/style.css' type='text/css' media='all'/>

親テーマのstyle.cssの次に子テーマのstyle.cssが読み込まれています。

まとめ

以上のようにWordPressに何かしてもらいたいときに、関数を書くのが「functions.php」です。

親のテーマに変更を加えたいときには、必ず使用します。

ここでは以下の2点を覚えておいてください。

functions.php

  • ページを表示する際に必ず実行されるphpファイルです。
  • WordPressに何かを処理させたいときに命令を書きます。

以下の記事で、ワードプレステーマTCDのWordPressテーマ「EGO.」の子テーマ作成を検証しています。あわせて「functions.php」の使い方を確認してください。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ten + nineteen =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。