SimpleeWP_cafebar オリジナルテーマ公開 05

レスポンシブデザイン対応
SimpleeWP-cafebar

★有料プラグインを同梱したお得セット ¥6,980

テーマの特徴

PC、タブレット、スマートフォンなど使用するデバイスにあわせて自動最適化されるレスポンシブデザインに対応したシンプルなWordPressテーマです。
トップページにはオプションでウィジェットエリアを利用して有料プラグイン($19)のスライドショー(Slider revolutionまたはMeta Slider Pro)を入れることが可能です。
カスタムヘッダー、カスタムメニュー、ウィジット(トップページメイン×1、トップページサブ×3、サイドバー×2/フッター×3)が、管理画面から簡単にカスタマイズできますので、基本的なHTMLの知識があればあなただけのオリジナルサイトを作ることができます。

「お知らせ」と「ショップメニュー」用に利用できる独立した投稿(カスタム投稿)をあらかじめ用意いたしました。
★「ショップメニュー」はリストページのデザインも他の投稿ページとは独立したデザインになりました!

さらに、カスタム投稿「おしらせ」と、指定するカテゴリーの最新記事一覧もウィジェットで指定できるようになりましたので、お好きな位置に表示させることができるようになりました。

Theme Information
  1. 表示タイプ:レスポンシブデザイン
  2. 動作条件:WordPress 3.5以降
SimpleeWP オリジナルカスタマイズ対応箇所
  1. カスタムヘッダー対応(ヘッダー部分でロゴとして利用可能)
  2. カスタムメニュー対応(ヘッダーグローバルメニュー、フッターセカンドメニューの2か所設置)
  3. カスタム設定でSNSなどのアカウント設定が可能・・・SimpleeWP専用カスタム設定
  4. ウィジェットエリア:トップページ(メイン大×1、中×3か所)、
    サイドバー(中×2か所)、フッター(中×3か所)設定済み
  5. スライダープラグイン「Slider Revolution($19)」「Meta Slider Pro($19)」をセット
    ※購入者のみ利用可能なシングルライセンス
  6. カスタム投稿「お知らせ」「ショップメニュー」追加設定済み・・・お知らせに投稿した記事はウィジェット対応しました。
  7. ページ内で「トップに戻る」スクロールバーを右下に表示できるように設定済み
  8. パンくずリスト設定済み
  9. 右サイドバー、左サイドバーをCSSで指定していただければ2カラムのレイアウト選択可能・・・テーマ個別設定で簡単に選択できるよう対応しました。
  10. 固定ページでは1カラムテンプレートを選択することも可能ですので、お問い合わせやLPにご利用いただけます。
ご注文はこちらから

≫テーマをダウンロード購入
1 – 利用規約をご確認ください。
2 – 下記「購入ボタン(BASE)」より決済ください
3 – 決済が完了すると、即時にダウンロードURLが表示されます。
(コンビニ・銀行振込の場合は入金確認後24時間以内にDLご案内いたします)

● 有料プラグイン($38)が同梱されたお得なセットパック ¥6,980

buy_btn_base

※決済システムは「BASEかんたん決済(万が一商品が届かなかった場合の返金が保証されています)」を利用しています。



SimpleeWP_solo オリジナルテーマ公開 04

レスポンシブデザイン対応
SimpleeWP-solo

★有料プラグインを同梱したお得セット ¥6,980

テーマの特徴

PC、タブレット、スマートフォンなど使用するデバイスにあわせて自動最適化されるレスポンシブデザインに対応したシンプルなWordPressテーマです。
トップページにはオプションでウィジェットエリアを利用して有料プラグイン($19)のスライドショー(Slider revolutionまたはMeta Slider Pro)を入れることが可能です。
カスタムヘッダー、カスタムメニュー、ウィジット(トップページメイン×1、トップページサブ×3、サイドバー×2/フッター×3)が、管理画面から簡単にカスタマイズできますので、基本的なHTMLの知識があればあなただけのオリジナルサイトを作ることができます。
さらに、カスタム投稿「おしらせ」と、指定するカテゴリーの最新記事一覧もウィジェットで指定できるようになりましたので、お好きな位置に表示させることができるようになりました。

Theme Information
  1. 表示タイプ:レスポンシブデザイン
  2. 動作条件:WordPress 3.5以降
