【WordPressテーマ】自作テーマ作成の記録　その４【2つ目】

こんにちは朱夏です。

今回も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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<title>My Theme</title>

</head>

<body>

<h2 class="h1 py-3 text-light">My Theme</h2>

</div>

</button>

<a class="nav-item nav-link" href="#">プロフィール</a>

</div>

</nav>

</header>

<h1 class="h2 text-center">記事のタイトル</h1>

</div>

<div>

</div>

<p class="card-text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</div>

</form>

</div>

<h3 class="pt-3 px-3 text-center">人気記事一覧</h3>

<h5><a href="#" class="text-secondary">記事タイトル1</a></h5>

</div>

<h5><a href="#" class="text-secondary">記事タイトル2</a></h5>

</div>

<h5><a href="#" class="text-secondary">記事タイトル3</a></h5>

</div>

<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>

</div>

</main>

<h4 class="font-weight-bolder text-center text-light border-bottom">プロフィール</h4>

</div>

</div>

<p class="text-light p-3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</div>

</ul>

</div>

<p class="text-light">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</div>

</div>

</div>

</footer>

</body>

</html>

ピックアップコンテンツと投稿記事一覧を消して、代わりに投稿記事1ページを表示できるように書き換えました。

動画を見ていて、前から思っていた疑問を一つ解消できたので紹介します。

Q：<h1>タグを使用して、スタイルでh2を適用するのは何故か？

またはその逆や、h3～h5などを適用する場合なんてこともありますね。
こちらの疑問の答えはこちらです。

A：<h1>タグは検索キーワードにひっかかるから

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<title>My Theme</title>

</head>

<body>

<h2 class="h1 py-3 text-light">My Theme</h2>

</div>

</button>

<a class="nav-item nav-link" href="#">プロフィール</a>

</div>

</nav>

</header>

<h1 class="h2 text-center">固定ページ記事のタイトル</h1>

</div>

<div>

</div>

</div>

</div>

</main>

<h4 class="font-weight-bolder text-center text-light border-bottom">プロフィール</h4>

</div>

</div>

</ul>

</div>

</div>

</div>

</div>

</footer>

</body>

</html>

他2ページに比べると構成要素が少ないので割とあっさり作成できました。

実行結果

完成した投稿ページ、固定ページの表示はこんな感じになりました。

投稿ページ

固定ページ

いい感じになったかと思います。

あとがき

今回は、投稿ページと固定ページを作成しました。
トップページを改造するだけで作成できたので割と簡単に作る事が出来ました。

次回は、いよいよWordPressに取り込んで、PHP化を行っていきます。
ここからどれだけ理解を深められるかが勝負です。

今回は以上です。
次回もよろしくお願いします。