学习笔记:露兜WP主题制作教程(2)

In 泊人笔记

Fresh green pandan leaf on table

前文学习笔记:露兜wp主题制作教程(1)


2023.1.12 更新:

圣诞新年假期结束后回来继续学露兜教程。今天学会了如何做公用的底部页面footer.php和侧栏页面sidebar.php。

footer很容易,但有一个要点:增加了一句wp代码<?php wp_footer();?>后,和前面头部的代码<?php wp_head();?>合起来就能使页面上方的wp黑色工具条被正确调用出来,如果不加这句,单单只有header的那句,就会在工具条的位置出现一条空白长带。这一步在第五篇制作header里没有讲,还好我看了下面的评论才明白,否则那条空白长带非得让我百思不得其解整个圣诞节+新年!🤣

侧栏特别重要,也很复杂,这里增加了一个简单的function.php文件,里面只写了注册sidebar,写了4个sidebar,后来我自己又加了第5个。这个文件放进目录后,后台就出现了小工具和菜单两部分了,试了一下,侧边栏可以正确调用小工具的了,而菜单还不行,要手动加在header代码里。暂时有个替代办法是我在某一个侧栏(我用了第5个)里设为导航,然后在菜单位置调用这第5个侧栏,也就实现了自定义菜单,就是位置比原来菜单的位置低了一点,不知道为啥。


2023.1.13 更新:

xampp又出现了上次一模一样的问题就是mysql数据库无法启动,错误信息:MySQL shutdown unexpectedly。昨天本来想好把测试博客导出备份的结果忘了,现在要是重装xampp,博客也就得重装,就又要失去:6篇测试博客、3个分类、7个标签、5张图了,虽然不多但重输入一遍也挺烦的。于是就上网搜解决办法,google了一下xampp MySQL shutdown unexpectedly,搜到的第一条回答,照着做一下子就修好了:

https://stackoverflow.com/questions/18022809/how-to-solve-error-mysql-shutdown-unexpectedly

步骤如下:

  1. 找到xampp/mysql/下的data目录,把data改名,可改为data_old;
  2. 同在xampp/mysql/下的backup目录,整个拷贝一下,并改名为data;
  3. 把data_old里除mysql, performance_schema, phpmyadmin这三个目录之外的所有目录都拷贝到新的data里,我这儿就只有2个目录需要拷,散文件不要拷;
  4. 把data_old里的ibdata1文件拷贝到data里;
  5. 重启动xampp,就正常了。

数据库一复原,测试博客就能用了,赶紧导出备份一下。以后记得增加新的东西后就每天都导出一下。

一天内把index.php、single.php和comments.php都学会了,前两者原理一致,就是index有分页链按钮,single是前后文链按钮,这是一个区别。但教程里single没教前后文按钮,只有返回主页和添加评论按钮,我得自己研究一下怎么添加前后文按钮。comments页面和其它公用页面原理相同,我就把教程上的代码不动脑筋的都拷贝下来替换了原来的html代码就成功了。

现在的问题是想每页都有featured image也就是题图功能。露兜教程没有教怎么添加题图,他那是12年前的教程,大概那时题图还不流行,所以他建议删了原来占位的文章题图的代码。我就暂时留着没删,但那个图是不对的,是留着占位的图片,而不是给文章设置的题图。而且这个测试主题本身也是不支持题图功能的,虽然文章里有设但在这个主题下是看不出来的。所以还得自己找一下怎么增加这个功能,估计得先在funtion.php里加功能函数,再在index和single里插入相应的语句让它调用。

原理是懂的,具体语句是什么样的完全不知道,必须网上一一去搜,这就是我这种没学过代码的人学主题制作的根本问题🤣


2023.1.14 更新:

昨晚搜到了一个非常好的给主题添加featured image并应用在具体页面的方法,是英文的:

蓝山玩了一天回来后也来不及休息,急不可待地测试了这个方法,基本上一下子就成功了。

唯一百思不得其解的是funtion里那段相关的新语句,如果添加在最后,就不起作用,而且格式上这段语句也是全黑的不是彩色的,看起来就不大对;但添加在funcion的最前面或者插在侧边栏和评论这两部分之间,就对了,起作用了,语句也变彩色了。搞不懂为啥有这区别。

自己又调整了single和index各自题图需要的尺寸。看起来非常像样了。就是还有一条我想知道而它没有教的:题图可以按预定尺寸crop显示,比如index上我想显示为小正方形,而不是像现在默认的是完整图片按预定宽度显示。这个又得自己去搜答案了。


2023.1.16 更新:

把家里电脑上的本地湾主题打包带到公司同步,发现两个同样是本地电脑的博客,任何条件都一样的,样式却还有些不同,两者都不支持function里的题图crop成方形,有点怀疑是不是本地的数据库和线上的有区别,就在线上rtucn.xyz下面又装了一个测试WP叫云上湾。把数据导入,主题也直接用本地的Aurelius目录打包一模一样装进去。

装完发现云上湾的样式对了,题图自动crop成方形也可以了。但function里改回长方比例却没反应了,wp内置的media的crop,改比例,旋转等功能也都不行,但一旦改回2021主题,这些功能就能用。怀疑还是function里缺了什么语句。

测试线上站地址: 云上湾

现在3个测试站:两台电脑各1个,加线上1个,三个用了一模一样的样式表和function.php以及各种页面.php,居然样式都不完全一样,真是百思不得其解。

下一步是要找到在function里添加支持菜单的办法,要能在顶部直接用上顶部导航,这个露兜教程里也没有具体教,也是三个测试站都还没做到的事情。现在我是把菜单设置在第5侧边栏,再让顶部导航引用第5侧边栏,通过这么曲线救国的奇葩方式来实现的。

晚上把教程最后一部分page.php学掉了,依样画葫芦做了full-width.php和contact.php,学会了怎么在php头上加注释,这样能使:

  1. 创建新page时能选择这两个新模板——不做这一步的话是看不到新模板选项的;
  2. 注释内容也就是模板名称会显示在theme file editor的列表里。

有趣的是我在single.php头上也加了一样的注释起名为single,它就也成为了page的模板,而不是post的模板,那么要怎样给post增加新模板比如portfolio,gallery post模板呢,这也要另外去搜搜。

露兜教程差不多学完了。但教程没有教archive.php,只在index部分说它和index完全一样,只需要在function里增加一个函数,这个function我已经下载了。但我觉得并不太一样吧,这个还挺重要的,当点击分类、标签或者月份存档时自动生成的页面应该就是archive.php。不过教程最后提供了所有改过的主题文件包下载,下载后看到archive也是改过的,只要自己研究一下相关函数,拷贝粘贴进自己的archive.php就行了。大致看了一下archive后半段代码和index是一样的,前半段不一样,因为有分类、标签、年月日、作者等不同的存档方式。明天做这个事。


2023.1.17 更新:

搜到了增加post模板的办法,就和page模板一样,只要在注释里增加一句* Template Post Type: post(或者再加上page, portfolio等,逗号分割)就行。

如果注释里写了几种不同type比如post, page,那么post, page里都会同时出现这个模板选项。甚至直接在那个full_width的page模板里直接加上这句,post里也就会出现full width的选项。

但实际上并不适合这样做,因为post和page的内容结构不完全一样,我对照了一下post和page的构成,其中post必需的元信息、前后文链接在page里都要去掉,评论部分也可以去掉。所以最好是post模板用single.php为基础新建,才能和page模板不一样。portfolio也应该用single.php为基础。

这样我就以single.php为基础新增了一个full width post模板,应用正常。

发现云上湾的后台图片编辑里的crop、旋转等又不行了,昨天还可以crop、旋转的。百思不得其解。

不过云上湾的function改题图尺寸但不更新的问题我找到解决办法了,就是要重新上传图片,function里改过尺寸之后,旧题图都不会更新,因为图片上传瞬间就生成了对应尺寸的几个文件,没有生成过的尺寸它也不会重新生成,就只能显示已有尺寸,我把一篇博文的题图换了一张新上传的,它就主页和单页都显示了正确的尺寸了。而旧文章的旧图一直不变。

另外我在线上后台改theme的文件,页面常常刷不出更新,每次要点一下工具条里的purge cache才行。有时点purge cache都不行。这个purge cache应该是服务商Hostinger提供的,因为同样的wp装在Godaddy就没有。Godaddy太烂了,去年11月自从给联盟买了这个Hostinger的空间之后就感觉又便宜又好用,比Godaddy便宜3倍都不止,还无限量提供永久免费SSL,现在Hostinger又在新年特价,准备给自己也买一个,整个搬家过来,把Godaddy的都取消掉。

成功新增了feature post, portfolio两个post模板,每个用了不同的题图尺寸,新上传图片后裁剪都成功,portfolio去掉了时间评论等信息,只留了分类和标签。不过portfolio应该是独立与post的另一栏目,应该要在后台菜单上另列,也不要出现在首页文章里,这个还不知道怎么做。

晚上把archive.php学会了,下半部从标签<---blog post--->起和index.php相同,这部分就拷贝了index.php,再把标签之上的上半段代码按范例替换了,静态按钮换成动态调用按钮,静态标题也改成动态调用标题,从</div><---blog post--->标签之间还加了一大段排序query,没有这段代码的话,几种排序方式按下去也不起作用的。但最重要的是这一点:

我发现这样上半段下半段贴好后,居然一进存档页面就严重错误,一一对照了语句发现原来是index.php里原本跟在blog post标签之后的一句<!--?php if (have_posts()) : while (have_posts()) : the_post(); ?-->,和现在那段query的最后一句是相同的,重复了,所以会出现严重错误,必须删除重复的一句,而且这句必须留在query里才正确,如果删了query结尾的这句,留了blog post标签后的那句,就还是严重错误。删掉之后立刻就好了,几种排序也都可行了。

至此露兜教程就学完了。接下来我还想把index的题图再按那篇教的再调一下位置和增加可点击。

目前的遗留问题有:

  1. 导航菜单;
  2. archive作者存档页不显示作者名,框框空间不够放下按钮了;
  3. single的前后文按钮;
  4. 改整页背景颜色。

进阶问题有:二级菜单、自适应😅

1 Comment

Submit a comment

Your email address will not be published. Required fields are marked *