公開日：2020/11/05 23:54 最終更新日：2021/01/08 23:39

【第2回】元となるHTMLソースを用意して：WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】

ぶち。

元となるHTMLソース（オリジナルデザインのテーマをhtmlコーディングをしたもの）があり、それをWordPress用（php）にしていく方法が楽に進められるかと思いますので、なるべく、htmlコーディングまでやっておくことをお勧めします！

（当方、これを書いている現時点でコーディングした現物が無いため、作りながら進めます、、、）

HTMLソースを用意する（できれば）
htmlソースを、index.phpにコピー＆ペースト。

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">&copy; 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情報などを記述しますがこれらの説明は割愛いたします。