Wsparcie » Wtyczki » Jak zainstalować slider na wordpressie?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Podany skrypt jako przykład musisz umieścić w nagłówku (header).
    Oczywiście obejmując całą zawartość, która w headerze jest podana i będzie wykorzystywana do slidera.
    Wszystko jest ładnie napisane na tej stronie, jak to wykonać. Na sucho bez szczegółów nie jestem w stanie nic więcej pomóc.

    Thread Starter naaatasha

    (@naaatasha)

    mój plik header.php wygląda tak:

    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>" />
        <?php cpotheme_description(); ?>
        <?php cpotheme_keywords(); ?>
        <link rel="stylesheet" href="feature-carousel.css" charset="utf-8" />
        <script src="scripts/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="scripts/jquery.featureCarousel.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="scripts/jquery.featureCarousel.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
          $(document).ready(function() {
            var carousel = $("#carousel").featureCarousel({
              // include options like this:
              // (use quotes only for string values, and no trailing comma after last option)
              // option: value,
              // option: value
            });
    
            $("#but_prev").click(function () {
              carousel.prev();
            });
            $("#but_pause").click(function () {
              carousel.pause();
            });
            $("#but_start").click(function () {
              carousel.start();
            });
            $("#but_next").click(function () {
              carousel.next();
            });
          });
        </script>
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
        <link href='http://fonts.googleapis.com/css?family=Asap' rel='stylesheet' type='text/css'>
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    
        <title><?php cpotheme_title(); ?></title>
        <link rel="stylesheet" href="css/style.css">
    	<link rel="stylesheet" href="css/advanced-carousel.css">
        <?php if(is_singular() && get_option('thread_comments')) wp_enqueue_script('comment-reply'); ?>
        <?php wp_head(); ?>
    </head>
    
    <?php $bg_color = cpotheme_get_option('cpo_bg_color'); if($bg_color == '') $bg_color = '#ddd'; ?>
    <body <?php body_class(); ?> style='background-color:<?php echo $bg_color; ?>'>
        <div class="wrapper">        
    
            <div id='header'>
                <div class="logo">
                    <?php if(cpotheme_get_option('cpo_general_texttitle') == 0): ?>
                    <?php if(cpotheme_get_option('cpo_general_logo') == ''): ?>
                    <a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri().'/images/logo.png'; ?>" alt="<?php echo bloginfo('name'); ?>"/></a>
                    <?php else: ?>
                    <a href="<?php echo home_url(); ?>"><img src="<?php echo cpotheme_get_option('cpo_general_logo'); ?>" alt="<?php echo bloginfo('name'); ?>"/></a>
                    <?php endif; ?>
                    <?php endif; ?>
    
                    <?php if(is_singular() && !is_front_page()): ?>
                        <span class="title<?php if(cpotheme_get_option('cpo_general_texttitle') == 0){ ?> hidden<?php } ?>"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></span>
                    <?php else: ?>
                        <h1 class="title<?php if(cpotheme_get_option('cpo_general_texttitle') == 0){ ?> hidden<?php } ?>"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
                    <?php endif; ?>
                    <span class="description"><?php bloginfo('description'); ?></span>
                </div>
                <div id='menu'>
                    <?php wp_nav_menu(array('menu_class' => 'nav_main', 'theme_location' => 'main_menu')); ?>
                </div>
                <div id='clear'></div>
            </div>
    
        <a id="but_prev" href="#">PREV</a> | <a id="but_pause" href="#">PAUSE</a> | <a id="but_start" href="#">START</a> | <a id="but_next" href="#">NEXT</a> 
    
        <div class="carousel-container">
    
          <div id="carousel">
            <div class="carousel-feature">
              <a href="#"><img class="carousel-image" alt="Image Caption" src="images/sample1.jpg"></a>
              <div class="carousel-caption">
                <p>
                  This area is typically used to display captions associated with the images. They are set to hide and fade in on rotation.
                </p>
              </div>
            </div>
            <div class="carousel-feature">
              <a href="#"><img class="carousel-image" alt="Image Caption" src="images/sample2.jpg"></a>
              <div class="carousel-caption">
                <p>
                  The background will expand up or down to fit the caption.
                </p>
              </div>
            </div>
            <div class="carousel-feature">
              <a href="#"><img class="carousel-image" alt="Image Caption" src="images/sample3.jpg"></a>
              <div class="carousel-caption">
                <p>
                  Images can be placed here as well.
                </p>
              </div>
            </div>
            <div class="carousel-feature">
              <a href="#"><img class="carousel-image" alt="Image Caption" src="images/sample4.jpg"></a>
            </div>
            <div class="carousel-feature">
              <a href="#"><img class="carousel-image" alt="Image Caption" src="images/sample5.jpg"></a>
              <div class="carousel-caption">
                <p>
                  The background color of the caption area can be changed using CSS. The opacity can be changed in the options, but it will also change the opacity of the text.
                </p>
              </div>
            </div>
          </div>
    
          <div id="carousel-left"><img src="images/arrow-left.png" /></div>
          <div id="carousel-right"><img src="images/arrow-right.png" /></div>
        </div>
    		<?php if(cpotheme_get_option('cpo_slider_always') == 1 || is_home() || is_front_page()){ ?>
    		<?php $slider_posts = new WP_Query('post_type=cpo_slide&posts_per_page=-1&order=ASC&orderby=menu_order'); ?>
            <?php if($slider_posts->post_count > 0): $slide_count = 0; ?>
            <div id='slider'>
                <?php if($slider_posts->post_count > 1): ?>
                <div class='prev'></div>
                <div class='next'></div>
                <?php endif; ?>
                <ul class="slider_container">
                    <?php while($slider_posts->have_posts()): $slider_posts->the_post(); ?>
                    <?php $slide_count++; ?>
                    <?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), array(960, 700), false, ''); ?>
                    <li id="slider_slide_<?php echo $slide_count; ?>" style="background:url(<?php echo $image_url[0]; ?>) no-repeat center;">
                        <div class="content">
                            <h2><?php the_title(); ?></h2>
    
                            <?php the_content(); ?>
                        </div>
                    </li>
                    <?php endwhile; ?>
                </ul>
                <?php if($slider_posts->post_count > 1): ?>
                <div class='pages'></div>
                <?php endif; ?>
            </div>
            <?php endif; ?>
            <?php } ?>
    
            <?php if(!is_home() && !is_front_page()){ ?>
            <div id='breadcrumb'>
                <?php cpotheme_layout_breadcrumb(); ?>
            </div>
            <?php } ?>
    
            <div id='main'>
    			<?php if(is_home() || is_front_page()){ ?>
    			<?php $feature_posts = new WP_Query('post_type=cpo_feature&posts_per_page=-1&order=ASC&orderby=menu_order'); ?>
    			<?php if($feature_posts->have_posts()): $feature_count = 0; ?>
    			<div id="features">
    				<?php while($feature_posts->have_posts()): $feature_posts->the_post(); $feature_count++; ?>
    				<div class="feature<?php if($feature_count % 3 == 0) echo ' feature_right'; ?>">
    					<?php the_post_thumbnail('portfolio'); ?>
    					<h2><?php the_title(); ?></h2>
    					<div class="content"><?php the_content(); ?></div>
    				</div>
    				<?php if($feature_count % 3 == 0) echo '<div class="separator"></div>'; ?>
    				<?php endwhile; ?>
    			</div>
    			<?php endif; ?>
    			<?php } ?>
    			<div class="page">
    
    		</div>

    Wrzuciłam pliki z folderu js do scripts i zmieniłam ścieżkę do pliku w nagłówku (w js są 3 pliki: jquery.featureCarousel.min.js, jquery.featureCarousel.js i jquery-1.7.min.js ). Ponadto dałam plik z folderu css do głównego katalogu (tam, gdzie jest plik header.php), ponieważ nie mam w moim motywie folderu css. Obrazki dałam do images.

    I nie chce działać….

Viewing 2 replies - 1 through 2 (of 2 total)
  • Temat ‘Jak zainstalować slider na wordpressie?’ jest zamknięty na nowe odpowiedzi.