f is(エフイズ)|サトウユウキ(aka.キビ)f is(エフイズ)オフィシャルサイト

オリジナルのWPテーマを作ってみた

※h-stranger.comを作った時の話になります。
※当サイト(is-f.com)はsimplesimpleを骨組みにオリジナルテーマを作っています。

せっかくサイトを作るのであれば、そろそろ自作のテーマを使用したWPを構築してみようと思いました!

いつもは基本的にカスタムするのであれば「attitude」というテーマを使用しています。
(カスタム不要だと、好きなテーマ選んで貰って、調整だけしてます。)

0から全てのphpファイルの作成とかまで行うのはちょっと骨が折れるので、
今回は骨組みだけのシンプルな開発用テーマの「bones」を改変して作成していくことにします。

sass使ったりしたcssの作成も出来ると聞いたのですが、sassってそれ用のソフトも必要だし、
今のところsass使うよりも、もっとcssの記述やclassをコンパクトにまとめるのが一番良いと思っているので、その辺は割愛。

STEP001WPテーマのダウンロード

まずは、いつものようにWPテーマのインストールをします。
ただ、いきなり注意!
bonesは検索しても見つからないテーマでした!!
なので、以下リンクからbonesのサイトに飛んでダウロードしてインストールしましょう。
http://themble.com/bones/

ダウンロードしたファイルを
wp-content>>themes>>
に入れれば、検索で出てこないテーマも使えるので、知らない人は覚えておきましょう。
WPの編集画面ではいじれないphpをいじる時にも使うので、ある程度WP使うようなってカスタムしたい時には頻繁に使うフォルダですね。

この状態だと、まだWPのテーマ選択画面に表示されるのは

テーマ:bones

このようにbonesのままだと思われます。
これを、オリジナル表示にまずはしましょう。

STEP002オリジナルの表示名にする

フォルダの名前を変えたら、表示名はオリジナルになるんじゃないか?
そんな気がしますが、実際には・・・
なりませんね・・・

表示名はstyle.cssの中で決めています。

上部にある、

<Theme Name>

にて設定しているんですね。
その他の部分も、オリジナルの内容に修正しましょう!

STEP003オリジナルのサムネイルにする

表示名と一緒に、サムネイル画像も作成しておきましょう。
これもとっても簡単です。
<screenshot.png>
という画像を差し替えればそれだけで完成しちゃいます!
4:3の比率で作ってあればOKだそうですので、
【960*720px】
あたりが良いのではないでしょうか?
うまく出来ていれば
オリジナルのテーマが完成します(見栄えだけですが・・・)

基本的に、bonesのテーマは骨組みと、基本の呼び出しだけなので、あとは自分好みに調整をしていきましょう。
一つだけ注意点としては、WPの管理画面からのstyle.cssを見ると何も装飾指定付いていないのに、基本的レイアウトはされていますよね?
これは、
library>>css
の中のcssで定義されている部分になりますので、こちらの修正もされたい場合には覚えておきましょう。

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on Pinterest