治療院・サロン専用のWordPressテーマ「salon_theme01」をバージョンアップの巻

治療院・サロン専用のWordPressテーマ「salon_theme01」をバージョンアップの巻
Pocket

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

くっそ汚いテーマを以前作って連絡くれた人にホイホイあげてたのですが、本来自分用に作ったもので非常に使いづらいテーマでした。
今思うと、「こんなのよく人に渡してたなこのハゲ!」ってツッコミ入れたくなるものでした。




で、気になっていたのでバージョン1.0を改造して多少使いやすくしたのでご報告。


というよりVersion1.0が使いづらかったので、自分的には大幅に使いやすくしたつもりです。


今回はVersion3.0に!
バージョン2.0はどこ行った?ってことですが、結構面倒臭い作業だしさじ加減なので、なんとなく2コ進めてみた。
飛び級アップデートってことで。
まあどうでもいいよね。


一見大きく変わってませんが、内部は大幅に変わっています。








治療院・サロン系専用テーマ


あらためて当テーマについての説明を書いておきます。


【salon_theme01】は、整体院、接骨院、マッサージ院、鍼灸院、リラクゼーション、エステ、カイロなど、治療院やサロン系の店舗を意識して作った治療院専用のテーマです。

なぜか?
私自身が整体師だからです。

ホームページを作って集客したいけど、そこに多くのコストを掛けるわけにはいかない店舗もたくさんあります。

そこで可能な限り簡単な設定でホームページを作れて、なおかつ自分たちで管理もすることができれば、
経費も安く抑えられて、世の中の先生方もハッピーになれるんじゃなかろうかと考えたのがきっかけです。



なので、プロの方のようには高機能・ビューティフルデザインではありませんが、サイトを自分で作っている先生方や、これから作りたいけどあまりお金をかけられないって人に対してお役に立てればいいかなと思って作り直しました。


以下、簡単に特徴をまとめていきます。

テーマは無料でお渡ししているので、興味がある方はお送り先のメアドをご連絡頂ければ差し上げます。
(今のところダウンロード配布は考えていません)


一応デモサイトを貼り付けます。
内容は適当です。
⇒ デモサイト
⇒ 初期の設定方法はここで。

仕様


  • ◯ WordPressバージョンは3.4以降(3.8も確認済み)
  • ◯ HTML5/CSS3
  • ◯ レスポンシブwebデザイン
  • ◯ 2カラム(スマートフォン・タブレットサイズ 1カラム)
  • ◯ chrome safari Firefox IE7,8,9対応
  • ◯ 設定で必須なプラグインを不要化
  • ◯ 店舗ニュース(What’s new)機能
  • ◯ サイドバーウィジェット
  • ◯ ブログ機能
  • ◯ カスタムメニュー
  • ◯ カスタムヘッダー
  • ◯ カスタムロゴ
  • ◯ カスタム背景
  • ◯ ウィジェット対応
  • ◯ アイキャッチ機能
  • ◯ 記事にソーシャルボタンを配置


以下いくつかピックアップ。


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


実はバージョン1.0では一部のページがズレておりまして、その原因はFacebookコメントとソーシャルボタンだったんですね。
悪い悪い(。-人-。)

そこで、改めてレスポンシブ化をして、すべてのページで完璧に対応しています。


facebook関係もレスポンシブ化してあります。




モバイルファースト


このテーマでは、ベースレイアウトはスマートフォンです。

主なブレイクポイントは3つ。
◯ 480px以下・・・主にスマートフォンデザイン。ベースとなっています。(アイコン型ナビゲーション)
◯ 481px~960px・・・主に大きいスマホやタブレット(アイコン型ナビゲーション)
◯ 961px以上・・・主にPCサイズ(テキスト型ナビゲーション)


例えばiphone画面 ↓
__


という感じです。

つまり別にスマートフォンサイトを作る必要はないですし、プラグインで対応する必要はありません。


状況に応じたカスタムメニュー


メインメニュー(グローバルメニュー)は上に書いたとおり変化します。

例えばiPad ↓
salon17

例えば私のパソコン(Chrome) ↓
salon15


スマートフォンやタブレットなど、指でタップすると思われるサイズの端末では、アイコン型に切り替わります。



アイコン型はテーマ内に用意してあります。
その数今現在で27種!(今後少しづつ増やしていく予定)
アイコン一覧


この画像を利用するので「治療院・サロン系」専用と謳っているわけです。


サイドバーの変化


サイドバーはすべてウィジェット利用で、使いやすくなりました。

バージョン1.0では「トップページ」と「それ以外のページ」で違うサイドバーウィジェットを利用できましたが、
治療院サイトでの必要性と、利用者の設定の手間を天秤にかけた結果、統一することにしました。


パソコンサイズでは右サイドになりますが、
タブレットサイズではフッターの前に3つ横並びです。
そしてスマホサイズでは、フッターの前に1つずつ縦に並びます。



トップページをウィジェット化で簡単に!


その代わり、バージョン1.0で一番気に入らなかったトップページの設定。

バージョン1.0ではfront_page.phpを直接弄る必要があるという、ドMしか喜ばない作りでしたが、
バージョン3.0では一部を除いて大部分をウィジェット化しました。

デモサイトでいうと、「What’s new」と「Blogの最新情報」以外はすべてウィジェットで設定できます。


一応簡単な場所の説明も書いてあります。
131220-01





店舗インフォメーションのカスタム投稿


店舗ニュースなどのインフォメーション機能を付けてます。
これは以前プラグインでやってましたが、無くしました。

▶ Check!

