Intereting Posts
Функция запуска ПОСЛЕ ИЗМЕНЕНИЙ параметров темы? Как добавить меню в Личный кабинет, который можно просмотреть всеми пользователями Как агрегировать, минимизировать и сжать (AMC) статические и динамические ресурсы? Отключить перенаправление канонических Внедрение сообщений Facebook использует неправильный язык, определенный самим Facebook, а не WP Как предотвратить повторение одной из двух повторяющихся циклов на второй странице? Поиск по ключевым словам ограничен конкретным типом сообщения, отфильтрованным несколькими пользовательскими таксономиями? Какова наилучшая практика для локализации контента? (Географический не langauge) Показать всех авторов в шаблоне темы Изменить WordPress comments url / word Как создать ссылку, чтобы перейти к части «Оставить комментарий»? Пользовательский виджет не отображается на лицевой стороне Как создать цикл на пользовательской странице и получить идентификатор от url в этом цикле? Как исключить категории из списка get_categories () в панели администратора виджета Почему я должен указать все параметры для wp_enqueue_script для загрузки моего jquery в нижнем колонтитуле?

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

все. Я разрабатываю тему 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 …