WORDPRESSスライドショープラグイン『content slide』設置方法

WORDPRESSの大人気スライドショープラグインです。ですので紹介している人も多いのですが、気になったのは設置方法があまりしっかり記載されていない点です。。今回は設置関連を中心にチェックしてみましょう！

スライドショープラグインとはその名のとおり、
演出効果が絶大な画像スライドが簡単にできるものです。

特に『content slide』はアフィリエイターに人気で、
画像ごとにリンクを設置することができます。

つまり、複数のバナーをひとつの場所で
スライドみたいに表示できるツワモノというわけですね。。

実際の動きはトップページより確認してみてください♪
⇒ 『“隼式“情報ビジネス戦術論』トップページはこちら

このような感じでアニメーション的に画像が変化し、
表示された画像にそれぞれリンクを設置できます。

プラグインの導入方法

プラグインはWORDPRESSのダッシュボードから
『プラグイン』→『新規追加』を選択し、
検索窓にcontent slideと入れて検索をクリックします。

おそらく検索候補の一番上にWordPress Content Slideと出ます。
これが該当プラグインですので追加して有効化してください。

ダッシュボードメニューの左下に『Content slide』の欄が
できていれば有効化されています。

このメニューから、画像の移行アニメーションの種類や各画像表示時間の設定、設置画像の選択、各画像のリンク先設定などを設定することができます。

表記はすべて英語となりますので最初は少々混乱しますが、実質上触らなければいけない箇所は最低限ですので大丈夫です。

では設置に際して最低限必要なことがひとつあります。

設置する画像の大きさをすべて統一しておく

content slideでは表示させる画像の大きさを
あらかじめ決めておく必要があります。

美しく移行しているように見せるには、
各画像によって大きさが変われば台無しですからね。

賢威の3カラムであれば、横幅520～550ピクセルぐらいがベストでしょう。

Content Slideの設定

設定では全部の項目をいじる必要はありません。

◆General Setting
・image width/height : 画像の幅と広さ

アニメーション画像の大きさです

ここで指定したサイズがアニメーション適応されますので、
画像によって大きい小さいが発生しないよう統一しておきましょう！

◆Effects & Animation Settings
・Delay between images in ms : ひとつの画像表示時間
・Delay between squares in ms : アニメーションの移行速度
・Effect : アニメーション移行時のギミック種類

アニメーション設定です

画像の表示時間はデフォルトで3000（約3秒）に設定されています。
移行速度もデフォルトでは結構早いので好みで調整してください。

あまりに早いと確認しづらいですし長すぎても演出が見逃されます。
Effectは『all combined』で全種類が順に表示されます。

◆Images Source Settings
・Open images/Links in New Window? : リンクを新規ウインドウで開くか
・Order images Randomally? : 表示される順序をランダムにするか
・Number of Custom images : 表示する画像の数

表示画像の設定です

事前に作っておいた画像の適応とリンク先の設定です。
『Number of…』で指定した数の分だけ登録欄が表示されます。

画像のみで使用するなら必要な設定はこの部分だけです。

ほとんどの解説記事が触れない肝心の設置設定

さて、ここでつまずくのが『画像URLってどれだ？？』という箇所ですね。
WORDPRESSは慣れていないとアップロードしたURLがわからないことが多く、
たくさんの解説を見てもほとんどがコピペ記事で肝心の説明がありません。

ではこの部分を説明します。
まず画像のアップロードですが『メディア』の新規追加をクリックして
必要な画像をドラッグ＆ドロップでワードプレスにアップロードします。

アップロードできたら『メディア』→『ライブラリ』を開き、
画像のタイトルをクリックします。

表示箇所はワードプレスのバージョンによって異なりますが、
右側か下部に『ファイルのURL』という表記が確認できます。

このURLをコピーして『Custom image』のSRCに貼り付ければ適応されます。

WORDPRESSへの設置が一番？？？な実情…

通常は、

<?php if (function_exists( ‘wp_content_slider’ )) { wp_content_slider(); } ?>

をコピペして『ページ編集』から表示させたいページの部分に
上記のタグをはめ込めばそれでOKです。

が、多くの解説記事で意味不明な表記があります。

『トップページのみに表示させたい！などの場合は
　必要に応じて任意の位置に違うphpタグを貼り付けてください！』

というもの…

それがこれ。。
<?php if (is_front_page()) {
if (function_exists(‘wp_content_slider’)) { wp_content_slider(); }} ?>

ワードプレスの場合それぞれのページ別にタグをはめ込まなくちゃならないので
『任意のぺーじのみ』もクソも任意のページにしか表記できないのです。

また、困ったことに『Content Slide』の解説記事は誰かが言い出した
この説明を完全コピペしているものばかりで役に立たないのです。。

最初に表記したタグでOKですので下のphpは不要ですよ。

Content Slideをセンターに表示させるタグ

さてこの部分に悩む方もかなり多いのではないかなと思います。

上記タグをはめ込むと確かに表示されたけど、
左端に張り付いて上下の余白も全くなしでどうすればいいんだ！

という状態ですね。。

WORDPRESSはテンプレートによって多少表記方法が異なりますが、
これを解決するには上記phpタグを指定divタグで囲んであげる事です。。

今回はセンター化させて上下に多少余白を作るdivタグを使用しましょう。
以下をコピーしてphpを囲んであげます。。

<div class=”contents clearfix”>
●●ここにcontent slideのphp●●
</div>

賢威をはじめとするだいたいのWORDPRESSテンプレートであれば
これでセンター表示されます。。

是非設置にチャレンジしてみてくださいね！
以上、『Content Slide』の設置解説でした。。

Facebook Comments

この記事はお役に立ちましたか？

いつも応援ありがとうございます。
もしお役に立ちましたら応援クリックをいただけますと励みになります＾＾

【関連記事】この記事を読んだ人はこんな記事も見ています♪

• WORDPRESS高速化プラグイン『wp super cache』は要注意！
• WORDPRESS記事にFACEBOOKコメント欄を追加する方法
• WORDPRESSをルートディレクトリ（ドメイン直下）に移動する方法
• WORDPRESSをサブディレクトリからサブドメインに移転する方法
• Chromeを使いこなせ！アフィリ向けエクステンション8種類

簡単に美しいホームページが作成できる！吉田デザインの名作【INFOPLATE】

タグ

Content Slide、wordpress、アニメーション、スライド、プラグイン、ワードプレス、複数バナー

この投稿のトラックバックURL: