

注意:这是一个中级教程。您需要将代码添加到WordPress主题文件并编写CSS。
通常,WordPress主题会在内容或页脚区域旁边添加侧边栏。有多少WordPress主题在内容上方或标题中添加小部件就绪区域。
这就是为什么在本文中,我们将介绍如何将小部件区域添加到WordPress网站的标题中。
|
1
2
3
4
五
6
7
8
9
10
11
12
13 |
function wpb_widgets_init() { register_sidebar( array( 'name' => 'Custom Header Widget Area', 'id' => 'custom-header-widget', 'before_widget' => '<div class="chw-widget">', 'after_widget' => '</div>', 'before_title' => '<h2 class="chw-title">', 'after_title' => '</h2>', ) );}add_action( 'widgets_init', 'wpb_widgets_init' ); |
继续,并将文本小部件添加到此新创建的小部件区域并保存。有关添加小部件的详细说明,请参阅我们的指南,了解如何在WordPress中添加和使用小部件。
|
1
2
3
4
五
6
7
8 |
<?phpif ( is_active_sidebar( 'custom-header-widget' ) ) : ?> <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary"> <?php dynamic_sidebar( 'custom-header-widget' ); ?> </div> <?php endif; ?> |
你会发现它看起来有点粗糙。这就是你需要CSS让它看起来更好的地方。
主题自定义程序中的其他CSS选项卡允许您在观看实时预览中显示的更改时添加自定义CSS。
为了本教程的目的,我们假设您将仅使用此区域添加单个小部件来显示横幅广告或自定义菜单小部件。
以下是一些示例CSS,可帮助您入门。
|
1
2
3
4
五
6
7
8
9
10
11
12
13
14
15 |
div#header-widget-area { width: 100%; background-color: #f7f7f7;border-bottom:1px solid #eeeeee; text-align: center;} h2.chw-title { margin-top: 0px; text-align: left; text-transform: uppercase; font-size: small; background-color: #feffce; width: 130px; padding: 5px; } |
您可能需要调整CSS以匹配您的主题。请查看我们的指南,了解如何向WordPress小部件添加自定义样式。
我们希望本文能帮助您了解如何将WordPress小部件添加到您网站的标题中。您可能还希望查看我们为您的网站列出的25个最有用的WordPress小部件列表。