サポート » 使い方全般 » Jquery 自動スライドショーの設置方法

  • サイトのTOPに自動スライドする画像を表示させたく
    調べていたら下記のiqueryを見つけました。

    自動スライドするコンテンツボックス

    設置方法等を拝読し、試行錯誤を重ねましたが
    動きません、、

    現在の環境は

    サーバ:さくらインターネットビジネス
    使用テーマ:tanzaku

    です

    現在の導入手順としては
    Jqueryプラグインをダウンロード

    ②解答後、展開されるファイルの【images】フォルダの中身をテーマの【images】にコピー

    ③同じく【js】フォルダの中身をテーマの【js】フォルダにコピー

    ④同じくスタイルシートの中身をテーマのスタイルシートに追記コピー

    ⑤スクリプトの読み込みコードをテーマの(header.php)内の<header>直下に記述

    <script type=”text/javascript” src=”js/jquery-1.2.6.min.js”></script>
    <script type=”text/javascript” src=”js/jquery-easing-1.3.pack.js”></script>
    <script type=”text/javascript” src=”js/jquery-easing-compatibility.1.2.pack.js”></script>
    <script type=”text/javascript” src=”js/coda-slider.1.1.1.pack.js”></script>

    ⑥スライドボックス設定コードを上記の続きに記述

    <script type=”text/javascript”>
    var theInt = null;
    var $crosslink, $navthumb;
    var curclicked = 0;

    theInterval = function(cur){
    clearInterval(theInt);

    if( typeof cur != ‘undefined’ )

    curclicked = cur;
    $crosslink.removeClass(“active-thumb”);
    $navthumb.eq(curclicked).parent().addClass(“active-thumb”);
    $(“.stripNav ul li a”).eq(curclicked).trigger(‘click’);

    theInt = setInterval(function(){
    $crosslink.removeClass(“active-thumb”);
    $navthumb.eq(curclicked).parent().addClass(“active-thumb”);
    $(“.stripNav ul li a”).eq(curclicked).trigger(‘click’);
    curclicked++;
    if( 6 == curclicked )

    curclicked = 0;

    }, 3000);
    };
    $(function(){
    $(“#main-photo-slider”).codaSlider();
    $navthumb = $(“.nav-thumb”);
    $crosslink = $(“.cross-link”);
    $navthumb
    .click(function() {
    var $this = $(this);
    theInterval($this.parent().attr(‘href’).slice(1) – 1);
    return false;
    });
    theInterval();
    });
    </script>

    ⑦そして設置コードをテーマの(index.php)内 のどこに記述すればよいかわかりません、、
    ※あちこちに試行錯誤してみましたが、まともに表示されません。

    参考サイトには

    コンテンツは class=”wrapper” 内に配置してください。
    パネルは、<div class=”panel”>~</div> をコピペして増やしていってください。

    と書かれていますが、使用しているテーマのどのファイルでどこに記述すべきかわかりませn。

    恐らく(index.php)内のどこかではないかと思っていますが、わかりません。
    ちなみに(index.php)の記述内容は

    <?php get_header();

    // [grid column setting]
    $col_w = 290; // width of grid column
    $gap_w = 35; // padding + margin-right (15+15+5)
    $max_col = 2; // max column size (style div.x1 ~ xN)

    // * additional info *
    // check also “style.css” and “header.php” if you change $col_w and $gap_w.
    // – style.css:
    // div.x1 ~ xN
    // div.grid-item
    // div.single-item
    // … and maybe #sidebar2 li.widget.
    // – header.php:
    // gridDefWidth in javascript code.
    //
    // if you want to show small images in main page always, set $max_col = 1.

    // [grid image link setting]
    $flg_img_forcelink = true; // add/overwrite a link which links to a single post (permalink).
    $flg_img_extract = false; // in single post page, extract thumbnail link to an original image.
    $flg_obj_fit = ‘large-fit’; // none | small-fit | large-fit … how to fit size of object tag.

    // * additional info *
    // if you use image popup utility (like Lightbox) on main index, set $flg_img_forcelink = false;
    ?>

    <?php if (is_singular()) : $is_top_single = true; /* wide column for single post */ ?>

    <div id=”single-wrapper”>

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <div <?php post_class(‘single-item’); ?> id=”post-<?php the_ID(); ?>”>
    <h2 class=”post-title”>” rel=”bookmark”><?php the_title(); ?></h2>
    <div class=”post-body”>
    <?php
    if ($flg_img_extract) {
    $content = get_the_content();
    $content = apply_filters(‘the_content’, $content);
    $content = adjust_single_image($content);
    echo $content;
    }
    else {
    the_content();
    }
    ?>
    </div>
    <?php wp_link_pages(‘before=<p class=”pagination” id=”post-pagination”><span class=”prefix”>’ . __(‘Pages:’) . ‘</span>’); ?>
    <p class=”post-meta”>
    Published on <?php the_time( get_option(‘date_format’) ); ?> <?php the_time(); ?>.
    Filed under: <?php the_category(‘, ‘) ?> <?php the_tags(‘Tags: ‘, ‘, ‘); ?>
    <?php edit_post_link(__(“Edit This”), ‘(‘, ‘)’); ?>
    </p>
    </div>

    <?php comments_template(); ?>

    <?php endwhile; else : ?>

    <div class=”single-item”>
    <h2>Not Found</h2>
    <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
    </div>

    <?php endif; ?>

    </div><!– /single-wrapper –>

    <?php /* make a new query for grid items (in single page) */
    $new_query_arg = ‘paged=’.$paged;

    // use this code if you want filter items by category.
    /* $arr_catID = array();
    foreach( get_the_category() as $cat) $arr_catID[] = $cat->cat_ID;
    if ( count($arr_catID) ) $new_query_arg .= ‘&cat=’ . join(‘,’, $arr_catID);
    */

    query_posts($new_query_arg);
    ?>

    <?php endif; /* end of if is_singular() */ ?>

    <?php get_sidebar(); ?>

    <div id=”grid-wrapper”>

    <?php if (have_posts()) :
    if ( $is_top_single ) $GLOBALS[‘more’] = false; //important
    while (have_posts()) : the_post(); ?>
    <?php
    $content = get_the_content(‘Details »’);
    $content = apply_filters(‘the_content’, $content);
    list($col_class, $grid_img) = adjust_grid_image(
    $content,
    $col_w,
    $gap_w,
    $max_col,
    $flg_img_forcelink,
    $flg_obj_fit
    );
    ?>
    <div <?php post_class(‘grid-item ‘ . $col_class); ?> id=”post-<?php the_ID(); ?>”>
    <h2 class=”post-title”>” rel=”bookmark”><?php the_title(); ?></h2>
    <?php if ($grid_img) echo ‘<div class=”grid-image”>’ . $grid_img . ‘</div>’; ?>
    <div class=”post-body”>
    <?php
    $content = preg_replace(‘/<img(?:[^>]+?)>/’, ”, $content); // remove img tags
    $content = preg_replace(‘/<a([^>]+?)><\/a>/’, ”, $content); // remove empty a tags
    $content = preg_replace(‘/<p([^>]*?)><\/p>/’, ”, $content); // remove empty p tags
    $content = preg_replace(‘/<object(.+?)<\/object>/’, ”, $content); // remove object tags
    echo $content;
    ?>
    </div>
    <p class=”post-meta”>
    Published on <?php the_time( get_option(‘date_format’) ); ?> <?php the_time(); ?>.
    Filed under: <?php the_category(‘, ‘) ?> <?php the_tags(‘Tags: ‘, ‘, ‘); ?>
    <?php edit_post_link(__(“Edit This”), ‘(‘, ‘)’); ?>
    <?php /*comments_popup_link();*/ ?>
    </p>
    </div>

    <?php endwhile; else : ?>

    <div class=”grid-item x1″>
    <h2>Not Found</h2>
    <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
    </div>

    <?php endif; ?>

    </div><!– /grid-wrapper –>

    <div class=”pagination” id=”grid-pagination”>
    <?php paginate_links2($is_top_single); ?>
    </div>

    <?php /* reset the query */
    wp_reset_query();
    ?>

    <?php get_sidebar(‘2’); ?>

    </div><!– /container –>

    <?php get_footer(); ?>

    とデフォルトでは記述されております。

    Qこの中のどこに記述すればよいでしょうか?
    Qそれとも、それ以前に他の問題があるのでしょうか?

    私の不勉強さ故、マナー違反等している場合は大変申し訳ございません
    ご教授いただければ幸いで御座います

    何卒宜しくお願い致します

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • まず、全部コード見てませんけど、

    ⑤スクリプトの読み込みコードをテーマの(header.php)内の<header>直下に記述

    の中身で、src="js/jquery-1.2.6.min.js"が動かないと思います。

    仮にルートでWordPressを公開していると仮定して、上記指定だとhttp://example.com/js/jquery-1.2.6.min.jsを読みに行きます。しかし、実際にファイルが存在する場所はhttp://example.com/wp-content/themes/tanzaku/js/jquery-1.2.6.min.jsになるはずなのでjsファイルが読めません。

    もっと簡単な方法としてスライドショー関係のプラグインがいくつかあるので、WordPressのプラグインディレクトリで検索してください。(表示方法に違いがあるのでその中で自分が使いたいものを選んでください)

    又はhybrid news等のテーマファイルを参照してスライドショー部分のコードを応用する方法もあります。

    スレッド開始 morinosuke

    (@morinosuke)

    shokun0803様

    アドバイスありがとうございます
    記述を見直してみます

    ありがとうございました

    takuya様

    ありがとうございます
    引き続き探してみます

    他のテンプレートからの応用も試みてみましたが
    難しくてわかりませんでした、、、

    引き続き、チャレンジしてみます
    ありがとうございます

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「Jquery 自動スライドショーの設置方法」には新たに返信することはできません。