如何使用 Genesis 子主题在 WordPress 中创建自定义小部件

Genesis 是使用最广泛的 WordPress 框架之一，用于设计网站布局。 由于其父子主题架构，它在开发人员中很受欢迎。 它使他们能够根据自己的要求自定义子主题，而不会影响父主题的核心功能。

在本文中，我将通过在 Genesis Framework 免费提供的 Genesis Sample 主题中创建 4 个小部件区域来演示自定义 Genesis 子主题是多么容易。

1. 搭建开发环境

为了安装 Genesis Framework，您必须在本地或服务器上安装 WordPress。 我假设您已经在您的服务器上安装了 WordPress，如果没有，请使用 Cloudways 平台启动您的 WordPress。

现在从 StudioPress 下载 Genesis Framework 和 Sample theme 的副本，并在您的 WordPress 网站上激活该框架。

注意：对于 Genesis 主题定制，我使用Sublime Text 3作为我的文本编辑器。 但是，您可以选择任何其他文本编辑器。

2. 儿童主题定制

在文本编辑器中打开 Sample Genesis 主题并在根目录中创建一个新文件front-page.php 。

现在打开front-page.php并添加以下代码段。

 <?php

创世（）；

这将初始化 Genesis Framework。

示例主题不随front-page.php 提供，因此，我必须明确创建此页面以注册我们的小部件区域。

自定义小部件区域

我将通过修改主题的function.php文件开始添加小部件，但在我真正开始编写代码之前，让我解释一下后端逻辑。

这里我声明了一个接受参数数组的函数：

1. id – 识别我们的代码。
2. 名称– 是我们将在 WordPress 仪表板中看到的名称。
3. 描述– 这也将显示在 WordPress 仪表板中。

注意：函数的“id”和“name”应该是唯一的。

现在打开function.php并在文件末尾添加以下代码片段。

对于滑块小部件

genesis_register_sidebar（数组（
           'id' => 'front-page-1',
           'name' => __( 'Homepage Slider Widget', 'genesis-sample' ),
           'description' => __( '这是一个出现在首页的小部件。', 'genesis-sample' ),
) );

对于内容小部件 1

 genesis_register_sidebar（数组（
   'name' => __( 'Home Content Top Left', 'genesis-sample' ),
   'id' => 'content-1',
   'description' => __( 'Top Left Home', 'genesis-sample' ),
 ) );

对于内容小部件 2

 genesis_register_sidebar（数组（
   'name' => __( 'Home Content Top Middle', 'genesis-sample' ),
   'id' => 'content-2',
   'description' => __( 'Top Middle Home', 'genesis-sample' ),
 ) );

对于内容小部件 3

 genesis_register_sidebar（数组（
   'name' => __( 'Home Content Top Right', 'genesis-sample' ),
   'id' => 'content-3',
   'description' => __( 'Top Right Home', 'genesis-sample' ),
 ) );

如下所示，我已经成功创建了 3 个不同的小部件。 现在让我们继续在 WordPress 仪表板中上传自定义主题。

请注意，小部件可以在小部件选项卡中看到。 但是，激活它们不会对我们主题的前端产生任何影响。 那是因为我没有添加标记来在我们的front-page.php文件中显示这些小部件。

为了添加标记以显示小部件，我在front-page.php文件中声明了一个自定义函数。 在那个函数中，我从它的“id”调用小部件，它之前是在function.php文件中与一些 HTML 标记一起创建的。

尽管添加此函数仍然不会执行任何操作，因为我们尚未将此函数附加到任何操作。

为此，我声明了一个包含钩子'genesis-meta' 的操作，并在其中调用了一个函数'my_homepage_setup' 。 在此功能中，我正在检查小部件区域是否处于活动状态。 如果是，那么我必须将该小部件挂接到指定位置，然后调用该小部件函数来显示小部件标记。

现在我将在front-page.php文件中添加以下代码片段。

滑块小部件

add_action('genesis_meta', 'my_homepage_setup');

函数 my_homepage_setup() {

     如果（is_active_sidebar（'front-page-1'））{
            //* 添加滑块小部件
           add_action('genesis_after_header', 'display_front_page_1_widget');
     }
}

// 添加标记以显示滑块小部件。

函数 display_front_page_1_widget() {
     genesis_widget_area('front-page-1', array(
           'before' => '<div class="front-page-1-widget"><div class="wrap">',
           '之后' => '</div></div>',
     ) );
}

内容小部件（1、2 和 3）

 add_action( 'genesis_before_content', 'ng_home_page_widgets' );

//* 添加家庭小部件到位

函数 ng_home_page_widgets() {
           如果 ( is_front_page('') )
           genesis_widget_area ('content-1', array(
                'before' => '<div class="one-third first hometopcol toplefthome">',
                '之后' => '</div>',));
           如果 ( is_front_page('') )
           genesis_widget_area ('content-2', array(
                'before' => '<div class="one-third hometopcol topmiddlehome">',
                '之后' => '</div>',));
           如果 ( is_front_page('') )
           genesis_widget_area ('content-3', array(
                'before' => '<div class="one-third hometopcol toprighthome">',
                '之后' => '</div>',));
           }

最后在你的 style.css 文件中添加一些 CSS 样式

我正在将 CSS 添加到样式小部件区域。 但是，您可以按照自己喜欢的方式设置样式。

为简单起见，我只定义了内容小部件的大小和填充：网站容器的边框和背景颜色。

 .first {margin-left:0px;}

.site-container {背景：#fff;}
.site-inner {padding-top:0px;}

家庭内容{
           颜色：#7e7467；
           字体大小：16px；
           行高：1.3；
           box-shadow:1px 2px 5px 0px rgba(0, 0, 0, 1);
           边距顶部：25px；
           位置：相对；}

.textwidget {padding: 12%; text-align: center;}

.hometopcol {
     边距顶部：0px；
     高度：280px；
     边框：4px 实心 rgb(255,69,0);}

.widgettitle {
           颜色：#c4421b；
           填充：15px 0px 0px 15px；
           边框底部：4px 实心 rgba(162, 152, 135, 1);
           底边距：10px；
           文本转换：无；
           字体大小：16px;}

.widgettitle：在{之后
           内容： ” ”;
           位置：绝对；
           顶部：43px；
           左：5px；
           右：5px；
           边框：1px 实心 rgba(162, 152, 135, 1);}

让我们回到 WordPress 网站并查看更改。 对于 Slider Widget，我将使用 Smart Slider 3。您可以使用您选择的任何滑块小部件。 对于内容小部件，我将简单地使用文本。

最后看

在本文末尾，我能够为 Genesis Sample 子主题创建 4 个自定义小部件。 默认情况下，Genesis 主题不附带任何标题小部件，但现在我有自己的自定义小部件，可用于滑块或显示任何其他信息。 其他 3 个内容小部件可用于突出显示产品或服务或任何其他功能。

激活所有小部件后，首页应如下所示：

概括

在本文的开头，我们只知道如何使用 Genesis WordPress 主题作为示例子主题，但是随着我们的前进，我们学习了如何在 WordPress Genesis 示例主题中创建自定义小部件区域以及如何将它们放置在首页设计中。

我相信，这篇文章已经给了您足够的信心来自定义或创建您自己的 Genesis 子主题。 对于最佳实践，建议查看官方 Genesis 和 WordPress 文档。