折腾:
【记录】用POFO主题搭建xxx官网WordPress页面
期间,接着继续去实现联系方式部分
不需要联系表单
只需要联系信息文字放上去
![](https://www.crifan.com/files/pic/uploads/2021/05/a33b4e99f3844b22ad9e79d80fc22651.jpg)
或者想办法在 footer中写上这个联系方式
倾向于简单一点
看看能否在这里:
![](https://www.crifan.com/files/pic/uploads/2021/05/28ce6fced0c546ad9e808a0a8e356a60.jpg)
把联系方式写上去
![](https://www.crifan.com/files/pic/uploads/2021/05/1844e7d630544c89a4a99dc9b7640340.jpg)
地址
邮件
电话
优先:简单一点,放在footer,把 地址 邮件 电话 放进去
![](https://www.crifan.com/files/pic/uploads/2021/05/76db2dededf34aba94e7bd33e907d832.jpg)
此处去看看:
的源码
Home classic interactive agency
是:
![](https://www.crifan.com/files/pic/uploads/2021/05/0f631d05d3d74434890b04ce583dda47.jpg)
看不到想要的联系方式
去看看:
footer sidebar 17
![](https://www.crifan.com/files/pic/uploads/2021/05/fe0d76a6c9984393bfa93eebdb92f8b6.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/3c103444bd56490a8b0808a836c284c9.jpg)
有很多,去看看官方是否有footer的例子
才注意到:
中的底部的内容,是全局的,不是当前页面的:
![](https://www.crifan.com/files/pic/uploads/2021/05/73d671525c47492bb3f1315a6cc74faf.jpg)
去看看:
![](https://www.crifan.com/files/pic/uploads/2021/05/e075245a80414b7bb3ce7f84978d62dd.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/e7ff4d0500824effad4055cd68676c85.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/c55956795fd048649eb37db43730c8c9.jpg)
再去找找我们希望的:
![](https://www.crifan.com/files/pic/uploads/2021/05/7c7f7903b7534dcf961606b0bd5fedfb.jpg)
去看看demo数据中是否有这个
footer-modern-dark
没找到,但是找到另外几个:
![](https://www.crifan.com/files/pic/uploads/2021/05/5886eb7ba9d643038b12260a9aea8bf1.jpg)
也可以去参考看看
-》里面所有footer都有
但是点击连接进去看看:
![](https://www.crifan.com/files/pic/uploads/2021/05/4e51727f9bd14d0a97d27e1c2796b26e.jpg)
还是之前的连接,底部不存在我们要的效果
![](https://www.crifan.com/files/pic/uploads/2021/05/6a276df979fa4e02a2a1f6d9d9ac7752.jpg)
则是有的。
所以可以去参考这种类似的,看看能否实现我们要的内容
重新搜:footer,可以搜到更多:
![](https://www.crifan.com/files/pic/uploads/2021/05/8e2bf0545bf24437ad59d4932680fdae.jpg)
结果看了都不要我们要的
去试试不同的style 1,2,3
![](https://www.crifan.com/files/pic/uploads/2021/05/387bbe59d4384d32abad468cb80fd46e.jpg)
去实时编辑预览的话,可以看出:
Footer Wrapper
是最底部上面那行的控制:
![](https://www.crifan.com/files/pic/uploads/2021/05/914c06858cb342f8b9dc4ed34d8de3e0.jpg)
且可以看到style 2的效果:
![](https://www.crifan.com/files/pic/uploads/2021/05/2f0cefbf6f67488db7cd5de05885961f.jpg)
那这样的话:
好像就可以在中间写联系信息,多行的话,可以用br去换行了?
去试试
首页是改了:
![](https://www.crifan.com/files/pic/uploads/2021/05/fbb2d34d3a874dcdbd4dcefae8c58c87.jpg)
但是刚才的页面还是没有改:
![](https://www.crifan.com/files/pic/uploads/2021/05/2cd8b8d13aaf4249844b30d3f95960e3.jpg)
去修改页面配置:
![](https://www.crifan.com/files/pic/uploads/2021/05/db594417f5d44b56bf51437f694104a8.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/3bbcfb8701bd49549b3e9be1c0ccae17.jpg)
然后写上联系方式:
![](https://www.crifan.com/files/pic/uploads/2021/05/6a269dad5d794956a406273d1542f7e7.jpg)
看看是否换行,结果没有
![](https://www.crifan.com/files/pic/uploads/2021/05/23f236c146ce4a5f8a50ad94c8af849f.jpg)
加上br
© 2018 xxx <br/>地址:苏州工业园区 <br/>邮件:[email protected] <br/>电话:0512-12345678
虽然换行,但是不是靠左对齐:
![](https://www.crifan.com/files/pic/uploads/2021/05/2d74003dbfb947feaad77da4b9ddad9c.jpg)
去参考:
拷贝对应的html代码:
![](https://www.crifan.com/files/pic/uploads/2021/05/3a9f9b5077ea454fb3c6f5a9acbd08bf.jpg)
过来:
<div class="textwidget"><span class="display-block">苏州工业园区 纳米科技园</span><a title="[email protected]" href="mailto:[email protected]">[email protected]</a> | 0512-12345678</div>
看看效果:
![](https://www.crifan.com/files/pic/uploads/2021/05/da076834300742bb80bde0625c077810.jpg)
还不是左对齐。
去看看能否加上css
试试:
<div class="textwidget" style="text-align:left"><span class="display-block">苏州工业园区 纳米科技园</span><a title="[email protected]" href="mailto:[email protected]">[email protected]</a> | 0512-12345678</div>
结果:
可以左对齐,但是又太靠左了:
![](https://www.crifan.com/files/pic/uploads/2021/05/f94e84f7486c4a97a912aaca8e63fb39.jpg)
算了,等抽空再去优化吧。
不过此处用style1:
![](https://www.crifan.com/files/pic/uploads/2021/05/b78d204338934d58a068bbfc93015ece.jpg)
文字部分在左边,则左对齐后,效果就好很多:
![](https://www.crifan.com/files/pic/uploads/2021/05/6760250551b640648f6cf66da7dc7abe.jpg)
所以就先这样,等需要调整,再说。