【13】WordPress建站优化系列教程 – 支付&页头页脚

（返回课程列表）

在之前的课程中，我们上传了产品信息，并设置好了运费。但现在还有一个问题，就是客户还不能实际下单。

今天，就来关联下收款渠道。之后，再做一点通用页面内容（页头、页脚）介绍。

如果你不想看文字，可以直接点视频：

PayPal 支付设置

如果你是新手，并且行业正规，也不介意稍高的提现手续费，就可以使用 PayPal. 它没有复杂的限制与隐藏的监管，只要你有大陆正规的营业执照，且对产品自信，都可以顺利完成收款。

首先，需要你使用营业执照，注册一个企业 PayPal 账号：

如上图所示，我们平时自己注册买东西的 PayPal，是个人账号，这种是不能用来收款的。

现在独立站上部署收款渠道，就需要另外使用营业执照注册企业账号。

官方注册入口你自己搜一下（认准官方 paypal 域名）：

注册好之后，我们再来自己网站后台，还是点开 WooCommerce 菜单，然后再点开它下面的 Settings:

如上图所示，我们在 WooCommerce 的 Settings 菜单中，切换到 “Payments”（付款）面板，就能看到一系列可用的收款方式。

蓝圈中，第一个就是 PayPal，你注册好企业 PayPal 账号之后，直接点右边的链接，就一键部署了。

后面关于渠道细分规则的一些设置，一般保持默认就好。如果你有不会的，可以在 PayPal 端发起资讯工单，这里就不详细介绍了。

以前部署该渠道的时候，还有一个沙盒模式，但现在可以直接实施了，所以没什么好讲的。

等部署好之后，可以用个人 PayPal 拍一个低价商品测一下。

更多支付渠道，连接方式也差不多，没什么难点。但如 Stripe 这样的渠道，大陆的商家是没办法直接使用的，需要你注册离岸公司。但这并不是建站的范畴，就不展开说了。

页头菜单链接

介绍完支付接口之后，再来看看页头的菜单设置。

我们进入 “Appearance”（“外观”）-> “Customize”（“自定义”）：

你应该还记得，我们之前设置网站图标的时候，来过这里。

点进来之后，我们看到有一个 “Header”（即页头的菜单）：

如果你的主题版本比较老，这里的名字可能叫 “Header Builder”.

结构概览

点它进去，之后能在下方看到当前的页头结构：

上面的截图可能看不清楚，我们把红圈中结构部分放大再看看：

如上图所示，你应该也能在自己的这个区域看到三条编辑区。它们分别是位于中间的主页眉，和位于上、下的顶部、底部页眉。

这其实很形象了，如果三条页眉全部都设置了内容，大概就是这样子：

上图所示，是一家日化产品的官网，它就把这三条的内容都设置满了。应用也很典型，你要是做多了运营，一看就知道：

• 顶页眉主要用来放一些促销信息、客服电话等等；
• 主页眉放主菜单；
• 底页眉主要用来放一些辅助菜单、促销按钮等；

所以，你要是不想搞得这么花里胡哨，顶部和底部留空就行，就像黄师傅这个示例网站一样。

再回来我的示例网站，我们先看左半边：

如上图所示，就算是新手，你应该也看出来了，它这个主导航上的模块无论是位置（包括对齐方式）上，还是内容描述上，都和实际主导航菜单上是一一对应的。

Logo 就是 Logo，主菜单 (Primary Menu) 就是主菜单。

可想而知，我这个右半边也是一样的：

如上图所示，我的右半边主导航里面，也是居右对齐的三个内部模块：

• 次要菜单 (Secondary Menu)；
• 购物车 (Cart)；
• 账号 (Account)；

非常直观。你可以点击这个组件，找到编辑入口，也可以拖动它们，更改布局。例如：

如上图所示，当我把右侧的次要菜单拖到中间时（蓝圈所示），上面的菜单也跟着动了（红圈所示）。

这种布局编辑方法简单明了，你自己试下就会了，这里就不赘述了。

菜单编辑

要想改变菜单里面的内容，比如增加页面、删除页面等等，就需要到专门的菜单设置界面（而不是这里）。

所以，我们简单记一下这两个菜单的名字，然后保存退出这里的概览：

如上二图所示，知道了它们的名字后，我们点击左上角的 “Publish”，保存：

你可能觉得有点奇怪：明明啥也没做，为啥要点发布呢？这是因为，大多数编辑器都会存在比较细致的历史记录机制。你可能只是点了几下，但中间可能涉及到元素的聚焦、轻移、后台脚本的执行、动态内容刷新。

所以，检查一下页面内容，不管变没变，都可以点一下发布保存。

保存退出来之后，再点击菜单上的 “Appearance”（“外观”） -> “Menus”（“菜单”）：

点开之后，我们能看到：

如上图所示，点开之后，发现这里有比较精细的菜单/页面设置。

我们要想设置刚才的主菜单，首先，需要在顶部选择目标，然后点击右侧的 “Select”（“选择”）按钮：

如上图所示，选好目标 “Main Menu” 并点击 “Select” 后，我们看到：

如上图所示，红圈里面是当前主菜单上的链接情况，我这里是 4 个链接，和前台顶部导航栏上的内容是一模一样的。如果要删它们中的某个，直接展开操作就行了。

绿圈里面是菜单设置，这个因主题而异，你的可能不是这样，但其实我们用到它的地方不多，毕竟模板默认设置的就比较科学了。

蓝圈里面的是当前页面列表，当你想要添加新的链接到当前菜单里面时，就要在这里选好了再加。

怕你不相信，黄师傅还是回去截图给你看看：

是吧，这 4 个红圈，跟上上张图中的红圈里面的内容与顺序都是一样的。

