Отображение макета кладки в WordPress - PullRequest
Новая
       7

Отображение макета кладки в WordPress

0 голосов
/ 06 декабря 2018

Как реализовать макет кладки для отображения сообщений в WordPress?

Я хочу отображать свои посты в макете сетки кладки

Это код, который я пробовал в functions.php 

add_action( 'wp_enqueue_scripts', 'site_scripts' );

function site_scripts() {
wp_enqueue_script('masonry');
wp_enqueue_script( 'site-script', get_template_directory_uri() . '/js/script.js', array(), false, true );

}

На своей странице я добавил следующий код 

<div class="grid">
<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-1.jpg' ?>">
</div>
<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-2.jpg' ?>">
</div>
<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-3.jpg' ?>">
</div>
<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-4.jpg' ?>">
</div>
    `enter code here`<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-5.jpg' ?>">
</div>

Я добавил следующий javascript 

jQuery(function($) {
// init Masonry
var $grid = $('.grid').masonry({
    // options
    itemSelector: '.grid-item',
    columnWidth: 400
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
}); });

Но я не получаю его в виде каменной кладки, а просто показываю вниз один за другим.

Кто-нибудь может мне помочь?

1 Ответ

0 голосов
/ 07 декабря 2018

TIL, что WordPress включает масонство в качестве ядра.После быстрого просмотра он на самом деле включает 2 (собственный Javascript) и jQuery - вы загружаете собственный Javascript - измените: 

wp_enqueue_script('masonry');

на: 

wp_enqueue_script( 'jquery-masonry' );

Для справки, вотстраница со списком всех скриптов по умолчанию, включенных и зарегистрированных WordPress

...