wordpress插件_构建WordPress轮播插件：第2部分

wordpress插件

A carousel is not just a list of links, it exists to display the links as items in a way that makes them more attractive. In our previous article we saw how to create a carousel, and how to display the HTML elements we need. Now it’s time to build and style our WordPress carousel plugin.

轮播不仅是链接列表，它还可以以使链接更具吸引力的方式将链接显示为项目。 在上一篇文章中，我们了解了如何创建轮播，以及如何显示所需HTML元素。 现在是时候构建和样式化WordPress轮播插件了。

Our carousel is currently a simple list of links, by the end of this article we will have a properly formatted carousel. We’ll see how to apply the styles we need to have the result I showed you in the sample image in Part 1. Of course there are many properties that you can customize, websites don’t have to be the same around the world!

目前，我们的轮播是一个简单的链接列表，到本文结尾，我们将拥有格式正确的轮播。 我们将在第1部分的示例图像中看到如何应用我们需要的样式，以得到我显示的结果。当然，您可以自定义许多属性，世界各地的网站不必相同！

First we’ll look at how we can properly link a CSS file to a web page within WordPress. Then we’ll style our elements, which will demonstrate some CSS tricks that can be useful in many different situations.

首先，我们将研究如何将CSS文件正确链接到WordPress中的网页。 然后，我们将对元素进行样式设置，这将演示一些CSS技巧，这些技巧在许多不同情况下都非常有用。

链接外部CSS文件 (Linking an External CSS File)

To make the styling of our carousel as flexible and easy as possible, we limited the use of inline styles to only one attribute, the background of each item. For all the other styles we will use an external CSS file (stylesheet). You can chose your own name for the file (such as carousel.css) and place it in your plugin’s folder (or in a subdirectory).

为了使轮播的样式尽可能灵活和容易，我们将内联样式的使用限制为仅一个属性，即每个项目的背景。 对于所有其他样式，我们将使用外部CSS文件(样式表)。 您可以为文件选择自己的名称(例如carousel.css)，并将其放置在插件的文件夹(或子目录)中。

To include the file we’ll use the wp_enqueue_style() function as described in our article about the right way to include a script.

要包含文件，我们将使用wp_enqueue_style()函数，如我们在文章中介绍的有关包含脚本的正确方法那样 。

We can’t call this function just anywhere, it must be called before the call of wp_head() (unlike a script, we can’t include a CSS file in the footer!). We can use wp_enqueue_scripts, which is called when WordPress includes the scripts and the styles for the current page (in the front-end), so it’s perfect for this application.

我们不能在任何地方调用此函数，必须在调用wp_head()之前调用它(与脚本不同，我们不能在页脚中包含CSS文件！)。 我们可以使用wp_enqueue_scripts ，当WordPress包含当前页面(在前端)的脚本和样式时会调用它，因此非常适合此应用程序。

The code below must appear in your plugin’s main file.

下面的代码必须出现在插件的主文件中。

function enqueue_carousel_style() {
    wp_enqueue_style('carousel', plugin_dir_url(__FILE__) . 'carousel.css');
}
add_action('wp_enqueue_scripts', 'enqueue_carousel_style');

The wp_enqueue_style() function accepts (at least) two parameters, the name of the style and the URI to the corresponding file. The plugin_dir_url() function will give us the URL to our plugin’s folder, as my carousel.css file is located in the root of this folder I have no subdirectory to add here, but you must concatenate it if you use one.

wp_enqueue_style()函数接受(至少)两个参数，即样式名称和对应文件的URI。 plugin_dir_url()函数将为我们提供插件文件夹的URL，因为我的carousel.css文件位于此文件夹的根目录中，因此我没有要在其中添加子目录的目录，但是如果使用它，则必须将其连接起来。

Note that we’re not testing anything in our function. WordPress will include our CSS file into every page. This is not a problem if you display your carousel on all pages. However, if you display your carousel only on some pages (e.g. only on the home page), you should test whether the visitor is on the right page before including the CSS file (e.g. with is_home()).

请注意，我们并未在函数中进行任何测试。 WordPress将在每个页面中包含我们CSS文件。 如果您在所有页面上都显示轮播，这不是问题。 但是，如果仅在某些页面上显示轮播(例如，仅在主页上)，则应在包含CSS文件之前(例如，使用is_home() )测试访问者是否在正确的页面上。

Now it’s time to edit our CSS file.

现在是时候编辑我们CSS文件了。

让我们为旋转木马造型！ (Let’s Style Our Carousel!)

轮播的大小 (The Size of the Carousel)

We begin with the size of the main container, the div identified by #carousel. Here you can set the size you want. As we use images that we won’t resize, a fixed size is a good idea.

我们从主容器的大小开始，即#carousel标识的div 。 您可以在此处设置所需的尺寸。 当我们使用不会调整大小的图像时，固定大小是个好主意。

#carousel {
    width: 900px;
    height: 350px;
}

Later, we will add a third property to this container, overflow. For the moment we won’t use it, that way we can see how our items are laid out across the page.

稍后，我们将向该容器添加第三个属性overflow 。 目前，我们将不使用它，这样我们就可以看到项目在页面上的布局方式。

Each item will fill the entire block we just created. The following rule applies to the item itself (the a tag with the class name carousel-link) as well as its parents.

每一项将填充我们刚刚创建的整个块。 以下规则适用于项目本身(具有类名carousel-link a标签)及其父项。

#carousel ul,
#carousel ul li,
#carousel ul li a.carousel-link {
    display: block;
    width: 100%;
    height: 100%;
}

定位链接 (Positioning the Links)

当我们向右走时会发生什么？ (What Happens When We Go to the Right?)

Now we have to think about what we want to do. There are many possibilities when we want to build a carousel. I suggest positioning our items next to each other with a float property into a big container: it must be big enough to contain all our items in one line.

现在我们必须考虑我们想做什么。 当我们想要构建轮播时，有很多可能性。 我建议通过float属性将我们的物品彼此相邻放置到一个大容器中：它必须足够大以将我们所有的物品包含在一行中。

When the user wants to see another image, we move this container to align the next item with the #carousel div. This div will have the property overflow set to hidden, that way we won’t see the other links.

当用户想要查看其他图像时，我们移动此容器以将下一项与#carousel div对齐。 这个div会将属性overflow设置为hidden ，这样我们就看不到其他链接。

Below is a schema of what we want to make. In green you can see the big container with all our links in one line. To let us see the link on the right, the container goes to the left, and vice versa. The black frame represents the #carousel div: outside of this frame, everything is invisible.

下面是我们要制作的图形。 您可以看到绿色的大容器，其中所有链接都在一行中。 为了让我们看到右侧的链接，容器转到左侧，反之亦然。 黑色框架代表#carousel div ：在此框架之外，所有内容都不可见。

容器尺寸 (The Size of the Container)

First, the container: we won’t create another HTML element, as the ul one is perfect for our purposes. We saw that this container must be big enough to contain all our links in one line. Currently this is not the case, our items and our container both have a width of 900 pixels.

首先，容器：我们不会创建另一个HTML元素，因为ul元素非常适合我们的目的。 我们看到该容器必须足够大，才能将所有链接都包含在一行中。 目前情况并非如此，我们的商品和我们的容器都具有900像素的宽度。

To change that, we will increase the width of the container to 500%. The div identified by #carousel has a width of 900 pixels so a width of 500% will allow us to display five links in a row.

要更改此设置，我们将容器的宽度增加到500% 。 #carousel标识的div的宽度为900像素，因此宽度为500%可使我们连续显示五个链接。

#carousel ul {
    width: 500%;
}

A potential problem may occur to you here: the number of items can be variable, as our script can in fact display only three items for example. It’s not really an issue because we limited the number of items to a maximum of five, so even if there are only three they will all fit and the blank space won’t interfere with the operation of the carousel.

您可能会在这里遇到潜在的问题：项目的数量是可变的，例如我们的脚本实际上只能显示三个项目。 这并不是真正的问题，因为我们将项目的数量限制为最多五个，因此即使只有三个项目也都可以容纳并且空白不会干扰转盘的操作。

If you chose another limit you must change this width (for example to 1000% if you want to display 10). Problems appear when you don’t want any limit. In this case you will have to set the width in the style attribute of the ul tag, based on our $n variable which contains the number of items to be displayed.

如果选择另一个限制，则必须更改此宽度(例如，如果要显示10，则更改为1000% )。 当您不希望有任何限制时，就会出现问题。 在这种情况下，您将必须根据我们的$n变量(包含要显示的项目数)在ul标签的style属性中设置宽度。

<ul style="width: <?php echo $n * 100; ?>%;">

定位链接 (Positioning the Links)

Now we need to correct the width of the li tags. Currently they are set to 100% so they will take the whole width of our container which is five times too long.

现在我们需要更正li标签的宽度。 目前，它们设置为100%因此将占用我们容器的整个宽度，这是长度的五倍。

#carousel ul li {
    float: left;
    width: 900px;
}

The li tags now have the right width and are floating. If you test our carousel now you will see the right result, five items next to each other. You can now add the overflow property to #carousel to hide the items which should not be visible.

li标签现在具有正确的宽度并且是浮动的。 如果您现在测试我们的轮播，您将看到正确的结果，彼此相邻的五个项目。 现在，您可以将overflow属性添加到#carousel以隐藏不可见的项目。

#carousel {
    overflow: hidden;
}

物品的名称和描述 (The Item’s Name and Description)

The name of the items can be styled as you desire. Here I will describe how I created the style you saw in the previous part of this tutorial.

可以根据需要设置项目名称的样式。 在这里，我将描述如何创建您在本教程的上一部分中看到的样式。

As a reminder, the item’s name is displayed in a strong tag in the a.carousel-link element. The strip can be obtained with a background color, but we want this strip to occupy the entire width. To do that we can set display to block. padding and color properties complete the style.

提醒一下，该商品的名称显示在a.carousel-link元素的strong标签中。 可以使用背景色获得该条带，但是我们希望该条带占据整个宽度。 为此，我们可以将display设置为block 。 padding和color属性完善了样式。

#carousel ul li a.carousel-link strong {
    display: block;
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
}

As with the name, you can personalize the item’s description. Here I chose to display it on the right, below the name, using the CSS below.

与名称一样，您可以个性化商品的描述。 在这里，我选择使用下面CSS在名称下方的右侧显示它。

#carousel ul li a.carousel-link em {
    display: block;
    padding: 0 20px;
    text-align: right;
    color: #3D3D3D;
    text-shadow: 0 0 5px #FFFFFF;
}

The block value for the display property allows the em tag to use all of the available width. We then align the text on the right, with some padding so the text isn’t hard up against the edge. I chose here a dark grey for the text color. To be sure that the text will always be readable, even on dark images, I added a white text shadow.

display属性的block值允许em标记使用所有可用宽度。 然后，我们将文本右侧对齐，并带有一些填充，以使文本不会紧贴边缘。 我在这里选择了深灰色作为文本颜色。 为确保文本始终可读，即使在深色图像上，我添加了白色文本阴影。

造型箭头 (Styling the Arrows)

The final step is correctly displaying the arrows. You have several choices here, depending on where you want to display these arrows.

最后一步是正确显示箭头。 根据要在何处显示这些箭头，您在此处有多种选择。

I used the properties listed below to achieve the effect on the sample item. We transform the arrows into blocks to be able to modify their sizes, we then fix this size, and we style the arrows. We also use a useful trick to vertically align the text (the arrow), we set the line-height property to the same value we gave to height, the text will then be vertically centered.

我使用下面列出的属性来实现对示例项目的效果。 我们将箭头转换为块以能够修改其大小，然后固定该大小，并设置箭头样式。 我们还使用一个有用的技巧，以垂直对齐文本(箭头)，我们设定line-height属性，我们给了相同的价值height ，文本将被垂直居中。

#carousel ul li a.carousel-prev,
#carousel ul li a.carousel-next {
    display: block;
    height: 75px;
    padding: 0 20px;
    background-color: rgba(0, 0, 0, 0.3);
    line-height: 75px;
    font-weight: bold;
    font-size: 45px;
    color: rgba(255, 255, 255, 0.5);
}

