第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対応、アイキャッチ画像、メニュー）

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

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

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

参考）1.2 php基本プログラム一覧と簡単な解説です。