SimpleeWP オリジナルカスタマイズ対応箇所
  1. カスタムヘッダー対応(ヘッダー部分でロゴとして利用可能)
  2. カスタムメニュー対応(ヘッダーグローバルメニュー、フッターセカンドメニューの2か所設置)
  3. カスタム設定でSNSなどのアカウント設定が可能
  4. ウィジェットエリア:トップページ(メイン大×1、中×3か所)、
    サイドバー(中×2か所)、フッター(中×3か所)設定済み
  5. スライダープラグイン「Slider Revolution($19)」「Meta Slider Pro($19)」をセット
    ※購入者のみ利用可能なシングルライセンス
  6. カスタム投稿「お知らせ」追加設定済み・・・お知らせに投稿した記事はウィジェット対応しました。
  7. ページ内で「トップに戻る」スクロールバーを右下に表示できるように設定済み
  8. 右サイドバー、左サイドバーをCSSで指定していただければ2カラムのレイアウト選択可能・・・テーマ個別設定で簡単に選択できるよう対応しました。
  9. 固定ページでは1カラムテンプレートを選択することも可能ですので、お問い合わせやLPにご利用いただけます。
ご注文はこちらから

≫テーマをダウンロード購入
1 – 利用規約をご確認ください。
2 – 下記「購入ボタン(BASE)」より決済ください
3 – 決済が完了すると、即時にダウンロードURLが表示されます。
(コンビニ・銀行振込の場合は入金確認後24時間以内にDLご案内いたします)

● 有料プラグイン($38)が同梱されたお得なセットパック ¥6,980

buy_btn_base

※決済システムは「BASEかんたん決済(万が一商品が届かなかった場合の返金が保証されています)」を利用しています。



Meta Slider LiteとProのちがい

SimpleeWPで販売するテーマでは、すべて・・・ではありませんが、
ほとんどのテーマに【Meta Slider Pro】を同梱するようにしています。

Lite版でも基本のスライダー機能として十分です。
今回は、本家サイトのサンプルをいろいろ紹介し、Lite版、Pro版で出来ることをチェックしていきたいと思います。

Flex Slider Demo

基本的なスライダー。Lite版ではサムネイル機能などに一部制限があります。
Examples_Meta_Slider_-_Respons2014-10-06_23-22-53

Layer Slide Demo ★Meta Slider Pro

文字に動きをつけて躍動感を出すことも可能。
プレゼンテーション、プロモーションなどにおススメ!

Post Feed Demo ★Meta Slider Pro

自動的に特定のカテゴリーの最新記事を画像つきでスライダー表示させることも
Meta Slider Pro版なら可能です。

※当方でもここまで利用する機会が少ないので、Meta Slider Proを利用した最新記事の取得方法などは別記事でご紹介したいと思います。

Post_Feed_Demo_Meta_Slider_-_R2014-10-06_23-28-13

管理画面のサンプルはこちら
Post_Feed_Demo_Meta_Slider_-_R2014-10-06_23-33-13

Carousel Demo

サムネイルサイズの写真が複数見えている状態からスライドするタイプです。
これは「Flex Slider」を利用します。

Video Demo ★Meta Slider Pro

YouTubeVimeo もスライダーに挿入できます(Meta Slider Pro版でカスタマイズ可能)
YouTube_&_Vimeo_Slideshow_Demo2014-10-06_23-41-55

Thumbnail Navigation ★Meta Slider Pro 

Lite版よりPro版ではナビゲーションが2パターン(Thumbnail、Filmstrip)追加されます。
Thumbnail_Slideshow_Demo_Meta_2014-10-06_23-46-06

Custom Theme ★Meta Slider Pro

Pro版には、Live Theme Editorが組み込まれています。
複数のスライダーにカスタマイズしたデザインを指定することも容易にできます。
使いまわしやすいベースデザインを一つ用意しておくと、とても便利です。

Custom_Theme_Demo_Meta_Slider_2014-10-06_23-54-32

今まで「Lite版で十分!」と思っていた方。
ちょっと物足りなくなってきた方。
ガッツリとカスタマイズしたい、クライアントワークに利用したい方。

Meta Slider Pro は使い始めるとなかなか奥が深く、いろいろ使いやすいプラグインだと思います。
こちらの商品は、通常購入すると、、、

1サイト利用ライセンス・・・19ドル
5サイト利用ライセンス・・・39ドル  です。



SimpleeWP_delicafe オリジナルテーマ公開 03

レスポンシブデザイン対応
SimpleeWP-delicafe

★有料プラグインを同梱したお得セット ¥6,980

テーマの特徴

PC、タブレット、スマートフォンなど使用するデバイスにあわせて自動最適化されるレスポンシブデザインに対応したシンプルなWordPressテーマです。
トップページにはオプションでウィジェットエリアを利用して有料プラグイン($19)のスライドショー(Slider revolutionまたはMeta Slider Pro)を入れることが可能です。
カスタムヘッダー、カスタムメニュー、ウィジット(トップページメイン×1、トップページサブ×3、サイドバー×2/フッター×3)が、管理画面から簡単にカスタマイズできますので、基本的なHTMLの知識があればあなただけのオリジナルサイトを作ることができます。
さらに、カスタム投稿「おしらせ」もウィジェットで指定できるようになりましたので、お好きな位置に表示させることができるようになりました。

Theme Information
  1. 表示タイプ:レスポンシブデザイン
  2. 動作条件:WordPress 3.5以降
SimpleeWP オリジナルカスタマイズ対応箇所
  1. カスタムヘッダー対応(ヘッダー部分でロゴとして利用可能)
  2. カスタムメニュー対応(ヘッダーグローバルメニュー、フッターセカンドメニューの2か所設置)
  3. カスタム設定でSNSなどのアカウント設定が可能
  4. ウィジェットエリア:トップページ(メイン大×1、中×3か所)、
    サイドバー(中×2か所)、フッター(中×3か所)設定済み
  5. スライダープラグイン「Slider Revolution($19)」「Meta Slider Pro($19)」をセット
    ※購入者のみ利用可能なシングルライセンス
  6. カスタム投稿「お知らせ」追加設定済み・・・お知らせに投稿した記事はウィジェット対応しました。
  7. ページ内で「トップに戻る」スクロールバーを右下に表示できるように設定済み
  8. 右サイドバー、左サイドバーをCSSで指定していただければ2カラムのレイアウト選択可能
  9. 固定ページでは1カラムテンプレートを選択することも可能ですので、お問い合わせやLPにご利用いただけます。
ご注文はこちらから

≫テーマをダウンロード購入
1 – 利用規約をご確認ください。
2 – 下記「購入ボタン(BASE)」より決済ください
3 – 決済が完了すると、即時にダウンロードURLが表示されます。
(コンビニ・銀行振込の場合は入金確認後24時間以内にDLご案内いたします)

● 有料プラグイン($38)が同梱されたお得なセットパック ¥6,980

buy_btn_base

※決済システムは「BASEかんたん決済(万が一商品が届かなかった場合の返金が保証されています)」を利用しています。



【プラグイン】Theme-Checkを使ったテーマの機能テスト

SimpleeWPで販売するオリジナルテーマでは、Theme-Checkというプラグインを利用しています。
Theme-CheckプラグインとはWordPressで定められているテーマの品質に対するガイドラインに適合しているかどうかをチェックするためのプラグインです。

準備:デバックモードを有効に

「Thema-Check」を利用するにはデバックモードを有効にする必要があります。

Theme-Checkでテストしてくれること

このプラグインがチェックしてくれることは多岐にわたります。
以下ではほんの一例をご紹介します。

CSS関連

以下のようなクラス属性に対するスタイルが定義されているかどうか?

.aligncenter
.alignleft
.alignright
.wp-caption
.sticky
その他

テンプレートタグ関連

最低限必要なテンプレートタグがテーマ内に記述されているかどうか?

wp_head()
wp_footer()
body_class()
post_class()
その他

セキュリティ&互換性

互換性やセキュリティにリスクがあるテンプレートタグやPHPの関数が使われていないか?

PHPのsystem()とかfile_get_contents()などサイトにリスクを及ぼす可能性がある関数が使われてないか?
bloginfo(‘home’)とかbloginfo(‘stylesheet_directory’)など最新のWordPressで非推奨となっているテンプレートタグが使用されていないか?

エラーメッセージの種類

