【ド素人OK！】WordPressテーマを自作したので道のりをシェアするよ②「動画付き過保護説明」

2019年6月13日　Design,Programing,Wordpress

☆テーマ自作の大まかな流れ、それぞれの回でやることをまとめています↓
【保存版】超初心者のためのWordPressテーマ自作方法！画像＆動画付き「過保護解説」

前回はPHPを動かすための環境を整えるというところまででした。

今回は、早速ですがhtml/cssを使って、デザインしていきたいと思いますっ！

で、今回どんなテーマを作るかと言うと、こんなシンプルなものを作っていきます。

2カラムの本当にシンプルテーマです。まずはシンプルで簡単なテーマを作ってみて、Wordpress自作の大まかな流れを体験し、だいたいの構造が分かったところで、難しいデザインにも挑戦してみるといいんじゃないかなと思います(^^)

まぁ私もあまり難しいことは説明出来ないので、基礎の基礎をお付き合いいただければと思いますm(_ _)m

Contents

まずはhtmlとcssで上記のデザインを作ってみよう！

まずはhtmlとcssで上記のデザインを作ってみます。一応下記に、コードを用意しましたが、もしよろしければ、黄色い部分だけコピペし、後は動画で一緒に作ってみませんか(^^)

コピペしてしまうと、なかなか頭に入りません。。やっぱり何かを学ぶ時は「行動」はセットです！

html、cssを打ち込むまでやっても、20分くらいですので、是非お付き合いくださいm(_ _)m

html/cssで作る際の注意点その①

子要素に関しては、クラス名やID名を細かく付けない方がよいです。Wordpressにアップし、phpやらプラグインやら、いろいろなものを組み込むことで、Wordpressが新しいhtmlを自動生成してくれます。

その際に、クラス名が変わってしまうことが多々あります。

例えば、＜ul class="list"＞とクラス名を付けたら、その下（子要素）にあるliタグは、.list liと指定するようにするといいかなと思います。

html/cssで作る際の注意点その②

後ほど、上記のように分割していくので、どこからどこまでがヘッダーで、どこからどこまでがメインエリアか、分かるようにコメントアウトを付けておくといいです。

html/cssで作る際の注意点その③

メニューバーやサイドバーなどのウィジェットエリア等、Wordpressの機能を使えそうなエリアも、細かくデザインしすぎなくてOKです！

私はメニューバーを、下層部分まで細かくデザインしましたが、wordpressの「メニュー」という機能を組み込むことで、それらがたった１行のphpコードと化しました( ﾟДﾟ)

ただ、htmlコードを書かないと、cssでデザインが出来ないので、メニューバーであれば、「メニュー１」「メニュー2」とか、適当に作っておけばOKです。

htmlのコードは下記の通りです。

<!doctype html>
 
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <meta content="width=decive-width, initial-scale=1.0" name="viewport"/>
  <title>Koala-wp</title>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
  <body>
  <header>
    <h1 id="head-title">Programing beginner</h1>
    <ul id="nav-bar">
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
    </ul>
  </header>
  <!--header end-->

  <div id="main-body">
    <div id="main-body-left">
      <div class="blogcard">
      <img src="default.jpg" width="150" height="150">
      <div class="posts">
        <h2>hello!newテーマ</h2>
        <div class="info">2019年6月10日　【カテゴリー】</div>
        <p>これからテーマを作っていきます</p>
      </div>
      </div>
    <div class="blogcard">
      <img src="default.jpg" width="150" height="150">
      <div class="posts">
        <h2>hello!newテーマ</h2>
        <div class="info">2019年6月10日　【カテゴリー】</div>
        <p>これからテーマを作っていきます</p>
      </div>
      </div>
    <div class="blogcard">
      <img src="default.jpg" width="150" height="150">
      <div class="posts">
        <h2>hello!newテーマ</h2>
        <div class="info">2019年6月10日　【カテゴリー】</div>
        <p>これからテーマを作っていきます</p>
      </div>
      </div>
    <div class="blogcard">
      <img src="default.jpg" width="150" height="150">
      <div class="posts">
        <h2>hello!newテーマ</h2>
        <div class="info">2019年6月10日　【カテゴリー】</div>
        <p>これからテーマを作っていきます</p>
      </div>
      </div>
    <div class="blogcard">
      <img src="default.jpg" width="150" height="150">
      <div class="posts">
        <h2>hello!newテーマ</h2>
        <div class="info">2019年6月10日　【カテゴリー】</div>
        <p>これからテーマを作っていきます</p>
      </div>
      </div>
    <div class="blogcard">
      <img src="default.jpg" width="150" height="150">
      <div class="posts">
        <h2>hello!newテーマ</h2>
        <div class="info">2019年6月10日　【カテゴリー】</div>
        <p>これからテーマを作っていきます</p>
      </div>
      </div>
      <div id="prenext">
        <div class="pre">pre</div>
        <div class="next">next</div>
     </div>

    </div>
<!--left end-->

<div id="main-body-right">
<h3>アーカイブ</h3>
  <ul>
    <li>2019年6月</li>
    <li>2019年７月</li>
  </ul>
<h3>最新投稿</h3>
  <ul>
    <li>コーヒー美味しい</li>
    <li>買い物行った</li>
  </ul>
</div>
<!--sidebar end-->
</div>
  <footer>
    &copyright koala, 2019 All Right Reserved.
  </footer>
  </body>
</html>
 <!--footer end-->

<!doctype html>

<head>

<title>Koala-wp</title>

</head>

<body>

<h1 id="head-title">Programing beginner</h1>

</ul>

</header>

<h2>hello!newテーマ</h2>