Webサイトを開発してみる（入門編）ー第4章1.13 ー

TomWorks

2024年5月17日 18:05

ー第4章に戻るー

第4章 1.13 ⑩ functions.php のソースコードと詳細

1.13 ⑩ functions.php のソースコードと詳細　

解説）　functions.php は今回作成する【歯科クリニックのWebサイト】にさまざまな機能を追加するプログラムです。

WordPressのオリジナルテーマ「Tom Works Dental」では、この functions.php で主に以下4つの要素を定義します。

１．標準機能（ページタイトル、html5対応、アイキャッチ画像、メニュー）
２．外部ファイルの取り込み（jQuery、BootstrapのJavaScriptとCSS、Googleフォント、フロント用オリジナルCSS）
３．ウィジェット領域の追加
４．ブロックエディターの設定（標準ブロックの取り込み、ブロックのレスポンシブ対応、「幅広」「全幅」の配置、オリジナルCSS、Googleフォント）

ちなみにfunctions.phpは「<?php ～」から始まりますが最終行に「?>」の記載は不要です。
以下が今回のプログラムソースです。

<?php

function tom_theme_setup()
{
    add_theme_support('title-tag');
    add_theme_support('html5', array('search-form'));
    add_theme_support('post-thumbnails');
    add_image_size('tom_eyecatch_wide', 1920, 400, true);
    add_image_size('tom_eyecatch', 640, 480, true);
    add_image_size('archive_thumbnail', 160, 160, true);
    register_nav_menus(array(
        'main-menu' => 'tom-header-menu',
        'footer-menu' => 'tom-footer-menu',
        'side-menu' => 'tom-side-menu',
        'side-menu2' => 'tom-side-menu2'
    ));
}
add_action('after_setup_theme', 'tom_theme_setup');

function tom_enqueue_scripts()
{
    wp_enqueue_script('jquery');
    wp_enqueue_script(
        'bootstrap5-script-js',
        get_template_directory_uri() . '/js/bootstrap.bundle.min.js',
        array(),
        '1.0.0'
    );
    wp_enqueue_style(
        'googlefonts',
        'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap',
        array(),
        '1.0.0'
    );
    wp_enqueue_style(
        'bootstrap5-style-css',
        get_template_directory_uri() . '/css/bootstrap.min.css',
        array(),
        '1.0.0'
    );
    wp_enqueue_style(
        'Tom-style-css',
        get_template_directory_uri() . '/css/tom-custom.css',
        array(),
        '1.0.0'
    );
}
add_action('wp_enqueue_scripts', 'tom_enqueue_scripts');

function tom_widgets_init()
{
    register_sidebars(3, array(
        'name'          => 'Side Bar %d',
        'id'            => 'sidebar-widget-area',
        'description'   => 'Side Bar Area',
        'before_widget' => '<ul class="list-group">',
        'after_widget'  => '</ul>',
    ));
}
add_action('widgets_init', 'tom_widgets_init');

