（サムネイル）
今回は、Start BootStrap というhtml,cssテンプレートをダウンロードしてwordpressで管理してみましょう。
wordpressの開発には local by FlyWheel が便利です。自分のパソコンをサーバーにしてサイト開発ができます。
左下の+ボタンから Create A Siteをクリック。
サイト名、user名（メアドでok）,パスワードを入力して登録。
登録したユーザー名とパスワードでadmin（管理画面）が開けます。 これで、管理画面を作ることができました。
次にStart Bootstrapから（簡単なテンプレート）を Free Downloadします。
これで、テンプレートがダウンロードできました。
では、いよいよダウンロードしたテンプレートをWordPressで表示させてみましょう。
local by Flywheel でディレクトリを開いて
/Local Sites/freelancepage(立ち上げたブログ名)/app/public/wp-content/themes/freelancepage
に移動します。これを、vscodeで開きます。
ファイル改造手術
まずindex.htmlをindex.phpに改名します。これで、wordpressはindex.phpを一番最初のページだとみなします。
次に、新しくstyle.cssを作ります。そこに
/*
* Theme Name: Freelance Page
* Author: Keitaro
* Description: フリーランスのホームページです
* Version: 1.0
*/と、書きます。これでWordPressは新しいテーマだと識別します。管理画面の「外観」から確認することができます。htmlが元になったオリジナルテーマです。
（ちなみに、WPでインストールしたテーマを親テーマとして、新しくカスタマイズしたテーマを作成することもできます。詳しくは子テーマについて）
header.php
htmlファイルでは<head></head>の中に、日本語サイトであるかや、cssファイルの参照など、使いまわしたいファイルの基本情報を書いています。これは、どのページでも共通して使う要素なので、使い回しできるようにしましょう。
新しくheader.phpをホームディレクトリに作ります。
index.phpに<head>タグがあります。その、headタグを除いた中身全てをheader.phpに移します。
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- <title>Creative - Start Bootstrap Theme</title> funcに書いてるのでいらない-->
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Bootstrap Icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
<!-- SimpleLightbox plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="<?php echo get_template_directory_uri(); ?>/css/styles.css" rel="stylesheet" />
<?php wp_head(); ?>ポイントは、cssファイルパスをこうすることです。
<link href="<?php echo get_template_directory_uri(); ?>/css/styles.css" rel="stylesheet" />こうすれば、headにあるcssなどの情報を他のページでも使うことができますね。
そして、index.phpのheadタグの中に、以下のコードを書いてheader.phpを呼び出します。
<head>
<?php get_header(); ?>
</head>こうすることで、header.phpに書かれてる内容を呼び出すことができます。
footer.php
htmlファイルでは<foot></foot>の中にJavaScriptの情報を書きます。これも、どのページでも使い回せるようにしたいですね。なので同様にfooter.phpにまとめます。
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- SimpleLightbox plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
<?php wp_footer(); ?>そしてindex.phpの bodyタグの上にテンプレートタグを書きます。
<?php get_footer(); ?>
</body>sidebar.php
(記事作成中)
他にも共通パーツを一つのファイルにしてみましょう。
ナビゲーションバー
ホームページによくある
新しくincludesというファイルを作って、その中にheader.php を作ります。
<!-- Navigation Barの全て-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
</span>
</button>
<?php
$menu_name = 'global_nav';
$locations = get_nav_menu_locations();
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu->term_id);
?>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto my-2 my-lg-0">
<?php foreach ($menu_items as $item) : ?>
<li class="nav-item">
<a class="nav-link" href="<?php echo esc_attr($item->url); ?>">
<?php echo esc_html($item->title); ?>
</a>
</li>
<?php endforeach ?>
</div>
</div>
</nav>index.phpでは 表示させたい箇所に
<?php get_template_part('includes/header'); ?>と書けばokです。
company name
includes/footerも共通して表示させたいからパーツ化。 index.phpの表示させたい箇所に <?php get_template_part(‘includes/footer’); ?>
<!-- Footer -->
<footer class="bg-light py-5">
<div class="container px-4 px-lg-5">
<div class="small text-center text-muted">Copyright © 2023 - Company Name</div>
</div>
</footer>