接着，我们再随便点开后台红圈处的某个链接看下：

如上图所示，我展开了第二个 “Women” 之后，我们可以改改菜单名称，还有层级等等。但这里最有用的，还是红圈处这个删除按钮。

你可能想问，我要想把这个 Women 的链接改成别的，应该怎么操作？

答案是，对不起，这里没法操作，只能删了它，然后再在左边加新的过来，补上排序（有点傻，不过细想之下，其实也没啥）。

好，现在就假设我就要改这个 Women，把它的链接换成我们之前上传产品时，专门新建的女装类目页面：

如上图所示，我们复习下，在之前第 10 节传产品时，因为我传的就是女装，当时临时创建了一个叫做 “Women Dress” 的产品分类。

要想把链接换成它的前台页面，我们就要回来菜单设置页面，在左边 “Add menu items”（即“新增菜单项目”）面板中，选择对应的产品类目页添加：

如上图所示，黄师傅录视频的时候，以为出现了 bug: 其实这里显示 “Uncategorized” 这个分类页面，是博文分类，我当时以为是产品分类。产品分类的话，这里确实选不到。

于是我们就要采用备选方案，再回去产品类目列表页，对着目标类目，点击 “View”，查看该前台页面，这样就拿到了它的 URL:

如上图所示，拿到了该分类页的 URL 之后，我们再回来菜单编辑页面，在添加链接面板，点开 “Custom Link”, 即“自定义链接”：

如上图所示，这样粘贴的地址，是绝对地址，以后如果更换域名，就很麻烦。因此，能直接选择添加，是最好的。

添加过去之后，是这样子：

如上图所示，添加过来之后，默认是在最下面。我们要想调整它的顺序，直接拖动就行了：

像上面这样，是我正常拖动到和其他菜单项目平行的效果。如此，”Women Dress” 排第 3 位，且和其他项目并列。

像下面这样，是我往右拖动到和其他菜单项目产生缩进的效果，如此，“Women Dress” 作为第 2 位 “Women” 的下级内容：

如上图所示，这个操作还是很容易明白的。

我们现在就让它成为缩进状态，保存之后看下效果：

如上图所示，鼠标悬浮在 “Women” 上的时候，”Women Dress” 才作为下拉菜单呈现出来。

现在再回来做个测试，把 “Men” 也往右拖到缩进：

保存之后，前台就是这样子：

如上图所示，现在 “Women” 下面就有了两个子项目，和菜单设置里面的缩进关系一致。

回到我们一开始的目标：将菜单上原有的 “Women”，替换成后面的 “Women Dress” 产品系列页。

前面我们提到过，这里不能换，只能删了之后再加。所以，我们先把 “Women Dress” 拖动到和其他链接列表平齐：

然后，再展开上面原有的 “Women”，删了它：

如上图所示，删除原来的菜单链接之后，我们保存看下：

如上图所示，现在菜单符合预期了——原先的 “Women” 消失，新加的 “Women Dress” 成了取代它的一级项目。

我们点链接进去，发现也是之前填好的产品类目页面：

页面顶部导航右侧 Secondary Menu 的设置同理，也是先选好目标，确定之后，再进行删除新增等操作：

因为方法是一模一样，这里就不展开演示了。

至此，页头菜单的基本特性与常规设置就讲完了。

页脚链接设置

页脚的结构设置和页头很相似。

结构概览

也还是在之前的 “Appearance”（“外观”） -> “Customize”（“自定义”）里面，点进去之后，能看到：

如上图所示，还是在页头设置的入口下方，我们看到了 “Footer”（即“页脚”）的设置入口。如果你的主题比较老，可能这里显示的 “Footer Builder”。点进去之后，能看到：

如上图所示，页脚结构和页头结构是一样的，也是分为中间的一条主页脚，以及上下两条辅页脚。

但通过常识也不难猜出，页脚这三条结构的利用率，比页头要好一些，毕竟，有很多东西都可以往这个区域放。

元素更改

跟之前的页头一样，对该布局的更改，直接拖动就可以完成。稍复杂的布局，可结合左侧的菜单完成。

同时，当我们在结构中点选某个元素的时候，能找到编辑指引，或者可直接对其进行编辑。例如，当我点击顶部页脚中的 “HTML” 时：

如上图所示，和在 Elementor 中一样，有些元素点选之后，是可以直接编辑的。

但有些相反，我们点选之后，并不能直接更改，比例主页脚中的 Widgets:

如上图所示，图中的 “For Her”，在编辑条中显示的名字是 “Widget 2″，点选之后，就不能直接改。不过左边的编辑面板也给了提示，我们需要去专门的地方调整。

于是，我们退出这个自定义页面，来到 “Appearance”（“外观”） -> “Widgets”（“小组件”）：

如上图所示，点开这里之后，就能看到之前页脚中的一系列 Widgets 了（蓝线所示），展开这些 Widgets 组件，就能分别更改它们。例如，Widget 1 展开之后，就是这样子：

如上图所示，能看到这是页脚的订阅模块。继续点开之后，是这个样子：

我们看到，这是一个表单 (“Form”)，因为它稍微复杂一些，我们下节课专门展开讲。

又如，之前页脚上，长得像菜单的 2 号 Widget:

这看起来确实就是一个菜单，我们再点进去看看：

如上图所示，发现这确实是一个菜单，我们可以改它们显示的名称，还有绑定的菜单。

所以，我们要改它们，就又要回到熟悉的 “Appearance” -> “Menus”:

由此可见，这里的 “For Her”, “For Him”，就是用于绑定在页脚上的专用小菜单。

具体更改逻辑我们前面介绍过，这里就不展开演示了。

至此，页脚基本介绍完毕。