wordpressでのスマホ対応webサイト制作・wpプラグイン・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

【WPテーマ・飲食向け】restaurant&cafeをカスタマイズして、カフェぽいサイトにしてみる

      2018/04/12

こんにちは、管理人@SS_mshpです。

今回はwordpressサイトで、飲食向けっぽいテーマを試してみます。
WPテーマrestaurant&cafeカスタマイズ
海外ディベロッパーで『同一テーマの無料版・有料版』をリリースしているところが見つかりました。機能を比較したり・カスタマイズでどのようにできるかを検討したいとおもいます。

使ってみるテーマ・restaurant&cafe(レストラン・カフェ向き)

テーマ概要

WPテーマrestaurant&cafe
いろいろ検索してたら『restaurant&cafe』というWPテーマが見つかりました。レストラン・カフェなど飲食店を想定したテーマのようです。また、同じテーマで基本の無料版・カスタマイザーなどの機能を拡張した有料版があります。今回はこのテーマを使って、機能比較をしてみたいと思います。

また、WPの推奨バージョンは『WordPress 4.5以上』、ライセンスは『GPL』がアナウンスされています。

https://raratheme.com/wordpress-themes/restaurant-and-cafe-pro/
(公式ページリンク)

無料版・有料版共通でできること

 

公式ページで確認したところ、共通で使える機能は以下の通りでした(よくわかんない機能もあるのでそれは割愛します)。Woocommerce連携は、コーヒー豆や賞味期限が長めの焼き菓子売るのに役立ちそうです

  • ロゴ
  • レスポンシブ&モバイルフレンドリー
  • クロスブラウザ対応(いろんなブラウザで適切表示)
  • 検索や速度最適化
  • カスタムCSS
  • ソーシャルメディア
  • Woocommerce(ショッピングサイト作るプラグイン)対応

そのほか、無料版と有料版で差がある機能

  • ヘッダーレイアウト(無料1に対して有料7)
  • ホームページセクション(よくわかんないけど有料の方が多い)
  • カスタム投稿順をメニュー順に
  • カスタムウィジェット(無料4有料17)
  • ページネーション(無料1有料4)

という感じでした。有料の方が高機能ですね。トップページなどを管理画面でそれっぽくするウィジェットなどが、有料版だと充実している印象でした。これのほかにもいろいろあります。

テーマrestaurant&cafe・初期状態

管理人のインストールしているwordpressサイトにもつけてみました。初期状態はこんな感じで・・・
WPテーマrestaurant&cafe初期状態
めっちゃ地味です(笑)が、たぶんどんなテーマも、初期状態はこのようなものです。これをカスタマイズして、レストラン&カフェぽいサイトにしてみます

テーマrestaurant&cafe・カスタマイズ・カフェぽいサイトにしてみる

一部なんですが、『スライダー・色・フォントサイズ・フッター・1カラム・上にスクロールするボタン・定義されたメニューやお問い合わせ、ギャラリーページなどの機能』については、有料版のみらしいのですが、なんかカスタマイズでどうにかなりそうなので検証してみました。さっそくカフェっぽいサイトができるか、簡単にですが試してみます。なお、食べ物の写真は写真acさんからお借りしました。

トップページセクションは豊富、だが固定ページの制御が変わる

WPテーマrestaurant&cafeトップページセクション
定義されたセクションが豊富にありました。ただ、『固定ページ→トップページ』にして、トップ特集セクションを設定したところ、トップ記事の画像が表示されなかったり、文章だけ抜いてスタイルシートが効かないみないな、ちょっと制御しにくいところはあります。

特集ページを公式のサンプルサイトみたいにするには、このセクション背景に画像指定

restaurant&cafeのヘッダーに背景
公式サンプルサイトには、『大きい画像&ボタン』が出ていますが、ここには画像を背景に指定する必要がありました(有料版だと画像を選ぶだけになってるかも)。
コードは『.promotional-block .container{background-image: url(“http://002.local/wp-content/uploads/2018/03/back.jpg”);
}』みたいな感じです(ローカル構築につきこのようなurlになっています)

ウィジェットのsns一覧は便利

restaurant&cafeのsnsウィジェット
主要snsのアイコンとかが入っているから、一発でsns一覧ウィジェットができるのは助かります。これ便利ですね~。

WPテーマrestaurant&cafeでカフェぽいサイトの例

WPテーマrestaurant&cafeでカフェぽいサイトの例
ちょっとデフォルトだと右側(たぶんcontainerにpadding-right)に少し隙間が気になりますが、それっぽい感じにしました。『特集セクション』がちょっと使いにくかったので、自作flex-boxで食べ物画像ギャラリーを組んでみたところです(スマホアクセス時は縦に並びます)。

また、ジャンルによっては、CSSでフォントを変えてやると、やわらかい印象になって良いでしょう。

あとがき・まとめ

やってみた感じだと、『有料版は豊富な機能・選択肢の中からいろいろ選べる』『無料版は基本機能しかないが、カスタマイズでなんとかなりそう』という印象でした。

jQuery lightSlider(画像スライダー用のjavascript)なども構成ファイルにはいっていたので、活用すればリッチでお客さんにアピールできるサイトができると思います。

*アトリエSS・web関連サービスページに移動します。

【カテゴリ】 - おすすめwordpressテーマ 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

超カッコいいサイトテンプレート(WPテーマ)・Hestia~印象的なトップページのセッティング

今回は、管理人が適当に検索してて発見した、wordpress用テーマを使 …

【WPテーマ】カフェ・サロンなどにも合いそうなシンプルスタイリッシュ系stride lite

今回は、ワードプレスの無料テーマで、業種的にはカフェやサロンなどにあいそ …

ビジネスおススメテンプレート(WPテーマ)~シャープな落ち着いたデザイン&豊富なカスタマイズ機能の『PERTH』

今回は、管理人がワードプレスのサイトを作っているときに、テーマを研究して …

【企業コーポレートサイト向けwpテーマ】Llorix One Liteが会社サイトに使える、4つの理由

今回は、海外wordpressのテーマで『企業コーポレートサイトに使えそ …

ビジネス・会社サイト向けテンプレート(WPテーマ)Wallstreet~カスタマイズ項目豊富・くるくるウィジェット・子テーマなど

今回は、wordpressの海外テーマで、かなりよい感じのものを見つけた …

wordpressをインスタ風クールな写真サイトできるテーマ・For the future使ってみた

今回は、インスタグラムみたいな写真メインのレイアウトを、wordpres …

【オリジナルワードプレスサイト制作】カスタマイズ向けのシンプルなスターターテーマ紹介

今回は、ワードプレスサイト制作で、オリジナルデザインにカスタマイズすると …