构建WordPress旋转木制插件：第2部分

>旋转木马不仅是链接列表，还存在以使它们更具吸引力的方式显示链接作为项目。在上一篇文章中，我们看到了如何创建轮播以及如何显示所需的HTML元素。现在是时候构建和设计我们的WordPress旋转木制插件了。

>

>我们的旋转木马目前是一个简单的链接列表，到本文结束时，我们将拥有适当的格式旋转木马。我们将看到如何应用我们需要的样式，以使您在第1部分中的示例图像中向您展示的结果。当然，您可以自定义许多属性，网站在世界范围内不必相同！

首先，我们将研究如何将CSS文件正确链接到WordPress中的网页。然后，我们将设计元素，这将展示一些在许多不同情况下可能有用的CSS技巧。

钥匙要点

通过链接外部CSS文件，可以增强WordPress旋转木制插件，从而可以更轻松，更灵活。这包括包含文件的wp_enque_style（）函数。

>
• 旋转木马的大小是在CSS文件中定义的，每个项目都填充了创建的整个块。还建立了链接的定位和容器的大小。
• >使用诸如显示，填充，颜色，背景色，文本align和text-shadow之类的CSS属性自定义项目的名称，描述和箭头的样式。
>旋转木插件是通过添加JavaScript来完成箭头功能功能的，可以在单击箭头时滚动。这将在教程的下一部分中介绍。
• >
• >链接外部CSS文件
为了使我们的旋转木制的样式尽可能灵活和容易，我们将内联样式的使用仅限于一个属性，即每个项目的背景。对于所有其他样式，我们将使用外部CSS文件（样式表）。您可以为文件选择自己的名称（例如carousel.css），然后将其放在插件的文件夹中（或在子目录中）。

>

为了包含文件，我们将使用WP_ENQUEUE_STYLE（）函数，如我们的文章中所述的有关包含脚本的正确方法。

>我们无法在任何地方调用此功能，必须在wp_head（）调用之前调用它（与脚本不同，我们不能在页脚中包含CSS文件！）。我们可以使用wp_enqueue_scripts，当WordPress包含脚本和当前页面的样式（在前端）时，它被称为，因此它非常适合此应用程序。>

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

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

> wp_enqueue_style（）函数接受（至少）两个参数，即样式的名称和对应文件的URI。 plugin_dir_url（）函数将为我们提供插件文件夹的URL，因为我的旋转曲线。

请注意，我们没有在功能中测试任何内容。 WordPress将将我们的CSS文件包括在每个页面中。如果您在所有页面上显示旋转木马，这不是问题。但是，如果仅在某些页面上显示旋转木马（例如，仅在主页上），则应在包含CSS文件之前测试访问者是否在正确的页面上（例如，使用IS_HOME（））。

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

让我们样式的轮播！

>

旋转木制的大小

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

>

>以后，我们将在此容器中添加第三个属性，即溢出。目前，我们不会使用它，这样我们就可以看到如何在页面上布置我们的物品。>

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

>每个项目都会填充我们刚创建的整个块。以下规则适用于项目本身（带有类名称旋转链链接的标签）及其父母。

>

定位链接

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

当我们向右走时会发生什么？

>

>现在我们必须考虑我们想做什么。当我们想建造旋转木马时，有很多可能性。我建议将我们的物品彼此放置在一个大容器中：它必须足够大才能将我们所有的所有物品都包含在一行中。

用户想查看另一个图像时，我们将此容器移动以将下一个项目与#Carousel Div对齐。该Div将将属性溢出设置为“隐藏”，这样我们就不会看到其他链接。

> 下面的

是我们想要制作的模式。在绿色中，您可以在一行中看到带有我们所有链接的大容器。为了让我们查看右侧的链接，该容器向左移动，反之亦然。黑色框架代表#carousel div：在此框架之外，一切都是看不见的。

容器的大小

首先，容器：我们不会创建另一个HTML元素，因为UL一个元素非常适合我们的目的。我们看到该容器必须足够大，以将我们所有的链接包含在一行中。目前并非如此，我们的物品和我们的容器都有900像素的宽度。> 为了改变这一点，我们将将容器的宽度增加到500％。 #Carousel确定的DIV的宽度为900像素，因此500％的宽度将使我们可以连续显示五个链接。

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

