【WordPress】テーマの自作を目指して

こんにちは朱夏です。

今回から、Wordpressのテーマ自作をしていきたいと思います。
まずは仕組みを覚えるためにシンプルなものから。

イメージはこんな感じです。

参考にするのはこちらのサイト。

WEBST8

【テーマ自作】WordPress オリジナルテーマの作り方と基本 | WEBST8

https://webst8.com/blog/wordpress-theme-howto-make/

ワードプレスでオリジナルのテーマ作成にチャレンジしたいという方向けに、静的HTMLサイトを例にワードプレスのテーマの作成方法の基本について説明していきます。ここでは、前半に最小構成のテーマの作り方を説明して、後半にテンプレートの追加の仕方を説明していきます。

先ずはHTMLで作成してみます。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>タイトル</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">    
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" href="mystyle.css">
      <meta name="description" content="サイトキャプションを入力">
      <meta name="keywords" content="サイトキーワードを,で区切って入力">
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

      <!--[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]-->
   </head>
   <body>
      <!-- ヘッダー -->
      <header>
         <div class="titleimg">
            <h1>ヘッダー</h1>
         </div>
         <nav class="navmenu">
            <div>
               <ul>
                  <li><a href="#">メニュー１</a></li>
                  <li><a href="#">メニュー２</a></li>
                  <li><a href="#">メニュー３</a></li>
                  <li><a href="#">メニュー４</a></li>
               </ul>
            </div>
         </nav>
      </header>
      <!----- ヘッダーここまで ----->
      <!----- メイン ----->
      <section id="content">
         <div id="content-wrap" class="container">
            <div id="main" class="col-md-9">
               <h1 class="text-center">メイン</h1>
               <p>テキスト</p>
               <div class="row">
                  <div class="col-md-6">
                     <p>コンテンツ</p>
                     <h2>コンテンツ</h2>
                     <p>テスト</p>
                  </div>
                  <div class="col-md-6">
                     <p>コンテンツ2</p>
                     <h2>コンテンツ2</h2>
                     <p>テスト2</p>
                  </div>                     
               </div>
               <p class="text-center">
                  テキスト
               </p>
            </div>
            <div id="sidbar" class="col-md-3">
               <h1 class="text-center">サイドバー</h1>
               <section>
                  <h2 class="text-center">サイドバー</h2>
                  <p class="text-center">サイドバーの内容</p>
               </section>
            </div>
         </div>
      </section>
      <!----- メインここまで ----->
      <!----- フッター ----->
      <footer>
         <p class="">(c)footer.com</p>
      </footer>
      <!----- フッターここまで----->
   </body>
</html>

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</div>

<div>

<ul>

</ul>

</div>

</nav>

</header>

<p>コンテンツ</p>

<h2>コンテンツ</h2>

</div>

<p>コンテンツ2</p>

<h2>コンテンツ2</h2>

</div>

テキスト

</p>

</div>

<h1 class="text-center">サイドバー</h1>

<h2 class="text-center">サイドバー</h2>

<p class="text-center">サイドバーの内容</p>

</section>

</div>

</section>

<p class="">(c)footer.com</p>

</footer>

</body>

</html>

次にCSSです。

@charset "UTF-8"
body {
    font-size: 16px;
}

h1 {
    font-size: 28px;
    font-weight: bold;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
}

img {
    max-width: 100%;
}

.titleimg {
    background: radial-gradient(#8995ff, #3256f3);
    text-align: center;
    width: 100%;
    padding: 50px;
    border: solid black;
    border-spacing: 10px;
}

.navmenu div ul {
    background: linear-gradient(#feffac, #d1ab02);
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none;
}

.navmenu div ul li {
    display: inline-block;
    margin: 0;
    padding: 10px;
    border-right: 1px solid #ffffff;
}

.navmenu div ul li a {
    color: white;
    text-align: center;
    text-decoration: none;
}

.navmenu div ul li:hover {
    background-color: rgb(172, 134, 8);
    
}

footer {
    background-color: gray;
    padding: 10px;
}

footer p {
    color: white;
    margin: 10px;
}

#content{
    background-color: red;
    padding-top:20px;
    padding-bottom:20px;
}

#content-wrap{
    background-color: white;
    box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}

#sidbar{
    color: green;
    text-align: center;
    float: right;
}

#main {
    color: red;
    float: left;
    width: 60%;
}

@charset "UTF-8"

body {

font-size: 16px;

}

h1 {

font-size: 28px;

font-weight: bold;

}

h2 {

font-size: 20px;

}

h3 {

font-size: 18px;

}

img {

max-width: 100%;

}

.titleimg {

background: radial-gradient(#8995ff, #3256f3);

text-align: center;

width: 100%;

padding: 50px;

border: solid black;

border-spacing: 10px;

}

.navmenu div ul {

background: linear-gradient(#feffac, #d1ab02);

margin: 0;

padding: 0;

overflow: hidden;

list-style-type: none;

}

.navmenu div ul li {

display: inline-block;

margin: 0;

padding: 10px;

border-right: 1px solid #ffffff;

}

.navmenu div ul li a {

color: white;

text-align: center;

text-decoration: none;

}

.navmenu div ul li:hover {

background-color: rgb(172, 134, 8);

}

footer {

background-color: gray;

padding: 10px;

}

footer p {

color: white;

margin: 10px;

}

#content{

background-color: red;

padding-top:20px;

padding-bottom:20px;

}

#content-wrap{

background-color: white;

box-shadow: 2px 2px 2px rgba(0,0,0,.3);

}

#sidbar{

color: green;

text-align: center;

float: right;

}

#main {

color: red;

float: left;

width: 60%;

}

参考にしたサイトのhtmlがBootstrapのグリッド機能を使って書かれてたみたいで、基本構成のレイアウトだけのHTMLなのにすごく時間がかかってしまいました。

今回はここまでで、次回、これをブラッシュアップしていきたいと思います。