Theme-Checkが完了すると、エラー箇所がリスト表示されます。
エラーのレベルは以下の通り。

WARNING 警告(非推奨の関数や、テーマにあってはいけないファイルがある箇所)
REQUIRED 注意(指定しなくてはいけないcssが抜けていたり、推奨の関数が使われていない箇所)
RECOMMENDED 推奨(より推奨している関数がある場合におすすめのコードを出してくれます)

WARNING・REQUIREDは修正必須ですが、RECOMMENDEDは必要に応じて修正対応していきます。

WordPressはバージョンアップに伴い、非推奨のタグのチェックなどが必要になってきます。
非推奨タグがテンプレート内に見つかった場合には、エラーメッセージの中に推奨タグも指示してくれますので、プラグインが英語のままでもほぼ困ることはありません。
指示に従って1つ1つ修正をしていくとよいでしょう。

※テンプレート内に表記している日本語部分はどうしてもエラー扱いになりますので当サイトのテンプレートでは妥協しています。あらかじめご了承くださいませ。

 



Step1. テーマの基本設定(テーマインストール・基本投稿方法)

Step1は、一般的なWordPressテーマ共通の基本設定です。
事前にWordPress本体を正しくインストールしておいてください。

【1】オリジナルテーマ(SimpleeWPの各テーマ)をインストールする

テーマを追加 ‹ Simplee WordPress — WordPress

ダッシュボード(管理画面) > 外観 > テーマ > 新規追加 > アップロード

テーマをZIPファイルのままアップロードして有効化します。

またはFTPソフトでサーバーに接続して、
wp-content>themesに解凍したフォルダをアップロードして有効化します。
SimpleeWPのテーマを有効化した段階で、基本的な設定は完了しています。
次に同梱の有料プラグインや推奨プラグインをインストールしていきます。

【2】プラグインをインストールする

プラグインのインストール ‹ Simplee WordPress — WordPress

ダッシュボード(管理画面) > プラグイン > 新規追加

まずは日本語の不具合を治す「WP Multibyte Patch」だけは必ず有効化しておきましょう。
SimpleeWPのテーマにオプションで有料プラグインが同梱されている場合があります。
(テーマによっては有料プラグインはついていない場合もあります)
その場合は
ダッシュボード(管理画面) > プラグイン > アップロード

こちらを選択して、有料プラグインをZip形式のままアップロードして有効化します。

【3】カテゴリーの作成・投稿記事の作成

新規投稿を追加 ‹ Simplee WordPress — WordPress

ダッシュボード(管理画面)>投稿>新規追加

通常のブログ記事や画像ギャラリーなど随時更新される内容の記事は「投稿」を使います。
新規追加から記事を書いて、右欄の「カテゴリー」を追加・選択して「公開」ボタンを押します。
写真を追加する場合は、「メディアを追加」をクリックして画像を挿入します。

【ポイント】
カテゴリーは最初に追加設定しておくことも可能です。カテゴリー名は「日本語OK」ですが、
実際にURLに使用される「スラッグ」は英語になります。
同じ名前のスラッグを登録することはできませんので、カテゴリー名を登録する際には注意してください。

【4】固定ページの作成

新規固定ページを追加 ‹ Simplee WordPress — WordPress

ダッシュボード(管理画面) > 固定ページ > 新規追加

固定ページは、プロフィールページやお問い合わせなど、ほとんど更新されないページで使います。
新規追加から記事を書いて、右欄の「公開」ボタンを押して公開します。

固定ページは2種類のレイアウトが選べます(テーマによります)。
投稿画面の右欄にあるページ属性の「テンプレート」プルダウンメニューから、
『サイドバー有り(デフォルトテンプレート)』または『サイドバー無し』を選べます。

【5】カスタム投稿「お知らせ」ページの作成

おしらせ新規投稿を追加 ‹ Simplee WordPress — WordPress

ダッシュボード(管理画面) > お知らせ > 新規追加

SimpleeWPのテーマにはあらかじめ「お知らせ」という名前でカスタム投稿が用意されています。
通常の「投稿」機能とは分離して、新着情報やニュース・トピックスなど管理することができます。
設定内容などについては「カスタム投稿お知らせ」紹介ページをご覧ください。


テーマテンプレート内のトップページに表示されるように設定されています。(掲載パターンはテーマにより異なります)
必要がなければ非表示にするよう設定を変更してください。
また、フッター部分など当初の掲載箇所から変更したい場合には、テンプレートを直接修正する必要があります。



Step2. テーマの基本設定(SimpleeWPテーマでカスタマイズできること)

Step2では、SimpleeWPテーマで個別に設定・カスタマイズ可能な点を説明します。

ロゴの登録(カスタムヘッダーの設定)

ヘッダー ‹ Simplee WordPress — WordPress

ダッシュボード(管理画面) > 外観 > ヘッダー

カスタムヘッダーを利用してロゴマークなど画像の登録ができます。
推奨画像サイズ・推奨画像ファイルは管理画面でご確認ください。(テーマにより異なります)

カスタム背景(背景のカスタマイズ)

背景 ‹ Simplee WordPress — WordPress

ダッシュボード(管理画面) > 外観 > 背景

背景色または背景画像を設定することができます。
背景画像にパターンなど利用するだけで、サイトの印象がガラッと変わりますのでお勧めのカスタマイズ箇所です。

 

SimpleeWPテーマカスタム設定(Twitter・Facebook)

Simplee WPテーマ設定 ‹ Simplee WordPress — WordPress

ダッシュボード(管理画面) > 外観 > SimpleeWPカスタム設定

SimpleeWPテーマではあらかじめソーシャルアイコンやメールアドレス、電話番号などデザインされているものがあります。
Twitter、Facebookのアカウントを入力すると、ソーシャルアイコンに自動的にリンクが挿入されます。
(設定項目内容についてはテーマにより異なります)

 メニューの設定

メニュー ‹ Simplee WordPress — WordPress

ダッシュボード(管理画面) > 外観 > メニュー

SimpleeWPテーマではグローバルメニュー(ヘッダー箇所)とサブメニュー(フッターメニュー)の設定があらかじめされています。
(掲載箇所はテーマにより異なります)
メニューの名前はテーマにより異なる場合があります。

例1)
 ヘッダーグローバルメニュー(top_menu)
 フッターメニュー(fotter_menu)
 例2)
 Global Menu(head_navi)
 Foot Menu(foot_navi)

各メニューはドロップダウン対応していますので、下階層のあるメニュー設定も可能です。

ウィジェット(トップページ・サイドバー・フッター)のカスタマイズ

ウィジェット ‹ Simplee WordPress — WordPress

ダッシュボード(管理画面) > 外観 > ウィジェット

SimpleeWPテーマではトップページ専用、サイドバー、フッターにウィジェット機能を搭載しています。
トップページ・サイドバー・フッター等にウィジェットエリアがあるテーマは、
項目をドラッグ&ドロップするだけでお好きなコンテンツが簡単に追加できます。
「テキストウィジェット」はhtml/cssも使えます。
テーマによって対応部分が異なりますので、ウィジェット管理画面でご確認ください。



SimpleeWP_sakura オリジナルテーマ公開 02

レスポンシブデザイン対応
SimpleeWP-SAKURA
★有料プラグインを同梱したお得セット ¥6,980

テーマの特徴

PC、タブレット、スマートフォンなど使用するデバイスにあわせて自動最適化されるレスポンシブデザインに対応したシンプルなWordPressテーマです。
トップページにはオプションでウィジェットエリアを利用して有料プラグイン($19)のスライドショー(Slider Revolution,Meta Slider Pro)を入れることが可能です。
カスタムヘッダー、カスタムメニュー、ウィジット(トップページメイン×1、トップページサブ×3、サイドバー×2/フッター×3)が、管理画面から簡単にカスタマイズできますので、基本的なHTMLの知識があればあなただけのオリジナルサイトを作ることができます。

Theme Information
  1. 表示タイプ:レスポンシブデザイン
  2. 動作条件:WordPress 3.5以降
SimpleeWP オリジナルカスタマイズ対応箇所
  1. カスタムヘッダー対応(ヘッダー部分でロゴとして利用可能)
  2. カスタムメニュー対応(ヘッダーグローバルメニュー、フッターセカンドメニューの2か所設置)
  3. カスタム設定でSNSなどのアカウント設定が可能
  4. ウィジェットエリア:トップページ(メイン大×1、中×3か所)、
    サイドバー(中×2か所)、フッター(中×3か所)設定済み
  5. スライダープラグイン「Slider Revolution($19)」「Meta Slider Pro($19)」をセット
    ※購入者のみ利用可能なシングルライセンス
  6. カスタム投稿「お知らせ」追加設定済み・・・お知らせに投稿した記事はトップページに表示されます
  7. ページ内で「トップに戻る」スクロールバーを右下に表示できるように設定済み
  8. 右サイドバー、左サイドバーをCSSで指定していただければ2カラムのレイアウト選択可能
  9. 固定ページでは1カラムテンプレートを選択することも可能ですので、お問い合わせやLPにご利用いただけます。
ご注文はこちらから

≫テーマをダウンロード購入
1 – 利用規約をご確認ください。
2 – 下記「購入ボタン(BASE)」より決済ください
3 – 決済が完了すると、即時にダウンロードURLが表示されます。
(コンビニ・銀行振込の場合は入金確認後24時間以内にDLご案内いたします)

● 有料プラグイン($38)が同梱されたお得なセットパック ¥6,980

buy_btn_base

※決済システムは「BASEかんたん決済(万が一商品が届かなかった場合の返金が保証されています)」を利用しています。



Meta Slider Pro

トップページで利用することを想定しているスライダープラグインは2つあります。
1つは超おすすめ!多機能でCOOLな≪Slider Revolution≫ですが、
今日はもう少し簡単に管理できるプラグインを紹介します。

前述の≪Slider Revolution≫は、作りこんだらかなりカッコイイ動きをつけることができます。
しかし、構成とか動きのタイミングとか、いろいろ考えなくてはいけません。

「そんなことはできないよ。もっとサクサクっとできて、差し替えも楽なのがいいな」

そんな中級の方(?)向けのプラグインが【Meta Slider Pro】です。

  • HTML Overlay Test

    Created for demonstration purposes.


こんな感じです。

※少々言葉では説明しにくいので、実際の管理画面の画像を追加しました。
Meta Slider Pro ‹ Simplee WordPress

スライダーの準備ができると、投稿ページ・固定ページに直接記述できるソースコードが表示されますし、
もちろんテンプレート内に設置することも可能。
サイズや動きの指定は管理画面の「Meta Slider Pro」の設定画面で出来ます。

「Meta Slider Pro」では
1●Flex Slider //www.woothemes.com/flexslider/
2●R. Slider   https://wordpress.org/plugins/responsive-slider/
3●Nivo Slider   //dev7studios.com/plugins/nivo-slider/
4●Coin Slider //workshop.rs/projects/coin-slider/
の合わせて4種類のSliderを使うことができます。

もちろん「Lite版」でも基本的な動きをつけるとこは可能ですが、
画像の切り替えエフェクトや、高度な設定など自分でカスタマイズしたい方には
「Pro版」は超おススメ!!です。
Meta Slider Pro ‹ Simplee WordPress — WordPress 2014-09-28 01-31-36

レスポンシブデザインのテーマに組み込むとしたら、1(Flex Slider)か2(R. Slider)利用に
限定されますが、動きのエフェクトやサムネイルの表示非表示など細かい設定をすることができます。

「Save&Previe」で保存するとすぐにプレビュー確認できますので、
感覚的にサクサクっとCoolなスライダーを準備することができます。



Newpost Catch

WordPressの「最近の投稿(新着記事)」にアイキャッチ(サムネイル)を表示するウィジェットプラグイン

最近の記事のリストを普通に並べても良いですが、ここに画像があった方がよりわかりやすい場合もあります。
テンプレートに直接設定してもいいのですが、こちらのプラグインが大変便利&簡単なので使わせて頂きたいと思います。

インストールの方法や設置手順などは配布元に詳しく書かれていますので参考にしてください。
//www.imamura.biz/blog/newpost-catch

当方で販売するテーマではアイキャッチ(サムネイル)が利用できるように設定済みですので、
WordPressの管理画面から「ウィジェット」をクリックすると、「Newpost Catch」というウィジェットが追加できます。

プラグインを利用して細かい設定も可能

【設定項目】

  • タイトル
  • サムネイルのサイズ
  • 高さ
  • 投稿件数