扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
一篇文章是否好看,无非在于两方面,第一个就是文章本身的内容,另一个就是文章显示的排版布局。笔者博客自创建以来,也已经过去了近两年的时间,这 其中积攒了很多在 WordPress 写作的经验,特别是在文字排版这块。回首观看,早期的文章质量比现在的要差远了,本文就是总结一下对于使用 WordPress 写作文章排版的经验。
主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、响应式网站设计、程序开发、微网站、小程序开发等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的网站建设、成都网站制作、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体,具备承接不同规模与类型的建设项目的能力。
一些基础知识
在后台编写文章通常使用可视化的编辑器,你看到的排版布局就是比较具体的效果,但实际上数据是用 HTML 结构来记载的。例如,当你回车换行,那么在换行的地方系统就会加上一个段落标签(p),当你插入一个连接的时候,用的就是锚标记 (a)。HTML 是具有语义性的,根据 HTML 的语义性写出的一篇文章,对于 SEO 、排版都有好处。此外,WordPress 主题的作者,通常也会针对这些结构进行一些设计和样式处理,会使其显示的效果更好。
用标题划分文章层次
标题标签(hn)是非常重要的一个 HTML 标签,它对于 SEO 也有很重要的作用。通常用它来划分文章的层次。写一篇文章,肯定要有一定的层次,也就是所谓的大论点、小论点等。通常的文章一般具有三个层次:文章标题、 大标题、小标题,通常来说,对应的标签是 h1、h2、h3。对于有的主题来说,设计者会用 h2 作为文章标题,这点也需要注意。标题标签一共有六个(h1-6),分别代表不同的重要等级,实际应用当中,只会使用 h1-3。需要注意以下两点:
内文标题层次不要高于文章标题。如果文章标题使用了 h1,那么内文大标题只能使用 h2。
小标题包含在大标题中。分清楚小标题属于哪个大标题属于什么层次,不能把小标题和大标题的层次混合。
合理的使用标题划分文章层次,可以让文章变得更容易理解,对阅读者和 SEO 都有好处,更有一些插件可以根据文章的标题建立目录层次,例如 水煮鱼 开发的TOC 文章目录插件。
对于重要的文字进行加重处理
这一点大家都知道,不再赘述。但是要注意的一点,只对非常重要的关键词进行加重,加重的效果通常是文字加粗,这样可以吸引浏览者的目光,如果太多的话,就会分散阅读者的注意力,要尽可能的少。下图就是个加太多的例子。
善用有序和无序列表
如果你在文中写的内容具有明显的并排性,可以作为一个列表,那么一定要使用无序列表(ul)或者有序列表 (ol)。无序列表就是指没有顺序的列表。如果你想列举某项产品有什么样的有点,或者是一些赛事列表,那么你应该使用无序列表。有序列表 是指一些有顺序的并排信息。如果你想写一下使用某个软件的四个步骤,或者是发布一个有明确顺序的资源列表,那么就用无序列表。
见过很多文章会对一些并排性的内容,手动编写诸如 1、2、3 之类的编号,其实这是错误的,应该使用有序列表, CSS 自动添加编号上去。
善用空格
空格是文章中比不可少的一部分,但是很多人用空格的方法是错误的。空格不是用来排版的,它不像是在 Word 之类的软件里面,使用空格在段落的开头空开两格。中文的写作习惯是在文章段落的开头,空开两个字符,这空开的距离,并不应该使用空格来实现,而是使用 CSS 对段落标签增加属性 text-indent 来实现的。这个是主题设计者的工作,如果你用的主题并没有做这个,那就不会自动空开了,你只能自己修改 CSS 或者用空格模拟空出两字的效果,但这是不合理的。
那么空格究竟要用在什么地方呢?用在重要的关键词上面,特别是英文关键词。英文在中文文章中是个不太好处理的东西,绝大多数的作者会直接把英文字母和中文混写在一起,但是这样的显示效果并不好。具体对比效果如下图
在稍微重要的关键词的两边,我加了两个空格,稍稍加一点距离,对于英文单词,除了空格之外还对首字母进行大写,两条文字一对比效果很明显就可以看出来。
标注文章引用内容
有的文章可能会引用一些其他文章的资料、名人名言等,这样就需要选中这块文字,点击“块引用”,这样就可以告诉阅读者,这是一块来自他人的内容,我引用过来的。
用预格式化描述代码等有格式的内容
例如一段代码,通常有换行、空格之类的用来保持代码的结构,如果以普通的文字发布,可能会破坏这个结构,所以要用预格式化。
使用其他修饰的注意事项
其他的文字修饰还有很多,包括:斜体、删除线、下划线、颜色、字体大小等。这些文字修饰要慎用,用多了,会让阅读者感觉杂乱影响阅读心情。就颜色来说,一篇文章中最多不要超过两种颜色。
尽量多的使用图片
虽然不能极端的说没有图片的文章不是好文章,但是一篇好文章是肯定有图片的。文章中的图片主要有以下两个用处:
与文章内容相符增强文章表现力
缓和阅读中的视觉疲惫
所以,文章中,要尽量配图。配图也要跟文章主题相符合,例如:介绍人物的文章,配张人物图片;介绍软件的,配张软件截图;写心情生活类的,可以配张唯美的图片等等。
用心去写文章
一篇文章最吸引人的是文章的内容,再好的排版,没有好的内容,人们也不会去看的。所以要用心去写文章。
写之前有明确的目的(介绍自己的写作排版经验),有一个大体的构思(包括写哪几部分),然后觉得写出来会给阅读者一定的帮助,这时候就开始动手写。 写的过程中,按照之前的构思,列出大纲和知识点收集整理相关资料,然后针对每个知识点去截图或者用 PS 作图来更形象的描述这个问题。写完并且上传图片之后,还要反复检查两边,看看是否有废话、错别字以及没介绍清楚的地方。
就本文而言,本人用了两个小时的时间来写作,为写出一篇有价值的文章,付出这些是值得的。
一个反例
下图是从所谓刚子博客上截取的,是一篇被我缩小的文章,整体是一大段文字没有任何的段落层次、修饰、图片,是一个非常好的反例。
如果只是一篇短小的文字,这样是可以的,如果是一篇很长的文字,不免让阅读者疲惫。
写在最后
用 WordPress 写出一篇好看的文章,首先要用心去写,写出一篇高质量、有阅读价值的文章,其次要对文章不同的内容进行修饰。本文就介绍了一些写作经验。
至于文章内容具体的修饰样式,是根据你用的 WordPress 主题而定。本人的原创主题Qetro就对文字的排版进行了一定的优化,如果你的博客写文字比较多一点,不妨试用一下看看效果。
WordPress默认的注册表单仅由两个字段组成—-用户名和邮箱。
这个仅有的用户名和邮箱表单字段使得注册速度非常的简单。首先,你输入一个用户名,然后输入邮箱,这个邮箱就是用来接收密码的。接下来,你使用邮箱接收到的密码登陆站点,并且完成个人资料,把密码修改成简单易记得。
仅仅是在站点注册,而不是让用户区经历这些压力,那为什么除了用户名和邮箱之外,不提供一个直接的、包含一些额外重要的表单字段,例如密码、个人的URL、个人简介、昵称和他们的姓名的注册表单供用户使用呢?
这对于像Tuts+的多用户网站是非常有用的。
在这篇文章中,我们将使用下列的表单字段建立一个自定义的表单注册插件:
username
password
website URL
first name
last name
nickname
biography (or an about section)
这个自定义表单插件可以通过使用短代码和联系模板整合到WordPress中。
利用短代码模板,你可以在你的站点中创建一个正式的注册页面。你也可以再一篇发表的文章中是用短代码模板,这样用户就可以在阅读完你的文章之后进行注册。
如果你想添加一个注册表单在你网站侧边栏的某个具体位置,你可以对WordPress主题中仅仅期望放置标签模板的位置进行编辑,来创建需要的注册表单。
在创建之前,需要注意的是,用户名、密码和电子邮件字段是必需的。
当我们编写验证函数时,我们将强制执行这些规则。
构建插件
正如说的那样,我们开始对插件编码。首先,包含插件的头部:
?php
/*
Plugin Name: Custom Registration
Plugin URI:
Description: Updates user rating based on number of posts.
Version: 1.0
Author: Agbonghama Collins
Author URI:
*/
接下来,我们创建一个包含注册表单的HTML代码的PHP函数:
function registration_form( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {
echo '
style
div {
margin-bottom:2px;
}
input{
margin-bottom:4px;
}
/style
';
echo '
form action="' . $_SERVER['REQUEST_URI'] . '" method="post"
div
label for="username"Username strong*/strong/label
input type="text" name="username" value="' . ( isset( $_POST['username'] ) ? $username : null ) . '"
/div
div
label for="password"Password strong*/strong/label
input type="password" name="password" value="' . ( isset( $_POST['password'] ) ? $password : null ) . '"
/div
div
label for="email"Email strong*/strong/label
input type="text" name="email" value="' . ( isset( $_POST['email']) ? $email : null ) . '"
/div
div
label for="website"Website/label
input type="text" name="website" value="' . ( isset( $_POST['website']) ? $website : null ) . '"
/div
div
label for="firstname"First Name/label
input type="text" name="fname" value="' . ( isset( $_POST['fname']) ? $first_name : null ) . '"
/div
div
label for="website"Last Name/label
input type="text" name="lname" value="' . ( isset( $_POST['lname']) ? $last_name : null ) . '"
/div
div
label for="nickname"Nickname/label
input type="text" name="nickname" value="' . ( isset( $_POST['nickname']) ? $nickname : null ) . '"
/div
div
label for="bio"About / Bio/label
textarea name="bio"' . ( isset( $_POST['bio']) ? $bio : null ) . '/textarea
/div
input type="submit" name="submit" value="Register"/
/form
';
}
请注意注册字段是作为变量传递给上面的函数。在函数中,你会看到下面代码的示例:
( isset( $_POST['lname'] ) ? $last_name : null )
这个三元操作符是检查全局变量数组$_POST是否包含数据,如果有数据,就把填充的表单字段值保存以便进入下一个字段。
除非你验证了表单数据并且清空了表单数据,一个注册表单才能算完成,否则就不算。因此,我们要创建一个名为 registration_validation的表单验证函数。
为了简化验证的”痛苦”,我们可以使用WordPress中的 WP_Error 类。跟着我编写验证函数:
1、创建函数,并将注册表单的字段值作为函数的参数传递进来
function registration_validation( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {
2、实例化 WP_Error 类,并把实例作为全局变量,以便于我们可以再函数的作用域之外使用。
global $reg_errors;
$reg_errors = new WP_Error;
3、记住:我们说的用户名、密码和电子邮件是必填的,不要忽略了。为了执行这个规则,我们需要检查它们中任何一个是否为空。如果为空,我们就将错误信息追加给 WP_Error 类的实例。
if ( empty( $username ) || empty( $password ) || empty( $email ) ) {
$reg_errors-add('field', 'Required form field is missing');
}
4、我们也可以确保用户名的字符个数不小于4
if ( 4 strlen( $username ) ) {
$reg_errors-add( 'username_length', 'Username too short. At least 4 characters is required' );
}
5、检查用户名是否被注册了
if ( username_exists( $username ) )
$reg_errors-add('user_name', 'Sorry, that username already exists!');
6、利用WordPress的 validate_username 函数确保用户名是可用的
if ( ! validate_username( $username ) ) {
$reg_errors-add( 'username_invalid', 'Sorry, the username you entered is not valid' );
}
7、确保用户输入的密码的字符个数不小于5
if ( 5 strlen( $password ) ) {
$reg_errors-add( 'password', 'Password length must be greater than 5' );
}
8、检查电子邮件是否有效
if ( !is_email( $email ) ) {
$reg_errors-add( 'email_invalid', 'Email is not valid' );
}
9、检查电子邮件是否被注册
if ( !is_email( $email ) ) {
$reg_errors-add( 'email_invalid', 'Email is not valid' );
}
10.、如果用户填写了网站字段,需要检查其是否有效
if ( ! empty( $website ) ) {
if ( ! filter_var( $website, FILTER_VALIDATE_URL ) ) {
$reg_errors-add( 'website', 'Website is not a valid URL' );
}
}
11、最后,我们在WP_Error实例中对错误进行循环,并显示个别的错误
if ( is_wp_error( $reg_errors ) ) {
foreach ( $reg_errors-get_error_messages() as $error ) {
echo 'div';
echo 'strongERROR/strong:';
echo $error . 'br/';
echo '/div';
}
}
这样,验证函数就完成了。接下来是 complete_registration()函数,用于处理用户注册。用户的注册真正完成是通过wp_insert_user函数,
用户的数据作为数据保存后可以作为此函数的参数。
function complete_registration() {
global $reg_errors, $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;
if ( 1 count( $reg_errors-get_error_messages() ) ) {
$userdata = array(
'user_login' = $username,
'user_email' = $email,
'user_pass' = $password,
'user_url' = $website,
'first_name' = $first_name,
'last_name' = $last_name,
'nickname' = $nickname,
'description' = $bio,
);
$user = wp_insert_user( $userdata );
echo 'Registration complete. Goto a href="' . get_site_url() . '/wp-login.php"login page/a.';
}
}
在上面的函数中,我们将$reg_errors作为WP_Error的实例,并将表单字段作为全局变量以便于可以再全局作用域中使用。
我们需要检查$reg_errors是否包含任何错误,如果没有错误,则将用户注册信息插入到WordPress的数据库并用登陆链接来显示注册完成的信息。
然后,把所有我们之前创建的函数全部放在全局函数 custom_registration_function()之中
function custom_registration_function() {
if ( isset($_POST['submit'] ) ) {
registration_validation(
$_POST['username'],
$_POST['password'],
$_POST['email'],
$_POST['website'],
$_POST['fname'],
$_POST['lname'],
$_POST['nickname'],
$_POST['bio']
);
// sanitize user form input
global $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;
$username = sanitize_user( $_POST['username'] );
$password = esc_attr( $_POST['password'] );
$email = sanitize_email( $_POST['email'] );
$website = esc_url( $_POST['website'] );
$first_name = sanitize_text_field( $_POST['fname'] );
$last_name = sanitize_text_field( $_POST['lname'] );
$nickname = sanitize_text_field( $_POST['nickname'] );
$bio = esc_textarea( $_POST['bio'] );
// call @function complete_registration to create the user
// only when no WP_error is found
complete_registration(
$username,
$password,
$email,
$website,
$first_name,
$last_name,
$nickname,
$bio
);
}
registration_form(
$username,
$password,
$email,
$website,
$first_name,
$last_name,
$nickname,
$bio
);
}
我需要说明一下全局函数 custom_registration_function()中有哪些代码。
首先,我通过检查$_POST['submit']是否是空来确定表单是否提交。如果提交了,我就调用
registration_validation()函数来验证用户提交的表单.
然后,确保表单数据的有效性并将有效的数据在表单字段域之后用一个变量命名。最后,调用
complete_registration()函数保存用户。我需要调用registration_form()函数来显示用户注册表单。
我之前提到过,我打算用短代码模板来支持注册插件。下面就是短代码模的支持代码:
// Register a new shortcode: [cr_custom_registration]
add_shortcode( 'cr_custom_registration', 'custom_registration_shortcode' );
// The callback function that will replace [book]
function custom_registration_shortcode() {
ob_start();
custom_registration_function();
return ob_get_clean();
}
到这里为止,我们已经完成了插件
用WordPress建站的时候,出于安全,一般是不能在文章及页面(别告诉我,你连文章和页面都分不清)执行PHP代码的。当然,有时候我们可能有需要这样的功能,但不能直接去修改WordPress的PHP文件,这样不仅效率很低,而且不适合经常改动。如果你经常这么做,我只有两个字:佩服!今天就分享两个插件来解决如何在WordPress文章和页面运行PHP代码这个问题。PHPCodeforposts插件(后台搜索即可安装)这个插件可以成功解决在WordPress文章和页面还有侧栏小工具里面运行PHP代码的问题。注意下用法:在后台新建你写好一段PHP代码,然后会生成一个短代码标签。只要把这个标签嵌入到你需要的地方就可以实现效果了。保存代码上面的参数可以自己选择需要运行的地方保存即可。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流