网站内容添加(是否要将WordPress小部件添加到您网站的标题区域?)

优采云 发布时间: 2021-10-08 22:26

  网站内容添加(是否要将WordPress小部件添加到您网站的标题区域?)

  您想将 WordPress 小部件添加到您的 网站 标题区域吗?该小部件允许您轻松地将内容块添加到主题的指定部分。在本文中,我们将向您展示如何轻松地将 WordPress 小部件添加到您的 网站 标题中。

  

  注意:这是一个中级教程。您需要将代码添加到 WordPress 主题文件并编写 CSS。

  为什么以及何时需要在 网站 上使用标题小部件?

  该小部件允许您轻松地将内容块添加到 WordPress 主题中的指定区域。这些指定区域称为侧边栏或小部件就绪区域。

  标题中或内容之前的小部件就绪区域可用于显示广告、最近的 文章 或您想要的任何内容。

  这个特殊区域被称为“下折叠”,所有流行的网站 都用它来展示非常重要的东西。

  

  通常,WordPress 主题会在内容或页脚区域旁边添加一个侧边栏。没有多少 WordPress 主题在内容上方或标题中添加小部件就绪区域。

  所以在本文中,我们将介绍如何在WordPress网站的标题中添加widget区域。

  步骤1.创建标题小部件区域

  首先,我们需要创建一个自定义小部件区域。此步骤将允许您在 WordPress 仪表板中查看自定义小部件区域外观»小部件页面。

  您需要将此代码添加到主题的functions.php 文件中。

  

function wpb_widgets_init() {

register_sidebar( array(

"name" => "Custom Header Widget Area",

"id" => "custom-header-widget",

"before_widget" => "",

"after_widget" => "",

"before_title" => "",

"after_title" => "",

) );

}

add_action( "widgets_init", "wpb_widgets_init" );

  此代码为您的主题注册一个新的侧边栏或小部件就绪区域。

  您现在可以转到外观»小部件页面,您将看到一个标记为“自定义标题小部件区域”的新小部件区域。

  

  继续将文本小部件添加到这个新创建的小部件区域并保存。有关添加小部件的详细说明,请参阅有关如何在 WordPress 中添加和使用小部件的指南。

  第 2 步:显示自定义标题小部件

  如果您现在访问您的 网站,您将无法看到您刚刚添加到新创建的标题小部件中的文本小部件。

  那是因为我们还没有告诉 WordPress 在哪里显示这个小部件区域。

  让我们在这一步中做到这一点。

  您需要编辑主题中的 header.php 文件,并将此代码添加到要显示自定义小部件区域的位置。

  不要忘记保存更改。

  您现在可以访问您的 网站,您将看到标题小部件区域。

  

  你会发现它看起来有点粗糙。这就是你需要 CSS 来让它看起来更好的地方。

  第 3 步:使用 CSS 设置标题小部件区域的样式

  根据您的主题,您需要添加 CSS 来控制标题小部件区域和其中的每个小部件的显示。

  更简单的方法是使用 CSS Hero 插件。它允许您使用直观的用户界面更改任何 WordPress 主题的 CSS。有关详细信息,请参阅我们的 CSS Hero 评论。

  如果您不想使用插件,您可以通过访问»自定义页面为您的主题添加自定义 css 外观。耶。

  这将启动 WordPress 主题定制器界面。您需要单击“附加 CSS”选项卡。

  

  主题定制器中的其他 CSS 选项卡允许您在观看实时预览中显示的更改时添加自定义 CSS。

  出于本教程的目的,我们假设您将仅使用此区域添加一个小部件来显示横幅广告或自定义菜单小部件。

  以下是一些示例 CSS,可帮助您入门。

  

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;

}

  这就是我们的自定义标题小部件区域在默认的 27 主题中的显示方式。

  

  您可能需要调整 CSS 以匹配您的主题。请查看我们的指南以了解如何向 WordPress 小部件添加自定义样式。

  我们希望本文能帮助您了解如何将 WordPress 小部件添加到您的 网站 标题中。您可能还想查看我们为您的 网站 列出的 25 个最有用的 WordPress 小部件列表。

  ----本页内容已结束,喜欢请分享----

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线