こんにちは朱夏です。
今回もWordPressテーマ作成やっていきます。
今回は、投稿ページ、固定ページのコードを書いていきます。
勉強させていただく動画はこちらです。
おかげさまで作成速度がめっちゃ上がっています。
というわけで、早速やっていきましょう。
投稿ページ
投稿ページを書いていきます。
index.htmlをコピーして、single.htmlにリネームします。
コードはこちらになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- レスポンシブ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- BootstrapとCSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<title>My Theme</title>
</head>
<body>
<!----- ヘッダー ----->
<header>
<!-- タイトルとナビゲーション -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<div class="col-md-8 col-12">
<h2 class="h1 py-3 text-light">My Theme</h2>
</div>
<div class="col">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">ホーム</span></a>
<a class="nav-item nav-link" href="#">プロフィール</a>
<a class="nav-item nav-link" href="#">メニュー</a>
</div>
</div>
</div>
</div>
</nav>
<!-- タイトルとナビゲーション END -->
</header>
<!----- ヘッダー END ----->
<!----- メインコンテンツ ----->
<main class="" style="background-color: beige;">
<div class="container">
<div class="row py-3 m-0">
<!-- 投稿記事 -->
<div class="col-md-8 bg-light shadow px-0">
<div class="p-3">
<p class="text-center">2020/1/9</p>
<h1 class="h2 text-center">記事のタイトル</h1>
</div>
<div>
<img src="img/S__26001416.jpg" class="img-fluid" alt="...">
</div>
<div class="p-3">
<p class="card-text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<!-- 投稿記事 END -->
<!-- サイドバー -->
<div class="col-md-4 col-12 p-3">
<!-- 検索窓 -->
<div class="py-3">
<div class="">
<form class="form-inline my-2 my-lg-0">
<input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
</form>
</div>
</div>
<!-- 検索窓 END -->
<!-- 人気記事一覧 -->
<div class=" bg-light shadow">
<h3 class="pt-3 px-3 text-center">人気記事一覧</h3>
<div class="p-3">
<div class="py-3 border-top text-center">
<h5><a href="#" class="text-secondary">記事タイトル1</a></h5>
</div>
<div class="py-3 border-top text-center">
<h5><a href="#" class="text-secondary">記事タイトル2</a></h5>
</div>
<div class="py-3 border-top text-center">
<h5><a href="#" class="text-secondary">記事タイトル3</a></h5>
</div>
</div>
</div>
<!-- 人気記事一覧 END -->
<!-- Twitter -->
<div class="py-3">
<div class="shadow">
<a class="twitter-timeline" data-height="500" data-theme="light" href="https://twitter.com/syunatsu1?ref_src=twsrc%5Etfw">Tweets by syunatsu1</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<!-- Twitter END -->
</div>
<!-- サイドバー END -->
</div>
</div>
</main>
<!----- メインコンテンツ END ----->
<!----- フッター ----->
<footer class="bg-dark">
<div class="container">
<div class="row p-3">
<!-- プロフィール -->
<div class="col-lg-4 p-5">
<h4 class="font-weight-bolder text-center text-light border-bottom">プロフィール</h4>
<div class="p-3">
<img class="img-fluid rounded-circle" src="img/snap1.jpg" alt="">
</div>
<div class="text-center">
<h4 class="d-inline-block border-bottom border-info text-light">朱夏</h4>
</div>
<p class="text-light p-3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- プロフィール END -->
<!-- テキストリンク -->
<div class="col-lg-4 p-5 border-secondary border-right border-left">
<h4 class="font-weight-bolder text-center text-light border-bottom">リンク</h4>
<div class="py-3">
<ul class="text-light">
<li><a class="text-light" href="#">リンク１</a></li>
<li><a class="text-light" href="#">リンク２</a></li>
<li><a class="text-light" href="#">リンク３</a></li>
<li><a class="text-light" href="#">リンク４</a></li>
<li><a class="text-light" href="#">リンク５</a></li>
</ul>
</div>
</div>
<!-- テキストリンク END -->
<!-- テキスト -->
<div class="col-lg-4 p-5">
<h4 class="font-weight-bolder text-center text-light border-bottom">テキスト</h4>
<div class="py-3">
<p class="text-light">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<!-- テキスト -->
</div>
<p class="text-center text-light">(c)test.com</p>
</div>
</footer>
<!----- フッター END ----->
<!-- script -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/da0fa6be04.js" crossorigin="anonymous"></script>
<script src="js/sample.js"></script>
<!-- script END -->
</body>
</html>
ピックアップコンテンツと投稿記事一覧を消して、代わりに投稿記事1ページを表示できるように書き換えました。
動画を見ていて、前から思っていた疑問を一つ解消できたので紹介します。
またはその逆や、h3～h5などを適用する場合なんてこともありますね。
こちらの疑問の答えはこちらです。
SEO初心者なのがバレました(；・∀・)
<h1>タグ内に書いたテキストはキーワードとして検索されますが、文字が大きいのでバランスが取りづらいのです。
そこで、タグは<h1>だけど文字のスタイルはh2(もしくはそれ以外)を適用するといった事をします。
逆に、キーワード検索に引っかからなくてもいいけどh1のスタイルを使いたいといった事も可能ということですね。
固定ページ
固定ページはpage.htmlというファイル名で作っていきます。
こちらはメインコンテンツ部分を全部書き換えています。
サイドバーも削って、横幅を調整しました。
コードはこちらになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- レスポンシブ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- BootstrapとCSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<title>My Theme</title>
</head>
<body>
<!----- ヘッダー ----->
<header>
<!-- タイトルとナビゲーション -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<div class="col-md-8 col-12">
<h2 class="h1 py-3 text-light">My Theme</h2>
</div>
<div class="col">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">ホーム</span></a>
<a class="nav-item nav-link" href="#">プロフィール</a>
<a class="nav-item nav-link" href="#">メニュー</a>
</div>
</div>
</div>
</div>
</nav>
<!-- タイトルとナビゲーション END -->
</header>
<!----- ヘッダー END ----->
<!----- メインコンテンツ ----->
<main class="" style="background-color: beige;">
<div class="container">
<div class="row py-3 m-0">
<!-- 固定ページ -->
<div class="col-md-10 col-12 mx-auto p-0 bg-light shadow">
<div class="p-3">
<p class="text-center">2020/1/9</p>
<h1 class="h2 text-center">固定ページ記事のタイトル</h1>
</div>
<div>
<img src="img/sky.jpg" class="img-fluid" alt="...">
</div>
<div class="p-3">
<p class="card-text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<!-- 固定ページ END -->
</div>
</div>
</main>
<!----- メインコンテンツ END ----->
<!----- フッター ----->
<footer class="bg-dark">
<div class="container">
<div class="row p-3">
<!-- プロフィール -->
<div class="col-lg-4 p-5">
<h4 class="font-weight-bolder text-center text-light border-bottom">プロフィール</h4>
<div class="p-3">
<img class="img-fluid rounded-circle" src="img/snap1.jpg" alt="">
</div>
<div class="text-center">
<h4 class="d-inline-block border-bottom border-info text-light">朱夏</h4>
</div>
<p class="text-light p-3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- プロフィール END -->
<!-- テキストリンク -->
<div class="col-lg-4 p-5 border-secondary border-right border-left">
<h4 class="font-weight-bolder text-center text-light border-bottom">リンク</h4>
<div class="py-3">
<ul class="text-light">
<li><a class="text-light" href="#">リンク１</a></li>
<li><a class="text-light" href="#">リンク２</a></li>
<li><a class="text-light" href="#">リンク３</a></li>
<li><a class="text-light" href="#">リンク４</a></li>
<li><a class="text-light" href="#">リンク５</a></li>
</ul>
</div>
</div>
<!-- テキストリンク END -->
<!-- テキスト -->
<div class="col-lg-4 p-5">
<h4 class="font-weight-bolder text-center text-light border-bottom">テキスト</h4>
<div class="py-3">
<p class="text-light">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<!-- テキスト -->
</div>
<p class="text-center text-light">(c)test.com</p>
</div>
</footer>
<!----- フッター END ----->
<!-- script -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/da0fa6be04.js" crossorigin="anonymous"></script>
<script src="js/sample.js"></script>
<!-- script END -->
</body>
</html>
他2ページに比べると構成要素が少ないので割とあっさり作成できました。
実行結果
完成した投稿ページ、固定ページの表示はこんな感じになりました。
投稿ページ
固定ページ
いい感じになったかと思います。
あとがき
今回は、投稿ページと固定ページを作成しました。
トップページを改造するだけで作成できたので割と簡単に作る事が出来ました。
次回は、いよいよWordPressに取り込んで、PHP化を行っていきます。
ここからどれだけ理解を深められるかが勝負です。
今回は以上です。
次回もよろしくお願いします。
