更多 >>当前位置: 主页 > 建站技巧 > 如何使用WordPress设计一个类Pinterest布局的网站

如何使用WordPress设计一个类Pinterest布局的网站

时间：2014-01-21 来源：广州网站建设作者：www.c71.cn 点击：次

Pinterest网站以其圆柱状网格布局而闻名，同时也吸引了很多人将这种布局使用到自己的网站上。使用这种布局的好处是，你不必担心网站的图像如何调整尺寸，标题或摘要的长度。这些布局可以使用相当小Java生日拍他库创建。在本教程中，闻名将解释如何使用WordPress做出类似的效果。

比方说，你运行一个关于高档产品博客，如手表，建筑，室内装修，汽车等，这可能是一个依赖于图片的博客网站，但图片并不具有同样的比例，并且当你复制或移动他们的时候，会导致变形或者其他不必要的结果。

让我们开始吧。

首先创建一个儿童主题

可能有人已经知道，编辑默认的主题是不推荐的，因为当你升级你的主题，你会失去进步。这就是为什么我要建立一个以儿童为主题的本指南，但假设你已经有一个现成的主题砌体要实施的，如果是的话，你可以直接跳到“设置砌体”。

一个孩子的主题是一个新的主题，除了默认的主题，那就是位于主题文件夹中的wp-content目录。因为我不打算从头开始构建一个主题，我只是要复制的Twentythirteen主题，重命名文件夹，并做一些改变到的style css使WordPress的将它识别为不同的/新的主题。

排列脚本

什么很多人不知道，或者忘记了，在WordPress自带的默认情况下，砌体脚本，以便对本指南中，我们要使用，而不是一个你可以从插件的网站下载的脚本。为了确保砌体出现在你的源代码，它的可使用简单的排列脚本。下面的脚本是用于当你的主题不规则的情况。

< ?php
function wdv_enqueue_scripts() {
   wp_enqueue_script( 'jquery-masonry' ); // adds masonry to the theme
}
add_action( 'wp_enqueue_scripts', 'wdv_enqueue_scripts' );
?>

如果你的主题已经插入了一些脚本或样式您可以将下行添加到你当前的脚本和样式的功能。

wp_enqueue_script( 'jquery-masonry' ); // adds masonry to the theme

现在你已经插入的砌体脚本，你应该看到它显示在您的网站的页面源代码。这样你就可以使用这个网格的脚本来开始你的工作。

HTML / CSS

该脚本使用一个容器，它环绕你所有的帖子，在这种情况下，被称为“项目”。这些项目可以通过2种方式显示，可以显示他们像其他的项目，也可以通过添加额外的类“W2”它跨越了两列。

对于用例，我使用的这个职位，我需要抓住的几件事情从岗位。这将是缩略图，标题和发布日期。我使用下面的标签，以显示“砖头”为砌体调用它们。

<div class="column">
   <a href="<?php the_permalink(); ?>">< ?php the_post_thumbnail(); ?></a>
   <div class="description">
      <h2><a href="<?php the_permalink(); ?>">< ?php the_title(); ?></a></h2>
      <div class="entry-meta">
         <span class="date">Posted on: <a href="<?php echo get_month_link(the_time(__('Y', 'f2')), the_time(__('m', 'f2'))); ?>">< ?php the_time(get_option('date_format')); ?></a></span>
      </div>
   </div>
</div>

如果你想获得的摘录，以及你可以包括<PHP the_excerpt（）;？>地方描述的div中。摘录的长度可以通过的functions.php进行调整，结账WordPress的抄本，以了解如何。

配置脚本

砖石可以设置三种不同的方式，你可以使用好醇'的Javascript，jQuery的，也可以通过HTML中加入一个参数传递给容器设置它。需要该配置拿到剧本的工作。

Javascript的方式：

这种方法是当你没有在你的主题使用jQuery有用。

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
   // options
   columnWidth: 200,
   itemSelector: '.item'
});

对于那些有兴趣，这个脚本创建的对象“砌体”与所有所需的选项一个新的实例。

jQuery的方式：

另外，您可以使用jQuery的方式，这将很好地适应与其它的代码，如果你已经使用jQuery。

var $container = $('#container');
// initialize
$container.masonry({
   columnWidth: 200,
   itemSelector: '.item'
});

对于例子中，我使用了jQuery的方式，但因为Twentythirteen响应/液我不得不使用百分比。正因为如此，我不得不改变columnWidth中值位。这里是我是怎么做的：

var $container = $('#content');
$container.masonry({
   columnWidth: function( containerWidth ) {
      return containerWidth / 4;// depends how many boxes per row
   },
   "gutter": 20,
   itemSelector: '.column'
});

您可能已经注意到，我添加了一个名为“gutter”的选项此选项用来使砌体可以设置列之间的差距。另外，您可以通过CSS，但这样一来我在一个地方拥有一切做到这一点。

在HTML方式：

如果你不熟悉的Javascript，也不jQuery的任何你可能想使用这个HTML的方法。

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'></div>

可选：CSS

因为我编辑的Twentythirteen主题我不得不添加一些样式风格布局有点子主题，这里是我的情况下使用您要应用它的默认主题和样式：

#content{
   padding-top: 20px;
   padding-left: 20px;
}

.column{
   width: 23%;
   margin-left: -1px!important; // fix for fluid layouts
   margin-bottom: 2%;
}

.column > .description{
   padding: 20px;
   border: 1px solid #ececec;
   border-top: 0;
}

.column h2{
   margin-top: 0;
   margin-bottom: 10px;
}

.column h2 > a{
   color: #222;
}

.column > img{
   width: 100%;
   margin-bottom: 0;
}