2014.10.08
wordpress

ワードプレスの自作テーマの作成方法・シンプル・レスポンシブ対応

WordPress　
・

既存のテーマをアレンジしてウェブサイトを作成するのも良いですが、複雑で、いらない機能が付いていたり、ソースのどこを消してどこを残したら良いのか難しいですよね。
もっとシンプルに最小限のソースで作ってみたい人、wordpressのテーマを初めて自分で作る人に参考になればと思いテーマ作成ソースを公開します。

wp_theme005
HTML、CSSの知識があること前提になっていますのでHTML、CSS自体の説明は省略します。
PHPの知識はなくても大丈夫です。

今回作成したテーマは、最小限の機能でシンプルなテーマにしましたので、カスタマイズもしやすいと思います。
スマホ用にレスポンシブ対応に作成しました。

出来上がりテーマのサンプルはこちら。

Ri-mode Green ワードプレスのテーマ作成用サンプルサイト

超シンプル・基本のテーマなので自分でテーマを作ったことがある人は物足りないかもしれません。

テーマ作成の流れ

1. HTML、CSSの作成
2. テーマ作成の準備
3. HTMLを分割してPHPファイルに
4. functions.phpを作成
5. ダッシュボードからの設定

大まかに以上の5ステップです。

1. HTML、CSSの作成

まず新規フォルダを作成し、好きな名前を付けます。
今回はri-mode_greenとしました。

このri-mode_greenをいうフォルダの中にテーマファイルを作成します。
最終的には、9個のファイルになります。
wp_theme001

wordpressのテーマ作成時は、まずHTMLで（普通に）作成します。
入っている文字はとりあえずは適当に。
リンクは全てダミーで作ってしまってOKです。

HTMLとCSSのみのサンプルはこちら。

ワードプレステーマ作成HTML

サンプルのソースは以下です。

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>&nbsp; タグ： <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>&nbsp; タグ： <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 &copy; 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のフォルダに保存。
screenshot

この時点ではri-mode_greenのフォルダには、index.html、style.css、screenshot.pngの3つが入っています。

次はindex.htmlを分割してphpファイルを作成していきます。

WordPress　
・
関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


人気の記事
  1. CMYKで印刷すると特色のゴールドのような色になる配色
  2. シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー
  3. 革パターン
    【PSD,AI,JPG】 無料で使える革・レザー調の素材全部で250種類以上
  4. DTP 文字の大きさと配置の目安
  5. CSS3 アニメーションの基礎 @keyframes transform
最新の記事
人気記事プラグインなし
【WordPress】プラグインなしで人気の記事をランキングで載せる方法
カスタム投稿タイプ デフォルト値
カスタム投稿タイプを作るときに参考になるデフォルト値
ロゴデザインをするときに大切な7つのポイント
ロゴデザインの参考にしたい素敵なロゴ100選
jQueryで特定のCSSの表示を遅くする方法
カテゴリー
タグ
CSS3 FB IE MT PHP WPテクニック WPテーマ作成 WPプラグイン アニメーション ウェブデザイン サムネイル サンプルあり スライドショー フォント フォーム フリー素材 プラグイン マウスオーバー メニュー リスト表示 レイアウト ロゴ 印刷・DTP 参考サイト 画像 色・配色
おすすめの本
ネットで調べればなんとかなる！という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
役立つリンク 相互リンク
TO TOP