function tom_block_setup()
{
    add_theme_support('wp-block-styles');
    add_theme_support('responsive-embeds');
    add_theme_support('align-wide');

    add_theme_support('editor-styles');
    add_editor_style('css/tom-editor.css');
    add_editor_style('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
}
add_action('after_setup_theme', 'tom_block_setup');

解説
主なプログラムソースを解説します。

１．標準機能（ページタイトル、html5対応、アイキャッチ画像、メニュー）

3/18：
3 function tom_theme_setup()
4 {
5 add_theme_support(‘title-tag’);
6 add_theme_support(‘html5’, array(‘search-form’));
7 add_theme_support(‘post-thumbnails’);
8 add_image_size(‘tom_eyecatch_wide’, 1920, 400, true);
9 add_image_size(‘tom_eyecatch’, 640, 480, true);
10 add_image_size(‘archive_thumbnail’, 160, 160, true);
11 register_nav_menus(array(
12 ‘main-menu’ => ‘tom-header-menu’,
13 ‘footer-menu’ => ‘tom-footer-menu’,
14 ‘side-menu’ => ‘tom-side-menu’,
15 ‘side-menu2’ => ‘tom-side-menu2’
16 ));
17 }
18 add_action(‘after_setup_theme’, ‘tom_theme_setup’);

☆標準機能としてページタイトル、検索結果のhtml5対応、アイキャッチ画像、メニューについて定義します。

3 function tom_theme_setup()：
標準機能を実現するオリジナル関数「 tom_theme_setup」を定義します。

5 add_theme_support(‘title-tag’)：
ページ毎のページタイトルをブラウザのタグに出力します。

6 add_theme_support(‘html5’, array(‘search-form’))：
ヘッダー部に設定した search-form（検索フォーム）の検索結果をhtml5対応化します。

7 add_theme_support(‘post-thumbnails’)：
8-10 add_image_size：
アイキャッチ画像を有効化します。これによりWordPressの投稿、固定ページにアイキャッチ画像の機能が表示されます。尚、WordPressでは標準で3種類のアイキャッチ画像のサイズが設定されています。（WordPress管理画面の「設定」>「メディア」の「画面サイズ」）ここでは更に追加で3種類のオリジナルサイズを登録します。

11 register_nav_menus(array(
12 ‘main-menu’ => ‘tom-header-menu’,
13 ‘footer-menu’ => ‘tom-footer-menu’,
14 ‘side-menu’ => ‘tom-side-menu’,
15 ‘side-menu2’ => ‘tom-side-menu2’：
複数のナビゲーションメニューを有効化して4つのメニュー（tom-header-menu、tom-footer-menu、tom-side-menu、tom-side-menu2）を設定します。

18 add_action(‘after_setup_theme’, ‘tom_theme_setup’)：
functions.phpが読み込まれた直後に動作するアクションフックです。標準機能を実現するオリジナル関数「 tom_theme_setup」を実行します。

２．外部ファイルの取り込み（jQuery、BootstrapのJavaScriptとCSS、Googleフォント、フロント用オリジナルCSS）

20/48：
20 function tom_enqueue_scripts()
21 {
22 wp_enqueue_script(‘jquery’);
23 wp_enqueue_script(
24 ‘bootstrap5-script-js’,
25 get_template_directory_uri() . ‘/js/bootstrap.bundle.min.js’,
26 array(),
27 ‘1.0.0’
28 );
29 wp_enqueue_style(
30 ‘googlefonts’,
31 ‘https://fonts.googleapis.com/css2?
family=Noto+Sans+JP:wght@100..900&
family=Roboto:ital,wght@0,100;0,300;0,
400;0,500;0,700;0,900;1,100;1,300;1,400;1,
500;1,700;1,900&display=swap’,
32 array(),
33 ‘1.0.0’
34 );
35 wp_enqueue_style(
36 ‘bootstrap5-style-css’,
37 get_template_directory_uri().
‘/css/bootstrap.min.css’,
38 array(),
39 ‘1.0.0’
40 );
41 wp_enqueue_style(
42 ‘Tom-style-css’,
43 get_template_directory_uri().’/css/tom-custom.css’,
44 array(),
45 ‘1.0.0’
46 );
47 }
48 add_action(‘wp_enqueue_scripts’, ‘tom_enqueue_scripts’);

☆外部ファイルを取り込みます。ここでは jQuery、BootstrapのJavaScriptとCSS、Googleフォント、フロント用オリジナルCSSの定義をします。

20 function tom_enqueue_scripts()：
外部ファイル取り込み用のオリジナル関数「tom_enqueue_scripts()」を定義します。

22 wp_enqueue_script(‘jquery’)：
WordPressで用意している jQuery を読み込みます。

23/28 wp_enqueue_script(‘bootstrap5-script-js’, get_template_directory_uri().’/js/bootstrap.bundle.min.js’, array(), ‘1.0.0’ )：
オリジナルテーマ「Tom Works Dental」フォルダ内（ js フォルダ）に保存した Bootstrap5 の JavaScript ファイル（実行用にminファイルを選択）を読み込みます。

29/34 wp_enqueue_style(‘googlefonts’, ‘https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap’, array(), ‘1.0.0’ )：
Googleフォントを読み込みます。日本語用に「Noto Sans JP」、欧文用に「Roboto」を選択します。

35/40 wp_enqueue_style( ‘bootstrap5-style-css’, get_template_directory_uri().’/css/bootstrap.min.css’, array(), ‘1.0.0’ )：
オリジナルテーマ「Tom Works Dental」フォルダ内（ css フォルダ）に保存した Bootstrap5 の CSS プログラム（実行用にminファイルを選択）を読み込みます。

41/46 wp_enqueue_style( ‘Tom-style-css’, get_template_directory_uri().’/css/tom-custom.css’, array(), ‘1.0.0’ )：
オリジナルテーマ「Tom Works Dental」フォルダ（ css フォルダ）に保存したオリジナルCSSプログラム「tom-custom.css」を読み込みます。

48 add_action(‘wp_enqueue_scripts’, ‘tom_enqueue_scripts’)：
外部取り込み用のオリジナル関数「tom_enqueue_scripts()」を実行します。

３．ウィジェット領域の追加

50/60：
50 function tom_widgets_init()
51 {
52 register_sidebars(3, array(
53 ‘name’ => ‘Side Bar %d’,
54 ‘id’ => ‘sidebar-widget-area’,
55 ‘description’ => ‘Side Bar Area’,
56 ‘before_widget’ => ‘<ul class=”list-group”>’,
57 ‘after_widget’ => ‘</ul>’,
58 ));
59 }
60 add_action(‘widgets_init’, ‘tom_widgets_init’);

☆ウィジェット領域を追加します。ここでは3つのウィジェット領域を設定していますが【歯科クリニックのWebサイト】の事例では2番目の「sidebar-widget-area-2」のみを使用します。（※第6章2.9～2.12参照）

50 function tom_widgets_init()：
ウィジェット領域を追加するオリジナル関数「tom_widgets_init()」を定義します。

52 register_sidebars(3, array(
53 ‘name’ => ‘Side Bar %d’,
54 ‘id’ => ‘sidebar-widget-area’,
55 ‘description’ => ‘Side Bar Area’,
56 ‘before_widget’ => ‘<ul class=”list-group”>’,
57 ‘after_widget’ => ‘</ul>’：
複数のウィジェット領域を有効化します。ここでは3つのウィジェット領域（Side Bar 1、Side Bar 2、Side Bar 3）を設定します。
※53「%d」にはウィジェット領域の数が連番で出力されます。
※54 「id」ではそれぞれ「sidebar-widget-area」「sidebar-widget-area-2」「sidebar-widget-area-3」となります。

60 add_action(‘widgets_init’, ‘tom_widgets_init’)：
ウィジェット領域を追加するオリジナル関数「tom_widgets_init()」を実行します。

４．ブロックエディターの設定（標準ブロックの取り込み、ブロックのレスポンシブ対応、「幅広」「全幅」の配置、オリジナルCSS、Googleフォント）

62/72：
62 function tom_block_setup()
63 {
64 add_theme_support(‘wp-block-styles’);
65 add_theme_support(‘responsive-embeds’);
66 add_theme_support(‘align-wide’);
67
68 add_theme_support(‘editor-styles’);
69 add_editor_style(‘css/tom-editor.css’);
70 add_editor_style
(‘https://fonts.googleapis.com/css2?
family=Noto+Sans+JP:wght@100..900&
family=Roboto:ital,wght@0,100;0,300;0,
400;0,500;0,700;0,900;1,100;1,300;1,400;1,
500;1,700;1,900&display=swap’);
71 }
72 add_action(‘after_setup_theme’, ‘tom_block_setup’);

☆ブロックエディターの設定を行います。ここではエディター用に、標準ブロックの取り込み、ブロックのレスポンシブ対応、「幅広」「全幅」の配置、カラーパレットとフォントサイズの指定、Googleフォント、オリジナルCSSの定義を行います。

62 function tom_block_setup()：
ブロックエディターの設定を行うオリジナル関数「tom_block_setup()」を定義します。

64 add_theme_support(‘wp-block-styles’)：
WordPressに標準で用意されているコアブロックのスタイル設定を読み込みエディター（およびフロント）で標準ブロックを使えるようにします。

65 add_theme_support(‘responsive-embeds’)：
埋め込みブロックにレスポンシブ対応を適用します。

66 add_theme_support(‘align-wide’)：
エディターにて画像などの「標準」コンテンツ幅に加えて「幅広」「全幅」が選択できるように適用します。

68 add_theme_support(‘editor-styles’)：
エディター用オリジナルCSSを有効化します。

69 add_editor_style(‘css/tom-editor.css’)：
エディター用オリジナルCSSファイル（tom-editor.css）を読み込みます。

70 add_editor_style(‘https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap’)：
Googleフォントを読み込みます。日本語用に「Noto Sans JP」、欧文用に「Roboto」を選択します。

72 add_action(‘after_setup_theme’, ‘tom_block_setup’)：
ブロックエディターの設定を行うオリジナル関数「tom_block_setup()」を実行します。

この記事が気に入ったらサポートをしてみませんか？