元となるHTMLソース（オリジナルデザインのテーマをhtmlコーディングをしたもの）があり、それをWordPress用（php）にしていく方法が楽に進められるかと思いますので、なるべく、htmlコーディングまでやっておくことをお勧めします！
（当方、これを書いている現時点でコーディングした現物が無いため、作りながら進めます、、、）
HTMLソースを用意する（できれば）
第1回では空のindex.phpを用意しましたが、そのindex.phpに手を加えていきます。
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/websaite#">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="サイトのURL/assets/css/common.min.css">
<!--keyword description og -->
<meta name="keywords" content="サイトのキーワード">
<meta name="description" content="サイトの説明">
<meta property="og:type" content="website">
<meta property="og:title" content="このページのタイトル | サイト名">
<meta property="og:url" content="サイトのURL">
<meta property="og:image" content="サイトのイメージ画像URL">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<!--facebook-->
<meta property="article:publisher" content="https://ja-jp.facebook.com/***************/">
<meta property="fb:app_id" content="xxxxxxxxxxxxxxx">
<!--twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@xxxxx">
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" href="サイトのURL/apple-touch-icon.png">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="サイトのURL/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="サイトのURL/favicon.ico">
<title>このページのタイトル | サイト名</title>
</head>
<body ontouchstart="">
<header id="header">
<nav class="navbar navbar-light">
<a class="navbar-brand" href="#">サイト名やロゴ画像</a>
</nav>
</header>
<main id="main" role="main">
<section class="container-lg">
コンテンツ内容
</section>
</main>
<footer id="footer">
<p class="text-center">© Your Site name</p>
</footer>
<!--script-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>上記のhtmlソースには、bootstrapのクラス名が入っています。
具体的には、
《navbar / navbar-light / navbar-brand》《container-lg》《text-center》
これらのclassはbootstrapのもので、
head内で、bootstrap.min.cssを読み込んでいます。
bootstrapはとても便利で優秀なフロントエンドWebアプリケーションフレームワークです。便利なものを使わない手はない！ということで、使っていきます！
●bootstrap公式サイトはこちら
https://getbootstrap.com/
●bootstrap日本語サイトはこちら
https://getbootstrap.jp/
また、上記htmlソースは、header、main、footerなど簡単にしか書いていないため、このままでは全くデザイン性の無いものになってしまいますが（冷や汗）、
ひとまずはこのままで作っていきます（中身はあとで考える！）。
head内には、meta情報などを記述しますがこれらの説明は割愛いたします。
htmlソースを、index.phpにコピー＆ペースト。
【ワードプレスの管理画面】
画面左側《外観》－《テーマエディター》を選択、
画面右側の《メインインデックスのテンプレート》index.phpを選択。
ワードプレスの管理ページ上でindex.phpを編集します。
このindex.phpが、第1回でまっさらな状態でUPしたindex.phpです。
独自のhtmlソースを用意している方は、
トップページのhtmlをそのままindex.phpにコピー＆ペースト、
まだ何にも用意してないよーという方は、上記のhtmlソースをindex.phpにコピー＆ペーストして保存してください。
こんな感じで、しっかり保存できましたでしょうか！？
現時点では、htmlがphpになっただけ状態ですので、
次回は《head》にワードプレスのテンプレートタグを挿入していきます！
これからが本番ですね！
※ワードプレスの管理画面にて、サイトのタイトル、キャッチフレーズ、URL等の設定を済ませておきましょう～。
【第3回】headにテンプレートタグを入れる：WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】
この記事のライター
