javascript — настройки масонства, не влияющие на вывод пост-цикла WP

Question

javascript — настройки масонства, не влияющие на вывод пост-цикла WP

Я занимаюсь разработкой темы WP 4.0 и пытаюсь реализовать простую установку каменной кладки. Мои намерения состоят в том, чтобы получить определенное количество постов из категории, создать цикл и сделать так, чтобы кладка выкладывала их в динамическую сетку.

По какой-то причине настройки, которые я ввожу (columnWidth и gutter) в мой файл functions.js, похоже, никак не влияют. Все изображения загружаются, но вертикально вниз только в одном столбце. Я чувствую, что либо я что-то упускаю полностью, либо, может быть, небольшая случайность где-то?

functions.php:

function archive_grid(){
wp_enqueue_script('masonry');
}
add_action('wp_enqueue_scripts', 'archive_grid');

functions.js:

var container = document.querySelector('#masonry-loop');
var msnry = new Masonry( container, {
columnWidth: 300,
gutter: 30,
itemSelector: '.archive-container'
});
} );

template.php

<div id="archive-index">
<div id="masonry-loop">
<?php
$args = array(
'posts_per_page'   => 6,
'category_name'    => 'back-issue',
'orderby'          => 'post_date',
'order'            => 'DESC' );

$archive = get_posts( $args );
foreach ( $archive as $post ) : setup_postdata( $post ); ?>
<div class="archive-container">
<?php the_post_thumbnail(); ?></a>
</div><!-- Archive Container-->
<?php
endforeach;
?>
</div><!--/#masonry-loop-->
<?php
wp_reset_postdata(); ?>
</div><!-- #archive-index -->

1

javascript masonry php wordpress

Решение

Другие решения

Я не совсем уверен, где в моем WordPress изображения затрагиваются. Кажется, где-то это просто игнорирование настроек каменной кладки и установка изображений на какую-то другую определенную высоту, которую я не могу понять, но которая отображается в инспекторе как (img [Attributes Style] {};). Я добавил некоторые атрибуты css в контейнеры элементов, чтобы заставить div’ы достигать максимальной ширины. исправил проблему.

.archive-container {
max-width: 300px;
}
.item img {
width: auto;
height: auto;
max-width: 300px;
}

0

Источник

Accepted Answer

Похоже, что это может быть вашей проблемой (или хотя бы ее частью):

<div class="archive-container">
<?php the_post_thumbnail(); ?></a>
</div><!-- Archive Container-->

Там нет открытия < a> тег внутри div 🙂 Попробуйте добавить его и посмотрите, исправит ли он проблему с колонкой.

0