オリジナルテーマ作成はじめにWordPressの仕組みやレスポンシブウェブデザインの全体像を理解するのと同時に、テクニックも身に付けたいという人におススメします。テーマのインストールテーマはresponsive.1.9.3.6を使います。このテーマをオリジナルのテーマにカスタムしていきます。解凍したフォルダはそのままでも、自由に名前を変更してもかまいません。解凍したフォルダをwp-content/themes/へ置きます。ローカル環境(XAMMP)で編集したい場合は↓ローカル環境にWordPressをインストールテーマ名の変更まずテーマの名前を変更します。これは、テーマのアップデートを今後認識しないようにするためです。絶対変更しなくてもいいんですが、間違ってアップデートをしてしまうと、これから編集する箇所が書き換えられて面倒なことになります。Responsiveを変更します。テーマ利用可能なテーマに変更した名前のテーマがあると思います。それを有効化し完了です。WordPressの初期設定まずテーマをカスタマイズする前に基本的なところを大体入力しておきます。下準備カテゴリを適当な数作り、カスタムメニューで並び順と親子関係を決め、位置をヘッダーにします。あと適当に記事を5~10作成しておきます。必要なプラグインをインストールデフォルトで入っているものと、定番のプラグインをインストールしておきます。noticeをクリックし非表示にします。これから作成するテーマは、超シンプルにフラットなレスポンシブウェブデザインがテーマです。それでは、適当にテーマのロゴを作ります。ヘッダーで設定します。基本的なことはこちらで説明しています。カテゴリメニューの場所を最上部に変更しますheader.phpを編集します。id="header">の下に移動させます。カテゴリメニューのデザインを少し変更します。フラットなラバー感を出したいと思います。!important;}↓両端を背景で延長させます。bodyに背景を指定します。カテゴリメニュー用背景と、全体の背景2つを指定するというプチテクニックです。style.cssには、2つbodyがありますが、Baseの方を書き換えます。背景素材は、images/backに置きましたが、どこでも構いません。0;}画面の幅が小さくなるにつれてカテゴリメニューの高さが変化します。それに合わせてメニューの背景も変更しなくてはなりません。これがレスポンシブウェブデザインのおもしろいところであり、作る側としては、少し大変なところです。このテーマは、スタイルシートが↓の2枚に分かれています。名前が同じstyle.cssなので間違わないようにしてください。{}max-widthの大きさを変更すれば、その幅になった時にそのスタイルが適応されます。and...を追加してもかまいません。画面の幅が650px以下になった場合のカテゴリメニューのデザインと、その背景の高さを追加します。hidden;}↓を編集すると開閉ボタンの画像、位置が変更できますが、そのままでいきます。no-repeat;}以上でレスポンシブなカテゴリメニューの編集は完了です。カテゴリページと検索結果のページを編集カテゴリページを表示し必要ないものを消していきます。今回のサイトで使わない部分を削除していきますが、その結果サムネイルとタイトルのみになります。by%sだけ残し↑4つを削除します。pagewp-content/themes/の中のphpを編集していきます。);endif;?></h6>その下の検索結果ページのタイトル部分も変更しておきます。?></div>タイトル(テスト1)を削除。タイトルは、あとで違う形で追加します。?>ついでに検索結果のページの編集も非表示にしておきます。?>続きを読むを非表示にするwp-content/themes/responsive/core/includes/functions.phpへ↓を追加する。'new_excerpt_more');記事のタイトルを追加し、スタイルシートでパンくずリスト含め全体のバランスを調整します。※タイトル名は調整しやすいように長くしました。カテゴリページと検索結果ページ用のサムネイルに独自のスタイルを定義するため、archive.phpとsearch.phpのclassを変更します。class="item1">記事のタイトルを追加archive.phpを編集します。?></div>↑に↓を追加します。?></div>パンくずリストを編集します。プラグイン)のところです。スタイルシート(style.css)の.breadcrumb-listを編集します。14px;}サムネイルを調整します。0px;}幅240px以下でサムネイルを非表示にします。none;}タイトルのバランスを調整します。20px;}ページナビを入れます。プラグインWP-PageNaviを使います。Widgetへ移動させました。マージンを削除しコンテンツの高さを調整します。20px;}こちらもマージンを削除しコンテンツの高さを調整します。Widgetに移動させた検索を調整します。10px;}幅980px以下の調整をします。!important;}サイドバーのウィジェットの調整をします。0;}サイドバーのタイトルをパンくずリストのデザインに統一します。.breadcrumb-listに追加します。幅980px以下の時、パンくずリストとサイドバー(タイトル)の左ボーダーを非表示にします。検索結果ページは、抜粋記事を残しつつサムネイルを追加します。カテゴリページとは違う感じにするのかは、抜粋があるほうがいいのか、ないほうがいいのか2パターン見たいからです。するかは経過を見ながら最後に決めます。search.phpを編集します。5px;}そろそろシングルページにいきたいけど、最近の投稿にサムネイルをいれてもいいかな、いるかなあ?サムネイル?とりあえずシングルページに行きましょう。シングルページ(投稿ページ)編集パンくずリストの編集と、記事のタイトルの文字の大きさを調整します。メインのスタイルシート(style.css)のみで編集していきます。パンくずリストの記事タイトルを非表示にします。none;}コンテンツの高さを調整します。20px;}メインの記事タイトルを調整します。関連記事の編集をします。Postsをインストール、設定済みということで進めていきます。サムネイルの下にタイトルという感じにしてみました。デザインは大体で進めていきます。サイトの全体像が見えてきてからでも変更したいと思います。normal;}関連記事タイトルのスタイルを統一します。14px;}幅980px以下の時、関連記事の左のボーダーを非表示にします。none;}次の記事、前の記事のリンクがいらないので削除します。Postsの標準設定だとタグとカテゴリが関連記事の下になってしまうので、タグをpost-dataの下に入力します。noneでとりあえず非表示というのもアリです。編集が邪魔なので消します。フラットでソリッドなシンプルスタイルに変えます。both;}これで基本的なところは完成です。あとは記事を投稿しつつ調整していく感じです。ここからは、少しオシャレなやつを追加していこうと思います。テキストとサムネイルに装飾と動きを付けてみます。CSS3のボックスシャドウ、テキストシャドウ、ホバータイムを割り当てます。サムネイルにボックスシャドウをかけます。サムネイルに触れたらシャドウがかかります。#FFF;}上部のカテゴリメニュー以外(#wrapper内)すべてにテキストシャドウをかけます。1pxのシャドウがかかり文字が浮き出てるように見えます。#E1E1E1;}ホバータイムの時間を0.2sで統一します。#wrapper内のリンク、画像がふわふわっと変化します。0.2s;}トップページを編集します。このテーマの既存のトップページを使うのであれば、右側に画像または、スライドショー、動画(YouTube)を挿入することができます。簡単なので動画(YouTube)を入れてみます。埋め込みコード)を挿入すれば完了です。次にスライドショーを入れてみます。これもおすすめコンテンツにショートコードを挿入すれば完了です。肝心なのはこの下に何をどう置くのかが問題です。↓今はこんな感じのウィジェットのみになっていますが、この間にサムネイル付のカテゴリ別記事を置きたいと思います。完成したものは↓こちらです。2つのカテゴリから新着記事を呼び出しています。文字化けしているところもありますが。front-page.phpを編集しますが、php内に日本語を挿入すると文字化けしてしまいます。あることなので、ポイントとして上げておきます。UTF-8にエンコーディングすれば、日本語も挿入できるようになります。OKfront-page.phpを編集します。-->↑に2カ所挿入している↓の部分だけ説明しておきます。$loop->the_post();?>cat=2&showposts=6カテゴリID2の最新記事を6つまで表示するという意味です。上の画像には記事が3つしか表示されていませんが、あいにくテスト段階だったので記事が6つもありません、最高6つまで表示するということです。right;}幅480px以下の調整をします。100%;}幅320px以下の調整をします。class="widget-title-home"><h3>を↓のように変更。必然的に</h3>を削除。すべてのタイトルを統一することで、スタイルシートでの変更が容易になります。'</div>'));これでトップページは完了しました。WordPressを削除します。-->トップへ戻るボタンを編集footer.phpの‘&uarr;’を好きな文字に置き換える。日本語を記入する場合、文字化けするので、UTF-8にエンコードします。topなどを使用する場合↑を全部削除してかまいません。a:hoverを空にします。