wp-job-manager 前台员工信息提交页面及员工信息管理页面的优化改造

wp-job-manager的短代码功能很强大,但是短代码集成非常多的功能模块,要想增加和删减其中的部分内容还挺不容易的。wp-job-manager有提供一个插件叫做Field Editor,本文要讨论的是采用免插件的方法利用wordpress hook(勾子)来增减frontend(前台)界面的内容。

wp-job-manager的信息提交页面叫做submition form,在这个页面上需要调整的地方分别为:
1. 文本汉化;
2. 需要删除twitter、video、website等用不着的字段;
3. 需要加上电话号码,同时还需要将前台的电话号码与后台添加的电话号码在数据库里面同步;
4. 需要指定application url为默认值,如有必要,在指定默认值之后,将其从页面中隐藏起来。

我们一个一个问题来解决:
第一个问题,汉化。我们需要改动的文件分别是两个汉化语言包。针对wp-job-manager的汉化包位置在 /wp-content/languages/plugins/ 文件夹下的 wp-job-manager-zh_CN.po,将其和编译文件wp-job-manager-zh_CN.mo下载到本地桌面,以备编辑。针对主题包的汉化文件,我在之前的工作中已经将它放置在了 /wp-content/languages/themes/ 文件夹下,文件名叫做 mytheme-zh_CN.po,将其和编译文件 mytheme-zh_CN.mo下载到本地桌面,以备编辑。用Poedit这个软件分别打开上述两个.po文件,Ctrl+F找到需要汉化的字段,依次改为中文,保存,然后编译.mo文件,全部完成之后,分别上传到对应的文件夹,覆盖原来的文件,刷新网页看看,前台需要汉化的地方都已经是中文了。

第二个问题,删除国内用不上的一些表单字段,需要改动的文件是主题文件夹下的functions.php,下载下来,打开它,在 php结束符号 ?> 之前选个适当的位置添加如下代码:


这样在前台,这些不需要的表单选项就消失了。

第三个问题,在前台加上电话号码输入框,前台信息提交人员将电话号码输入之后,号码数据存入数据库,同时若后台操作人员对该信息进行编辑,对电话号码的改动也能对数据库对应的部分进行同步操作。

为了实现这个目的,首先我们需要在functions.php中加上前台输入部分的代码:


然后在目录 /wp-content/themes/babysitter/includes/ 找到 wp-job-manager-fields.php 这个文件,将其下载下来。

我们需要在 wp-job-manager-fields.php 中对前后台的电话号码函数进行定义,并在这个文件中将两者进行关联。

在大致350行左右的位置添加代码:


这段代码的意思是$phonenum对数据库进行写入操作,将注意这里定义了函数 $phonenum 我们会在 员工信息详情页里面展示电话号码,所以在那个页面对应的文件 content-single-job_listing.php 中也要定义同样的函数内容。详情见《wp-job-manager 改造及汉化篇(八):立即预约按钮的弹出菜单里加上员工的电话号码》这篇文章,里面有详细说明。

然后再在400行左右的位置添加如下代码:


这段代码的含义是将前后台的电话号码这个地段的编辑动作进行了同步,不论是在前台还是在后台对电话号码字段进行变更,数据库中的对应同一个部分都会产生相应的变化。这就让前后台对电话号码的操作同步了。

第四个问题,因为application url是必填信息,不填写的话,在员工信息详情页就不会显示立即申请这个按钮,所以,这个选项必须有数值输入。wp-job-manager默认的填表方式是在此处填写一个网址或者一个Email地址,Email地址可以与信息提交人的账号所绑定的Email同步,所以理论上是没有什么问题的。由于我们的系统账号与微信账号进行了同步,微信确实是为每一个账号分配了一个邮箱地址,但那个地址实在是太长了,没用。而且邮件申请方式不符合国情,中国人特别是上了年纪的人压根就不知道何为邮箱。所以,这个现实逼着我们只能采用URL提交申请的方式了。信息提交者其实也不懂什么叫做URL,若开放这个表单选项,估计提交上来的一定会是千奇百怪的文本信息,甚至连汉字都有可能出现。为了解决这个问题,我的思路是,首先给 Application URL 赋一个默认值,保证表单提交之后,前台员工详情页能够出现立即申请这个按钮。其次,为了保证所有员工详情页的立即申请按钮指向的地址都是同一个地址,我不能让人把这个地址修改了,所以我得在信息提交页面上把这个选项隐藏。按照这个思路,我们需要改造的文件应该是如下两个:

在functions.php的适当位置添加如下代码:


这里,my url就是我给Application URL 赋的默认值,是一个固定链接。

修改主题文件夹下的 style.css ,在文件末尾增加以下代码:


这样在前台就将Application URL隐藏了,谁都修改不了了。

至此,前台信息提交页submition form的四个问题都已圆满解决。

下面我们需要对信息提交人员的员工信息管理页进行美化,这个页面叫做 job dashboard。这个页面也有一些需要汉化的地方,汉化文件是wp-job-manager-zh_CN.po,按照上面给出的方法汉化就行了,这里不再赘述。另外在页面上有一个表格,列出了你提交的所有员工信息,便于你对这些员工信息进行二次编辑或者删除。这个表格在PC上看还挺好,但是到手机觉面上看的话,表宽度就超出屏幕了,我们用chrome浏览器的检查功能就可以很容易地找到这个表的名字,叫做table.job-manager-jobs,在style.css文件末尾加上这样一段代码:


再用手机看看,页面恢复正常了。

在一开始,job dashboard页面上没有看到分页标志,当一个会员提交的员工信息超过35个的时候,就不能正确显示出来了,我上google查了一下,原来是pagination.php这个文件错误,作者将新的正确的文件放在网上,提供了下载,下载链接在这里,将新的pagination.php传到主题文件夹下/job_manager/这个文件夹里就可以了,页面调用模版的时候会忽略源程序里的模板而优先调用这个文件夹下的同名文件。然后再刷新job dashboard页面,我们看到页面底部分页标示出来了,可以一页一页翻下去看历史记录。

好了,上面就是对wp-job-manager前台员工信息提交页面及员工信息管理页面的优化改造的整个过程,记录下来,以防自己哪天忘记了 😛

发表回复

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