【HTMLをPHPに】自作ワードプレステーマの最低限を作る①

HTMLファイルをPHPに

boneというフォルダの中にワードプレステーマを作っていきます。

まずはboneのなかに3つのファイルを作ります。

index.php
style.css
functions.php

それぞれのファイルの中身を書いていきます。

index.php

2019.05.202カラムブログの外形を作るこの記事のindex.htmlをコピペします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <title></title>
<style>
/*2カラムデザイン*/

body {
  margin: 0;
  background: lightgray;
}

header, footer {
  background: gray;
  height: 100px;
}

.content {
  padding: 50px 0;
  display: flex;
  justify-content: space-between;
  width: 1236px;
  margin: auto;
}

.main-content, .side-content {
  background-color: #fff;
  padding: 9px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px;
  box-sizing: border-box;
}

.main {
  width: 860px;
}

.sidebar {
  width: 356px;
}

@media screen and (max-width:1023px) {
  .content {
    display: block
  }
  div.main, div.sidebar {
    display: block;
    margin: 10px;
    width: auto
  }
  .main {
    width: 860px
  }
  .sidebar {
    width: 356px
  }
}

@media screen and (max-width:1240px) {
  .content {
    width: auto;
  }
  .main, .sidebar {
    margin: 0 .5%
  }
  .main {
    width: 67%
  }
  .sidebar {
    width: 30%
  }
}

</style>

</head>
<body>
  <header></header>

  <div class="content">
    <div class="main">
      <div class="main-content" style="height:60vh;"></div>
    </div>
    <!--/main-->

	  <div class="sidebar">
      <div class="side-content" style="height:40vh;"></div>
    </div>
    <!--/sidebar-->

	</div>

  <footer></footer>

</body>
</html>

<!DOCTYPE html>

<head>

<style>

/*2カラムデザイン*/

body {

margin: 0;

background: lightgray;

}

header, footer {

background: gray;

height: 100px;

}

.content {

padding: 50px 0;

display: flex;

justify-content: space-between;

width: 1236px;

margin: auto;

}

.main-content, .side-content {

background-color: #fff;

padding: 9px;

width: 100%;

border: 1px solid transparent;

border-radius: 4px;

box-sizing: border-box;

}

.main {

width: 860px;

}

.sidebar {

width: 356px;

}

@media screen and (max-width:1023px) {

.content {

display: block

}

div.main, div.sidebar {

display: block;

margin: 10px;

width: auto

}

.main {

width: 860px

}

.sidebar {

width: 356px

}

@media screen and (max-width:1240px) {

.content {

width: auto;

}

.main, .sidebar {

margin: 0 .5%

}

.main {

width: 67%

}

.sidebar {

width: 30%

}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

style.css

/*
theme Name: tomowarkar
*/

theme Name: tomowarkar

style.cssでワードプレステーマの名前を設定します。

functions.php

今回は空にします。

ワードプレスにテーマのアップをする

あとはboneフォルダを圧縮して、ワードプレスのデーマニアップロードすれば完成です。

この記事最終段階のテーマ構造

bone/
├ index.php/
├ style.css/
└ functions.php/

自作ワードプレステーマの最低限を作るシリーズ一覧

2019.05.20【HTMLをPHPに】自作ワードプレステーマの最低限を作る①

2019.05.20【index.phpを分割する】自作ワードプレステーマの最低限を作る②

2019.05.20【404, searchなどのファイルを作成】自作ワードプレステーマの最低限を作る③

2019.05.20【記事ページの作成】自作ワードプレステーマの最低限を作る④

2019.05.21【投稿ページの作成】自作ワードプレステーマの最低限を作る⑤

2019.05.21【検索ページ, カテゴリページの作成】自作ワードプレステーマの最低限を作る⑥

2019.05.21【まとめ】自作ワードプレステーマの最低限を作る⑦

HTMLファイルをPHPに

index.php

style.css

functions.php

ワードプレスにテーマのアップをする

この記事最終段階のテーマ構造

自作ワードプレステーマの最低限を作るシリーズ一覧

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル