Bootstrap5でWordPressのテーマを作るーアップロード編

2022年3月22日

Bootstrap5

bootstrap5, foundation, foundation6, WordPress

前回までで、Bootstrap5を使用した簡単なテーマのファイルが用意できました。今回は、サーバにファイルをアップロードします。

functions.phpの編集

アップロードの前にいくつか、補助的な作業をしておきましょう。
ファイルのヘッダーにスタイルシートと、スクリプトを読み込む記述をしていません。こちらは、wp_enqueue_style関数と、wp_enqueue_script関数を使用して読み込むことにします。あわせて、Bootstrap iconのCDNと、カスタマイズ用のstyle.cssを作って読み込むようにしておきましょう。

functions.phpを作って、以下を入力します。

functions.php

<?php 
if ( ! function_exists ( 'theme_scripts' )) :
    function theme_scripts() {
        wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );
        wp_enqueue_style( 'icon', 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css', array( 'bootstrap' ));
        wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css', array( 'icon' ));
        wp_enqueue_script( 'bundle', get_theme_file_uri( '/js/bootstrap.bundle.min.js' ), false, true);
    }
endif;
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

また、最初の段階でヘッダー内のタイトルタグを削除しました。add_theme_support関数でタイトルを表示するようにしておきます。ついでに、フィードの出力と、固定ページと投稿ページのアイキャッチの設定もしておきましょう。

functions.php （上の続き）

if ( ! function_exists ( 'theme_setup' )) :
    function theme_setup () {
        add_theme_support( 'automatic-feed-links' );
        add_theme_support( 'title-tag' );
        add_theme_support( 'post-thumbnails' );
    }
endif;
add_action( 'after_setup_theme', 'theme_setup' );

テーマフォルダをアップロード

ここまでに作成してあるフォルダ、ファイルを、テーマのフォルダ「original_theme」フォルダに入れたら、サーバにアップロードします。/wp-content/themesの中に保存します。

サイトのトップページにアクセスして、タイトル、サイトの説明、各パート名が出ていれば完了です。ブラウザの幅を狭くして、レスポンシブに対応するかも確認しておきましょう。

まとめ

今回は、functions.phpを書き、ファイルをアップロードしてサイトを表示するところまでいきました。どこまで作り込んで上げるかは、それぞれだと思いますので、やりやすいように勧めてください。
次回からは、細かなところを作っていきます。投稿内容の表示や、ヘッダー、サイドバーの表示、投稿ページの作成など行います。お楽しみに。

最近、Amazonのサイトでおすすめされた本です。今回の内容ともかぶるところがありそうで興味深いです。書店で見つけたら手に取って眺めてみるつもりです。