WEB DESIGN (B)LOG

ノンプログラマーなWebデザイナーによるWordpress、HTML5、スマートフォンサイト制作関連などWebサイト制作に関するブログ

WordpressでjQueryスライドショーを管理画面から変更・追加できるようにする方法

:WordPress

screenshot.1.jpg


WordpressをベースにWebサイトを構築し、
トップページにjQueryのスライドショーを設置した際、
(HTMLがわからない)お客さんが管理画面からスライドショーの
画像、リンクを変更できるようにする方法です。

管理画面で変更できるスライドショーのWordpressプラグインもありますが、
なかなか細かい希望を叶えることが難しいので、
jQueryのスライドショーと、
通常はブログのサイドバーで利用するWordpressの「ウィジェット」機能を、
Wordpressプラグイン「Image Widget」を使い、
組み合わせて、自由度の高い管理可能なスライドショーを構築します。

1.jQueryのスライドショーを用意

まずスライドショーについてはどんなものでも構わないと思いますが、 自作・プラグインで用意します。
参考: 【jQuery】かっこいいスライドショーまとめ - NAVER まとめ


2.Wordpressプラグイン「Image Widget」をインストール


次にWordpressのプラグイン「Image Widget」をWordpressにインストールします。

Image Widgetは、
管理画面のウィジェットの設定画面から、
画像をアップロードしたり、リンクなどを設定できるという便利なプラグインです。
これがあればHTMLがわからない人でも、
簡単に画像、リンクなどを更新することが可能です。

使い方:WordPressでサイドバーにバナーを設置するのに便利なImage Widgetプラグイン

インストールし有効化すると、
ウィジェットの「利用できるウィジェット」欄に「Image Widget」というウィジェットができています。

3.ウィジェットを設定する

「Image Widget」をインストール、有効化できたら、 ウィジェットの設定をします。
基本的な設定はこちらで:WordPressのウィジェットを自作するためのTips

上記を参考にfunction.phpを設定、


参考)listをループさせるjQueryの場合


<?php


register_sidebar
( array(
    
'name' => __'top banner' ),
    
'id' => 'top_bnr',
    
'before_widget' => '<li>',
    
'after_widget' => '</li>',
) );
?>

テンプレートのスライドショーで各スライドを入れる箇所に、
ウィジェットを表示するためのコードを挿入します。

参考)



<div id="slider">

                <ul class="clearfix">

                    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('main_slide') ) : ?><?php endif; ?>

                </ul>

            </div>


これで基本的な設定は完了です。

あとは「Image Widget」を設定、
アップロードする画像サイズなどをメディアで設定すれば、
ウィジェットの設定画面から画像やリンクを変更できるスライドショーになります。

pagetop