免费赠品发布:“ Bare Responsive” –一个空白且响应Swift的WordPress主题

我发现在简单的模板模型上构建确实可以加快项目进度 ,而工作压力也要小得多。

完成这项工作无数次之后,您开始寻找任何更简单的方法。

从头开始创建WordPress主题是一项艰巨的任务。

包括所有典型的WordPress模板文件, 您可以*地对其进行任何程度的编辑

该设计对移动设备友好,并可以响应不同的屏幕宽度。

因此,我创建了一个名为“裸响应”的独特WordPress模板,您可以在下面下载。

最终,我希望该模板可以为WordPress开发提供一个起点 ,胜于空白画布。

除了模板文件,我还提供了一些虚拟数据 (您也可以在下面下载)以导入并测试设计。

在下面的简短文章中,我将解释一些WordPress功能以及如何在自己的主题中利用它们

标题内

您应该尝试更改作者元标记以匹配您自己的名称或新网站的名称。

查看header.php文件,我包括了许多额外的元数据和第三方脚本。

另外,我还在标题文本中包含了指向Google网络字体Quando的外部样式表链接。

免费赠品发布:“ Bare Responsive” –一个空白且响应Swift的WordPress主题

但是,您应该查看wp_nav_menu()的参数,以找出可能需要的任何更改。

从技术上讲,您无需对PHP代码进行任何编辑。

现在您可能还会注意到,我在WordPress主题内使用了自定义导航设置。

然后,您应该能够将该新菜单连接到模板文件中的“页眉菜单”中。

您应该做的是在WP管理员外观>菜单内创建一个新菜单。

免费赠品发布:“ Bare Responsive” –一个空白且响应Swift的WordPress主题

这样,您可以将自定义链接页面 (甚至子页面 )添加到顶部导航,而无需进行任何编程。

自定义主题功能

这将保留所有默认主题属性,包括导航菜单和小部件侧边栏。

您可能应该自定义的最有趣的代码块可能是在functions.php内部。

但是在Appearance> Widgets中找到这些侧边栏也很容易。

默认情况下,您不需要在其中添加任何内容,因为模板将显示非小工具数据。

我已经设置了两个不同的侧边栏,它们都已小部件化。

免费赠品发布:“ Bare Responsive” –一个空白且响应Swift的WordPress主题

这个新的适合移动设备的侧边栏仅包含2个元素,并将显示在页面内容下方。

随着屏幕宽度变小,最终该边栏将被隐藏并替换为响应式边栏。

对于所有默认布局样式, 主侧栏都浮动在右侧。

但是,您也可以在两个侧边栏之间设置完全不同的上下文,这可能更可靠。

拥有此选项很好,因为您可以选择将侧栏与相同的内容进行匹配。

我已经在主题文件中定义了几个其他函数。

我非常不喜欢这种典型的WordPress设置,感觉有点强迫。

首先,我从博客文章链接的末尾删除#more哈希。

因此,我已使用自定义WordPress过滤器将其添加到HTML中。

同样,在存档页面中,默认情况下我们没有“阅读更多”链接。

可能的用户编辑

尽管您确实可以单独处理文件,但是如果您没有用于测试更改的WordPress博客,这将非常困难。

响应式主题很简单,您可以在WordPress管理面板中上传模板并开始编辑文件。

同样,所有响应式移动CSS代码都位于同一style.css样式表中。

本着保持简单的精神,我将主题文件仅限于我们的基本要求

免费赠品发布:“ Bare Responsive” –一个空白且响应Swift的WordPress主题

您将可以随时编辑模板样式,以更好地满足您的需求。

我觉得这是标题导航的最佳解决方案之一,而且看起来非常流畅。

自定义script.js用于移动响应下拉导航面板。

如果您需要在移动菜单上自定义CSS样式,只需确保将ID和类与jQuery脚本相关即可。

免费赠品发布:“ Bare Responsive” –一个空白且响应Swift的WordPress主题

最后的想法

使用WordPress并非易事,而从头开始编写一些代码可能会带来不同。

再次,我希望这个反应迟钝的模板可以为年轻的开发人员提供灵感。

我很乐意回答问题并听到建议,因为显然这不是一个完美的模板。

因此,到那里开始编码吧!

与其他开发人员一起工作是提高自己的技能并发现常见错误的最好方法。

资料下载

wptestdata.xml

下载此XML文件并将其导入到WordPress中,以提供一些虚拟内容。

裸响应WordPress主题

整个项目有意以MIT许可证的形式作为开源发布,这意味着您可以编辑和分发任何项目的无限制副本,只要您不声明自己的所有权或转售它即可。


翻译自: https://www.hongkiat.com/blog/wordpress-responsive-template/