2016年1月1日追記 – プラグイン「Content Slide」は使えません。
WordPress公式プラグインディレクトリから削除されています。
[2013年3月20日現在/WordPress V3.5.1/Content Slide V1.4.2]
「Content Slide」プラグインを使用すると、トップページなどで画像を交互に表示できます。
古屋兎丸非公式Webサイトでは「Content Slide」を使用して単行本案内の画像を表示し、クリックすると該当の詳細ページにジャンプするよう設定されています。
プラグインをインストールし、表示する画像を設定し、以下のコードを追加すると設定した間隔や効果で複数の画像が表示されます。
|
1 |
<?php if (function_exists('wp_content_slider')) { wp_content_slider(); } ?> |
ただしプラグインを有効化するだけで、すべてのページに大量のJavaScriptとスタイルが埋め込まれてしまいます。ちょっと気持ち悪いですね。そのとりあえずの回避方法はこちらです。
画像スライドプラグイン「Content Slide」で不要なコードがすべてのページに埋め込まれる (解決)
インストール
- WordPress管理画面の「ダッシュボード」-「新規追加」を選択する。
- 「検索」ボックスに「Content Slide」と入力し、「プラグインの検索」をクリックする。
- 「Content Slide」プラグインの「今すぐインストール」をクリックする。
- 「(ネットワークで)有効化」をクリックする。
画像の準備
ここでは複数枚の画像を交互に表示します。
- 同じサイズの画像を複数枚準備する。古屋兎丸非公式Webサイトのトップページの場合は 960 x 250 を使用しています。
- ftp で画像をアップロードする。場所は「…/wp-content/plugins/content-slide/images」の下にしました。
設定
- WordPress管理画面の左サイドメニューで「Content Slide」をクリックする。
- 「General Settings」で以下を設定する。
- Image width = 960
- Image height = 250
- 「Effects & Animation Settigns」で以下を設定する。
- Squares per widhth = 1
- Squares per height = 1
- Delay between images in ms = 6000
- Effect = rain
- 「Imagess Sources Settings」で以下を設定する。
- Use customer Images? = Yes, Custom Images
- Number of custom Images = 3
- 一度、Save Settings をクリックする。
- Custom Image 1 で以下を設定する。
- Image 1 SRC = http://usamaru.unofficialtokyo.com/wp-content/plugins/content-slide/images/ad_teiichi5.jpg (画像へのリンク)
- Image 1 Link = /books/teiichi (画像がクリックされた際のジャンプ先)
- Customer Image 2、3 も同様に設定する。
- Save Settings をクリックする。
使用方法
トップページ用のhome.phpに、以下のコードを挿入する。
|
1 |
<?php if (function_exists('wp_content_slider')) { wp_content_slider(); } ?> |
共通のindex.phpを使用して、トップページのみに表示するのであれば、以下のコードになります。
|
1 2 |
<!--?php if (is_front_page()) { if (function_exists('wp_content_slider')) { wp_content_slider(); }} ?--> |
ただし上のような配慮をしてもプラグインを有効化するだけで、すべてのページに以下の様なJavaScriptとスタイルが埋め込まれてしまうのは前述のとおり。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> var $jquery = jQuery.noConflict(); $jquery(document).ready(function() { $jquery('#wpcontent_slider').coinslider( { width: 960, height: 250, : : #wpcs_link_love,#wpcs_link_love a{display:none;} </style> <!-- End Content Slider Settings --> |
回避方法はこちら。将来のバージョンではサポートされることを願います。
画像スライドプラグイン「Content Slide」で不要なコードがすべてのページに埋め込まれる (解決)