Блог

Я пытаюсь применить плагин Wookmark jQuery к моей теме WordPress. Реализация происходит с помощью цикла, поскольку суть предмета заключается в создании визуально приятного портфолио. Для темы я зарегистрировал новый тип сообщений типа «портфолио» и создал цикл, который различает сообщения с картинками и без.

Проблема, конечно, в том, что он не работает. Ошибок возврата нет, все скрипты на месте [или мне так кажется] — но сообщения не получают никакой обработки [jQuery Voodoo], которую должен применять WookMark. Все, что я получаю, это все сообщения, вызываемые по порядку.

Я поместил скрипты в свою тему в очередь с помощью functions.php файл таким образом:

 if ( !function_exists('core_mods') ) {
function core_mods() {
        wp_enqueue_script('jquery-custom', get_template_directory_uri().'/assets/wookmark/libs/jquery.min.js' );
        wp_enqueue_script('wookmark', get_template_directory_uri().'/assets/wookmark/jquery.wookmark.js', array('jquery-custom'), false, false);
    }           
}

add_action( 'wp_enqueue_scripts', 'core_mods' );
  

И фактический HTML-код page-portfolio.php заключается в следующем:

 <?php get_header(); ?>


<?php query_posts('post_type=portfolio') ?>
<?php if (have_posts()) : ?>
<script type="text/javascript">
    (function($) {
            $('.masonry-object').wookmark({
                  align: 'center',
                  autoResize: false,
                  comparator: null,
                  container: $('#masonry-container'),
                  direction: undefined,
                  ignoreInactiveItems: true,
                  itemWidth: 0,
                  fillEmptySpace: false,
                  flexibleWidth: 0,
                  offset: 2,
                  onLayoutChanged: undefined,
                  outerOffset: 0,
                  possibleFilters: [],
                  resizeDelay: 50,
                  verticalOffset: undefined
            });
})(jQuery);
</script>
    <div id="masonry-container">
                <?php /* The loop */ ?>
                <?php while ( have_posts() ) : the_post(); ?>
                    <div class="masonry-object" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                            <?php if ( has_post_thumbnail() ) : ?>
                                <div class="masonry-thumbnail">
                                    <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>">
                                        <?php the_post_thumbnail('masonry-thumb'); ?>
                                    </a>
                                    <div class="masonry-title">
                                        <?php echo the_title(); ?>
                                    </div>
                                </div><!--.masonry-thumbnail-->
                            <?php elseif ( !has_post_thumbnail() ): ?>
                                <div class="masonry-details">
                                    <h5>
                                        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>">
                                            <span class="masonry-post-title">
                                                <?php the_title(); ?>
                                            </span>
                                        </a>
                                    </h5>
                                    <div class="masonry-post-excerpt">
                                        <?php the_excerpt(); ?>
                                    </div><!--.masonry-post-excerpt-->
                                </div><!--/.masonry-entry-details -->  
                            <?php endif; ?>
                    </div>
                <?php endwhile;?>
    </div> <!-- End .masonry-container -->  

<?php endif; ?>
<?php get_footer(); ?>
  

CSS, прикрепленный к теме, является таким:

 #masonry-container {
}
.post-area {
    background: #ffffff ;
    padding: 10px ;
}
.masonry-thumbnail {
}
.masonry-thumbnail img {
    max-width: 100%;
    height:auto;
}
.masonry-title {
    position: absolute;
    width: auto;
    background-color: #ef9430;
    color: #ffffff;
    padding: 5px;
    bottom: 0px ;
    right: 0px;
}
.masonry-details {
    padding: 10px;
    background-color: #ffffff;
}
.masonry-object {
    width: 25% ;
    transition: all 1s ease;
}
.masonry-object:hover {
    z-index: 2;
    box-shadow: 0 0 20px #ffffff;
    transition: all 1s ease;
}
  

(function($) {...})(jQuery); это не то же самое, что $(function() {...});

Первый будет выполнен, как только он будет обнаружен, второй является сокращением jQuery для $( document ).ready() и будет запущен, когда DOM будет готов для JavaScript. Решение состоит в том, чтобы переместить скрипт под #masonry-container div или использовать событие ready. В WordPress есть небольшая проблема, поскольку по умолчанию используется jQuery jQuery.noConflict() , поэтому $ не ссылается на объект jQuery. Мое любимое решение для этого:

 jQuery(function ($) {

});
  

Он будет запущен в document ready с $ в качестве псевдонима jQuery.

Примечание: — используйте position: relative в #masonry-container div, как указано в документации.