东莞网站设计：在WordPress主题中使页脚响应

2019.08.16 mf_web

152

WordPress中的页脚或一般的网站是最少使用的页面之一。页脚主要用于显示信用和联系信息。对于许多网站来说这可能已经足够了，但最好使WordPress主题中的页脚更易于配置。对页脚进行小部件化可能会更好，这样您就可以轻松地向其添加不同类型的小部件。

如果您决定对页脚进行小部件化，则还应该注意页脚仍然保持响应，即使在较小的屏幕上也能正确显示内容。为此，您可能需要在较小的屏幕上动态重新排列页脚小部件。东莞网站设计

在本文中，我们将看到如何使用媒体查询使页脚响应。

创建子主题

为了让我们的WordPress页脚响应，让我们首先创建一个二十世纪的子主题。要创建一个二十世纪的子主题，请创建一个文件夹wp-content \ themes \ twentytwelvechild，并在其中添加一个带有以下文本的style.css：

五

Theme Name: Twenty twelve for responsive footer

Theme URI:

Description: Child theme to demo responsive footer

Author: Abbas S

Template: twentytwelve

Version: 1.0

@import url(&quot;../twentytwelve/style.css&quot;);

在上面的代码中，您刚刚为主题指定了元数据，如名称版本等。模板字段指定是子主题，父主题是二十。然后我们在这个style.css中导入了secondtwelve style.css，这样我们就可以获得父主题的所有样式。如果您不熟悉WordPress的子主题，可以找到更多详细信息。

添加style.css后，您将在管理部分中看到子主题，如下所示。你现在可以激活它。

儿童主题

制作页脚保持小部件

我们要做的第一件事就是让我们的页脚保持小部件，以便更容易定制。要在子主题文件夹中执行此操作，请创建名为functions.php的文件。

在functions.php中添加以下代码：

五

<?php function twentytwelvechild_widgets_init() { register_sidebar( array( 'name' => __( 'Footer Widget Area', 'twentytwelvechild' ),

'id' => 'footer-sidebar',

'description' => __( 'Appears on the footer, which has its own widgets', 'twentytwelvechild' ),

'before_widget' => '

<div id="%1$s" class="widgetfooter">',

'after_widget' => '</div>

'before_title' => '

<h3 class="widget-title">',

'after_title' => '</h3>

) );

}

add_action( 'widgets_init', 'twentytwelvechild_widgets_init' );

在上面的代码中，我们挂钩了WordPress的'widgets_init'钩子，它在窗口小部件初始化期间被调用。在函数twentytwelvechild_widgets_init中，我们使用函数register_sidebar注册窗口小部件区域，id为footer-sidebar。

现在在子主题文件夹中创建一个名为footer.php的文件，并将以下代码添加到其中：

五

</div>

<?php if ( is_active_sidebar( 'footer-sidebar' ) ) : ?>

<?php dynamic_sidebar( 'footer-sidebar' ); ?>

</div>

<?php endif; ?>

</footer>

</div>

<?php wp_footer(); ?>

</body>

</html>

在上面的代码中，我们检查侧边栏（即窗口小部件区域）是否处于活动状态，如果它处于活动状态，我们将使用函数dynamic_sidebar显示窗口小部件，并将id作为“footer-sidebar”传递给它。在底部不要忘记调用wp_footer（）; 功能如上面的代码所示。如上所示覆盖footer.php之后，您应该能够在管理员中看到页脚边栏小部件区域，如下所示。您应该添加小部件。

窗口小部件

处理小部件以在较小的屏幕上调整

现在我们已经向页脚添加了小部件，我们将能够在页脚区域中看到它们。问题在于，我们希望在像笔记本电脑这样的大屏幕上以及在像移动设备这样的小屏幕上观看时，页脚小部件会有所不同。当屏幕较大时，页脚小部件应该彼此相邻，但在较小的屏幕上应该低于彼此。我们将使用媒体查询来实现这一目标。在style.css文件中添加以下代码：

五

三十

.widgetfooter {

float: left;

width: 30%;

padding-top: 5px;

padding-bottom: 20px;

}

.widgetfooter ol, ul {

padding-left: 20px;

list-style: circle;

}

/* Mobiles in Potrait mode */

@media only screen

and (max-width : 320px) {

.widgetfooter {

float: left;

width: 100%;

padding-top: 5px;

padding-bottom: 20px;

}

/* Mobiles in landscape mode */

@media only screen

and (min-width : 321px)

and (max-width : 480px) {

.widgetfooter {

float: left;

width: 100%;

padding-top: 5px;

padding-bottom: 20px;

}

在上面的css中，默认情况下我们保持widgetfooter向右浮动并跨越30％的可用空间。因此，小部件将堆叠在更大屏幕上的上一个小部件的右侧，如下所示。

但是随着屏幕变小，这些将难以阅读，因此将小部件堆叠在另一个之下会更好。为了实现这一目标，我们添加了媒体查询，当屏幕像移动设备那样小时，小部件的宽度变为100％，并且它们一个堆叠在另一个之下，如下所示。

添加移动到顶部链接

由于较小屏幕上的水平空间较小，我们通常会垂直显示更多内容。这使得用户垂直滚动很多。因此，最好在页脚中添加一个链接，将用户直接带到页面顶部。为此，您需要在页面上标识一个指示页面顶部的div。在我的主题中它是主要的div。然后更新子主题的footer.php中的代码，如下所示：

五

</div>

<?php if ( is_active_sidebar( 'footer-sidebar' ) ) : ?>

<?php dynamic_sidebar( 'footer-sidebar' ); ?>

</div>

<?php endif; ?>

</div>

</footer>

</div>

<?php wp_footer(); ?>

</body>

</html>

添加以下样式添加到子主题的style.css：

五

#footerlink {

float: left;

width:100%;

text-align:center;

padding-bottom: 20px;

}

在上面的代码中，我们在页脚中添加了一个滚动到顶部的链接。我们将链接保持在div的中心，以便即使在较小的屏幕上也可以看到并轻松访问。现在，如果您看到页脚，您将看到在页脚中心向上滚动的链接，如下所示：

响应的页脚

结论

页脚是网站房地产中最被忽视的区域。如果使用得当，页脚可以显示重要内容并增加网站的可用性。在为WordPress网站的页脚设计和添加内容时，请确保页脚具有响应性，以便在较小的屏幕上可见且可读。页脚还可用于提供小功能，例如添加链接以在顶部向后滚动，这将在较小的屏幕上大量增强网站的可用性。为WordPress网站设计响应式页脚很有趣。

东莞网站设计