>您在这里可能会出现一个潜在的问题：项目数可能是可变的，因为我们的脚本实际上只能显示三个项目。这并不是真正的问题，因为我们将项目数限制在最多五个，因此，即使只有三个都可以合适，并且空白空间不会干扰旋转木马的操作。

如果您选择了另一个限制，则必须更改此宽度（例如，如果要显示10，则必须更改为1000％）。当您不需要任何限制时出现问题。在这种情况下，您必须根据我们的$ n变量设置UL标签样式属性的宽度，该变量包含要显示的项目数。

定位链接

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

现在，我们需要纠正LI标签的宽度。目前，它们的设置为100％，因此它们的整个容器的整个宽度太长了。

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

>

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

项目的名称和描述

<span>#carousel ul {
</span><span>    <span><span>width: <span>500%</span></span>;
</span></span><span><span>}</span></span>

>可以按照您的意愿进行样式的项目名称。在这里，我将描述我如何创建您在本教程的上一部分中看到的样式。

>

>提醒一下，该项目的名称在A.Carousel-Link元素中以强标记显示。可以用背景颜色获得条带，但我们希望该带占据整个宽度。为此，我们可以将显示设置为阻止。填充和颜色属性完成了样式。

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

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

>显示属性的块值允许EM标签使用所有可用宽度。然后，我们在右侧对齐文本，并带有一些填充，因此文本并不难贴在边缘。我在这里选择了深灰色的文字颜色。为了确保文本始终可以读取，即使在黑暗图像上，我也添加了一个白色的文本阴影。

造型箭头

<span>#carousel ul li {
</span><span>    <span><span>float: left</span>;
</span></span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span><span>}</span></span>

最后一步正确地显示了箭头。您在这里有几种选择，具体取决于您要在哪里显示这些箭头。

>我使用以下列出的属性来实现对样本项目的影响。我们将箭头转换为块以修改它们的尺寸，然后修复此大小，然后样式箭头。我们还使用一个有用的技巧来垂直对齐文本（箭头），我们将行高属性设置为与高度相同的值，然后将文本以垂直为中心。

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

要复制圆角，我们将使用边界 - 拉迪乌斯（Border-radius），但不在所有角落，在旋转木马侧面的角落不应绕圆角。这就是为什么我们将使用边界拉迪乌斯的“子专业”，这使我们能够选择弯道。

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

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

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

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

定位箭头

<span>#carousel ul {
</span><span>    <span><span>width: <span>500%</span></span>;
</span></span><span><span>}</span></span>

>这就是箭的样式。现在，我们需要将它们放置在我们想要的地方。我们将使用绝对的定位，这是一个小技巧：我们不知道轮播本身的位置，因此我们无法将箭头定位在屏幕角。取而代之的是，我们将使用旋转木马的角落，更确切地说是Li标签。

>让我们将箭头定位为“绝对位置”。

如果尝试此操作，箭头将位于屏幕侧。我们必须使用鲜为人知的绝对定位选择。箭头元件相对于其最接近的父母定位。在这里，我们的箭头没有任何位置的父母，因此它们相对于屏幕。

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

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

然后将箭头放在其最接近的父母的侧面，li标签，这是我们想要的。

下一步是什么？

<span>#carousel ul li {
</span><span>    <span><span>float: left</span>;
</span></span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span><span>}</span></span>

>我们的旋转木马所需的HTML元素已显示出来，现在它们也已被设计。问题是我们的旋转木马完全没有用，因为它只是显示了第一项（如果没有CSS，它更有用！）。

。

这就是为什么我们需要添加最后一件事：JavaScript。在本教程的下一个（也是最后一个）部分中，我们将使箭头按预期发挥作用，单击箭头时链接将滚动。那是一件好事，对

>

以上是构建WordPress旋转木制插件：第2部分的详细内容。更多信息请关注PHP中文网其他相关文章！