从头开始创建WordPress主题是一项艰巨的任务。 完成这项工作无数次之后,您开始寻找任何更简单的方法。 我发现在简单的模板模型上构建确实可以加快项目进度 ,而工作压力也大大减轻了。
因此,我创建了一个名为“裸响应”的独特WordPress模板,您可以在下面下载。 该设计对移动设备友好,并可以响应不同的屏幕宽度。 包括所有典型的WordPress模板文件, 您可以自由地对其进行任何程度的编辑 。
最终,我希望该模板可以为WordPress开发提供一个起点 ,而不是空白画布。
除了模板文件,我还提供了一些虚拟数据 (您也可以在下面下载)以导入并测试设计。
在下面的简短文章中,我将解释一些WordPress功能以及如何在自己的主题中利用它们 。
标题内
查看header.php文件,我包括了很多额外的元数据和第三方脚本。 您应该尝试更改作者元标记以匹配您自己的名称或新网站的名称。
另外,我还在标题文本中包含了指向Google网络字体Quando的外部样式表链接。
![Hongkiat的Wordpress Bare Responsive主题](https://i-blog.csdnimg.cn/blog_migrate/62fec15b9fba75df270746ade48782f1.png)
现在您可能还注意到,我在WordPress主题内使用了自定义导航设置。 从技术上讲,您无需对PHP代码进行任何编辑。 但是,您应该查看wp_nav_menu()的参数,以找出可能需要的任何更改。
您应该做的是在WP Admin Appearance>菜单内创建一个新菜单。 然后,您应该能够将该新菜单连接到模板文件中的“页眉菜单”中。
![Hongkiat的Wordpress Bare Responsive主题](https://i-blog.csdnimg.cn/blog_migrate/95559c9faed97d37dccf495211a0a608.png)
这样,您可以将自定义链接和页面 (甚至子页面 )添加到顶部导航,而无需进行任何编程。
自定义主题功能
您可能应该自定义的最有趣的代码块可能是在functions.php内部。 这将保留所有默认主题属性,包括导航菜单和小部件侧边栏。
我已经设置了两个截然不同的侧边栏。 默认情况下,您不需要在其中添加任何内容,因为模板将显示非小工具数据。 但是在Appearance> Widgets中找到这些侧边栏也很容易。
![Hongkiat的Wordpress Bare Responsive主题](https://i-blog.csdnimg.cn/blog_migrate/02c7ddc28057bbdfd35e851acb1ab377.png)
对于所有默认布局样式, 主侧栏浮动在右侧。 随着屏幕宽度变小,最终该侧边栏将被隐藏并替换为响应侧边栏。 这个新的适合移动设备的侧边栏仅包含2个元素,并将显示在页面内容下方。
拥有此选项很好,因为您可以选择将侧栏与相同的内容进行匹配。 但是,您也可以在两个侧边栏之间设置完全不同的上下文,这可能更可靠。
我已经在主题文件中定义了几个其他函数。
首先,我从博客文章链接的末尾删除#more哈希。 我非常不喜欢这种典型的WordPress设置,感觉有点强迫。
同样,在存档页面中,默认情况下我们没有“阅读更多”链接。 因此,我已使用自定义WordPress过滤器将其添加到HTML中。
可能的用户编辑
响应式主题很简单,您可以在WordPress管理面板中上传模板并开始编辑文件。 尽管您确实可以单独处理文件,但是如果您没有用于测试更改的WordPress博客,这将非常困难。
本着保持简单的精神,我将主题文件仅限于我们的基本要求 。 同样,所有响应式移动CSS代码都位于同一style.css样式表中。
![Hongkiat的Wordpress Bare Responsive主题](https://i-blog.csdnimg.cn/blog_migrate/f1d1f197f130b8515523d5c669ca9258.jpeg)
您将可以随时编辑模板样式,以更好地满足您的需求。
自定义script.js用于移动响应下拉导航面板。 我觉得这是标题导航的最佳解决方案之一,而且看起来非常流畅。
如果您需要在移动菜单上自定义CSS样式,请确保将ID和类与jQuery脚本相关。
![Hongkiat Bare Responsive主题-移动响应式导航屏幕截图](https://i-blog.csdnimg.cn/blog_migrate/13a433b3003571e7949b21c545aaf993.png)
最后的想法
再次,我希望这个React迟钝的模板可以为年轻的开发人员提供灵感。 使用WordPress并非易事,而从头开始编写一些代码可以使一切变得不同。
我很乐意回答问题并听到建议,因为显然这不是一个完美的模板。
与其他开发人员一起工作是提高自己的技能并发现常见错误的最好方法。 因此,到那里开始编码吧!
资料下载
wptestdata.xml
下载此XML文件并将其导入到WordPress中,以提供一些虚拟内容。
响应式WordPress主题
整个项目有意根据MIT许可证以开源形式发布,这意味着您可以编辑和分发任何项目的无限份数,只要您不声明自己的所有权或转售它即可。
翻译自: https://www.hongkiat.com/blog/wordpress-responsive-template/