分类: WordPress基础

  • 如何获取微信和支付宝收款二维码?

    近期我们对原来的网站赞助打赏WP插件(现更名为:打赏/点赞/分享组件)的功能进行了扩展,在原来的打赏功能基础上,增加文章点赞和社交分享功能,并且支持两种样式可选。有兴趣的朋友可以下载安装。

    另外,我们发现在上一个版本中,有的博主不知道如何获取微信和支付宝的收款二维码,又或者上传的尺寸奇奇怪怪的(必须上传1:1比例的图片),下面针对这个写个简单的教程,方便用户设置插件。

    微信收款二维码获取

    Step 1 -打开你的微信APP,点击右下角的“我”-选择“支付”;

    如何获取微信和支付宝收款二维码?插图

    Step 2 -进入微信支付管理界面后,选择“收付款”;

    如何获取微信和支付宝收款二维码?插图1

    Step 3 -点击“保存收款码”,即可将微信收款二维码保存到手机相册。

    如何获取微信和支付宝收款二维码?插图2

    Step 4 -最后,将微信收款二维码传到你的电脑,使用图片编辑工具将二维码部分裁剪出来即可(即将二维码的框框部分,必须裁剪为正方形)。

    支付宝收款二维码获取

    Step 1 -打开你的支付宝APP,点击“收钱”;

    如何获取微信和支付宝收款二维码?插图3

    Step 2 -点击“保存图片”将你的支付宝收款二维码保存到手机相册;

    如何获取微信和支付宝收款二维码?插图4

    Step 3 -最后,将支付宝收款二维码传到你的电脑,使用图片编辑工具将二维码部分裁剪出来即可(即将二维码的框框部分,必须裁剪为正方形)。

     

  • 如何通过Gravatar设置WordPress博客头像

    如何通过Gravatar设置WordPress博客头像插图
    默认情况下WordPress博客头像图片均取自于Gravatar(除非你所使用WordPress主题增加了用户头像管理功能)。如果你(包括博主或者读者)还没有设置专属于WordPress博客系统的头像,下面我们一起来设置一个。

    为什么要设置自己专属的WordPress头像,其一作为博主,没有专属的头像多少会影响您网站的可信度;其二作为读者,你也不想留言的时候老看到自己的头像是默认头像吧。

    WordPress插件市场也提供各种WordPress自定义头像插件,但我不建议你因为这样的一个小需求,去安装一个插件,因为它可能会导致页面显示速度变慢。因此,在本文中,我将向您展示如何使用免费工具Gravatar创建你的专属头像。在开始之前,请提前准备你认为很酷的头像图片(最佳尺寸为512*512px)。

    关于Gravatar

    Gravatar是WordPress.com提供的免费头像显示服务。

    如果您注册Gravatar并设置头像,则会显示在WordPess中显示你所设置的头像(与你注册Gravatar时使用的Email地址关联)。

    Gravatar头像是否显示取决于WordPress主题,一般情况下都会显示,除非主题使用另外的方法定义头像。

    使用Gravatar创建一个WordPress头像

    首先,访问Gravatar官方网站

    如何通过Gravatar设置WordPress博客头像插图1
    进入Gravatar网站后,点击页面的蓝色按钮“”Create Your Own Gravatar””。
    如何通过Gravatar设置WordPress博客头像插图2

    页面将跳转到“使用 WordPress.com 帐户注册 Gravatar”,你只需要注册一个新的账户或者使用已有的WordPress账户登陆。

    如何通过Gravatar设置WordPress博客头像插图3

    如果您没有WordPress.com帐户

    如果您还没有WordPress.com帐户,请输入您的电子邮件地址,用户名和密码,然后单击“创建账户”。提交后,提示等待一分钟,然后显示“我们向您发送确认电子邮件!”页面。

    如何通过Gravatar设置WordPress博客头像插图4

    登陆你刚才的注册邮箱,你将会收到一封发自wordpress账号激活邮件(如果没收到,看看是否进了垃圾箱),点击“激活账号”,即可激活的WordPress账号。

    如何通过Gravatar设置WordPress博客头像插图5

    接下来的步骤,就跟有WordPress账号的一样了,如下所示:

    如果您有WordPress.com帐户

    获得你的WordPress账号后,再次访问https://en.gravatar.com/connect/,会直接跳转到Gravatar头像管理页面。

    如果刚才你不是新注册WordPress账号,而是使用老的WordPress账号登陆,则需要选择“已有wordpress.com账号”,输入账号密码登陆。

    添加头像到Gravatar

    访问Gravatar管理页面后,单击文本链接“Add one by clicking here!”

    如何通过Gravatar设置WordPress博客头像插图6

    提供四种头像图片上传方式,这里以本地上传方式为例;

    Gravatar-new-uplaod-image

    单击“Choose File”按钮上载文件大小为1 MB或更小的图像(注意:最佳尺寸为512*512px,虽然支持裁剪,但上传正方形的图像更便捷),然后单击“下一步”。

    如何通过Gravatar设置WordPress博客头像插图8

    如果你是按照我上面的建议上传512*512px或者其他正方形比例的图像,则跟着这一步你完全都不需裁剪,否则你需要将图像裁剪为正方形,最后点击“Crop Image”;

    如何通过Gravatar设置WordPress博客头像插图9

    下一步是选择头像评级,建议使用默认选择“G(适合所有​​人的图像)”。

    除了G以外的评级为

    • PG:带有粗鲁的手势,挑逗性衣服和暴力图像(适用于13岁以上的人)
    • R …包含暴力,裸体,吸毒的图像(适用于18岁以上的成年人)
    • X …包含如性交图像和令人极其不安的血腥图像

    如果你选择了这三个评级,你的头像……就是没有头像,所以不要选择此类评级。

    如何通过Gravatar设置WordPress博客头像插图10

    选择评级后,点击“Set Rating”。即完成了Gravatar中的头像设置。

    检查WordPress上的头像显示

    如何检查WordPress上的头像显示?我们知道Gravatar设置的头像主要在WordPress的两个地方

    • 文章下的简介
    • 评论字段

    当然显示位置取决于WordPress主题。部分WordPress主题在个人资料也显示图像。

    如果WordPress网站属于你个人所有,你还可以登陆WordPress仪表盘,通过“用户-我的个人资料”查看头像情况。

    Gravatar头像不生效?

    在某些情况下,您已设置了头像,但头像在您的WordPress个人资料或评论并没有生效。可能是以下因素导致:

    注册的电子邮件地址不同-如果在Gravatar中注册的电子邮件地址和WordPress中设置的电子邮件地址不同,则无法显示Gravatar的头像。

    设置了头像隐藏-如果你在WordPress仪表盘的“设置-讨论”中将头像显示的确认勾取消了,则头像也是不会显示的。

    如何通过Gravatar设置WordPress博客头像插图11

    Gravatar头像需要一定时间更新-如果你是才设置的Gravatar头像,则需要等10分服务器来更新数据。

    服务器及浏览器缓存-使用WordPress缓存插件时,由于缓存,可能无法显示头像。你可以尝试强制删除浏览器缓存数据,刷新页面来获取头像数据。

    如何删除Gravatar的头像

    删除当前使用的图像

    如果我不再使用Gravatar上的头像,如何删除在Gravatar中设置的头像。进入你的Gravatar管理页面,点击“1.Pick email to modify”下的“Remove image”。

    如何通过Gravatar设置WordPress博客头像插图12
    弹窗提示是否要从此电子邮件地址中删除Gravatar图像?单击“OK”,即可以删除当前设置的头像。

    删除上传的头像数据

    点击“2.Pick new image”要删除的头像下方的“ × ” ,显示在“ 2.选择新图像”下。

    如何通过Gravatar设置WordPress博客头像插图13

    弹窗提示“您要永久删除此Gravatar吗?”单击“确定”即可删除该图像数据。

  • WordPress维护模式 – 故障排除和自定义页面教程

    当您在WordPress网站上进行更新时,WordPress会进入维护模式并向网站访客展示一个临时页面,例如更新插件,主题或核心。 这是为了避免在更新修补文件时出现任何破损或不同步的内容。 但是,这有几个问题。 首先,有时您的WordPress网站可能会陷入维护模式。 这基本上会使用整个站点瘫痪,直到您手动修复它。 第二个是默认维护页面/消息没有样式,看起来太不友好了,并且在向访问者和客户发送消息时受到限制。 或者我们可以采取更佳友好的方式。 今天我们将探讨解决这些问题的一些解决方法。

    WordPress维护模式是一个很好的内核小功能,在3.0版本正式引入。 每当您更新插件,主题或WordPress安装时,都会向访问者显示以下消息,直到更新操作完成。

    WordPress维护模式 – 故障排除和自定义页面教程插图

    WordPress维护模式默认页面

    在更新和安装过程中,某些后端进程会在短时间内停止(通常只需几秒钟,具体取决于更新的数量和大小)。 WordPress利用  wp_maintenance() 函数在您的站点上创建一个临时的.maintenance文件,其中包含您在上面看到的警报。 更新完成后,文件将自动删除,您的网站将恢复正常。

    默认情况下,WordPress在维护模式下返回503 HTTP状态代码(服务不可用。)。 这基本上告诉Google你在页面上工作或出了什么问题,他们会稍后再回来查看。 这是您要为SEO显示的标题响应,因为如果您的网站暂时关闭,它不会损害您的排名。 Yoast发布了一篇关于503状态HTTP头在SEO方面的重要性的文章,大家可以阅读了解下。

    WordPress用户遇到的一个常见问题是他们的网站可能会陷入维护模式。 这可能非常可怕,因为这也会影响管理员和后端。 突然间,您无法登录到您的WordPress网站,并且您的网站基本上已关闭,只能看到临时维护通知信息。

    这种情况通常在发生冲突时发生,在这种情况下.maintenance文件可能会认为仍有待处理的操作和/或需要完成的更新。 这会导致文件保留,并且永远不会自行删除。 什么原因导致冲突? 根据我们的经验,如果用户以非常快的速度手动点击许多不同插件上的“立即更新”,我们就会看到这种情况发生。 默认情况下,WordPress会按顺序错开更新,但如果连接中甚至有一个ms的延迟,则可能会导致突然冲突,从而触发维护模式一直卡在那里。

    为确保不会发生这种情况,您可以在WordPress得插件管理列表(已安装的插件)上方点击“可用更新”,然后从批量操作下拉列表中选择“更新”。 然后单击“应用”。这将按顺序更新,就不太可能发生更新冲突。

    WordPress维护模式 – 故障排除和自定义页面教程插图1

    批量更新插件

    防止这种情况发生的另一个建议是及时更新插件。 不要等待过长的时间才去尝试更新插件的新版本,出于安全的考虑我们也应该尽可能地对已安装的插件执行更新。 如果真的同时有30多个插件(只是大个比方)需要更新,最好逐个更新它们,以确保您的网站没有任何中断。

    如何快速退出WordPress维护模式

    如果您的WordPress网站目前卡在维护模式,您只需删除已创建的.maintenance文件,网站即可恢复正常。。

    Step 1 -第一步是通过FTP/SFTP登录您的WordPress网站服务器。

    Step 2导航到WordPress站点和/或公共HTML文件夹的根目录, 这是通常包含wp-config.php文件的文件夹。 然后,找到并删除.maintenance文件。

    wordpress-maintenance-mode-file

    WordPress维护模式临时文件.maintenance

    删除后,您可以在浏览器中刷新您的网站,您的网站应该恢复正常。如果还是不能够正常访问,建议您清除WordPress站点上的缓存,参考阅读文章《如何清除/刷新DNS缓存(Windows,Mac,Linux)》。

    您可以通过多种方式扩展WordPress维护模式,例如手动启用它或自定义页面以使其更加友好。 您还可以向访问者和/或客户展示更多消息,以便他们再次光临你的网站。 请记住,您在网站上获得的流量越多,维护模式的消息传递和样式就越重要,因为越多人会更有可能看到它。

    除了运行更新之外,您可能希望改进维护模式页面的另一个原因是,您可能正在手动将更改迁移到生产。 我们始终建议首先在开发站点上进行测试,但有时您可能需要在生产站点上临时展示维护页面一两个小时。

    使用代码手动启用WordPress维护模式

    您可以通过将以下内容放在functions.php文件中来手动启用WordPress维护模式。 或者更好的是,使用WordPress子主题来完成它。

    // 启用WordPress维护模式
    function wp_maintenance_mode(){
    if(!current_user_can(‘edit_themes’) || !is_user_logged_in()){
    wp_die(‘<h1 style=”color:red”>网站更新维护中</h1><br />十分抱歉,我们的网站正在维护更新中。马上恢复正常,请喝口水回来再试!’);
    }
    }
    add_action(‘get_header’, ‘wp_maintenance_mode’);
    // 启用WordPress维护模式
    function wp_maintenance_mode(){
    if(!current_user_can(‘edit_themes’) || !is_user_logged_in()){
    wp_die(‘<h1 style=”color:red”>网站更新维护中</h1><br />十分抱歉,我们的网站正在维护更新中。马上恢复正常,请喝口水回来再试!’);
    }
    }
    add_action(‘get_header’, ‘wp_maintenance_mode’);
    // 启用WordPress维护模式
    function wp_maintenance_mode(){
        if(!current_user_can('edit_themes') || !is_user_logged_in()){
            wp_die('<h1 style="color:red">网站更新维护中</h1><br />十分抱歉,我们的网站正在维护更新中。马上恢复正常,请喝口水回来再试!');
        }
    }
    add_action('get_header', 'wp_maintenance_mode');

    这将将会对未登录的用户访问网站时展示临时维护的通知消息。但管理员仍然可以访问仪表板,因为它正在使用内置的is_user_logged_in() 函数。

    WordPress维护模式 – 故障排除和自定义页面教程插图3

    WordPress维护模式提示信息自定义(代码方式)

    但是,上面的页面不可自定义(它也是动态生成的),但有些站长可能想将其设置为与网站的品牌和外观相匹配。老外 Hongkiat 提供的方案值得大家参考,您可以创建自定义页面。 您需要做的就是创建一个文件,将其命名为maintenance.php,然后将其放在/wp-content/文件夹中。 然后,使用CSS样式定义页面外观,甚至可以从头开始创建整个页面。

    这样,当您更新WordPress核心,主题或插件时,它将使用新文件和您的自定义。 已经在/wp-includes/中的load.php文件中定义了对此文件的检查,因此您无需执行任何额外操作。 它看起来像这样:

    if ( file_exists( WP_CONTENT_DIR . ‘/maintenance.php’ ) ) {
    require_once( WP_CONTENT_DIR . ‘/maintenance.php’ );
    die();
    }
    if ( file_exists( WP_CONTENT_DIR . ‘/maintenance.php’ ) ) {
    require_once( WP_CONTENT_DIR . ‘/maintenance.php’ );
    die();
    }
    if ( file_exists( WP_CONTENT_DIR . '/maintenance.php' ) ) {
     require_once( WP_CONTENT_DIR . '/maintenance.php' );
     die();
     }

    使用WordPress维护模式插件

    如果您不熟悉编辑代码或需要更多内容,您还可以通过使用一些免费和高级插件来实现更高阶的WordPress维护模式提示页面。

    1. WP Maintenance Mode

    WP Maintenance Mode是为您的WordPress网站提供快速简便的维护模式通知的下载量最高的插件之一。 它完全免费,由知名的网页设计博客Designmodo的团队开发。 使用该插件你可以在你的WordPress处于维护模式时向访客展示一个非常友好的界面,如下方截图所示。 它适用于Multisite,但重要的是要注意它可能与部分缓存插件不兼容。

    wp-maintenance-mode-wordpress-plugin-2

    WordPress维护页面插件-WP Maintenance Mode

    该插件目前拥有超过60万个激活安装,并且获得4星评分(5星满分)。 您可以从WordPress插件市场下载WP Maintenance Mode,或者在WordPress仪表板“插件”-“安装插件”下搜索安装。 它的一些附加功能包括:

    • 能够更改颜色,文本和背景
    • 订阅表格,联系表格和倒计时
    • 包含的目标网页模板
    • 适用于任何WordPress主题
    • SEO选项-503 HTTP标头响应
    • 您可以从维护中排除URL,如果您更改了WordPress登录URL,这尤其方便

    2. Coming Soon Page & Maintenance Mode by SeedProd

    Coming Soon Page & Maintenance Mode插件(好Q叉长的名字)由SeedProd 开发并于2011年推出。它在WordPress社区中享有盛誉,因为它是即将推出页面和WP维护模式页面支持良好的插件。 

    coming-soon-page-and-maintenance-wordpress-plugin-1

    WordPress维护页面插件-Coming Soon Page & Maintenance Mode

    它目前有超过70万个有效激活安装,并获得了5星满分好评。 您可以从WordPress插件市场下载Coming Soon Page & Maintenance Mode,或者在WordPress仪表板“插件”-“安装插件”下搜索安装。它的一些附加功能包括:

    • 适用于任何WordPress主题并采用响应式设计
    • 支持自定义外观
    • 支持添加CSS和HTML
    • 多站点和BuddyPress支持

    3. Slim Maintenance Mode

    Slim Maintenance Mode插件完全符合您的想法。 该插件所实现的实质就是我们前面介绍的代码实现自定义WordPress维护模式页面。 只需激活插件,在维护模式下只有管理员才能看到该网站。 如果你想要一些免费,快速和轻量级的插件,这个插件无疑是最佳选择。

    Slim-Maintenance-Mode

    WordPress维护页面插件-Slim Maintenance Mode

    该插件相对比较小众一些,目前的安装量远不如前面几个插件,但目前的得到不错的好评。您可以从WordPress插件市场下载Slim Maintenance Mode,或者在WordPress仪表板“插件”-“安装插件”下搜索安装。 它的一些附加功能包括:

    • 小巧,简单,轻便
    • 无需担心额外设置,只需激活启用即可
    • 适用于任何WordPress主题
    • 后端消息提醒您知道它处于活动状态
    • 503 HTTP标头响应
    • 兼容主流缓存插件

    4.Maintenance Mode

    Maintenance Mode是由Lukas Juhas开发的WordPress插件,是轻量级插件和默认包含的WordPress维护模式的核心。 该插件是完全免费的,使用wp_die() 函数,并可以通过启用WYSIWYG编辑器优化页面。

    maintenance-mode-wordpress-plugin

    WordPress维护页面插件-Maintenance Mode

    它目前有超过5万+个安装,并且获得5星评分。 您可以从WordPress插件市场下载Maintenance Mode,或者在WordPress仪表板“插件”-“安装插件”下搜索安装。 它的一些附加功能包括:

    • 简单易用,轻量代码设计
    • 利用本机WYSIWYG获取文本和自定义代码
    • 支持用户角色(管理员可看网站,用户对应的是维护模式通知页面)
    • 503 HTTP标头响应

    5. Minimal Coming Soon & Maintenance Mode for WordPress

    Minimal Coming Soon & Maintenance Mode,又是一个针对WordPress维护模式开发的名字超长的WordPress插件, 由博客WP Loop的团队开发维护。

    minimal-coming-soon-and-maintenance-mode-for-wordpress-plugin-1

    WordPress维护页面插件-Minimal Coming Soon & Maintenance Mode

    它目前有超过5万+个安装,5星满分好评。 您可以从WordPress插件主页下载Minimal Coming Soon & Maintenance Mode,或者在WordPress仪表板“插件”-“安装插件”下搜索安装。 它的一些附加功能包括:

    • 兼容所有WordPress主题和插件
    • 能够更改您看到的每个元素,包括背景颜色,封面图像,字体等。
    • 在激活之前预览维护页面
    • 兼容缓存插件
    • 支持自定义登录URL
    • 仅对未登录的用户可见
    • 支持Google Analytics
    • 谷歌字体

    6. Elementor

    您还可以使用Elementor之类的页面构建器插件来设计自己的WordPress维护模式页面和即将推出页面。 事实上,采用这种办法,你可以轻松地按照自己的想法定制这类页面。

    elementor-wordpress-page-builder

    WordPress页面创建插件- Elementor

    它目前拥有超过90万+个安装,且还是5星评分。 点击Elementor直接下载插件安装包,或者在WordPress仪表板“插件”-“安装插件”下搜索安装。 它的一些附加功能包括:

    • 100%可定制和设计
    • 提供登录,订阅,表单,倒计时,社交共享按钮和其他小部件
    • 访问角色控制
    • 支持维护模式和即将推出页面
    • 对搜索引擎友好的HTTP 200和HTTP 503状态码
    • 12个设计师精选设计的维护模式页面和即将推出页面模板

    7.利用ManageWP提供的WP维护模式

    ManageWP是一种从一个仪表板管理所有WordPress站点的服务,还包括维护模式选项。 它们有一些很棒的默认模板,轻松切换你喜欢的样式,且还可以编辑HTML。

    managewp-maintenance-mode

    ManageWP提供的维护模式功能

    小结

    如您所见,WordPress核心包含的WordPress维护模式非常实用。 但WP自带的维护模式提示页面实在有点反人类,你可以通过扩展和定制,以匹配你的WordPress网站设计风格,提升用户体验。 您也可以自定义维护提示消息,以便访问者和客户了解当前无法访问的原因。当然如果您陷入维护模式,通过我们前面的教程你也应该清楚如何快速恢复您的网站访问。

  • 如何实现WordPress博客支持SVG格式图像上传

    wordpress-svg-2

    SVG是一种基于XML的矢量图像,现在很多网站使用这种格式来显示网站Logo和图标。 它们在开发人员和设计人员中特别受欢迎的主要原因是它们是可缩放的图像格式,通常文件大小较小(有时相当大),完美适配视网膜屏幕。 默认情况下,WordPress不允许您上传SVG文件格式,主要是出于安全考虑。 今天我们将深入探讨WordPress安全启用SVG支持的方法,讨论浏览器支持,以及一些警告,如果您决定要切换到矢量图像格式。

    希望有一天SVG作为WordPress核心的一部分。

    什么是SVG?

    根据维基百科,SVG(可缩放矢量图形)是一种基于XML的矢量图像格式,用于支持交互性和动画的二维图形。 您甚至可以使用代码或文本编辑器来编辑它们。 SVG规范是自1999年以来由万维网联盟开发的开放标准。目前SVG仅占所有网站的3.4%,但正如您所见,采用率正在快速增长。 流行的网站,如谷歌,Reddit,Dropbox,ESPN,甚至我们在wbolt.com的网站都使用SVG。

    svg-usage-statistics

    SVG使用情况统计(2016年4月-2017年4月)

    SVG浏览器支持情况

    目前,所有主流浏览器和移动浏览器都支持SVG。 您可能遇到的唯一问题是,如果您仍然需要IE8的支持,当然我们不希望你继续支持这个浏览器。 IE8仅占0.36%的市场份额,并且微软也不再为该版本浏览提供更新支持。 有兴趣的朋友可以阅读国外博主Lubos撰写的关于《为什么开发人员应该停止支持IE8,IE9和IE10》的文章。 从商业角度来看,这可能并非总是可行,但他提出了一些非常好的观点。 如果由于某些特殊原因你仍然需要IE8支持,你可以为你的SVG定义一个备用图像(PNG或JPG),但我们今天不会基于此展开讨论。 以下是支持的浏览器列表:

    • Internet Explorer 9, 10, 11+ and Edge
    • Firefox 3+
    • Chrome 4+
    • Safari 3.2+
    • Opera 10+
    • iOS Safari 3.2+
    • Opera Mini (all)
    • Android Browser 4.4+

    svg-browser-support

    SVG浏览器支持情况

    SVGs的优势

    SVG是一种矢量格式,这意味着它们可以在浏览器和照片编辑工具中无限无损缩放。SVG为什么受图形和网页设计师欢迎,不言而喻。通常,当您尝试在Photoshop,Sketch或Paint等工具中编辑PNG或JPG时,会受限于原图的像素。使用SVG,你可以随心所欲地对图形文件进行缩放,并且像素完美(或者我们应该说矢量完美)。这就是为什么它们是用于视网膜屏幕的优秀图像格式的原因。

    谷歌索引SVG,如果你关心搜索引擎优化,这是一个好消息。链接到文件本身的SVG内容将被编入索引并显示在Google图像搜索中。注意:内联SVG,或者更确切地说仅由代码组成的SVG,通常不会被编入索引。

    SVG传统上(并非总是)文件大小小于PNG或JPG。通过使用SVG,您实际上可以加快WordPress网站的速度,因为您将减少整体页面大小。 国外博主Genki写了一篇很棒的文章,他比较了SVG与PNG和JPEG的大小。以下是他测试中的一些内容,他比较了三种不同的图像类型。

    JPG (经过优化后的大小: 81.4 KB)

    JPG-size-1

    JPG图像

    PNG (经过优化后的大小: 85.1 KB)

    PNG-size-1

    PNG图像

    SVG (经过优化后的大小: 6.1 KB)

    SVG-size-1

    SVG图像

    如您所见,与JPG相比,SVG的文件大小减少了92.51%。 与PNG相比,则减少92.83%。 这些文件大小差异非常可观。 然而,有一点需要注意,,SVG并非总是比JPG或PNG小,尤其是一些色彩丰富,细节复杂的图片。

    这就是为什么许多网站使用SVG来处理不太详细的图像,例如Logo,图标等,因为它们会看到文件大小的显着减少。 但是对于拥有大量细节的图像,例如您的博客文章“插图”,您可能更偏向使用PNG或JPG(当然也应该对这些格式图像进行优化),SVG格式并不适合细节丰富的图像。 许多网站使用混合方法,在有意义的情况下将两种文件类型结合使用。

    此外,值得注意的是Facebook和Twitter等社交媒体网络不支持SVG进行共享。 因此,如果您使用SVG作为特色图像,则必须使用Yoast SEO功能并为OG和meta标签上传PNG或JPG,甚至个人建议文章的特色图像直接不适用SVG格式。

    为什么SVG安全性很重要

    SVG不属于WordPress核心的原因在于还需要解决安全问题。 您可以回顾在2013年关于SVG作为WordPress核心(#24251)的激烈讨论。SVG是一个XML文件,它本身可能会导致各种漏洞(普通的图像格式则不会存在这样的问题)。 这些漏洞包括XML外部实体攻击(XXE),嵌套实体攻击和XSS攻击。

    Mario Heiderich发表了一篇有关SVG文件内容注入所带来的安全风险的深刻见解。 给出的一个例子是JavaScript嵌入在SVG中,它实际上设法在Skype上调用Mario。 那有点吓人! WordPress安全插件的作者SecuPress也谈到了在向WordPress添加SVG时要注意的问题,以及以正确的方式做到这一点的重要性。

    插件库中的许多SVG插件都使用以下代码,这些代码只允许将MIME类型SVG上载到WordPress媒体库。 这不是安全的方法! 所以不要去下载任何免费的SVG插件,或者复制粘贴这段代码来实现SVG上传支持。

    function cc_mime_types($mimes) {
    $mimes[‘svg’] = ‘image/svg+xml’;
    return $mimes;
    }
    add_filter(‘upload_mimes’, ‘cc_mime_types’);<code></code>
    function cc_mime_types($mimes) {
    $mimes[‘svg’] = ‘image/svg+xml’;
    return $mimes;
    }
    add_filter(‘upload_mimes’, ‘cc_mime_types’);<code></code>
    function cc_mime_types($mimes) { 
     $mimes['svg'] = 'image/svg+xml'; 
     return $mimes; 
    } 
    add_filter('upload_mimes', 'cc_mime_types');

    解决方案是需要对SVG进行清理。 清理基本上是清理代码或输入以避免安全问题(例如代码注入),代码冲突和错误。 这可能需要编码数据,过滤和验证字符串等等。这是Daryll Doyle的SVG-Sanitizer库发挥作用的地方,他称之为“试图在PHP中构建一个像样的SVG清理工具” 。你可以使用该开发者编写的DEMO来体验一把SVG代码清洗效果。

    svg-sanitizer-e1491611335724

    SVG sanitizer demo

    同样重要的是,您要考虑您网站上的哪些人有权上传SVG。 例如,如果您的WordPress网站支持多作者,则不知道其他人可能上传哪种SVG,从而暴露您的网站。 将SVG上传限制为管理员以及了解某些安全问题的人员可能比较稳妥。

    如何安全地为WordPress启用SVG支持

    Daryll开发了一个插件-WP SVG(也称为安全SVG),它在将SVG图像上传到您的WordPress媒体库时利用SVG-Sanitizer库。 该插件还允许您在媒体库中如普通图像查看SVG。 您可以从WordPress插件市场免费下载这个插件,或者在WordPress仪表板“添加新”插件下的中搜索它安装。

    wp-svg

    WP SVG 插件

    你可以通过wpsvg.com获取它的高级版本,允许您限制某些用户上传SVG和其他SVG优化。 在下面的这个例子中,我们仅以免费版本作为示例。

    在上传SVG之前,重要的是要了解它们的特点与图像略有不同。 从照片编辑工具导出SVG时,您需要将文本导出为曲线(或创建轮廓),否则,在各种浏览器中可能会略有不同。

    export-text-as-curves

    Affinity Designer – 将文本导出为曲线SVG

    安装插件后,没有任何需要你设置,只需在上传时清理SVG。 在下面的测试网站上,您可以看到使用SVG文件替换了我们的Logo,它在媒体库中可以正常查看。

    svg-in-media-library

    SVG在WordPress媒体库

    这也允许我们使用我们的主题控制面板将我们的WordPress标题中的Logo更改为SVG文件。 你可以在下面看到它确实提供了.SVG文件。 在视网膜屏幕上看起来完美无缺。

    SVG-in-wordpress-header

    SVG in WordPress header

    我们还有一个额外的调整。 在IE9-11中,桌面和移动设备尚未正确扩展SVG文件。 添加高度和宽度可以解决此问题。 这可能因主题而异,但在我们的测试网站上,我们只是修改了header.php文件并添加了这些自定义维度。 一些WordPress主题使用CSS来修改缩放,这不是出于性能原因,但由于它可能需要您添加其他代码来修复IE问题。

    modified-header-for-SVG

    为IE浏览器SVG扩展问题修改的header.php文件

    就是这样! 您现在已经安全地启用了WordPress的SVG支持。 此插件和/或方法未得到WordPress核心的认可或支持,因此使用风险自负。 但是,如果您已经上传了仅包含MIME类型代码段的SVG,那么请务必这样做。

    此外,如果您之前从未使用过SVG,请确保在服务器上为“image/svg+xml”文件类型启用GZIP。 这将确保它们被压缩并尽可能快地加载。 有时,sysadmins仅启用更标准的文件类型。 ·

    小结

    SVG在最近几年越发流行,只要是为了能够在高分辨率显示器下以较小体积展示高品质的图形! 我们建议将SVG,PNG和JPG结合使用以获得最佳性能,因为细节过于丰富的图像在SVG格式中表现不佳。 SVG非常适合Logo及网站图标,以确保它在每个屏幕上都具有完美的像素。 关于WordPress下支持SVG,你的想法是什么? 你在WordPress网站上使用过SVG吗?

  • 支付宝官方API接口申请及配置教程

    如果你的WordPress网站使用的是企业备案,希望接入支付宝官方支付接口,可以认真阅读以下教程完成闪电博主题的支付管理配置。

    注:支付宝即时到账只能以公司名义申请,个人名义并不成申请即时到账接口。

    支付宝电脑网站支付接口申请

    Step 1 -登录你的企业支付宝。打开支付宝网站,点击“我是支付宝商家”,已经申请过企业支付宝的可以直接登录,还未申请的先注册,关于企业支付宝的注册步骤就不多讲了,按提示操作,绑定企业银行卡号就可以了。

    Step 2 -登录成功后进入到“产品中心”如下图,选择自己需要的产品并签约,选择“电脑网站支付”,点击立即接入,填写资料提交签约即可。

    支付宝官方API接口申请及配置教程插图

     

    Step 3 -签约成功后,我们可以到“产品签约管理”(入口在产品中心页面右上角,支付宝头像下方)中查看,如下图,表示已签约成功

    20190702093654615461

    Step 4 -加下来我们需要进入蚂蚁金服的开放平台,然后“进入我的开发平台”,“开发中心”中的“网业&移动应用”,点击创建应用下方的“支付接入”,填写资料申请创建,

    支付宝官方API接口申请及配置教程插图2

    支付宝官方API接口申请及配置教程插图3

    Step 5 -应用创建成功后,自动进入应用详情页面,点击功能列表栏的“添加功能”,选择支付收到,勾选“电脑网站支付”,确定即可。

    支付宝官方API接口申请及配置教程插图4

    提示该功能需要签约,“确定”即可完成签约。

    Step 6 -接下来是开发设置的步骤(依然在你刚才申请的应用详情页面),也是最为关键测步骤,在开发设置栏找到“接口加密方式”,点击右侧的“设置”,弹出加密管理窗口。

    支付宝官方API接口申请及配置教程插图5

    (1)选择加密模式为公钥;

    (2)点击支付密钥生成器,进入支付宝RSA密钥工具帮助文档,依据说明进行配置;

    下载安装一键生成 RSA 密钥工具(下载文件以支付宝页面提供地址为准,windows版本工具请不要安装在含有空格的目录路径下,建议直接安装到任意盘的根目录,或者自定义一个名称不带空格的文件夹,比如C:alipaykeytool);

    以Windows版本RSA 密钥工具为例,安装完毕后进入工具,选择密钥长度为RSA2,密钥格式为PKCS1(非JAVA适用),然后点击“生成密钥”,工具会自动成为应用私钥、应用公钥(非常重要,分别保存下来,一会要用到);

    支付宝官方API接口申请及配置教程插图6

    (3)将应用公钥复制到Step 6步骤的填写公钥字符输入框,点击保存设置后,生成支付宝公钥(非常重要,保存下来)

    支付宝官方API接口申请及配置教程插图7

    主题支付管理配置

    进入安装了闪电博付费主题的WordPress后台,点击左侧的“支付管理”,选择“官方接口”,开启“支付宝收款设置”,填入上面所获取到的相关参数:

    • appid-上述步骤Step 4创建的应用id,在应用详情的左上方可以找到到或者应用列表也可以找到,一般是一串数字;
    • 支付宝公钥、应用公钥及应用私钥-均在上述步骤Step 6生成,填入即可。

    支付宝官方API接口申请及配置教程插图8

     

  • 虎皮椒微信&支付宝支付渠道申请及配置教程

    为了方便站长更好地使用支持支付功能的闪电博主题,特地编写了这篇关于第三方支付API接口-虎皮椒的注册、支付渠道申请及主题虎皮椒支付接口配置教程。具体内容如下图:

    一、注册并登陆虎皮椒网站

    首先你要先注册成为虎皮椒的网站用户,只需要一个有效的邮箱即可成为注册,如下图所示:

    虎皮椒微信&支付宝支付渠道申请及配置教程插图

    注册成功后,使用邮箱地址及前面设置的密码登录虎皮椒网站,进入虎皮椒后台。

    虎皮椒微信&支付宝支付渠道申请及配置教程插图1

    虎皮椒申请支付渠道需要绑定微信(注:微信号必须实名),点击我的信息-基本信息,点击显示二维码后,使用微信扫码即可完成绑定。

    虎皮椒微信&支付宝支付渠道申请及配置教程插图2

    二、微信支付渠道申请及主题配置教程

    Step 1 -微信支付渠道申请点击后台管理左侧菜单“支付渠道管理”,点击“申请支付渠道”按钮:

    helpv3-1-1

    注:虎皮椒签约要求

    1. 微信号已绑定银行卡
    2. 支付宝账户实名制,已完成身份证认证,已上传身份证
    3. 网站无违规,违法内容,具体违规信息参考:虎皮椒接入协议
    4. 网站有客服联系方式,比如:电话,手机,QQ,微信

    Step 2 -填写以下基本资料,提交到微信官方审核

    • 店铺名称:即你的网站名称
    • 店铺域名:即你的网站域名,注意https和http有区别,根据自己的实际情况选择
    • 申请渠道:官方微信支付
    • 接入协议:勾选即可

     

    helpv3-2

    Step 3 -完成上述信息填写(选择)后,点击下一步上传身份证信息,如下:

    helpv3-3

    Step 4 -接着上一步,还需要填写个人银行开户信息,具体如下:

    helpv3-4

    Step 5 -填写结算银行卡信息,提交审核。官方审核通过后,需要点击在线签约按钮,微信扫码签约才可以。

    虎皮椒微信&支付宝支付渠道申请及配置教程插图7

    注:务必在收到签约邮件后,登录你的虎皮椒后台完成《商户协约》扫码,才能够完成签约。

    三、支付宝支付渠道申请及主题配置教程

    虎皮椒V3支付宝个人支付无需营业执照,只要支付宝实名即可签约。目前没有营业执照只能签约限额版本,限额每笔不超过1000元,每天总额不超过5万元,一般个人网站够用了。

    1. 交易费率:支付宝官方0.38%,虎皮椒平台1%(需要提前充值到虎皮椒平台);总计:1.38%
    2. 结算方式:第二天结算到支付宝余额
    3. 开户费:88元

    如果你没有营业执照只能虎皮椒的手动签约,具体签约流程如下。

    Step 1 -登录虎皮椒后台,点击左侧菜单“支付渠道管理”,点击申请支付渠道;

    • 店铺名称:即你的网站名称
    • 店铺域名:即你的网站域名,注意https和http有区别,根据自己的实际情况选择
    • 申请渠道:支付宝专业版(实际申请为限额版本,后面需要联系客服修改价格)
    • 接入协议:勾选即可

    虎皮椒微信&支付宝支付渠道申请及配置教程插图8

    点击下一步,进入付款窗口,先不要付款。添加网站客服QQ3047704253,告知需要手动签约支付宝,需要修改价格。

    Step 2 -等客服修改价格后再付款,付款后把支付宝账户,姓名,手机号发给客服。虎皮椒手动提交支付宝官方审核,收到短信后,手动签约。

    Step 3 -签约成功后,然后在虎皮椒里面点继续签约再次扫码确认授权,不付款,不填任何内容。签约成功,测试支付。

    主题支付管理配置

    进入安装了闪电博付费主题的WordPress后台,点击左侧的“支付管理”,选择“第三方接口-虎皮椒”,开启“支付宝收款设置及”“微信收款设置”,填入从虎皮椒支付渠道管理页面的微信支付及支付宝支付的AappID/AppSecret参数:

    虎皮椒微信&支付宝支付渠道申请及配置教程插图9

    完成这些参数填写后,务必点击“保存设置”,才可以启用虎皮椒第三方支付接口。

  • 支付宝&微信个人收款码支付设置教程

    如果你的网站不是企业备案的,无法申请支付宝&微信支付官方API;又或者不想申请第三方支付接口(虎皮椒)。闪电博付费主题的支付管理还支持使用支付宝&微信支付的个人收款码。但使用收款码支付方式,需要站长审核订单手动开通网站VIP会员,无法实现全自动订单流程。

    1.支付宝收款码生成

    Step 1-打开你的支付宝APP,在APP主页选择“收钱”;

    支付宝&微信个人收款码支付设置教程插图

    Step 2 -在个人收钱界面,点击“设置金钱”,输入你需要设置的金额及添加收款理由,设置完毕后点击“保存图片”。

    • 设置金额-即你的网站某个套餐的金额;
    • 收款理由-可以设置为某个套餐的名称,建议与网站的套餐名称保持一致。

    支付宝&微信个人收款码支付设置教程插图1

    Step 3 -保存下来的收款码截图如下图所示,为了保持网站页面美观,需要对该图的二维码部分(虚线部分)区域进行裁剪。

    支付宝&微信个人收款码支付设置教程插图2

    Step 4 -网站如果有多个套餐,重复以上步骤,保存多个收款码图片并进行裁剪。

    2.微信支付收款码生成

    微信支付收款码生成与支付宝收款码生成的操作流程大同小异,具体如下:

    Step 1 -打开微信,点击APP底部菜单“我”-点击界面的“支付”进入微信支付管理界面;

    支付宝&微信个人收款码支付设置教程插图3

    Step 2 -进入界面后选择“收付款”,然后选择二维码收款,进入二维码收款设置界面,点击设置收款金额,输入你需要设置的金额及添加收款备注,设置完毕后点击“保存收款码”。

    • 收款金额-即你的网站某个套餐的金额;
    • 收款备注-可以设置为某个套餐的名称,建议与网站的套餐名称保持一致。

    支付宝&微信个人收款码支付设置教程插图4

    Step 3 -保存下来的收款码截图如下图所示,为了保持网站页面美观,需要对该图的二维码部分(虚线部分)区域进行裁剪。

    支付宝&微信个人收款码支付设置教程插图5

    Step 4 -网站如果有多个套餐,重复以上步骤,保存多个收款码图片并进行裁剪。

    3.主题支付管理配置

    完全支付宝及微信支付收款码图片截取后,进入安装了闪电博付费主题的WordPress后台,点击左侧的“支付管理”,选择“个人收款码”,开启“支付宝收款设置”&“微信收款设置”,根据不同的套餐类型上传对应的收款码图片即可。

    支付宝&微信个人收款码支付设置教程插图6

    最后务必点击“保存设置”,才可以启用个人收款码支付。

    温馨提示:使用个人收款码作为支付方式时,务必先到“套餐管理”设置网站套餐后,再进行个人收款码支付配置。此外,如文章开头所讲,使用收款码支付方式,需要站长审核订单手动开通网站VIP会员,无法实现全自动订单流程。

  • 在线快速生成网址图标favicon

    经常发现闪电博的主题或者插件用户的网站不设置网址图标favicon。当然这个网址图标也不是非有不可,只是有这个网址图标favicon,可以让你的网站更加完整,在你的网站品牌打造上起到一定的作用。下面由小编来简单地介绍一下这个网址图标favicon、网址图标的作用及如何设置网址图标。

    什么是favicon

    Favicon是favorites icon的缩写,中文一般称为网址图标、网页图标、页面图标及URL图标,小编更喜欢称它为网址图标。这个Favicon最早只是应用于浏览器的收藏夹,但现在除了在收藏夹中展示收藏的URL地址对应的favicon外,还会在浏览器的页面标签上展示当前页面的favicon。如下图所示:

    在线快速生成网址图标favicon插图

    Chrome浏览器上的网址收藏夹及标签页

    网址图标的作用

    网址图标对网站功能、网站外观等是没有任何影响的。通过上述的favicon介绍,我们知道这个favicon仅面向客户端,在客户访问你的网站时,在浏览器端展示。

    那么是不是这个favicon可有可无?那也不能够这样理解,给网站增加favicon有以下好处:

    (1)方便用户在浏览器端快速定位到你的网站,毕竟视觉感官往往比文字阅读直观很多;

    (2)其二,favicon一般与网站Logo相呼应,在浏览器端展示你的网站favicon,在一定程度上可以增加你的网站品牌知名度。

    如何设置网址图标

    首先你的网站得有个正方形的Logo,并且这个Logo应该能够让访客第一反应——知道这个Logo属于哪个网站的。个人建议:

    • 直接取材于你的网站Logo,这样经常访问你的网站的用户能够从中读取到信息;
    • 这个Logo的配色尽可能与你的网站主色调或者Logo色调保持一致;
    • Logo尽可能精简,简单的图形、单个字母或者汉字即可。

    然后,我们需要将这个正方形Logo转化成favicon图标,这可以借助一些在线工具快速生成favicon。个人墙裂推荐:favicon-generator。

    访问favicon在线生成工具网站favicon-generator.org,点击Choose File上传你提前准备的正方形Logo,然后点击Create Favicon

    在线快速生成网址图标favicon插图1

    ,上传及生成favicon

    跳转页面后,点击Download the generated favicon,将生成的各种规格的favicon的压缩包下载至本地。

    在线快速生成网址图标favicon插图2

    下载favicon网址图标至本地

    打开压缩包,选择favicon的任何一个尺寸(16*16,32*32或者96*96),推荐使用32*32px尺寸。我们还可以看到该工具还可以生成各种应用程序的ico。

    在线快速生成网址图标favicon插图3

    将生成的favicon上传至你的网站根目录,并在你的主题header.php添加对应尺寸的网址图标代码,如下:

    <link rel=“icon” type=“image/png” sizes=“32×32” href=“/favicon-32×32.png”>
    <link rel=“icon” type=“image/png” sizes=“96×96” href=“/favicon-96×96.png”>
    <link rel=“icon” type=“image/png” sizes=“16×16” href=“/favicon-16×16.png”>
    <link rel=”icon” type=”image/png” sizes=”32×32″ href=”/favicon-32×32.png”>
    <link rel=”icon” type=”image/png” sizes=”96×96″ href=”/favicon-96×96.png”>
    <link rel=”icon” type=”image/png” sizes=”16×16″ href=”/favicon-16×16.png”>
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

    如果你使用的主题支持直接上传favicon(闪电博的主题是支持该功能的),则直接在WordPress仪表盘后台上传即可,无需手动添加代码。

    在线快速生成网址图标favicon插图4

    闪电博主题支持favicon上传功能

     

  • 如何手动或者使用插件为WordPress添加nofollow链接

    了解如何使用/不使用插件在WordPress中添加nofollow链接。 以下方法将帮助您在WordPress文章,页面,边栏小部件,自定义文章类型等中设置nofollow链接。

    在SEO的角度,我们不宜在网站中设置过多的外链,防止搜索引擎蜘蛛在爬虫你的网站时跳出到其他网站。因此,了解并为外链加上nofollow链接是非常有必要的(除非这些外链与你的网站有利益关系,比如是你的其他网站又或者是合作伙伴的网站)。

    在本文中,我们将会讨论以下问题:

    • 什么是nofollow链接?
    • 为什么以及何时应该建立链接nofollow?
    • 所有外部链接是否应该是nofollow?
    • 如何在WordPress中正确添加nofollow链接?
    • 如何在浏览器中检查nofollow链接

    以下是全文快速导航,你可以通过点击导航目录快速跳到你希望阅读的内容章节:

    什么是nofollow链接

    Nofollow链接是带有rel =“nofollow” HTML标记的链接。 nofollow标签可帮助搜索引擎了解要忽略目标链接,并且不会将网页(放置nofollow链接)的PageRank传递给此类链接。

    为什么以及什么时候使nofollow链接

    在某些情况下,您可能希望使用nofollow链接而不是dofollow链接。

    以下链接类型应该设置为nofollow链接:

    • 返利链接
    • 赞助商链接
    • 广告链接
    • 社交媒体链接
    • 不可信/不可靠网站内容链接

    在这些情况下,您没理由将你的网站珍贵的PageRank传递给此类链接。

    返利/赞助/广告链接

    联盟/赞助/广告链接目的在于你的网站从中获利,对方也能够通过你的流量获得用户转化。 但这并不一定意味着您需要将SEO权重传递给此类网站页面。

    社交媒体链接

    如今,社交媒体已成为网站和博客不可或缺的一部分。 社交共享链接,社交媒体配置文件链接在网站上非常常见。

    但是,这些社交媒体链接应该是nofollow还是dofollow?

    没有必要将社交媒体分享链接dofollow。 由于这些分享链接很多时候使用的是一个中转的链接。 因此,这样的链接dofollow岂不是浪费表情?

    此外,如果您想将PageRank传递到您的社交媒体主页,那么可以设置为dofollow(个人认为完全没必要),否则照例设置为nofollow属性。

    不可靠/不可信的内容

    有时您在网站上使用他人的内容,但您不完全信任他们的链接,直接上nofollow。

    就像我们在博客评论留言用户网址:用户可以点击访问这些URL,但是必须设置为nofollow,你不可能一一去审查每个读者的提交的链接是可信的及相关的。

    如何在WordPress中建立Nofollow链接

    我们可以通过两种方法在WordPress中使用nofollow链接:

    1. 手动添加rel =“nofollow”标记到HTML链接
      • 使用经典编辑器
      • 使用古腾堡/区块编辑器(我是100%禁用了WordPress这个蹩脚功能)
    2. 通过WP插件的方式添加rel =“nofollow”标记到HTML链接

    #1 在没有插件的情况下在WordPress中添加nofollow链接(手动)

    添加rel =“nofollow”标记
    您可以通过向链接添加rel =“nofollow”标记来建立nofollow链接。

    例如,以下链接是dofollow链接。

    <a href=“https://wbolt.com/”>闪电博</a>
    <a href=”https://wbolt.com/”>闪电博</a>
    <a href="https://wbolt.com/">闪电博</a>

    而下面这个则是一个nofollow链接。

    <a href=“https://wbolt.com/” rel=“nofollow”>闪电博</a>
    <a href=”https://wbolt.com/” rel=”nofollow”>闪电博</a>
    <a href="https://wbolt.com/" rel="nofollow">闪电博</a>

    1.1 对于经典编辑器
    分步说明在WordPress中的经典编辑器建立nofollow链接:

    1. 在WordPress经典编辑器中切换到文本编辑。
    2. 滚动到要设置nofollow标记的链接。
    3. 添加 rel="nofollow" 到<a>标签内,如下所示。
    4. 如果要在新选项卡中打开nofollow链接,请在链接的开始锚标记中使用rel =“nofollow noopener noreferrer”属性。
    5. 点击“更新/发布”后,该链接即设置为nofollow。

    如何手动或者使用插件为WordPress添加nofollow链接插图

    将WordPress经典编辑器切换到文本编辑模式

    如何手动或者使用插件为WordPress添加nofollow链接插图1

    添加 rel=”nofollow” 到<a>标签内

    1.2 对于古腾堡/区块编辑器
    以下是在WordPress古腾堡/区块编辑器中建立nofollow链接的简单步骤:

    1. 定位到你需要设置nofollow链接的区块。
    2. 点击区块右上角的三个小点(更多菜单选项)> 作为HTML编辑.
    3. 然后将 rel="nofollow" 添加到<a>标签,如下所示。
    4. 如果要在新选项卡中打开nofollow链接,请在链接的开始锚标记中使用rel =“nofollow noopener noreferrer”属性。
    5. 点击“更新/发布”后,该链接即设置为nofollow。

    如何手动或者使用插件为WordPress添加nofollow链接插图2

    在古腾堡/区块编辑器编辑HTML代码

    如何手动或者使用插件为WordPress添加nofollow链接插图3

    将rel=”nofollow”添加到<a>标签

    #2 在WordPress中使用插件添加nofollow链接

    你可以通过使用WordPress插件添加nofollow链接(如果你觉得有必要)。

    通常,Nofollow Link插件会在WordPress原生的链接编辑器窗口中添加一个复选框。

    让我们看看,其中一个Nofollow链接WordPress插件。(该插件兼容WordPress经典编辑器以及古腾堡/区块编辑器。)
    如何使用WordPress插件在WordPress中添加nofollow链接

    1. 安装由WPKube开发的插件Title and Nofollow For Links
    2. 安装并启用插件后,将会在WordPress自带的链接编辑功能增加一个nofollow选项。
    3. 编辑链接勾选Add rel="nofollow" to link,即可为该链接添加nofollow。
    4. 当然,你也可以勾选在新窗口打开链接选项及添加链接锚文本。

    title-and-nofollow-for-links-plugin-wpkube

    安装并启用插件Title and Nofollow For Links

    如何手动或者使用插件为WordPress添加nofollow链接插图5

    点击目标链接然后点击“编辑”

    如何手动或者使用插件为WordPress添加nofollow链接插图6

    点击WordPress ‘链接选项’

    如何手动或者使用插件为WordPress添加nofollow链接插图7

    勾选中Add rel=“nofollow” to link

    如何在浏览器中检查nofollow链接

    现在您已经学会了如何在WordPress中创建nofollow链接。那我们应该如何检查nofollow链接是否生效呢?

    有两种简单的方法可以检查网页上的nofollow链接:

    #1 使用浏览器的“检查”功能查看nofollow链接

    • 使用任何主流的浏览器(Chrome, Firefox or Opera)打开页面,移动鼠标光标至你想要检查的链接上方。
    • 右击鼠标按钮,选择Inspect(检查)”选项 (以Chrome为例,不同浏览器选项叫法不太一样)
    • 代码查看窗口将在浏览器的底部/右侧打开。
    • 你可以通过查看HTML代码查看链接是否添加了rel="nofollow"

    checking-nofollow-link-in-chrome-inspect-element-feature-680x281

    使用Chrome浏览器的代码检查功能查看nofollow链接

    nofollow-link-in-chrome-inspect-element-680x345

    Chrome代码查看窗口中的Nofollow链接演示

    #2 使用Chrome扩展组件(插件)检查页面nofollow链接

    • 下载名为NoFollow的Chrome扩展组件 [你需要一把梯子].
    • 安装该插件后重新加载页面
    • 该网页上的所有nofollow链接都将会高亮突出显示。

    checking-nofollow-links-using-chrome-extension-680x300

    使用Chrome扩展程序检查网页中的Nofollow链接

    小结

    希望这次分享的WordPress中添加nofollow链接的方法(手动和插件方法)能够对大家有所帮助,手动的办法相对来说会比较麻烦,但胜在无需安装任何插件;插件法相对来说更加简单快捷,类似这样的功能插件一般不会对WordPress性能造成太大的影响(当然仅此功能就一个插件显得有点粗暴)。我们将会考虑在我们开发的WordPress博客SEO优化插件 Smart SEO Tool 添加类似的功能,敬请期待。

  • 闪电博主题SMTP邮局设置教程

    在开发WP主题的这段时间,我们突然发现WordPress经常发不出如找回密码、修改密码等通知邮件。经过核查发现,原来国内大部分服务器提供商把服务器发信端口禁用了,而且无法启用这些端口。我们猜想,他们这样做的主要原因是,一刀切,防止部分服务器用户搭建垃圾邮件发送程序。

    为了解决这个问题,我们不得不在付费主题新增SMTP邮局设置的功能。虽然SMTP设置对于大部分人来说,很简单。但为了主题用户更好的上手这部分的功能,今天写一个建议的教程。

    如何启用QQ邮箱的SMTP服务

    以下是QQ邮箱的SMTP服务启用步骤,如果你需要使用到163邮箱的SMTP服务,请移步下方查看教程。

    Step 1 -进入你的QQ邮箱,点击“设置”-“账户”,拉到页面下面的“POP3/IMAP/SMTP…服务”,点击开启“POP3/SMTP服务”,根据提示进行验证密保即可;

    闪电博主题SMTP邮局设置教程插图

    Step 2 -验证成功后,QQ邮箱就会给到一个授权码,这个授权码十分重要,十分重要,十分重要,复制粘贴到记事本,后面会用到。

    闪电博主题SMTP邮局设置教程插图1

    如何启用163邮箱的SMTP功能

    Step 1 -进入你的163邮箱后台,点击上方“设置”,选择“POP3/SMTP/IMAP”;

    闪电博主题SMTP邮局设置教程插图2

    Step 2 -选择开启服务“POP3/SMTP服务”,根据提示进行账号安全验证即可;

    闪电博主题SMTP邮局设置教程插图3

    Step 3 -验证通过后,会给到你一个授权密码,这个授权密码十分重要,十分重要,十分重要,复制粘贴到记事本,后面会用到。

    闪电博主题SMTP邮局设置教程插图4

    主题SMTP邮局设置说明

    进入我们提供的WordPress付费主题设置,选择“邮局设置”,进行以下参数配置:

    • 发件邮箱-根据自己的需要选择,使用QQ邮箱的SMTP就填写QQ邮箱,使用163则填写163邮箱(如果你网站注册用户大部分使用QQ邮箱,个人建议使用QQ邮箱作为发件邮箱);
    • 发件人名称-这个你随意,一般写网站名称即可;
    • 邮件类型-默认全部启用,可以根据自己的需要来启用或者关闭;
    • 邮件程序-建议选择QQ邮箱或者163邮箱;
    • SMTP配置-这里仅对163邮箱和QQ邮箱的SMTP服务配置进行说明。

      SMTP服务器:smtp.qq.com(QQ邮箱),smtp.163.com(163邮箱)
      加密方式:SSL(推荐)
      端口:默认配置即可
      SMTP用户名:即你邮箱地址或者你的邮箱用户名;
      SMTP密码/授权码:前面启用邮箱SMTP服务时获取。

    闪电博主题SMTP邮局设置教程插图5