【freo】【freoTips】【プラグイン系TIPS】スライドショーをバナー付きリンクプラグインで管理する方法
- 2016/12/21 10:41
- バナー付きリンクプラグイン
- 新着リンクプラグイン
- スライドショー
- 4
サイトに表示するスライドショーなどをバナー付きリンクプラグインで利用する場合の利用例です。
単純に画像を表示したいだけなら、メディア一括表示プラグインを利用してスライドショーを作成しても良いのですが、スライドショーに
- 画像にリンクを貼りたい
- 画像にタイトル（ファイル名以外の文字列）をつけたい
- 画像のキャプションとしてテキスト文章を表示したい
などの場合には、画像の登録・引用・タイトルや本文の登録のできるバナー付きリンクプラグインを活用した方が良いと思います。
スライドショーを設置する
スライドショーの設置は下記を参考にしてください。
32877：【html】画像をスライドショーで表示するjQuery
今回は、上記記事内FlexSliderを利用するものとします。
解説はonze：【jQuery】超万能スライダー FlexSlider の使い方をマスターする。を参考にしてください。
バナー付きリンクプラグインを実装する
当サイトからバナー付きリンクプラグインをDLして実装してください。
バナー付きリンクプラグインに登録した情報は、バナー付きリンク画面・デフォルト画面・エントリー画面・カテゴリー画面・エントリー個別表示（view）画面・ページ画面で表示することができます。
その他の画面にスライドショーを設置したい場合は、[freo/libs/plugins/config.link.php]のdisplay設定を変更してください。
参考リンク：freo「プラグインを色々なページに表示する」
スライドショー用のテンプレートを作成する
エディタで新しいページを開き、「imageslide.html」として保存します。文字コードは「UTF-8」、改行コードは「CR+LF」で作成してください。保存場所は[freo/templates/plugins/link]フォルダがいいでしょう。
このテンプレート内にスライドショー用のコードを書き込み、スライドショーを設置したい部分のテンプレート（例えばデフォルト画面に設置したいなら[freo/templates/internals/default/default.html]）でincludeするといいでしょう。
smartyのinclude機能についての説明はコチラを御覧ください。
imageslide.htmlの内容は、スライドショーのHTML部分の記述を参考に作成します。
FlexSliderでは、下記のようなHTMLソースが必要です。
<div class="flexslider"> <ul class="slides"> <li><a href="http://"><img src="slider1.jpg" /></a><p class="flex-caption">ここはキャプションです</p></li> <li><a href="http://"><img src="slider2.jpg" /></a><p class="flex-caption">ここはキャプションです</p></li> </ul> </div>
バナー付きリンクプラグインに登録した情報で、上記ソースを作成してみます。
<div class="flexslider">
<ul class="slides">
<!--{foreach from=$plugin_links|smarty:nodefaults item='plugin_link'}-->
<li><!--{if $plugin_link.url}--><a href="{$plugin_link.url}"><!--{/if}--><!--{if $plugin_link_files[$plugin_link.id].file}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}plugins/link_files/{$plugin_link.id}/{$plugin_link_files[$plugin_link.id].file}" alt="{$plugin_link.title}" /><!--{elseif $plugin_link.imageurl}--><img src="{$plugin_link.imageurl}" alt="{$plugin_link.title}" /><!--{else}-->{$plugin_link.title}<!--{/if}--><!--{if $plugin_link.url}--></a><!--{/if}--><!--{if $plugin_link.text}--><p class="flex-caption">{$plugin_link.text}</p><!--{/if}--></li>
<!--{/foreach}-->
</ul>
</div>
以上のようにすればOKです。
内容は、下記の通りです。
<div class="flexslider">
<ul class="slides">
<!--{$plugin_links配列を'plugin_link'として繰り返し表示するここから}-->
<li><!--{もしリンクURLがあればここから}--><a href="{$リンクURL}"><!--{もしリンクURLがあればここまで}--><!--{もしリンクファイル（バナー）が登録されていればここから}--><img src="{$freo設置URL}{$ファイル・ディレクトリ名}plugins/link_files/{$リンク記事ID}/{$リンクファイル（バナー）のファイル名}" alt="{$リンク記事タイトル}" /><!--{もしバナーURLが登録されていたら}--><img src="{$バナーURL}" alt="{$リンク記事タイトル}" /><!--{そうじゃなければ}-->{$リンク記事タイトル}<!--{もしリンクファイル（バナー）が登録されていればここまで}--><!--{もしリンクURLがあればここから}--></a><!--{もしリンクURLがあればここまで}--><!--{もしリンク記事本文があればここから}--><p class="flex-caption">{$リンク記事本文}</p><!--{もしリンク記事本文があればここまで}--></li>
<!--{$plugin_links配列を'plugin_link'として繰り返し表示するここまで}-->
</ul>
</div>
スライドショーに利用するリンクをカテゴリーで限定する
テンプレートを編集してスライドショーに利用するリンクをカテゴリーで限定する
上記解説した方法だと、バナー付きリンクプラグインに登録した全てのリンク記事がスライドショーになってしまいますが、例えば、カテゴリーID「slideshow」のカテゴリーが選択されているリンク記事のみをスライドショーにしたい場合は、下記のようにすればOKです。
<div class="flexslider">
<ul class="slides">
<!--{foreach from=$plugin_links|smarty:nodefaults item='plugin_link'}-->
<!--{if $plugin_link.category_id == 'slideshow'}-->
<li><!--{if $plugin_link.url}--><a href="{$plugin_link.url}"><!--{/if}--><!--{if $plugin_link_files[$plugin_link.id].file}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}plugins/link_files/{$plugin_link.id}/{$plugin_link_files[$plugin_link.id].file}" alt="{$plugin_link.title}" /><!--{elseif $plugin_link.imageurl}--><img src="{$plugin_link.imageurl}" alt="{$plugin_link.title}" /><!--{else}-->{$plugin_link.title}<!--{/if}--><!--{if $plugin_link.url}--></a><!--{/if}--><!--{if $plugin_link.text}--><p class="flex-caption">{$plugin_link.text}</p><!--{/if}--></li>
<!--{/if}-->
<!--{/foreach}-->
</ul>
</div>
内容は下記の通りです。
<div class="flexslider">
<ul class="slides">
<!--{$plugin_links配列を'plugin_link'として繰り返し表示するここから}-->
<!--{もしリンク記事のカテゴリーIDが'slideshow'であればここから}-->
<li>～中略～</li>
<!--{もしリンク記事のカテゴリーIDが'slideshow'であればここまで}-->
<!--{$plugin_links配列を'plugin_link'として繰り返し表示するここまで}-->
</ul>
</div>
以上のように、 カテゴリーIDを限定するための条件式を追加しています。
ただし、この場合、[管理画面→設定管理→プラグインの設定→バナー付きリンク→エントリー・ページ・TOP画面等その他画面での１ページの表示件数]で設定された件数よりも多いリンク記事が登録されていた時、２ページ目以降に登録されたリンク記事は表示されません。
[管理画面→設定管理→プラグインの設定→バナー付きリンク→エントリー・ページ・TOP画面等その他画面での１ページの表示件数]を総リンク登録件数よりも多く設定すれば、全てのバナー付きリンク記事から限定したカテゴリーのリンク記事のみを表示することができますが、
- バナー付きリンクプラグインに多くのリンク記事を登録している場合
- [管理画面→設定管理→プラグインの設定→バナー付きリンク→エントリー・ページ・TOP画面等その他画面での１ページの表示件数]を総リンク登録件数よりも多くすることが出来ない場合
は、総リンク数に関係なく限定したカテゴリーの新着リンクを表示してくれる新着リンクプラグインを利用するとよいでしょう。
新着リンクプラグインを利用してスライドショーに利用するリンクをカテゴリーで限定する
新着リンクプラグインは、直近に登録したリンク記事から、新着リンクとして表示すると設定した件数分のリンクを表示するプラグインです。
総リンク記事からカテゴリーを限定して抽出することもできます。
新着リンクプラグインをスライドショーとは別の用途で既に利用している場合は、同じプラグインを複数設置する方法を参考にプラグインを複製して利用してください。
新着リンクプラグインに登録した情報は、バナー付きリンク画面・デフォルト画面・エントリー画面・カテゴリー画面・エントリー個別表示（view）画面・ページ画面で表示することができます。
その他の画面にスライドショーを設置したい場合は、[freo/libs/plugins/config.link_recently.php]のdisplay設定を変更してください。
新着リンクをプラグインを実装後、[管理画面→設定管理→プラグインの設定→新着リンクプラグイン]で限定するカテゴリーIDを設定してください。
その後、imageslide.htmlを下記のように編集してください。
<div class="flexslider">
<ul class="slides">
<!--{foreach from=$plugin_link_recentries|smarty:nodefaults item='plugin_link_recently'}-->
<li><!--{if $plugin_link_recently.url}--><a href="{$plugin_link_recently.url}"><!--{/if}--><!--{if $plugin_link_recently_files[$plugin_link_recently.id].file}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}plugins/link_files/{$plugin_link_recently.id}/{$plugin_link_recently_files[$plugin_link_recently.id].file}" alt="{$plugin_link_recently.title}" /><!--{elseif $plugin_link.imageurl}--><img src="{$plugin_link.imageurl}" alt="{$plugin_link.title}" /><!--{else}-->{$plugin_link_recently.title}<!--{/if}--><!--{if $plugin_link_recently.url}--></a><!--{/if}--><!--{if $plugin_link_recently.text}--><p class="flex-caption">{$plugin_link_recently.text}</p><!--{/if}--></li>
<!--{/foreach}-->
</ul>
</div>
上記は、「スライドショー用のテンプレートを作成する」で解説したソースを新着リンクプラグイン用に変更したものです。
以上のようにすると、新着リンクプラグインを利用してスライドショーに利用するリンクをカテゴリーで限定することができます。
