ワードプレスのオリジナルテーマ作りました

ワードプレスのオリジナルテーマ作りました
Pocket

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

半年程前ですか。
治療院を意識して作ったオリジナルテーマ「salon_theme01」。

初めてということもあり、チョ~時間かかったから、「もう二度とやんねっ!(●`ε´●)」って誓ったんですが、
出産の痛みを忘れるかのように、あの辛かった時を忘れ、気づいたらまた作ってました。


暇なんでしょうね。
ドMなんでしょうね。





まあ、有難いことに最近は「ホームページ作って!」って話もたまに頂くこともあり、オリジナルのテーマを増やそうって思ったのが表向きの理由です。

目指したことは、

1.トップページに動画を反映させること。
2.可能な限りウィジェットで簡単に設定できるようにすること。

の2点です。



今回は家でチビチビ作成&中断して放ったらかしたりもあったので総期間は掛かりましたが、作業としては大幅に短縮。







で、せっかく作ったし、見て見て~(*ノェノ)キャーってことでここでも報告します。

作りはシンプルでカスタムするのを前提としてますが。








ということで、今回作成した「lotus01」をご紹介。
興味ある人は無料で差し上げます。




ビジネス向けテーマ


前にも触れたとおり、「何かのお店」を想定して作ってます。
ブログとしては考えてませんが、使えないわけでは無いです。



あと、ビジネス用といっても、もちろんそこそこ大きい規模は難しいと思います。


主な概要は以下の通り。



・wordpressバージョン 3.5
・レスポンシブウェブデザイン
・Google Chrome/safari/FireFox/Internet Explorer7・8・9/各ブラウザ対応
・2カラム

・通常ページ
・ブログ機能
・お知らせ機能(カスタム投稿)
・カスタムヘッダー
・カスタムメニュー(デフォルトでは上下2箇所)
・カスタム背景
・カスタムロゴ
・ウィジェット対応
・アイキャッチ
・パンくず

基本的な機能はあります。



取り立てて珍しいものもないですし、デザインもアレですけど一応完成。

lotus01のサンプルサイト ⇒ こちら
http://shouken56.net/sample2/



初期状態
sample15


以下、一部ご紹介。



カスタム背景


管理画面で簡単に背景が変更できます。
画像、もしくは色の選択が可能です。

sample2

sample3

好きな画像を差し込んで下さいね。


sample4


ロゴも同じように簡単に変更できます。
こちらも画像と文字。どちらかに対応。
管理画面から設定して下さい。


設定するなら画像の方がいいと思いますが。



その他、ヘッダーも簡単に変更可能。





カラー


サンプルサイトの画像はとりあえず使ってるサンプルでして、
テーマカラーも簡単に変更できるようにしてます。
好きな色に変更して使って下さい。


デフォルト
デフォルト


こんな感じに簡単に変更。
カラーピンク


メニューバーもテーマカラーと同じにしてます。
sample6



カスタムカラーには対応してませんが、テーマカラーに関しては「style.css」で一括変更できるようにしてます。

お好みのカラーでお使い下さい。




レスポンシブ・ウェブデザイン


見てる人の画面サイズでデザインが変わる仕様です。



ブレークポイントは以下の通り。

●「320px以下」・・・・iphoneなどのスマホサイズ ※このデザインのベースです。
●「480px以下」・・・・タブレットやちょっと大きめのスマホサイズ
●「960px以上」・・・・PCサイズ


480以下
sample5


PCサイズで言うサイドバーは、480px以下で下に移動します。
sample7



プラグインの【WPtouch】は必要ありません。
まあ、気に入らなければ有効化して下さい。というより別のテーマを使っ・・・。




トップページ


トップページは、一部ウィジェットから変更できるようになってます。

sample10

あとここ。
sample11


サイドバーも検索以外すべてウィジェット。
枠としては4つ設けてます。

すべてのページに共通表示です。




ブログ

ブログ投稿はアイキャッチ画像がページトップに反映されますが、必ず必要だと言うわけではありません。

アイキャッチは以下のように動作します。

1.アイキャッチを設定した場合


「記事ページのトップ部分」と「ブログ一覧のサムネイル」に反映される。
sample20


sample12





2.アイキャッチを設定しない場合


「記事ページのトップ部分」にはデフォルトの画像(default.jpg)が反映される。
sample14

「ブログ一覧のサムネイル」にはNoimageの画像(noimage.jpg)が反映される。
sample13


上の画像は初期状態のものです。
ご自分でお好きな画像に変更して下さい。




管理画面


アイキャッチが反映されるで、記事の判別がわかりやすくなってます。
管理画面のアイキャッチ


あとは、固定ページと投稿ページにカスタムcssをつけてます。

ページごとにデザインを変えたい人は、そちらを利用して下さい。





また、テーマを使うにあたって引っかかりそうな部分のヘルプを用意しました。

テーマヘルプ


シンプルなテーマなんで、あまり難しい設定は必要ないですが、引っかかったらここを確認してみて下さい。





無料で差し上げます


一応自分の基本テンプレートとして、保持しておくためのテーマですが、
人に渡してもOKと思って作りました。

ご覧のとおり、カッコいいデザインとは言えませんが、連絡頂ければ無料で差し上げます。
適用も簡単です。

中断した時期もあるのでデザインの細かい部分は・・・あんまり確認してません。。
でも問題なく動くはずです(笑)





<デモサイト>
⇒ 汎用テーマ 【lotus01】のデモ

もちろん、治療院、マッサージサロン、整体院でも使えるんじゃないでしょうか。


一応こちらも。
⇒ 治療院向けに作成したテーマ 【salon_theme01】のデモ
こちらは完全に治療院系を意識しました。
整体院とかマッサージ、接骨院などでホームページ自分で作ってる人、もしくは作らないといけない人は使ってみて下さい。
もちろんタダで差し上げます。



何かしらの方法で連絡下さい。
zipファイルでお渡しします。

主な連絡手段はAboutにあります。





Pocket

Facebookコメント

コメントを残す