您想将WordPress小部件添加到您网站的标题区域吗?

小部件可让您轻松地在WordPress主题的指定部分中添加内容块。

在本教程中,我们将向您展示如何轻松地将WordPress小部件添加到您的网站标题。

备注:这是中级教程。 您需要将代码添加到 WordPress主题的文件 并掌握一些CSS。

但在进行任何修改之前,请先找到 5 WordPress插件备份您的博客 如何安装WordPress主题 et 我应该如何许多插件安装WordPress的.

然后,让我们回到为什么我们在这里。 

为什么以及何时需要在标题上添加小部件?

小部件使您可以轻松地将内容块添加到WordPress主题中的指定区域。 这些指定区域称为“ 侧边栏 “或地区” 小部件“。

标头上的窗口小部件区域可用于显示广告,最新文章或您想要的任何内容。

所有流行的网站都使用此特定域来显示真正重要的信息。

也发现 如何在WordPress上发布后添加自定义小部件

在wordpress头区域widgetisee

作为基本规则, WordPress主题 在内容旁边或页脚区域添加侧边栏。 很少有 WordPress 主题在内容上方或标题中添加小部件区域。

我们也建议您发现我们的 MailChimp教程法语:完整的指南来创建一个简讯

这就是为什么在本教程中,我们将向您展示如何在WordPress网站的标题中添加小部件区域。

步骤1:建立小工具区域

首先,我们需要创建一个自定义窗口小部件区域。 此步骤将使您可以在“ 外观>小部件 在您的WordPress仪表板上。

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

函数bpc_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','bpc_widgets_init');

此代码在WordPress主题上保存了一个新的侧边栏或小部件区域。

如果您从未在本地安装WordPress,请查找 如何在PC上本地安装的WordPress / Windows的XAMPP带

您可以转到“ 外观>小部件 然后您会看到一个标记为“ 自定义页眉按钮区 “。

新的WordPress小部件区域

继续,然后向该新创建的区域添加文本小部件并保存。

试试吧 我们有关添加小部件的指南.

步骤2:在标题中显示小部件

如果您访问您的网站,则将无法看到您刚刚添加的文本小部件。

因为我们尚未展示给您如何显示 自定义小部件 WordPress的。

这就是我们在此步骤中要做的。

这也是给你的清单 5重要的WordPress插件可提高您博客的收入

您将需要编辑文件 header.php文件 在您的WordPress主题中,将此代码添加到要显示小部件的位置。


 
 
 
 

不要忘记保存您的更改。

然后,您可以访问您的网站,并且标题中会显示文本小部件。

演示站点

结果不一定是最有吸引力的。 这就是为什么您需要CSS以便正确显示它的原因。

3步骤:为CSS标头赋予样式

根据您的WordPress主题,您需要添加CSS代码以控制标题和小部件区域的显示方式。

最简单的方法之一就是使用CSS Hero。 后者允许您使用直观的用户界面来修改WordPress主题的CSS。

我们还建议您发现这一点 您可以使用Yellow Pencil WordPress插件做什么?

如果您不想使用插件,则可以通过访问“ 外观»个性化 自定义WordPress主题。

另请阅读我们的文章 10 WordPress插件可改善博客流量

这将允许您显示WordPress Customizer界面。 您需要点击“ 额外的CSS “。

额外的CSS WorDPress

标签« 额外的CSS 在“ 定制 允许您在查看右侧预览中的更改时添加自定义CSS。

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

以下是CSS入门示例:

DIV#头的小部件区域{宽度:100%; 背景色:#f7f7f7; 底部边框:1px固体#eeeeee; 文本对齐:中心; } H2.chw标题{边距:0px; 文本对齐:左; 文本转换:大写; 字体大小:小; 背景色:#feffce; 宽度:130px; 填充:5px; }

这是我们的自定义窗口小部件将如何显示在二十十七个主题标题上的方式。

演示主题二十七个wordpress

还发现一些高级WordPress插件  

您可以使用其他 WordPress插件 赋予现代外观并优化您的博客或网站的处理。

我们在这里为您提供了一些高级WordPress插件,它们将帮助您实现这一目标。

1。 Smart4y工具提示

Smart4y 工具提示是一个 WordPress插件 灵活的工具,专门用于创建现代工具提示,而不依赖于 Javascript 库。 它完全响应并提供插入 HTML 内容的可能性。

Smart4y Tooltip响应式WordPress插件

它的WYSIWYG编辑器可让您直观地创建每个工具提示,而无需输入任何代码,但是如果愿意,您可以随时进行操作。

发现我们的 10 WordPress插件用于评估您博客中的文章

它的其他功能是: 生成器页面支持,响应性强的布局,能够为所有工具提示定义全局参数或为每个工具提示定义特定参数的功能,支持预定义的视觉效果,在调整大小的窗口上计算工具提示的位置,详细文档等。

下载| 演示| 虚拟主机

2。 正当

Le WordPress插件 Justified 是一个响应式画廊插件,它使用 jQuery 将缩略图对齐在一个对齐的网格中,就像在 Flickr 上一样。 

有道理,WordPress插件,摄影师,

它带来的功能将您的画廊与竞争对手的画廊区分开!

其主要功能是:响应式布局,特殊的天桥效果,自动网格重新对齐,  简码编辑器,外观e完全可定制,支持p观众和 很多其他的…

下载 | 演示 | 虚拟主机  

3。 安排电子邮件

ce WordPress插件 顾名思义,您可以安排在网站上发布电子邮件。 它是“关注我的博客文章”WordPress 插件扩展的一部分。 安排电子邮件关注我的博客发布wordpress插件

现在,您可以根据小时,天数或星期来计划电子邮件的发布。

另请阅读我们的文章 10 WordPress插件使用您网站上的地图

它提供了发送所有通知的组合电子邮件而不是发送每个通知的每个电子邮件的可能性,并且还允许为不同的电子邮件定义不同的电子邮件模板,最终使您的电子邮件接收更加容易理解。 。

下载演示 |虚拟主机

推荐资源

查找有关其他推荐资源的信息,以帮助您构建和管理网站。

结论

就是这样! 这就是本教程的全部内容,希望它可以帮助您在WordPress主题的标题上添加小部件区域。 不要犹豫 与您最喜欢的社交网络上的朋友分享

但是,您也可以咨询我们的 RESSOURCES,如果您需要更多的元素来执行创建Internet网站的项目,请参考我们关于 WordPress博客创建。

如果您有任何建议或意见,请将其留在我们的部分 评论.

...