面向初学者的WordPress开发:小工具和菜单

导语:虽然向主题添加小工具和菜单最终需要一些编码专业知识,但实际需要的PHP实现起来很简单。一旦你理解了逻辑,你就可以运用你的CSS技能来设计你的侧边栏和菜单的外观和感觉。

这是我们面向初学者的五篇系列文章中的第四篇,向您传授WordPress开发的基本概念,以便您可以从修补人员跳到开发人员。到本系列结束时,您将能够创建您自己的基本主题和插件,并使用您自己的特性来充实它们。

在本教程中,您将学习如何编写和自定义您自己的侧边栏和菜单。我们还将深入研究为更复杂的功能编写自定义查询。

注意:对于本系列,重要的是您已经彻底了解了HTML和CSS,因为这两种语言在使用WordPress时都是必不可少的构建块。

我们开始吧。

错过了我们面向初学者的WordPress开发系列教程?你可以在这里查看全部五篇文章:

使用网格化区域

许多人所说的侧边栏实际上是微区化的区域。有时它们确实会显示在侧边栏区域,但情况并不总是如此。

小工具区域可以显示在站点上的任何位置,具体位置由主题开发人员决定。您可能希望在页脚显示一个小部件,在帖子下面显示另一个小部件,在菜单后面显示一个小部件,依此类推。

您还需要告诉WordPress您计划创建一个微区化区域。这称为注册侧边栏,使用户界面显示在管理员中。

在本系列的第三部分“面向初学者的WordPress开发:主题开发简介”中,我们创建了一个functions.php文件。让我们将我们一直在处理的主题的主要内容缩小一点,并为侧边栏添加第二列。我们将首先注册侧边栏,因此将以下内容添加到您的functions.php文件中:

add_action( 'widgets_init', 'mat_widget_areas' );
function mat_widget_areas() {
register_sidebar( array(
'name' => 'Theme Sidebar',
'id' => 'mat-sidebar',
'description' => 'The main sidebar shown on the right in our awesome theme',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
));
}

