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ドル  です。



【プラグイン】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つ修正をしていくとよいでしょう。

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

 



Meta Slider Pro

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

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

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

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

  • もちろん、あらかじめ設置したい箇所が決まってるのであれば、テンプレートの中に記述もOKです

こんな感じです。

※少々言葉では説明しにくいので、実際の管理画面の画像を追加しました。
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」というウィジェットが追加できます。

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

【設定項目】

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


Breadcrumb NavXT

パンくずリストの設置はプラグイン「Breadcrumb NavXT」の設置を想定しています。

グローバルメニューの下にあらかじめ設置するようにテンプレートの設定をしています。
プラグインをインストール後、「設定」>「Breadcrumb NavXT設定」で細かい設定をしてください。



Contact Form 7

お問い合わせフォームは代表的なプラグイン「Contact Form 7」を利用します。

WordPressのプラグインの中でもよく利用されているプラグインなので、すでにご存じの方も多いかと思います。
本家サイトはこちら。
設定方法や、カスタマイズ方法なども載っています。
使い方の手順などは、こちらのページに丁寧に解説されています。