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

In 泊人笔记

green pandan roll cake ready to eat

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


2023.1.18 更新:

露兜教程的遗留问题之2我自己解决了,原来是范例里作者这部分代码没有像日志、标签那样调用具体名字、简介,因此框框高度也不够了,半个按钮就跑到框框外面去了。原代码如下:

// If this is an author archive
} elseif (is_author()) {
	echo '作者存档';

按上面的category和tag的格式相应改成:

// If this is an author archive
} elseif (is_author()) { 
	printf('作者存档</h4> 
	<h2>'.get_the_author('', false).'</h2>' ); 
	if (the_author_description()) echo '<p>'.the_author_description().'</p>'; 

这里get_the_author我一开始写成get_author,页面就严重错误,网上搜了下,加了个the就解决了,后面的简介函数the_author_description也是我瞎蒙的,一下子就蒙对,太高兴了😂

user简介在后台user栏的Biographical Info部分自己添加,也可以加<em> <strong>代码,显示出斜体粗体,但分段、颜色等代码试了几次都不行,应该是不认的。

晚上成功增加了题图的可点击功能,题图靠左文章信息靠右这个排版按范例教的却调不出来。先算了,估计是整个主题的CSS和范例不一样,回头学了CSS再说吧。

然后改遗留问题之1。先复习了一下露兜教程里header.php的菜单部分,范例里的确只说自动添加page,给的函数也是wp_list_pages。把这个list pages代码和暂时顶替的第5侧边栏代码去掉,顶部菜单就不见了。

那么再看露兜另一篇专门讲菜单的帖子,有另一个函数wp_nav_menu:

WordPress主题导航菜单制作的几种方法(一)

做出来了,其实很简单,先在function里添加这句register_nav_menus(); 再到header.php也就是顶部菜单所在页面的菜单位置处,把原来的get sidebar换成:

<?php 
	// 列出顶部导航菜单,菜单名称为mymenu,只列出一级菜单 
	wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) ); 
?> 

//后面的是注释可以不写。一下子就成功了,刷新后顶部菜单顿时出现了。补充一点:Ctrl+F5用来刷新页面也很好,有时用工具条purge cache都没有作用,就可以用Ctrl+F5,它不清cache,但会强制忽略cache。

试了下把depth=2,次级菜单也出来了,但没有动态,直接挂在下面,这肯定不行。所以次级动态菜单还得再学习一下。

然后菜单还有个问题就是顺序是反着来的,后台菜单里从上到下的在页面上就变成了从右到左。搜了一下这是因为css里导航样式为float: right。果然我改成left后它顺序就对了,不过位置也不对了,靠左就跑到页面中间去了,还是靠右吧,反着就把菜单倒序一下也可以。


2023.1.19 更新:

遗留问题之3——博文下方的前后文链接,从post links标签到横线之间,我搜到了一段代码用来替换原代码:

<?php 
$prev_post = get_previous_post(); 
if ( !empty( $prev_post) ): ?> 
	<i>上一篇:<a href=<?php echo get_permalink( $prev_post->ID ); ?>"> 
	<?php echo apply_filters( 'the_title', $prev_post->post_title ); ?> 
	</a></i> 
<?php else: ?> 
	<i><font color="#aaaaaa">没有上一篇了</font></i> 
<?php endif; ?> 
	<span class="float right"><?php 
$next_post = get_next_post(); 
if ( !empty( $next_post) ): ?> 
	<i>下一篇:<a href=<?php echo get_permalink( $next_post->ID ); ?>"> 
	<?php echo apply_filters( 'the_title', $next_post->post_title ); ?> 
	</a></i> 
<?php else: ?> 
	<i><font color="#aaaaaa">没有下一篇了</font></i> 
<?php endif; ?> 
	</span> 
	</div> 

刷新后页面的确显示了正确的位置和链接,说明代码是对的,但代码本身似乎哪里有点错,在后台编辑框里当中一大段代码显示连起来了,有些还显红色,搞不懂这是什么情况。另外链接我就加了斜体,颜色也可以设置,字号应该也可以,但要是用别的CSS标签比如<h4>就一定会让两个左右并排的链接上下分行。所以如果我要把“上一篇:标题”分行,再和另一个“下一篇:标题”分行后让两者左右并排,就做不到。总觉得应该还有更靠谱的代码,回头再搜搜。

老实说完全不知这些代码为啥要这样断行,看起来好像一个整句没写完下半句分到下一行。但小白就不管这些了,无脑粘贴,能用就行!🤣

晚上重新看了这段代码,终于找到错误了,原来是第一句<a href>标签里少打一个双引号,有2条这样的都漏了,补上就全正常了。哇一大段代码看起来不对劲,竟然就是因为这么微小的一个引号!

遗留问题123都解决了,就剩4,改全页面颜色。


2023.1.20 更新:

遗留问题之4也解决了,其实这本来应该是最容易解决的一个,但先前我试了好几次都毫无效果,搞不懂。今天看了一下上次学到一半的那个CSS教程,里面提到CSS里如果同一个元素先后被赋予两个不同的值,后写的会优先于先写的,会只认后写的。难怪以前人家教我改CSS的时候都是给我一串代码让我加在CSS的最后,终于明白了原来代码的位置先后也是有区别的!😱

赶紧试了一下把先前试过的代码body {background: #222222; }写在CSS的最后,终于成功了,这个代码本就是对的,只是我原先没放对位置,放在了最前面,或者在原位置修改,都不起作用,因为范例CSS很长,肯定后面某处设定了全页背景色为白色,所以写前面怎么写都没反应。

不过还要注意的是这里不能写background-color,我也不懂为啥不能,我在CSS学习网页上写的background-color就是对的,但放在这个WP里面就不能写color,写了就不认。我看到范例css里也都直接写background而非background-color,所以当我把color去掉后颜色就显示出来了。莫非这是html和php的区别?

后来又仔细看了范例CSS,原来就在开始不远的地方就有body的值:background:url(./images/bg.png) repeat-x #ffffff; 这句我之前也看到过,也把#ffffff改成#000000过,但没起作用,其实是我没注意到它这里设置的是以图片bg.png为背景图案,而不是赋值白色#ffffff,而png正是一条顶部有一小段黑色主体为渐变白色的极细长竖条图片,所以光改数值完全不起作用,而且这才刚明白为啥这个范例WP的顶端有全宽的一长条细黑色,原来都是靠这个背景图片做到的。我把background后面的整个赋值去掉改成#000000,页面就全黑了。

于是试了一下把太联的星空背景小方块图片替换进去,也成功。并明白了这几个数值的意思:

如果要用图片做背景就是url(图片地址),不写repeat就是默认满铺全页,repeat-x就是横向铺满页宽一次,repeat-y就是纵向铺满页高一次,后面的色彩值是在设成非满铺情况下图片背景之外空白页面处的背景颜色。

所以还是要系统学习CSS才行啊!

好了遗留的4个问题都解决了。不过遗留问题3还不是太满意,最好再研究研究。

又研究了一会遗留问题3,目前我改出来的是文字显示上下一篇的标题,现在我试着改成先前的按钮形式,只显示按钮,按钮上有“<<上一篇”“下一篇>>”字样。把范例里原来用的按钮代码拷过来,范例里是把按钮改成了回到首页和发评论,我依次把之前改好的文字链接的函数替换进去,最后成了这样:

<p class="clearfix"><?php 
$prev_post = get_previous_post(); 
	if ( !empty( $prev_post) ): ?><a href="<?php echo get_permalink( $prev_post->ID ); ?>" class="button float" ><< 上一篇</a><?php else: ?> 
	<i><font color="#aaaaaa">没有上一篇了</font></i> 
<?php endif; ?> 
<?php 
$next_post = get_next_post(); 
	if ( !empty( $next_post) ): ?><a href="<?php echo get_permalink( $next_post->ID ); ?>" class="button float right" >下一篇>></a> </p><?php else: ?> 
	<i><font color="#aaaaaa">没有下一篇了</font></i> 
<?php endif; ?> 

成功了,非常好。就把标准post的格式改成这样,特色post和全宽post的上下篇格式先保留原来的文字标题形式,可以对照一下。

其中<p class="clearfix">如果去掉,按钮就直接贴着横线了,有了这句就不用手动后面加<br>了。

那么这样的话遗留问题3就算正式解决了,文字标题、按钮形式都可以替换,基本也就没啥问题了。

本想顺手把index上的翻页链接也换成上篇下篇这样的按钮,但代码替换进去不对头,先算了。

 

接下来是进阶问题:如何实现动态二级菜单?如何自适应?

后者太麻烦了,先学习前者吧。等搞定了二级菜单,就歇歇,先把CSS那几篇学完。

 

露兜WP主题制作学习系列到此正式结束,撒花!🎉🍻😆 学习成果:云上湾在此,主页效果如下。

Submit a comment

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