如果您不理解add_action()代码,请不要担心,我们还没有介绍它!(我们将在本系列的下一篇文章“面向初学者的WordPress开发:构建插件”中介绍它。

问题的关键在于mat_widget_area()函数。我们使用register_sidebar()函数告诉WordPress我们的微区化区域的所有细节。

名称和描述参数将显示在管理员用户界面中,因此请使它们具有描述性!每个小工具都将包装在小工具参数之前和之后提供的代码中。使用%1$s作为ID的占位符,使用%2$s作为任何类的占位符,WordPress将自动生成这些占位符。

一旦保存了这段代码,您应该会在外观菜单中看到新的小工具子部分显示,并且我们的小工具区域应该会显示给定的详细信息。

到目前一切尚好。您现在可以像往常一样将小工具添加到这个小工具区域,但是它不会出现在任何地方,因为我们还没有将它添加到主题代码中。

创建一个sidebar.php文件并向其中添加以下内容:<div id=”site-sidebar”>This is my sidebar</div>。

我们需要修改页眉和页脚文件以适应侧边栏。我们要寻找的结构如下:

<body>

<div id="site-header"></div>

<div id='site-container'>
<div id='site-content'></div>
<div id='site-sidebar'></div>
</div>
</body>

要实现这一点,我们需要在页眉中打开#site-tainer div,然后在页脚中关闭它。我们还需要在页脚中包括我们的侧边栏。它包含#site-侧边栏元素。

下面是页眉和页脚文件的最终格式,以供参考:

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<div id="site-header">
<h1><?php bloginfo('title') ?></h1>
</div>

<div id='site-container'>
<div id='site-content'>
</div> <!-- site content -->

<?php get_sidebar(); ?>

</div> <!-- site content -->

<div id='site-footer'>
<p>&copy; My Awesome Theme</p>
</div>

<?php wp_footer() ?>
</body>
</html>

如您所见,可以使用get_sidebar()函数拉入侧栏文件。此时,您应该在您的内容下看到“This is my sidebar”,但是通过添加一些样式,我们可以将侧边栏放在我们的内容旁边。

以下是我所做的修改,以及代码形式的新添加和修改:

  • 我修改了#site-content,将最大宽度减少到525px,并添加了一个左侧浮动。
  • 我添加了#site-sidebar,给它一个220px的宽度,22px的边框,一个边框半径和白色背景,就像内容一样,我把它放在右边。
  • 我添加了#site-container,使其与内容和侧边栏的累计宽度一样宽,并使其居中。
  • 我向页脚添加了一条明确的规则,以强制其位于浮动元素的下方。
<!DOCTYPE html>
<html>
<head>
<title>A single post template</title>
</head>
<body>

<div id="site-header">
<h1>Welcome to my site</h1>
<nav>
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
<li><a href=''>Contact</a></li>
</ul>
</nav>
</div>

<div id="article">
<h2 class="article-title"><?php the_title() ?></h2>
<div class="article-content"><?php the_content() ?></div>
<div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?></div>
</div>

<div id="site-footer">
<nav>
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
<li><a href=''>Contact</a></li>
</ul>
</nav>
<div id="copyright">&copy; Daniel Pataki</div>
</div>

</body>
</html>

难题的最后一块是告诉WordPress显示分配给我们侧边栏的所有小工具。这可以使用dynamic_sidebar()函数来完成,将侧边栏的ID添加为第一个参数。

下面是sidebar.php文件最后的样子:

<div id='site-sidebar'>
<?php dynamic_sidebar( 'mat-sidebar' ); ?>
</div>

测试主题现在应该在右侧显示一个较窄的内容区域和一个小窗口小工具区域,显示所选的小工具。它很难看,但是没有什么是后面的CSS不能修复的!

小工具:我们学到了什么

如果这是您第一次实现侧边栏,那么这可能有点令人费解,所以让我们来回顾一下。

要向WordPress添加侧边栏,您需要添加以下步骤:

  • 使用register_sidebar()注册侧栏。
  • 使用sidebar.php中的dynamic_sidebar()来拉入您的小工具。
  • 使用get_sidebar()将侧栏包含在适当的位置。
  • 使用CSS设置您的工作样式。

使用菜单

菜单在逻辑上类似于加宽区域。您首先需要注册它们,以便它们显示在WordPress管理中,然后使用函数将它们添加到您的主题中。

让我们首先在functions.php文件中注册一个新菜单:

register_nav_menus( array(
'header-menu' => 'Our Awesome Header Menu',
) );

此功能允许您通过向数组添加成员来添加多个菜单。数组键是主题位置的名称,值是菜单本身的名称。

一旦你做到了这一点,你就可以在后台开始设置菜单了。确保添加了一些菜单项目,然后将菜单分配到“Our Awesome Header Menu”位置,如下图所示。

无论您想在哪里输出菜单,只需使用wp_nav_menu()函数即可。我将把它添加到#site-header元素下面的头文件中,如下所示:

<div id="header-menu">
<?php wp_nav_menu( array( "theme_location" => 'header-menu' ) ) ?>
</div>

wp_nav_menu()函数接受一组可用于控制输出的参数。不过,主题地点对我们来说才是真正重要的。请查看WordPress Codex中的函数文档以获得更深入的解释。

最后,我将添加一些基本样式,使其半可见。恕我直言-使用一些精心制作的CSS就可以解决所有问题(尽管这不是本文的主要关注点)。

#header-menu {
text-align:center;
}

#header-menu ul {
padding:0px;
}

#header-menu li {
display:inline-block;
padding: 0 8px;
}

#header-menu a {
color: #ccc;
text-decoration: none;
}

#header-menu a:hover {
color: #fff;
}

继续阅读和学习

主题必须满足许多要求才能被考虑纳入WordPress主题目录。我们只是触及了皮毛,您现在应该已经有了足够的知识,可以开始为您的主题添加更多的功能了。我推荐安装主题检查插件,它将分析您的主题,并向您显示需要做些什么才能满足WordPress主题审查团队的要求。

你应该添加一些东西,包括404页面,也许是搜索结果的专用视图,分页和一些日常网站经常使用的其他元素,比如关于页面和联系页面。一旦您确定了所有需求,您可能希望使用主题定制器来允许您的主题的任何未来用户选择他们自己的颜色和其他选项。

我们已经介绍了主题开发的基础知识,还有很多东西需要学习,但是只要你练习,你应该会做得很好。我就是这样学到的一点一滴。

下周再来看看本系列的最后一篇文章“面向初学者的WordPress开发:构建插件”。

在此期间,你应该:

回顾本系列上周的帖子,面向初学者的WordPress开发:构建主题。

继续温习PHP。

继续围绕您的主题进行建设。你会陷入困境,你会感到沮丧,你会犯一些需要很长时间才能修复的错误,但这些都是非常正常的。克服它–这都是学习过程的一部分。

你觉得这个教程有帮助吗?你为什么想学习WordPress开发?你想了解更多关于什么的信息?在下面的评论中让我们知道。

发表评论

邮箱地址不会被公开。 必填项已用*标注