HTMLファイルをPHPに
boneというフォルダの中にワードプレステーマを作っていきます。
まずはboneのなかに3つのファイルを作ります。
- index.php
- style.css
- functions.php
それぞれのファイルの中身を書いていきます。
index.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<!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
1 2 3 |
/* theme Name: tomowarkar */ |
functions.php
今回は空にします。
ワードプレスにテーマのアップをする
あとはboneフォルダを圧縮して、ワードプレスのデーマニアップロードすれば完成です。
この記事最終段階のテーマ構造
bone/
├ index.php/
├ style.css/
└ functions.php/
自作ワードプレステーマの最低限を作るシリーズ一覧







コメントを残す