コンテンツをスライドさせるWordPressプラグイン《WordPress Content Slide》

Web制作テクニック
WordPress Content Slide

《WordPress Content Slide》はコンテンツをスライドショーとして表示できるWordPressプラグインです。写真のみを美しく魅せるスライドショーとして使う事もできますが、画像とテキストを使ったコンテンツを効率良く、しかも目を魅くような効果で見せる事ができます。
-> サンプルデモ 1
-> サンプルデモ 2

[adsense]

プラグインの入手と有効化

  • こちらのページから content-slide.zip ファイルをダウンロードして解凍する
  • content-slide フォルダを wp-content/plugins ディレクトリにアップロードする
  • WordPress 管理画面にログインする
  • ダッシュボードからプラグインメニューに入る
  • Content Slide Plugin の項目で「使用する」をクリックしてプラグインを有効化させる

※プラグインの新規追加でダウンロードした zip ファイルを直接インストール、もしくはプラグインを検索してインストールする事もできます。

コンテンツスライドの設置方法

このスライドを設置するには php コードの追記が必要となります。スライドを表示させたいテーマファイル(.php)の任意の場所に、下記の php コードを記述します。

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

例えばトップページのみにスライドを表示させたい場合は、header.php の body タグ内、もしくは index.php の任意の場所に下記のような php コードを記述します。

<?php if (is_front_page()) { 
if (function_exists('wp_content_slider')) { wp_content_slider(); }} ?>

各種オプションの設定

WordPress Content Slideプラグインを有効化させると、WordPress 管理画面のメニュー項目に左図のような Content Slide メニューが追加されますので、そこからオプション設定に入る事ができます。

基本的な設定

WordPress Content Slide
  • Image width/height: スライドの幅と高さ
  • Border width: スライドのボーダーの太さ
  • Border Color: スライドのボーダーカラー
  • Font family: コンテンツに挿入するテキストのフォントファミリー
  • Text font size: コンテンツに挿入するテキストのフォントサイズ
  • Text color: コンテンツに挿入するテキストのフォントカラー
  • Heading font size: コンテンツに挿入する見出しのフォントサイズ
  • Heading color: コンテンツに挿入する見出しのフォントカラー
  • Background color: コンテンツに挿入する見出し・テキストの背景色

エフェクト&アニメーションの設定

WordPress Content Slide
  • Squares per width: スライドエフェクトに用いられるスクエアの横サイズ
  • Squares per height: スライドエフェクトに用いられるスクエアの縦サイズ
  • Delay between images in ms: コンテンツを切り替える早さの間隔
  • Delay beetwen squares in ms: スライドエフェクトの速度
  • Opacity of title and navigation: タイトルとスライド左右のナビゲーションの透過値
  • Speed of title appereance in ms: テキストのフェードイン効果の速度
  • Effect: エフェクトの種類
  • Mouse Over Pause: マウスオーバーでスライドを停止させるか否か
  • Navigation Previous/Next: 戻る・進むナビゲーション(スライド両端)の表示/非表示
  • Navigation Buttons: スライドナビゲーション(スライド直下)の表示/非表示
  • Navigation Buttons Color: スライドナビゲーションの色

イメージソースの設定

WordPress Content Slide
  • Display Heading and Text?: スライドに見出しとテキストを表示/非表示
  • Open Images/Links In New Window?: 画像に指定したリンクを新しいウィンドウで開くか否か
  • Order Images Randomally?: コンテンツが表示される順番をランダムにするか否か
  • Use custom images?: スライドに使用するコンテンツ
    Yes, Custom Images.(この設定画面で新たに設定する画像・文章を使う)
    No, Useing Posts from a Category(投稿記事カテゴリーのコンテンツを使う)
  • Number of custom Images: スライドに使用するコンテンツの数
  • *Select a Category: スライドさせたい記事カテゴリーを選択
  • *No. of posts/images: スライドに使用するコンテンツの数

* Use custom images? の項目で記事カテゴリーに投稿されているコンテンツを選んだ場合

Custom Image 1(2,3…)

  • Image 1(2,3…) SRC: スライドショーにしたい画像のURL
  • Image 1(2,3…) Link: 画像に貼付けるリンク先のURL
  • Image 1(2,3…) Heading: コンテンツの見出し
  • Image 1(2,3…) Text: コンテンツの文章

ダウンロード&制作者ページ

-> WordPress Content Slide
-> WordPress Content Slide Plugin