ワードプレスの自作テーマの作成方法・シンプル・レスポンシブ対応
WPテーマ作成 ・ サンプルあり既存のテーマをアレンジしてウェブサイトを作成するのも良いですが、複雑で、いらない機能が付いていたり、ソースのどこを消してどこを残したら良いのか難しいですよね。
もっとシンプルに最小限のソースで作ってみたい人、wordpressのテーマを初めて自分で作る人に参考になればと思いテーマ作成ソースを公開します。
HTML、CSSの知識があること前提になっていますのでHTML、CSS自体の説明は省略します。
PHPの知識はなくても大丈夫です。
今回作成したテーマは、最小限の機能でシンプルなテーマにしましたので、カスタマイズもしやすいと思います。
スマホ用にレスポンシブ対応に作成しました。
出来上がりテーマのサンプルはこちら。

超シンプル・基本のテーマなので自分でテーマを作ったことがある人は物足りないかもしれません。
テーマ作成の流れ
1. HTML、CSSの作成
2. テーマ作成の準備
3. HTMLを分割してPHPファイルに
4. functions.phpを作成
5. ダッシュボードからの設定
大まかに以上の5ステップです。
1. HTML、CSSの作成
まず新規フォルダを作成し、好きな名前を付けます。
今回はri-mode_greenとしました。
このri-mode_greenをいうフォルダの中にテーマファイルを作成します。
最終的には、9個のファイルになります。
wordpressのテーマ作成時は、まずHTMLで(普通に)作成します。
入っている文字はとりあえずは適当に。
リンクは全てダミーで作ってしまってOKです。
HTMLとCSSのみのサンプルはこちら。

サンプルのソースは以下です。
HTMLソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> <title>タイトル</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <div id="header_line"></div> <h1 id="top_title"><a href="#">ブログのタイトル</a></h1> <div id="top_catch">ブログのキャッチフレーズ</div> </div><!--#header--> <div id="menu"> <ul> <li><a href="#">ホーム</a></li><li><a href="#">人気の記事</a></li><li><a href="#">サイトについて</a></li><li><a href="#">お問い合わせ</a></li> </ul> </div><!--#menu--> <div class="wrap"> <div id="content"> <div class="entry"> <div class="date">2014年9月13日</div> <h2 class="entry_title"><a href="#">記事タイトル</a></h2> <div class="category_tag">カテゴリ: <a href="#">ワードプレス</a> タグ: <a href="#">テーマ作成</a></div> <div class="entry_content">ここに記事の内容が入ります。</div> </div><!--.entry--> <div class="entry"> <div class="date">2014年9月13日</div> <h2 class="entry_title"><a href="#">記事タイトル</a></h2> <div class="category_tag">カテゴリ: <a href="#">ワードプレス</a> タグ: <a href="#">テーマ作成</a></div> <div class="entry_content">ここに記事の内容が入ります。</div> </div><!--.entry--> <div class="entry"> <h2 class="entry_title">お探しの記事が見つかりませんでした。</h2> </div><!--.entry--> <div class="paging"> <span class="paging_text"><a href="#"><< 次へ</a></span> <span class="paging_text"><a href="#">前へ >></a></span> </div><!--.paging--> </div><!--#content--> <div id="side"> <div id="side_in"> <div class="widget"> <div class="widget_title">最新記事</div> <ul> <li><a href="#">記事タイトル1</a></li> <li><a href="#">記事タイトル2</a></li> <li><a href="#">記事タイトル3</a></li> <li><a href="#">記事タイトル4</a></li> <li><a href="#">記事タイトル5</a></li> </ul> </div><!--.widget--> <div class="widget_footer"></div> <div class="widget"> <div class="widget_title">カテゴリ</div> <ul> <li><a href="#">カテゴリ1</a></li> <li><a href="#">カテゴリ2</a></li> <li><a href="#">カテゴリ3</a></li> </ul> </div><!--.widget--> <div class="widget_footer"></div> </div><!--#side_in--> </div><!--#side--> </div><!--.wrap--> <div id="footer"> <div id="copyright">Copyright © Ri-mode Rainbow. All Rights Reserved.</div> </div><!--#footer--> </body> </html>
CSSソース
@charset "utf-8"; body { font-size:14px; color:#333; line-height:1.8; } body,ul,ol,li{ margin:0; padding:0; } a { color:#60B29C; text-decoration:underline; } a:hover { color:#89BDE0; text-decoration:underline; } .wrap { max-width:1024px; margin:0 auto; } /* ----- ヘッダー ---------- */ #header{ min-height:150px; } #header_line { background:#60B29C; height:10px; } #top_title { max-width:980px; padding:20px 20px 0; margin:20px auto 0; font-size:2.0em; font-weight:bold; } #top_title a { color:#333; } #top_title a:hover { color:#666; } #top_catch { max-width:980px; margin:0 auto; padding:0 20px 15px; } /* ----- メニュー ---------- */ #menu { max-width:1024px; margin:10px auto 0; width:100%; padding:0; height:45px; } #menu ul { margin-left:2%; } #menu ul li{ display:block; float:left; margin:0; padding:0; } #menu ul li a{ display:block; background:#60B29C; margin:0 5px 0 0; padding:5px 15px; text-decoration:none; color:#fff; font-weight:bold; text-align:center; } #menu ul li a:hover{ background:#89BDE0; } /* ----- 右サイド ---------- */ #side{ float:right; width:24%;/*250px*/ height:auto; } #side_in { margin:10% 10% 10% 0; background:#F7F2E7; width:90%; border:3px solid #D6CFC1; } .widget { width:90%; margin:5%; } .widget_title { font-size:1.5em; font-weight:bold; margin:5%; } .widget ul li { margin:2% 3% 2% 15%; } .widget_footer { width:90%; margin:5%; margin-top:15px; margin-bottom:15px; border-bottom:1px dashed #D6CFC1; } /* ----- メイン ---------- */ #content { height:auto ; float:left; width:75%; } .entry { width:94%; margin:5% 3%; float:left; border-top:2px solid #60B29C; } h1.entry_title {/*個別ページでの記事タイトル*/ font-size:1.8em; color:#60B29C; } h2.entry_title {/*記事一覧ページでの各記事タイトル*/ border-left:none !important; font-size:1.7em; padding:0 !important; } .date {/*日付*/ background:#60B29C; color:#fff; padding:5px; font-size:0.85em; float:right; } .category_tag {/**記事内のカテゴリとタグ*/ font-size:0.85em; } .entry_content { margin-top:20px; } .paging { width:94%; margin:8% 3%; float:left; text-align:center; } .paging_text a { text-decoration:none; color:#fff; padding:5px; background:#60B29C; margin:1%; } .paging_text a:hover { background:#89BDE0; } /*投稿記事内のCSSここから*/ .entry h2 { border-left:5px solid #60B29C; padding:5px 10px 5px ; } .entry h3 { color:#60B29C; } .entry img { max-width:100%; border:3px solid #D6CFC1; box-sizing:border-box; margin-top:5px; margin-bottom:10px; } .entry li { margin:1% 5%; } /*投稿記事内のCSSここまで*/ /* ----- フッター ---------- */ #footer { clear:both; background-color:#60B29C; height:90px; } #copyright { padding-top:70px; text-align:center; color:#fff; font-size:0.9em; } /* ----- リスポンシブル用 ---------- */ @media screen and (max-width: 480px){ #top_title { text-align:center; font-size:1.5em; margin-top:15px; } #top_catch { padding:10px; text-align:center; } #side { display:block; clear:both; width:100%; } #side_in { background:#F7F2E7; width:90%; border:3px solid #D6CFC1; margin:20px auto; } #content{ width:100%; } #menu { width:100%; padding:0; margin:0 auto; } #menu ul { margin:0; } #menu ul li{ float:left; width:50%; font-size:0.9em; border:1px solid #F7F2E7; box-sizing:border-box; } #menu ul li a { margin:0; } }
HTMLのソースをindex.html、CSSソースをstyle.cssと名前を付けてri-mode_greenのフォルダに保存します。
2. テーマ作成の準備
CSSの編集
上記で作成したstyle.cssを開いて、一番上に下記の記述を追加します。
/* Theme Name: Ri-mode Green Theme URI: http://ri-mode.com/green/ Author: Ri-mode Rainbow Author URI: http://ri-mode.com/rainbow/ Version: 1.0 */
これはワードプレスにテーマのCSSだと認識させるための記述です。
Theme Nameは必須ですが、その他は記述しなくてもOK。
サムネイルの作成
次にテーマサムネイルの作成。
300px×225px(もしくは600px×450px)のサイズで作成し、screenshot.pngという名前にして、ri-mode_greenのフォルダに保存。
この時点ではri-mode_greenのフォルダには、index.html、style.css、screenshot.pngの3つが入っています。
次はindex.htmlを分割してphpファイルを作成していきます。