To reproduce the rounded corners, we will use border-radius, but not on all the corners, the ones that are on the carousel’s sides shouldn’t be rounded. That’s why we will use the ‘sub-properties’ of border-radius which allow us to select the corners to round.

为了重现圆角，我们将使用border-radius ，但不是在所有的角上都使用border-radius ，而是不应对圆盘传送带侧面的圆角进行圆角处理。 这就是为什么我们将使用border-radius的“子属性”，使我们能够选择要倒圆的角。

#carousel ul li a.carousel-prev {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#carousel ul li a.carousel-next {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

Finally, I personally like buttons and links to have a hover effect. Here I chose to only modify the color of the arrow.

最后，我个人喜欢按钮和链接具有悬浮效果。 在这里，我选择仅修改箭头的颜色。

#carousel ul li a.carousel-prev:hover,
#carousel ul li a.carousel-next:hover {
    color: #FFFFFF;
}

As CSS3 allows us to easily have a soft transition, why not use them?

CSS3允许我们轻松进行软过渡，为什么不使用它们呢？

#carousel ul li a.carousel-prev,
#carousel ul li a.carousel-next {
    transition-property: color;
    transition-duration: 0.5s;
}

定位箭头 (Positioning the Arrows)

That’s all for the style of the arrows. Now we need to place them where we want them. We will use absolute positioning, with a little trick: we don’t know the position of the carousel itself so we can’t position the arrows from the screen corners. Instead, we will use the carousel corners and, more precisely, the li tags corners.

这就是箭头样式的全部内容。 现在我们需要将它们放置在我们想要的位置。 我们将使用绝对定位，并有一些技巧：我们不知道转盘本身的位置，因此无法从屏幕角定位箭头。 取而代之的是，我们将使用轮播转角，更准确地说，使用li标签转角。

Let’s position our arrows with position set to absolute.

让我们将箭头的position设置为absolute 。

#carousel ul li a.carousel-prev,
#carousel ul li a.carousel-next {
    position: absolute;
    bottom: 50px;
}

#carousel ul li a.carousel-prev {
    left: 0;
}

#carousel ul li a.carousel-next {
    right: 0;
}

If you try this, the arrows will be positioned on the screen sides. We must use a less known option of absolute positioning. The arrow element is positioned relative to its closest positioned parent. Here, our arrows do not have any positioned parent so they are positioned relative to the screen.

如果尝试这样做，箭头将位于屏幕两侧。 我们必须使用鲜为人知的绝对定位选项。 箭头元素相对于其最接近的父元素放置。 在这里，我们的箭头没有任何定位的父对象，因此它们相对于屏幕定位。

The problem is the arrows parents are at the right places: we don’t want to move any of them. The trick consists of using relative positioning, without changing anything else. We will apply the relative positioning to the li tags which is the closest parent of our arrows.

问题在于父母的箭头在正确的位置：我们不想移动其中的任何一个。 诀窍包括使用相对定位，而不更改其他任何内容。 我们将相对位置应用于li标记，它是我们箭头的最接近的父级。

#carousel ul li {
    position: relative;
}

Then the arrows are positioned on the side of their closest positioned parent, the li tags, which is what we wanted.

然后，将箭头放置在最接近的父对象li标签的一侧，这就是我们想要的。

下一步是什么？ (What’s Next?)

The HTML elements needed by our carousel are displayed and, now, they are also styled. The problem is that our carousel is totally useless, as it just shows the first item (it was more useful without CSS!).

轮播所需HTML元素会显示出来，现在也已设置样式。 问题在于我们的轮播是完全无用的，因为它只显示第一个项目(如果没有CSS，它会更有用！)。

That’s why we need to add one last thing: JavaScript. In the next (and last) part of this tutorial we will make our arrows function as expected, links will scroll when arrows are clicked. That’s a good thing, right?

这就是为什么我们需要添加最后一件事：JavaScript。 在本教程的下一部分(也是最后一部分)中，我们将使箭头正常工作，单击箭头时链接将滚动。 那是一件好事，对吧？

翻译自: https://www.sitepoint.com/building-a-wordpress-carousel-plugin-part-2/

wordpress插件