ちなみに、当テーマを利用するにあたってバージョン1.0で必要だった必須プラグインはすべて不要にしてあります。



インフォメーションは臨時休業などのちょっとしたお知らせとして利用して下さい。
131220-08



▶ Check!

人によってはインフォメーションは必要ないという場合があると思うので、どこを削除すればいいか多少わかりやすくしてあります。



カスタムヘッダーで簡単


まあここは変わりませんが、サイズを変えてあります。

少し横長です。
元々画像を作って表示するエリアとして考えてました。

このへんはうまく調整して下さい。



注意事項として、スマホサイズではカスタムヘッダーの画像は表示されません。
スマホ用は別途設定が必要です。

この部分は設定方法を参照して下さい。



カスタムロゴにはテキストも対応


店舗ロゴを簡単に設定するために、カスタムロゴ機能を追加しました。

このカスタムロゴは一応サイズ制限がありますが、店舗ロゴを簡単にアップロードできるようになっています。


もし画像を使わない場合は、「サイトのタイトル」をテキスト出力します。
なので、画像を作れれないという方にもお使い頂けるかと。



<画像を利用時>
salon24

<画像を利用しない時>
salon23





一応カスタム背景も


カスタム背景を追加したので、好きな画像や好きな色に簡単に変更できます。

本来白で構築していて白が一番いいと思いますが、一応変更できるようにしてあるのでお好きにどうそ。
131220-03




アイキャッチ機能


アイキャッチ機能も付けてます。

131220-04

これはトップページの最新一覧とBlog一覧ページに反映されるので、なるべく設定してください。


で、アイキャッチ設定していない場合は、用意してあるnoimage画像が表示されます。
131220-05

imagesフォルダにnoimage.jpgが入っているので、好きな画像を上書きして頂いて結構ですよ。



また、管理画面にも反映させてます。
131220-06

記事を編集するときもわかりやすいですね!・・・ね?




SEO関係


構造を大幅に変えてます。
間違ってる部分もあるかもしれませんが、たぶん大きなマイナス影響はないはずです。
それなりに作ったつもりです。

正直言うと、私自身SEOに力を入れすぎるのはバカらしいと思ってまして、
それよりも丁寧に記事を積み重ねて、一つでも有益な内容を提供することが最強だと思っています。

なので、使う人が少しでも意識しなくてもいいよう、
普段施術などの店舗業務の合間に更新するであろう先生方が、より記事内容だけに集中できればいいなと思って改造しました。


まあ不足ならプラグインなんかで対応して下さい。



続きを読むのカスタム


こちらで「続きを読む」をカスタマイズしてあります。
131220-07

「続きを読む」というリンクよりは、タイトルでやったほうが効果としていいかな?と思ってやりましたが、やらないよりは良いだろうって程度です。



パンくずリスト


パンくずリストを配置してあります。
シンプルでよかろうもん。

131220-10



カラー編集について


メインカラーをなるべく変更しやすいようにしてあります。
style.cssの前半に「メインカラー」を集めてあるので、そこで一括して色を変えることが可能です。
salon34

例えばデフォルトでは緑色をメインカラーとしていますが、一箇所を変更するだけで文字色を赤にすることも可能になります。

テキストや背景など共通する物はまとめてあるので、1箇所変更すればある程度すべて反映されます。


ここにない物は探してください。


▶ Check!

今後カラーの別バージョンも2,3コ用意する予定です。



その他



カラーピッカー搭載


必要かどうかは別として、ファイル編集の際にカラーピッカーを利用できるようにしてあります。
salon36

色を変えたいところにカーソルを合わせて、クリックして下さい。
カラーピッカーが出てくるので、そこで好きな色に合わせるとカラーコードが出力されるのでそれをコピーして使って下さい。



ヘルプ設置


ヘルプというか、注意事項を設けています。

特に大した内容は書いてませんが、問い合わせ先や設定方法のリンク先などが書いてあります。
なので、有効化したらまずここを見て下さい。

場所は管理画面の「設定」の下です。





反省


以上で紹介は終わります。

反省としては、もう少し使いやすくできたのではないかなーと思っています。
バージョン1.0からの改造なのでなかなか思うようにはいきませんでした。


あとは、デザインですね。
治療院サイトなんで、シンプルでいいと思っていますが。
重要なのは内容ってことで。




今回のバージョンアップで、テーマの設定自体は大幅に簡単になりました。
また、自由度も広がっています。




使ってみたい方は是非ご連絡下さい。
メールでお送り致します。


また、アイコンの追加リクエストも受け付けます。
作れないってのもあるかもしれないけど、一応言うだけ言ってみようぜ!

何かしらの方法でご連絡下さい。



それでは。



(年内最後の更新かも。それでは良い年をお迎え下さい!)






気分に任せて更新中 ε-(/・ω・)/ トォーッ!!
follow us in feedly

Pocket

Facebookコメント

6 Comments

  1. 横谷 - 2016/03/15

    はじめまして。

    治療院向けのテンプレートを探していたら
    こちらに来ました。

    もし良かったらテンプレートをいただきたいです。
    宜しくお願い致します。

  2. 吉野 一彦 - 2016/09/10

    テンプレート使わせて頂けませんか?

    いままではHTMLで作っていたのですが、新しくwordpressで作製を考えています。

    なかなか治療院向けのテンプレートが無くて探していました。

    よろしくお願い致します

  3. 石田 - 2016/11/17

    はじめまして。

    wordpressのテンプレートを探していて、こちらを拝見しました。

    詳しい説明を読んで、使いやすそうなので、テンプレートを使わせていただければ、ありがたいです。

    宜しくお願い致します。

コメントを残す