Begin主题页脚添加二维码与链接

2021年8月22日20:13:27 发表评论 68 次浏览

前言:

因为是小白,刚学习建站什么都不懂,每每看到别人漂亮的博客都满眼小星星。当自己尝试建站时才发现一切并不像想象中那么简单。

经过无数次爬文、终于实现较为满意的效果:

Begin主题页脚添加二维码与链接

姆级教程

一、准备工作:

1.需要展示的三个二维码(可上传至WordPress的媒体库或其他地方)URL地址
2.需要展示的链接(网址、文章、分类等)若干
3.某得了...

 

二、链接展示

1.登录WordPress后台,点击左侧外观-菜单

Begin主题页脚添加二维码与链接

 

2.在打开的菜单页面中点击创建新菜单

Begin主题页脚添加二维码与链接

 

3.填写菜单名称后点击创建菜单

Begin主题页脚添加二维码与链接

 

4.菜单创建后在左侧选择所需展示的内容(链接需要填入相应内容,文章和分类勾选即可),后点击添加至菜单,添加完成后千万不要忘记点击保存菜单。CSS类为图标,可不填。

Begin主题页脚添加二维码与链接

 

5.确认保存菜单后点击外观-自定义-小工具-页脚小工具

Begin主题页脚添加二维码与链接

 

6.点击添加小工具 点击导航菜单

Begin主题页脚添加二维码与链接

 

7.填写标题(必填)选择刚才新创建的菜单

Begin主题页脚添加二维码与链接

至此,链接的添加便已经完成了,在右侧可以直观的看到网页的变化,若你只需要添加链接,此时点击发布即可

 

三、二维码上传及URL提取

这里很简单,会的直接跳过。

1.登录后台后左侧列表媒体-媒体库-添加新文件-选中二维码并上传

Begin主题页脚添加二维码与链接

 

2.点击已上传的二维码,在附件详情中右侧下方的文件URL复制地址。

Begin主题页脚添加二维码与链接

 

四、二维码的添加

1.在页脚小工具页面,点击添加小工具 点击增强文本

Begin主题页脚添加二维码与链接

 

2.填入标题,下方可勾选是否显示标题,按需选择。在内容处填入如下代码,记得将关键信息替换成自己的。

Begin主题页脚添加二维码与链接

复制下方代码进行替换:

  1. <ul class="about-me-img clearfix">
  2. <li><img src="https://1day.ml/wp-content/uploads/2021/08/支付宝收款码.jpg" alt="Begin主题" alt="支付宝打赏">
  3. <p>我的微信</p>
  4. </li>
  5. <li><img src="https://1day.ml/wp-content/uploads/2021/08/微信收款码.jpg" alt="Begin主题" alt="微信打赏">
  6. <p>微信打赏</p>
  7. </li>
  8. <li><a href="https://weibo.com/u/5515614447/" target="_blank">
  9. <img src="https://1day.ml/wp-content/uploads/2021/08/微博二维码.jpg" alt="Begin主题" alt="我的微博">
  10. <p>我的微博</p>
  11. </a>
  12. </li>
  13. <style type="text/css">
  14. .about-me-img li {
  15. float: left;
  16. padding: 5px;
  17. width: 33.333333333333333333% !important;
  18. }
  19. .about-me-img p {
  20. text-align: center;
  21. }
  22. </style>

需要修改的地方:三个链接、三处文字、一个微博地址。

Begin主题页脚添加二维码与链接

 

其中,微博可点击跳转至你的微博主页,若不需要点击跳转,删除此行:

<a href="https://weibo.com/u/5515614447/" target="_blank">

注意,在替换时,切记不要多删双引号。

至此,二维码的添加便已经完成了,在右侧可以直观的看到网页的变化,若你只需要添加二维码,此时点击发布即可

 

五、关于本站等信息添加

此处与添加二维码的方式一致,选择增强文本,将内容处填写为自己需要的信息即可。

最终效果:

Begin主题页脚添加二维码与链接

注意:修改完成后不要忘记点击发布按钮。

兰溪苑

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: