店舗物件を探すなら

前回は、文章部分にJQuery Featured Content Galleryを設置する手順をご紹介しましたが、今回は文章部分ではなくトップの画像部分に利用する場合の手順です。

※WordPress不動産・店舗テンプレートセット001～004はすべて同じ手順ですがその他のテーマはCSSを若干変更する必要があります。

JQuery Featured Content Galleryをサンプルサイトにて設置してみましたのでご参考ください。右の画像をクリックすると確認できます。

トップの画像部分にJQuery Featured Content Galleryを導入する手順

設置に関してはJQuery Featured Content GalleryでFlashを実現！をご参考ください。

①『管理画面』の『外観』項目にある『テーマ編集』から『style.css』に以下のコードを追加します。

#main #jfcg{ margin:5px 0 285px 10px; }

※style.cssの最下部に迷わず追加してください。コピーペーストでOKです。

②メインインデックス（index.php）を開いてコードを変更します

<?php get_header(); ?>
<div id=”main”> <div id=”top_img”><img src=”<?php echo bloginfo(‘template_url’); ?>/img/top_img.jpg” alt=”私たちは、自然に優しい生活を応援します。” /></div> <div id=”content”>

の赤字の箇所を下記に変更してください

<?php get_header(); ?><div id=”main”> <?php do_action(‘jfc_gallery’); ?> <div id=”content”>

③captionを消す
Captionとは画像の下に流れる文字ですがトップページにあると結構邪魔ですので消します。 『Jquery-featured-content-gallery』内の『jfc.php』というファイル内に<h2>’.$frame->caption.’</h2>というコードがありますので削除してください。

$slideshow_code .= ‘    <div><a href=”‘.$frame->link.’” ><img src=”‘.$frame->picture.’” alt=”‘.$frame->name.’” ‘.$width_tag.’ ‘.$height_tag.’/><h2>’.$frame->caption.’</h2></a></div>’. “n”; }

else { $slideshow_code .= ‘    <div><a href=”‘.$frame->link.’” ><img src=”‘.$frame->picture.’” alt=”‘.$frame->name.’” ‘.$width_tag.’ ‘.$height_tag.’/><h2>’.$frame->caption.’</h2></a></div>’ . “n”; }

やはりサイトに動きがあるといい感じですね！