编辑整理:整理来源:维基百科,浏览量:62,时间:2023-04-09 23:16:01
当然第一步是要创建一个页面模板。先创建一个 page-contact.php的文件,然后将page.php文件里的代码复制到这个新建的文件里。
为了确保wordpress能够将它当作一个页面模板来看待,我们需要在contact.php文件的开头添加下面的注释
<?php/*template name: contact*/?>也就是说contact.php文件应该是下面这样子的:<?php/*template name: contact*/?><?php get_header() ?><div ><div ><?php the_post() ?><div ><div ></div><!-- .entry-content -></div><!-- .post--></div><!-- #content --></div><!-- #container --><?php get_sidebar() ?><?php get_footer() ?>步骤二: 创建表单现在,我们需要创建一个简单的联系表单,只要将下面的代码粘贴到 entry-content div内部即可。
<form action="<?php the_permalink(); ?>" method="post"><ul><li><label for="contactname">name:</label><input type="text" name="contactname" value="" /></li><li><label for="email">email</label><input type="text" name="email" value="" /></li><li><label for="commentstext">message:</label><textarea name="comments" rows="20" cols="30"></textarea></li><li><button type="submit">send email</button></li></ul><input type="hidden" name="submitted" value="true" /></form>这个html代码相当明了,不过要注意下第19行的 input type=”hidden”,我们后面会用它来检查表单是否提交。
步骤三: 数据的处理和错误的应对表单看起来已经不错了,但是此刻它仍然是无效的因为它没有发送任何邮件。我们需要做的是验证表单是否提交,然后再验证表单的字段填写是否正确。
如果填写都是正确的,就会收到博客管理员的邮件并向他们发送邮件。否则,就无法发送邮件,错误提示就会显示给用户。
将下面的代码粘贴在页面模板声明和get_header()函数之间:
<?phpif(isset($_post['submitted'])) {if(trim($_post['contactname']) === '') {$nameerror = 'please enter your name.';$haserror = true;} else {$name = trim($_post['contactname']);}if(trim($_post['email']) === '') {$emailerror = 'please enter your email address.';$haserror = true;} else if (!eregi("^[a-z0-9._%-]+@[a-z0-9._%-]+\.[a-z]{2,4}$", trim($_post['email']))) {$emailerror = 'you entered an invalid email address.';$haserror = true;} else {$email = trim($_post['email']);}if(trim($_post['comments']) === '') {$commenterror = 'please enter a message.';$haserror = true;} else {if(function_exists('stripslashes')) {$comments = stripslashes(trim($_post['comments']));} else {$comments = trim($_post['comments']);}}if(!isset($haserror)) {$emailto = get_option('tz_email');if (!isset($emailto) || ($emailto == '') ){$emailto = get_option('admin_email');}$subject = '[php snippets] from '.$name;$body = "name: $name \n\nemail: $email \n\ncomments: $comments";$headers = 'from: '.$name.' <'.$emailto.'>' . "\r\n" . 'reply-to: ' . $email;mail($emailto, $subject, $body, $headers);$emailsent = true;}} ?>这段代码确认表单是否提交,是否正确填写。如果发生错误,比如,一个字段是空的,或者邮箱地址不正确,就会返回错误提示的信息,表单就无法提交。
接着就是显示错误提示的信息,例如,“请输入你的姓名”。 下面是完整的表单页面模板,如果喜欢的话你可以原封不动地使用。
<?php/*template name: contact*/?><?phpif(isset($_post['submitted'])) {if(trim($_post['contactname']) === '') {$nameerror = 'please enter your name.';$haserror = true;} else {$name = trim($_post['contactname']);}if(trim($_post['email']) === '') {$emailerror = 'please enter your email address.';$haserror = true;} else if (!eregi("^[a-z0-9._%-]+@[a-z0-9._%-]+\.[a-z]{2,4}$", trim($_post['email']))) {$emailerror = 'you entered an invalid email address.';$haserror = true;} else {$email = trim($_post['email']);}if(trim($_post['comments']) === '') {$commenterror = 'please enter a message.';$haserror = true;} else {if(function_exists('stripslashes')) {$comments = stripslashes(trim($_post['comments']));} else {$comments = trim($_post['comments']);}}if(!isset($haserror)) {$emailto = get_option('tz_email');if (!isset($emailto) || ($emailto == '') ){$emailto = get_option('admin_email');}$subject = '[php snippets] from '.$name;$body = "name: $name \n\nemail: $email \n\ncomments: $comments";$headers = 'from: '.$name.' <'.$emailto.'>' . "\r\n" . 'reply-to: ' . $email;mail($emailto, $subject, $body, $headers);$emailsent = true;}} ?><?php get_header(); ?><div ><div ><?php if (have_posts()) : while (have_posts()) : the_post(); ?><div <?php post_class() ?> ><h1 ><?php the_title(); ?></h1><div ><?php if(isset($emailsent) && $emailsent == true) { ?><div ><p>thanks, your email was sent successfully.</p></div><?php } else { ?><?php the_content(); ?><?php if(isset($haserror) || isset($captchaerror)) { ?><p >sorry, an error occured.<p><?php } ?><form action="<?php the_permalink(); ?>" method="post"><ul ><li><label for="contactname">name:</label><input type="text" name="contactname" value="<?php if(isset($_post['contactname'])) echo $_post['contactname'];?>" /><?php if($nameerror != '') { ?><span ><?=$nameerror;?></span><?php } ?></li><li><label for="email">email</label><input type="text" name="email" value="<?php if(isset($_post['email'])) echo $_post['email'];?>" /><?php if($emailerror != '') { ?><span ><?=$emailerror;?></span><?php } ?></li><li><label for="commentstext">message:</label><textarea name="comments" rows="20" cols="30" ><?php if(isset($_post['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_post['comments']); } else { echo $_post['comments']; } } ?></textarea><?php if($commenterror != '') { ?><span ><?=$commenterror;?></span><?php } ?></li><li><input type="submit">send email</input></li></ul><input type="hidden" name="submitted" value="true" /></form><?php } ?></div><!-- .entry-content --></div><!-- .post --><?php endwhile; endif; ?></div><!-- #content --></div><!-- #container --><?php get_sidebar(); ?><?php get_footer(); ?>第四步骤: 添加jquery验证到此为止,我们的表达已经能够非常完美的运作了。不过你还可以通过添加一个客户端验证来改善它。为此,我打算使用jquery和 validate jquery插件,这个插件非常强大,通过它你可以正确、快速、轻松地验证表单。
首先是下载验证插件 然后将它上传到你的主题文件里,完成之后,将下面的代码粘贴到一个新的文件里:
$(document).ready(function(){$("#contactform").validate();});将这个文件命名为verif.js并保存至你的主题文件目录里。
现在就需要将这个javascript文件链接到主题里,打开你的header.php文件,把下面的代码粘贴到<head>和</head>这两个标签之间:
<?php if( is_page('contact') ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/verif.js"></script>
<?php }?>
大功告成!
5.3.2版本修复了5个问题。更新之前,请备份网站!!在运行WordPress的任何主要更新之前,请确保备份您的网站。使用诸如BackupBuddy、WPvivid Backup之类的WordPress备份插件来运行完整的网站备份。整个网站的备份应包括WordPress数据库、WordPress文件、主题、插件、媒体库等。
下载地址
https://wordpress.org/latest.zip
WordPress 5.3 主要更新
WordPress 5.3 专注于扩展和完善WordPress Gutenberg编辑器,也称为古腾堡编辑器,它是在WordPress 5.0中首次引入的。大多数更值得注意的新功能和改进都与古腾堡有关。不过,此版本中还有一些其他出色的更新,包括更好的图像处理,对WordPress后台UI的更新,以改善可访问性等。
1.更快,更直观的WordPress区块编辑器
总体而言,您会注意到使用古腾堡区块编辑器感觉更“流畅”,使用起来也不那么笨拙。可以说,在使用“块编辑器”创建文章和页面的整体体验方面,已经付出了很大的努力。WordPress 5.3引入了Motion,使与您的块的交互“快速自然”。此外,页面负载从60毫秒减少到44毫秒,古腾堡编辑器现在更加轻巧。
2.更好的块预览和描述
WordPress 5.3扩展了左上方“添加块”菜单中包含的信息。现在,您将看到单个块的外观预览,并更好地描述了块的功能。如果您不确定要使用哪个块,预览功能的添加将大大改善选择正确块的过程。要查看这些内容,请单击顶部导航菜单中的“+”号。将鼠标悬停在列表中的任何块上,即可查看正确区块预览和描述信息。
3.大图像支持
WordPress 5.3改进了对上传高分辨率图像(例如从智能手机或其他高质量相机拍摄的照片)的支持。WordPress 5.3引入了大图像检测功能,并自动生成其中的“网络优化最大尺寸”。
现在,照片在上传时会立即调整为2560像素,成为新的“full”尺寸。如果图像已自动调整大小,则“ scaled ”将添加到文件名中。如果由于服务器超时而失败,WordPress也将重试生成图像大小。
对于那些可能不会意识到大图像会拖慢网站速度的人们,以及那些必须教育客户如何为其网站优化图像的人们而言,这是一个巨大的胜利。注意:您可以使用 big_image_size_threshold 过滤钩子禁用自动调整图像大小的功能。
要了解更多大图片处理,请阅读:WordPress 5.3 可对大图片自动缩放、WordPress 5.3 更新对图片的处理方式
4.新主题2020
2020是与WordPress 5.3捆绑在一起的新的默认WordPress主题。“以灵活性为核心设计”,这个主题大胆而明亮。您可能会喜欢或讨厌它的设计。
推出2020主题的最大原因是,查看主题与Gutenberg块编辑器完全集成时可能发生的情况。开发人员可能希望深入研究主题文件,以了解在后端完成了多少工作。
设计师可能会喜欢2020主题附带的由Rasmus Andersson设计的Inter字体。作为WordPress默认主题的第一个对象,Inter提供了可变字体版本,该版本通过仅在两个字体文件中包含所有字体粗细和字体样式来缩短加载时间。
5.更改WordPress管理界面的外观
您可能会立即注意到WordPress管理界面外观的一些变化。这些更改主要与改善可访问性有关。在管理控制台的“欢迎”屏幕上,您可以立即注意到5.3中的某些更改。
以下是管理界面的几点更新:
按钮不再具有方框阴影
为了使界面元素之间的层次结构更好,引入了较暗的表格和元框边框
表单字段和按钮上的颜色对比更强
将样式集中在表单字段和按钮上
文字缩放时的内容行为
对表单字段(文本输入、文本区域、选择、复选框、单选按钮、主按钮和辅助按钮)以及通知、表格、元框和颜色选择器进行了特定更改。
6.更好的页内/文章编辑器预览
如果主题支持,在创建文章或页面时使用“块编辑器”时,您可能会看到全新的预览体验。例如,您可能会看到主题使用的背景颜色,而不仅仅是普通的白色背景屏幕。此预览更好地反映了您将在网站前端看到的最终“已发布”设计。
新的WordPress主题2020展示了通过在文章/页面编辑器中使用块时提供块预览的可能性,这肯定会改善使用块的体验。
7.导航模式
为提高屏幕阅读器的可访问性,WordPress 5.3中的块编辑器引入了新的导航模式。现在,您可以使用Tab键在一个块之间移动 。您也可以使用箭头键在块之间导航。到达要编辑的块后,您可以通过按Enter 键进入编辑模式 。使用Esc键返回到导航模式。
8.新的分组块
当古腾堡编辑器庆祝其一岁生日时,WordPress 5.3中引入了几个新的WordPress区块。新的分组块允许您将其他块分组在一起,因此您可以轻松地将页面分为带有背景颜色选项的彩色部分。这样,您不必为每个块设置背景颜色。
9.新的空白块
WordPress 5.3引入了专用的【空白】块,而不是花很多时间来间隔您的内容。您可以在“布局元素”下找到该块。在顶部工具栏中,您可以显示块设置以像素为单位设置间隔的高度。
或者,您也可以使用蓝点激活一个新的“交互式”缩放器,它也很酷。以像素为单位的高度将自动调整。
10.栏目块改进
对栏目块进行了改进。现在,“栏目”块支持固定的列宽,调整列大小和对齐列的能力。添加列时还有一个新向导。
11.封面区块的改进
现在,您可以为封面块设置背景颜色,封面块允许您添加带有文本叠加层的图像或视频,例如标题。
您也可以使用相同的交互式滑块更改标题块的大小。
12.按钮块圆角半径设置
在WordPress 5.3中,您可以从“块”编辑器自定义按钮块的圆角半径。圆角半径可能很小,但是这意味着您不必通过CSS来完成。
13.表格块更新:页眉/页脚行和对齐方式
现在,表格块支持页眉和页脚行,可从“块设置”中获得。表格对齐还有一个新选项,而不仅仅是文本对齐。
14.更改标题栏的颜色
WordPress 5.3现在提供了文本和背景颜色的控件。默认颜色可能由您的主题决定(如此处所示,如“2020”)。您也可以将“自定义颜色”链接用于颜色选择器。
15.总体可访问性改进
WordPress 5.3极大地推动了可访问性的改进。这些经过改进的样式解决了许多可访问性问题,例如表单字段和按钮上的颜色对比,编辑器和管理界面之间的一致性,新的“snackbar”通知以及默认的WordPress配色方案的标准化。
16.自动图像旋转
这项功能最初是在9年前提出的,而由于许多献身者的毅力,这项功能才得以实现,现在WordPress终于支持自动图像旋转。上传后,图像将根据嵌入的方向数据正确旋转。
17.管理电子邮件验证
现在,当您以管理员身份登录时,系统会定期要求您确认您的管理员电子邮件地址是最新的。如果您更改电子邮件地址,这将减少被锁定在站点之外的机会。
18.改善站点健康
WordPress 5.3中引入的改进使发现问题变得更加容易。扩展的建议从“运行状况检查”屏幕突出显示了可能需要在您的站点上进行故障排除的区域。
具体的改进包括更改了评分指标,增强了恢复电子邮件功能以及用于完成站点健康状态测试的新过滤器。
19.日期/时间组件修复
开发人员现在可以以更可靠的方式处理日期和时区。日期和时间功能已经获得了几个用于统一时区检索和PHP互操作性的新API函数,并且修复了许多错误。点此了解更多。
20. PHP 7.4兼容性
开发人员将很高兴听到WordPress 5.3旨在完全支持PHP 7.4的消息。WordPress 5.3包含多项更改,以删除不推荐使用的功能并确保兼容性。与往常一样,WordPress鼓励所有用户运行最新版本的PHP。
么自定义表单的插件有很多,但这些插件基本上都是直接将内容发送到神奏岩穿势误最验邮箱里的,而不能在WP的后台进行查看,Wordpress Form Manager强悍的一点也正是在这里,即可以把内容发送到邮箱里,也会将内容存进数据库,支持直接在WP的后台进行查看。
Wordpress F态升命杆宗丝尔师orm Manager插件启用后,会在侧边栏生成一个"Form"的栏目,这里就是设置Wordpress Form Manager与查看数据的地方。
初始安装的Wordpress Form Manager里面是没有内容的,需要添加一个“Add New”,之后就会出现一个表单怎误厚需打妒那创说既的列表,在这里就可以添加多个表单,以方便自定义不同的内容使用在不同的地方。
点击相应的表单项进入编辑页面,在这里可以添加内容让种经毫压临黑守并定义他们的形式,比如文本框、单选项、多选项、下拉列表等,在“Add Form Element”这里添加:
添加的每一个内容项都是可编辑的,在下面的“Appearance”栏目里,可以行既老正游题挥简单的定制表单的外观,比如是否需要显示标题,以及是否需要显示边框,以及每一项内容名称促临相纸危的长度等。
再往下的“Customize”则是设置提讨先利交成功之后显示什么提示文字,以及按钮上显示什么字等。
在页面的右侧,基本上只需要填写两项:Form Slug:用来写表单的缩略名的(页面调用时需要使用到这个);E-Mail Notifications:用来设置表单内容发往的邮箱地址、标题以及来源;
这样基本上就简单的设置完成了,然后就可以在日志或是页面里任意的调用这个自定义表单的内容了,调用的方法就是在内容里输入
[form Form Slug]
比如,刚才如果修改了Form Slug为contact的话,那么调用的代码就是
[form contac伯含季t]
wordpress表单插件下载,wordpress插件大全,wordpress表单数据提交
作者:整理来源:维基百科,时间:2023-04-09 23:16,浏览:63