ポートフォリオサイト公開中

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

wp自作テーマの最低限

HTMLファイルをPHPに

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

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

  • index.php
  • style.css
  • functions.php

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

index.php

2カラムブログの外形を作る 2カラムブログの外形を作る この記事の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>

style.css

/*
theme Name: tomowarkar
*/

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

functions.php

今回は空にします。

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

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

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

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

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

wp自作テーマの最低限 【HTMLをPHPに】自作ワードプレステーマの最低限を作る① wp自作テーマの最低限 【index.phpを分割する】自作ワードプレステーマの最低限を作る② wp自作テーマの最低限 【404, searchなどのファイルを作成】自作ワードプレステーマの最低限を作る③ wp自作テーマの最低限 【記事ページの作成】自作ワードプレステーマの最低限を作る④ wp自作テーマの最低限 【投稿ページの作成】自作ワードプレステーマの最低限を作る⑤ wp自作テーマの最低限 【検索ページ, カテゴリページの作成】自作ワードプレステーマの最低限を作る⑥ wp自作テーマの最低限 【まとめ】自作ワードプレステーマの最低限を作る⑦

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です