Случайные домашние фоновые изображения с заголовком

все. Я разрабатываю тему WordPress, и мне нужно иметь случайное отображение фонового изображения на домашней странице с определенным текстом для каждого изображения.

Я установил плагин Background Manager ( http://wordpress.org/plugins/background-manager/ ), но он поддерживает только отображение наложения на наборах изображений, и я не вижу простого способа его настройки.

В качестве альтернативы я нашел эту статью на сайте ( http://wpdevsnippets.com/full-page-screen-background-image-slideshow-easy/ ), которая охватывает базовый сценарий для отображения случайных фоновых изображений. Единственное, что я могу себе представить, чтобы заставить его работать на сайте, – это добавить в WordPress собственный тип контента для создания фоновых изображений, а затем разрешить выделенное изображение и выдержку для этих элементов контента.

Там, где я потерялся, вы можете вызвать эти изображения со страницы шаблона (вне цикла), а затем, в пределах содержимого страницы, вызвать заголовок или подпись из произвольно выбранного изображения.

Вот весь код из этого примера другого сайта. Любая помощь или указатели будут огромной помощью.

HTML:

<div id="full-bg"> <img class="full-bg" src="http://img.wordpressask.com/images/hires-bg1.jpg" /> <img class="full-bg" src="http://img.wordpressask.com/images/hires-bg2.jpg" /> <img class="full-bg" src="http://img.wordpressask.com/images/hires-bg3.jpg" /> <img class="full-bg" src="http://img.wordpressask.com/images/hires-bg4.jpg" /> </div> 

CSS:

 html, body { height: 100%; } #full-bg img { position:fixed; top:0; left:0; height:100%; width:100%; z-index:-10; opacity: .9; } направо html, body { height: 100%; } #full-bg img { position:fixed; top:0; left:0; height:100%; width:100%; z-index:-10; opacity: .9; } 

Javascript:

 <script type="text/javascript"> jQuery(document).ready(function($) { /* random ordering of images */ var $fullBGs = $("#full-bg img"), $copies = $fullBGs.clone(true); [].sort.call($copies, function() { return Math.random() - 0.5; }); $copies.each(function(i){ $fullBGs.eq(i).replaceWith(this); }); setInterval(function(){ $('#full-bg img.active').animate({opacity:0},500, function(){ $(this).removeClass('active'); }) if($('#full-bg img.active').next().length>0) $('#full-bg img.active').next().animate({opacity:1},500).addClass('active'); else $('#full-bg img:first').animate({opacity:1},500).addClass('active'); } ,4000); $('#full-bg img:first').animate({opacity:1},400).addClass('active'); }); </script> 

Solutions Collecting From Web of "Случайные домашние фоновые изображения с заголовком"

Прежде всего, я не думаю, что создать пользовательский тип сообщения только для фона – это правильный выбор: backgrond – это изображения и изображения, уже имеющие свой тип записи: вложение .

Если у вас есть Worpress 3.5+, вы можете зарегистрировать пользовательскую таксономию для вложений, назовите ее, например «image_scope»:

 register_taxonomy('image_scope', 'attachment', $args ); 

для массива $args см. код , но убедитесь, что у вас есть

  • $args['public'] = true
  • $args['show_ui'] = true
  • $args['show_admin_column'] = true
  • $args['update_count_callback'] = '_update_generic_term_count'

В вашем медиа-менеджере вы установите эту таксономию на определенный термин, например, «background».

Теперь в вашем файле шаблона вы можете использовать пользовательский wp_query, используя tax_query, чтобы выбрать только фоны с таксономией image_scope, настроенной на «фон»:

 $args = array( 'post_type' => 'attachment', 'post_status' => 'inherit', 'posts_per_page' => -1, 'orderby' => 'rand', 'tax_query' => array( array( 'taxonomy' => 'image_scope', 'field' => 'slug', 'terms' => 'background' ) ); ); $bg_query = new WP_Query( $args ); 

Как вы можете видеть, порядок уже рандомизирован, поэтому, когда вы печатаете его на шаблоне, вам не нужно рандомизировать через js.

Итак, в шаблоне у вас будет, после запроса:

 if ( $bg_query->have_posts() ) : echo '<div id="full-bg">'; $i = -1; while( $bg_query->have_posts() ) : $i++; $bg_query->the_post(); $url = wp_get_attachment_url( get_the_ID() ); $class = $i == 0 ? 'full-bg active' : 'full-bg'; ?> <img class="<?php echo $class; ?>" src="<?php echo $url; ?>" alt="<?php the_title; ?>" data-desc="<?php the_excerpt(); ?>" /> <?php endwhile; echo '</div>'; endif; wp_reset_postdata(); ?> 

И javascript:

 jQuery(document).ready(function($) { function handle_active() { var $active = $("#full-bg img.active"); var title = $active.attr('alt'); var desc = $active.data('desc'); alert('Active title is' + title + ' and active description is ' + desc); } setInterval(function(){ var $active = $("#full-bg img.active"); $active.animate( {opacity:0}, 500, function(){ $(this).removeClass('active'); }); if( $active.next('img').length > 0 ) { $active.next('img').addClass('active').animate( {opacity:1}, 500, function() { handle_active(); }); } else { $('#full-bg img').eq(0).addClass('active').animate( {opacity:1}, 500, function() { handle_active(); }); } }, 4000); handle_active(); } 

Разумеется, измените функцию handle_active (), чтобы она соответствовала вашим потребностям.

Надеюсь, что это поможет, но учтите, что код не проверен, и я не разработчик js …