【领域展开 27 式】 Page 与 Menu 名称比对+将 Instagram 汇入 Page 页面

接续昨天的实作【领域展开 25 式】 汇入 Instagram 到 WordPress 网站,昨天已经习得将 instagram 放置到首页的侧边栏当中,会发现因为侧边栏的位置本来就比较小,整体 instagram 显示的大小就等比例缩小,暨原本需求是要将 instagram 放到 menu 里 LIFE 的分页中,今天将纪录编辑 Page 的学习过程/images/emoticon/emoticon05.gif

大家好,我是 Jade Chang
Statistic Information 毕业,入职场後於外商从事软件技术行销,长期规划各种线上线下活动像是直播节目/带状线上教学,後期负责学生实习计画与大专院校 Talent Cultivation 与技术社群行销 Program 为主,过去一年转任於台湾本土软件开发商 PM,周旋於客户、工程师与设计师之间并短期投身新创事业,近期转换於新竹半导体产业,还在体验适应中。


首先,自订的 menu 与 page 名称的比对

下图是在【领域展开 21 式】 Menu 修炼持续进行中进修 menu 的历程中已经先从 simple 主题的 demo data 中挑选每个分页预计想要的画面+将 menu 里面的分页取上 WORK、LIFE、ABOUT ME 等名字

虽然在 menu 当中已经帮分页取好名字,但是今天要找 LIFE 页面去插入
instagram 的时候,到了 Page 的列表却发现 Page list 的名称列表跟 menu 取名的名称是不同步的,page 当中的名称 Portfolio 3 Columns 就是 menu 当中LIFE的页面,换句话说,设计 menu 时 LIFE 的页面是选择Portfolio 3 Columns 的页面样式拉到 menu 中且另外将分页名称修改为 LIFE,下图明确标示 Page 名称与 Menu 名称的来源与显示

接下来,如果要根据 menu 的分页去设计各自的页面与新增加减 Widgets 的话,就要从 menu 当中点开查看 Original 看当时选了哪个 page demo name,再到 Page 当中找 demo name 就找得到了!

再来,找到 Page 後要加入 instagram

步骤如下学习纪录:

  • 当时的 LIFE 页面是选了 Portfolio 3 Columns,想说有许多设计好的照片样式,如下图美美的呈现
  • 点下左上角的Edit page 进到 WordPress 後台的编辑器
  • 编辑标题名称与点选 add block
  • 点选 instagram feed 就可以将 instagram 汇入了
  • 再来想把 Load more 隐藏跟调整一行的张数与列数,因此回到 WordPress 後台点选 instagram feed > customize

最後,套件样式跟页面样式是分开的

当把 instagram feed 放入之後,会发现上面是原本的样式还是 demo 的样式,下面是 instagram 的设定,但是上面的图片该怎麽换呢?从 WordPress 编辑器没有找到可以上传图片的位置,所以用 elementor 编辑器试试看

  • 点选照片位置的编辑 edit text editor
  • 点 add media 就可以选取上传图片
  • 多选後确认就取代现在所有 demo 样式的图片

下个问题就是..原本照片的分类与分类该怎麽处理..

One more thing..

铁人赛文章会 Delay 1-2 天同步放在 Medium
欢迎订阅或是透过 Facebook 一起来交流 (求指导)/images/emoticon/emoticon32.gif

https://ithelp.ithome.com.tw/upload/images/20200915/20094570oG1ujl6HbX.png


<<:  Day 27:刷题

>>:  27 - 有效的使用 Observability 的资料 (1/4) - 透过 Machine Learning 发现异常的问题

Consistency and Consensus (4-3) - Coordination Services & Summary

续 Day 21 协调服务 (Coordination Services) 像 Apache Zo...

Day20 资料冗余和Partition

接下来谈谈资料冗余的策略 最简单最好管理的冗余就是完完全全的复制一份在别的地方,就是我们经常说的备份...

纯Javascript,使用new Date()制作date picker

刚好有一道面试题目,不能使用 input type=date 或任何现有套件,要做出类似Datepi...

RISC-V on Rust 从零开始(9) - 实作memory model

CPU指令可以分成两大类,一是操作CPU内部暂存器的算术逻辑指令,一是存取记忆体,也就是所谓的loa...

[13th][Day14] docker port

dockerfile 中的每一个步骤都会 commit 一次,docker history 可以看 ...