最近完成了本站的子主题和Gallery页面的制作!学着程序员来写一个技术总结文章XD虽然其实根本没有技术含量,完全就是最基础的div+css……

子主题是Wordpress自带的一个功能,其产生原因在于:当你对主题的样式进行修改后,一旦主题更新,那么先前所改的样式便会全部消失,需要你再写一次。这也就意味着主题每更新一次,你都要重写一遍自己的样式,显然非常麻烦。子主题则是在引用父主题的基础上,从外部加上修改的样式,即在加载父主题的样式后,再加载子主题中的样式。无论内部的父主题如何更新,只要子主题在引用父主题,那么更新的内容也会随之自动变化,而子主题本身的内容不会被更新换掉。

不过按照Wordpress官方的模板写css文件好像不起作用,我从网上搜到的办法是在开头的注释声明后加上一句(其中parent-style需要替换为子主题的父主题名,因个人而异,路径也有可能有所不同):

@import url("../parent-style/style.css");

随后在仪表盘的主题中启用子主题即可。需要注意的是,原本父主题中的所有设置都要重新设置一遍。在子主题中,我主要修改的是p标签的段首缩进:


p{
text-indent: 2em;
}

除此之外还有emoji在文本中显示出来的大小问题,现在可以正常显示了(然而根本没人来用……!)。这段之前秋帮我改过,他以前写的代码似乎还在,但不知为何没有起作用,我就将其贴了过来,具体如下:


img.wp-smiley,
img.emoji{
max-height: 0.07em !important;
height: 5em !important;
width: 5em !important;
margin: 0.07em !important;
}

另外为了区别附记的文字与先前所写的文字,加了一个ps_e的ID,使文字显示为棕色:


#ps_e{
color: #660000;
}

并加了一个no_indent的ID,取消带有该ID的标签中的段首缩进,便于居中显示的文字排版问题:


#no_indent{
text-indent: 0;
}


接下来是Gallery的部分。以前菜单中的Gallery选项只是链接到了带有Gallery这个分类目录的日志集合页面,然而这个主题的文章在摘要中不显示图片(后来才发现有特色图片这么个东西,不过还没搞懂是干啥用的),不仅看起来不方便,也完全没有画廊展示的感觉与功能,因此这次自己写了一个Gallery页面作为绘画作品总结,更便于查看。

对于页面的构想来自于shilin老师以前的个人网站中的画廊部分,图片以一个方形缩略图的形式展现,一个个排列在一起,大类按照年份来划分。我很喜欢这样简洁的风格,便决定也做成这样的形式,点开图片后直接链接到图片所在的日志页面(当然shilin的那个更加复杂一点,还有光标效果、编号、分类功能等,对我来说难度有点大,而且我也不是很需要,因此就舍去了)。

经过几次尝试后,方形缩略图的尺寸定为120*120,较为清晰也不会显得太大。直接在页面中写几个连续的img标签,每张图片都会另起一行显示,达不到我要的“几张图片显示在同一行中,排满之后自动换行”的效果。将每张图片都以一个div标签包起来,设置class=”gallery_e”,在子主题的样式表中设置gallery_e这个类别:


.gallery_e{
float: left;
width: 120px;
margin: 1px;
}

就能达到img标签并排显示、图片之间间隔1px的效果。之所以设置为gallery_e而不是gallery,是为了防止覆盖原有的同名类别导致其他地方显示混乱(这个主题自带一个gallery功能,不过我没弄懂,还是决定自己写一个)。这时又出现了新的问题:分割用的年份及hr标签与img并排显示了,出现了很奇怪的效果,因此将分割的部分也用一个div包起来,设置类别为gallery_title,设置clear: both,就能解决换行问题。这时hr标签与上一行的图片几乎是贴在一起的,为了分隔得更开一些,设置适当的padding-top(此处设置margin是没有用的,似乎牵扯到内层div的边距会被转移到外层div上的问题,我没能解决,干脆转为改padding),具体样式如下:


.gallery_title{
clear: both;
padding-top: 15px;
margin-bottom: 5px;
}

虽然同一行中的img是按照我设置的1px外边距隔开的,但两行之间却隔得很远。审查元素后发现这是img的外边距造成的,导致外部的div标签高度有160(这里纠结了好久!),因此设置gallery_e下的img的margin为0(尽量不影响到其他的img显示,因此仅修改gallery_e类下的img样式),问题便解决了:


.gallery_e img{
margin: 0;
}

这时差不多就完成了我理想中的页面,然而在手机上查看还是觉得120*120太大了,故加上:


@media screen and (max-width: 1080px) {
.gallery_e{
width: 80px;
height: auto;
margin: 1px;
}
}

意思是屏幕宽度小于1080时,Gallery中的图片显示为80*80,效果还可以,只是在PC端的窗口宽度小于1080时也会造成图片缩小,看起来就有点太小了。另外我只测试了自己的手机上的效果,没试过其他的屏幕,可能还有些问题。还加了下面这段:


img,
object{
max-width: 100%;
max-height: 100%;
}

防止出现在移动端上图片扩大变形的问题,不过好像是多余的……

大致就是如此。自己解决问题之后很有成就感!同时也觉得css好像没有想象中那么复杂,加上对那些很有年代感的个人网站的憧憬,有点想继续学习一下css并自己搭个小站出来,一方面也是因为FC2太不稳定了……再说吧……

发表评论

电子邮件地址不会被公开。 必填项已用*标注

:smile: Unfold »