WordPress开发最佳实践和技巧

Share

这个资源包含了由Toptal网络成员提供的关于WordPress开发的最佳实践和技巧的集合.

WordPress是一个内容管理系统,为互联网上34%的网站和60%运行CMS的网站提供支持. WordPress的强大之处在于它的生态系统——有很多不同的插件和主题. 任何没有任何特殊编程知识的人都可以建立一个网站, 但是对WordPress复杂的工作知识对任何开发人员或设计师的简历都是一个福音.

wordpress的受欢迎程度——尤其是在非程序员中——也使它成为一个目标, 因此,安全措施至关重要. 例如,入侵者经常创建具有视觉吸引力的主题并免费分发. 然后,这些主题包含恶意脚本,可以窃取网站流量甚至用户的个人或支付数据.

这个资源包含了我们的Toptal网络成员提供的WordPress开发最佳实践和WordPress开发技巧的集合. 它现在还包括帮助WordPress网站管理员避免在WordPress主题旁边安装恶意脚本的步骤.

这是一个社区驱动的项目, 所以我们也鼓励你们做出贡献, 我们期待着你们的反馈.

Check out the Toptal resource pages for additional information on WordPress development; there is a WordPress developer hiring guide and WordPress developer interview questions. 你可能也会感兴趣 如何接近现代WordPress开发 为了跟上最新的技术.

禁止在Iframe中显示

An iframe (内联框架的简称)是一个HTML元素,它允许外部网页嵌入到HTML文档中.

TechTerms

The Problem

入侵者可能会在他们的域名下显示您的网站 iframe. In this case, 它们具有JavaScript的所有功能来覆盖您网站的链接或其他HTML部分.

The Solution

Add the header X-Frame-Options: sameorigin in Apache’s httpd.conf (或同等),或通过PHP:


和/或用JavaScript检查有没有使用框架, 并重定向到原来的网站,如果有:


Contributors

Elvira Sheina

自由撰稿人

Uzbekistan

Elvira是一名高级软件工程师,在全栈web开发和自动化方面拥有近15年的经验. 她的主要工作重点是通过利用新技术和成熟的解决方案来帮助企业发展. 她是一个敬业、高效的人,具有很强的解决问题和分析能力.

Show More

从Toptal获取最新的开发人员更新.

订阅意味着同意我们的 privacy policy

控制允许包含在页面中的外部源列表

Content-Security-Policy 是自2015年以来被web浏览器广泛采用的安全标准吗. 它允许设置一个HTTP头,该头将允许加载脚本的资源列入白名单.

The Problem

入侵者可能通过SQL注入(或其他漏洞)向页面添加一些带有恶意代码的脚本(或外部脚本文件).

The Solution

通过添加正确的HTTP标头, 您可以确保只有来自白名单的脚本才会被加载并在页面上运行. 要在WordPress中添加标题,开发人员可以使用 send_headers 方法将下面的代码添加到 function.php of a given theme:

add_action( 'send_headers', 'add_csp_headers' ); function add_csp_headers() { 
  header("Content-Security-Policy: default-src 'self' "); 
}

There are other headers也可以用来配置CSP.

为WordPress配置CSP是相当具有挑战性的,因为插件需要内联JS, third-party libraries, etc. 甚至WordPress核心代码也有一些内联JS代码. 在写这篇文章的时候,关于 使WordPress对csp友好 isn’t finished yet.

In my opinion, 每个网站所有者都应该在安全性和维护难度之间找到适合自己情况的平衡. 如果发生XSS攻击会有多危险? 对于个人博客和基于WordPress的复杂服务来说,答案是不同的.

使您的网站对csp友好, 将尽可能多的内联JS和CSS的使用移到外部文件中, and add a nonce part to

如果更改了某些内容,则校验和也将不同,并且浏览器不会加载脚本.

To generate an integrity token, you can use the SRI Hash Generator 或者命令行工具 openssl or shasum.

Contributors

Elvira Sheina

自由撰稿人

Uzbekistan

Elvira是一名高级软件工程师,在全栈web开发和自动化方面拥有近15年的经验. 她的主要工作重点是通过利用新技术和成熟的解决方案来帮助企业发展. 她是一个敬业、高效的人,具有很强的解决问题和分析能力.

Show More

更改项目的默认路径

如果用户可以很容易地理解您正在使用的CMS或框架,这一点尤其重要.

The Problem

如果您的网站托管在不正确的沙箱共享主机上,并且同一主机上的任何其他网站都有漏洞, 你的网站也处于危险之中. 一旦入侵者访问了服务器, 他们可能会上传一个脚本来改变你网站的源代码. 这类脚本通常使用模板文件夹的默认路径,并向模板中添加恶意代码.

The Solution

更改默认路径很容易做到,并保护您的网站免受上面提到的恶意脚本. 在WordPress中,这是通过在 wp-config.php file.

例如,让我们重命名 wp-content folder to content:

定义('WP_CONTENT_DIR', dirname(__FILE__)) . '/content' );

定义('WP_CONTENT_URL', 'http://' . url ' . $_SERVER['HTTP_HOST'] . '/content' );

Contributors

Elvira Sheina

自由撰稿人

Uzbekistan

Elvira是一名高级软件工程师,在全栈web开发和自动化方面拥有近15年的经验. 她的主要工作重点是通过利用新技术和成熟的解决方案来帮助企业发展. 她是一个敬业、高效的人,具有很强的解决问题和分析能力.

Show More

建议由Mausin Shaikh提出

作者名称:Mausin Shaikh 作者邮箱:ncodetechnologies@outlook.com

谁想开始在WordPress开发网站必须阅读博客. 对于wordpress web开发,我们提供了许多不同的高级插件. 你可以通过这个链接:- http://shop.ncodetechnologies.com/product-category/plugins/wordpress/

使用函数加载脚本和CSS

WordPress已经跟踪了它加载的所有脚本和CSS, 所以不要把JS和CSS添加到页眉或页脚, 让WordPress用它来处理 enqueue functionality. 这样,WordPress就可以控制依赖关系,避免潜在的冲突. 您可以向主题添加队列方法 function.php file: wp_enqueue_script() or wp_enqueue_style(), respectively. 下面是一个带有解释性注释的例子:

add_theme_scripts() {
//示例脚本来自CDN, true表示我们的脚本将在页脚.
Wp_enqueue_script ('particles', '//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.Js ', array(), null, true);
});

//都是指何时加载你的样式,如:'screen', 'print'或'handheld '.
Wp_enqueue_style ('slider', get_template_directory_uri()) . '/css/slider.css的,假的,零,“所有”); 

//这将实际执行上面的函数
Add_action ('wp_enqueue_scripts', 'add_theme_scripts'); 

WordPress.org’s Theme Handbook 进一步解释enqueue方法的许多参数, 但这是两个enqueue方法的方法签名:

Wp_enqueue_style ($handle, $src, $deps, $ver, $media);
Wp_enqueue_script ($handle, $src, $deps, $ver, $in_footer);

正如您所看到的,这两个方法之间的唯一区别是final参数. For wp_enqueue_style(),最后一个参数设置为其定义样式表的媒体. Such as screen (computer), print (print preview mode), handheld, and so on. The last parameter for wp_enqueue_script() 指定是否应该在页脚中加载脚本.

下面是我们示例中其他参数的细分:

  • $handle 是样式表的名称,可以是您喜欢的任何名称.
  • $src 是样式表所在的位置(CDN、local等). 这是唯一必需的参数.
  • $deps stands for dependencies. 当传递一个样式表句柄时,它将在执行源脚本之前加载它. When $deps is passed in wp_enqueue_script(), it’s an array.
  • $ver sets the version number.
  • $media is the wp_enqueue_style() only parameter. 它指定样式表是为哪种类型的显示媒体设计的, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’
  • $in_footer is the wp_enqueue_script()’s only parameter, 一个布尔值,允许您将脚本放在HTML的页脚而不是页头, 这意味着它不会延迟DOM树的加载.

Contributors

Alex Gurevich

自由撰稿人

United States

Alex has built, managed, 并领导了一家提供品牌推广的设计机构, marketing, 以及网络开发服务. 在不到三年的时间里,他将公司从一家小型初创公司发展成为该市最好的设计公司之一. During that time, he has provided branding, app design, 为包括福克斯体育在内的各行业客户提供UX/UI解决方案, Credit Karma, Goodwill, the USDA, and the US Air Force.

Show More

三个开发者工具让生活更轻松

WordPress有许多插件和附加组件,使您的开发人员的生活轻松得多. 我特别建议:

WP-Cli

WP-Cli 让你使用命令行操作WordPress. 有了这个伟大的工具,你可以在几秒钟内升级和降级WordPress,以及更新插件. Notably, 当您发现要迁移到不同的服务器时, 内置的搜索-替换命令将为您处理所有url更改, 正因为如此,安装它是值得的.

高级数据库清理器

The 高级数据库清理器 插件清理垃圾评论,内置的修订,和瞬态. 您甚至可以设置自动运行的任务.

Query Monitor

当事情进展缓慢,你不知道该责怪什么时, Query Monitor 让您看到哪些查询执行时间过长, 并向您展示PHP警告和错误.

Contributors

Alex Gurevich

自由撰稿人

United States

Alex has built, managed, 并领导了一家提供品牌推广的设计机构, marketing, 以及网络开发服务. 在不到三年的时间里,他将公司从一家小型初创公司发展成为该市最好的设计公司之一. During that time, he has provided branding, app design, 为包括福克斯体育在内的各行业客户提供UX/UI解决方案, Credit Karma, Goodwill, the USDA, and the US Air Force.

Show More

注意安全

WordPress的受欢迎程度使其成为黑客的高优先级目标. 如果你不经常更新,你的网站很可能会被黑客入侵.

自动更新对于有很多自定义和插件的用户来说有点太危险了, 这就是为什么我强烈建议安装某种安全插件.

I personally recommend iTheme Security,它实现了密码锁定和文件监控等安全选项. And Wordfence Security,为您的网站安装WordPress专用防火墙.

Contributors

Alex Gurevich

自由撰稿人

United States

Alex has built, managed, 并领导了一家提供品牌推广的设计机构, marketing, 以及网络开发服务. 在不到三年的时间里,他将公司从一家小型初创公司发展成为该市最好的设计公司之一. During that time, he has provided branding, app design, 为包括福克斯体育在内的各行业客户提供UX/UI解决方案, Credit Karma, Goodwill, the USDA, and the US Air Force.

Show More

建议由Rajeev Jaiswal提出

作者:Rajeev Jaiswal 作者邮箱:rajeevjaiswaldpn@gmail.com

你好先生,我正在尝试在2017 WordPress主题中集成js和css代码元素. 我使用队列方法,但它不工作,所以建议我所有的. 电子邮件——rajeevjaiswaldpn@gmail.com

使用子主题和插件

很多刚接触WordPress的人直接开始修改他们的核心主题文件. 这绝对是一个错误. 所有的更改将在升级后立即消失, 而且由于插件和主题的更新频率与手机上的应用程序一样频繁, 这种情况很常见.

为了避免这种情况,创建插件和主题的子组件. 您不仅可以保留更改,还可以在自己的时间进行升级. 创建子主题的步骤与创建子插件的步骤相同, 但是让我们以创建子主题为例.

开始制作你的孩子主题, 在主题文件夹中创建一个具有唯一名称的新文件夹, then create a style.css file in your new folder.

在WordPress中,所有主题参数都存储在 style.css 文件作为第一个注释块. Open the style.css 从您原来的主题,父,来看看这个例子.

对于子主题,继续从原始主题复制注释块 style.css 到新文件并重命名它. Adding the template 参数将把您的新主题链接到原始主题. Template参数应该指向原始主题的文件夹名称,如下所示:

/*
主题名称:Twenty Fourteen Child Theme
描述:我的新儿童主题基于Twenty Fourteen
模板:twentyfourteen
Version: 1.0
*/

Now, 如果要修改原主题的文件, 从原始主题文件夹中复制它们并将它们粘贴到子主题文件夹中. WordPress将使用原始模板文件,除非它在你的子主题中看到相同的文件. 所以如果你想改变 header.php, 将其从原始主题复制到新的子主题文件夹中, 然后在副本上做修改. 用于添加新的或修改的代码, 同样地,您可以在子主题中创建一个新的函数文件,并在那里进行更改.

同样的文件复制策略也适用于许多插件:在子主题中创建一个与插件同名的文件夹, 然后坚持原来插件文件夹的文件结构, 从原始插件复制文件到新文件夹并修改它们. 大多数主要插件都支持此功能,但如果您不确定,最好咨询作者.

Contributors

Alex Gurevich

自由撰稿人

United States

Alex has built, managed, 并领导了一家提供品牌推广的设计机构, marketing, 以及网络开发服务. 在不到三年的时间里,他将公司从一家小型初创公司发展成为该市最好的设计公司之一. During that time, he has provided branding, app design, 为包括福克斯体育在内的各行业客户提供UX/UI解决方案, Credit Karma, Goodwill, the USDA, and the US Air Force.

Show More

不要过度使用插件

是的,WordPress有很多插件,但这并不意味着你应该安装它们. 你拥有的插件越多, 网站越大,加载速度就越慢, 所以,除非绝对必要,否则不要使用插件. 如果你只需要加一个 few 自定义字段到你的帖子(一个功能已经包含在WordPress中)不需要通过安装高级自定义字段插件来过度设计解决方案, ACF.

如果你必须使用很多插件,确保你有 Plugin Organizer installed to manage them. 这个很棒的插件可以让你指定哪些插件在哪个页面上被激活(你甚至可以使用正则表达式), 这种选择性加载将大大加快您的网站.

你也可以使用工具,比如 P3(插件性能分析器) 看看哪些插件占用了你宝贵的资源.

Contributors

Alex Gurevich

自由撰稿人

United States

Alex has built, managed, 并领导了一家提供品牌推广的设计机构, marketing, 以及网络开发服务. 在不到三年的时间里,他将公司从一家小型初创公司发展成为该市最好的设计公司之一. During that time, he has provided branding, app design, 为包括福克斯体育在内的各行业客户提供UX/UI解决方案, Credit Karma, Goodwill, the USDA, and the US Air Force.

Show More

使用缓存加快速度

WordPress优化的托管服务,如 Siteground, or the more expensive Wpengine,自动支持WordPress缓存. 如果你的主机有WordPress专用缓存,这是最好的选择.

对于运行在具有root访问权限的VPS服务器上的用户, Google PageSpeed是Google的一个关键缓存和优化解决方案,适用于Apache和nginx. 如果你对此感兴趣,可以看看这个指南 安装PageSpeed在Plesk与CentOS.

如果这些听起来工作量太大的话, then go with Cloudflare, 一个免费的CDN/防火墙/缓存和最小化系统.

说到最小化,就是在开发过程中自己最小化文件. 第三方工具往往会破坏一些东西,尤其是在升级过程中. 自己动手可以让你更好地控制和意识到事情何时何地会出错.

Contributors

Alex Gurevich

自由撰稿人

United States

Alex has built, managed, 并领导了一家提供品牌推广的设计机构, marketing, 以及网络开发服务. 在不到三年的时间里,他将公司从一家小型初创公司发展成为该市最好的设计公司之一. During that time, he has provided branding, app design, 为包括福克斯体育在内的各行业客户提供UX/UI解决方案, Credit Karma, Goodwill, the USDA, and the US Air Force.

Show More

Spring Clean Your WordPress Functions

Although great, WordPress开箱即用了很多设置中无法关闭的功能. 这里有一些步骤可以让你安装新的WordPress,使它更安全,性能更好:

移除WordPress版本

去掉WordPress版本号,让你的网站更难被黑客识别. 为此,将以下代码添加到函数中.php file:

Add_filter ('the_generator', '__return_null');

Remove Script Versions

去掉脚本后面的版本号. 默认情况下,WordPress会为所有脚本添加版本. 这可能会导致缓存/最小化插件的问题, 以及帮助黑客更好地识别您的网站. 要防止此功能,请在主题函数文件中添加以下代码:

函数remove_cssjs_ver($src) {
		if( strpos( $src, '?ver=' ) )
			$src = remove_query_arg('ver', $src);
		return $src;
	}
Add_filter ('style_loader_src', 'remove_cssjs_ver', 1000);
Add_filter ('script_loader_src', 'remove_cssjs_ver', 1000);

Restrict WooCommerce

你是否安装了WooCommerce,现在网站运行缓慢? 将此函数添加到 functions.php 将阻止WooCommerce在非WooCommerce页面上加载其脚本:

/**
 *调整WooCommerce的样式和脚本.
 *原作者Greg来自:http://gist.github.com/gregrickaby/2846416
 */
函数grd_woocommerce_script_cleaner() {
	
	//删除生成器标签,以减少基于WooCommerce的黑客攻击
	remove_action('wp_head', array($GLOBALS['woocommerce'], 'generator'));
	//除非我们在商店中,否则删除所有脚本和垃圾!
	if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
		Wp_dequeue_style ('woocommerce_frontend_styles');
		wp_dequeue_style(“woocommerce-general”);
		Wp_dequeue_style ('woocommerce-layout');
		Wp_dequeue_style ('woocommerce-smallscreen');
		Wp_dequeue_style ('woocommerce_fancybox_styles');
		Wp_dequeue_style ('woocommerce_chosen_styles');
		wp_dequeue_style(' woocommerce_pretypto_css ');
		Wp_dequeue_style ('select ');
		Wp_dequeue_script ('wc-add-payment-method');
		Wp_dequeue_script ('wc-lost-password');
		Wp_dequeue_script ('wc_price_slider');
		Wp_dequeue_script ('wc-single-product');
		Wp_dequeue_script ('wc-add-to-cart');
		Wp_dequeue_script ('wc-cart-fragments');
		Wp_dequeue_script ('wc-credit-card-form');
		Wp_dequeue_script ('wc-checkout');
		Wp_dequeue_script ('wc-add-to-cart-variation');
		Wp_dequeue_script ('wc-single-product');
		Wp_dequeue_script ('wc-cart'); 
		Wp_dequeue_script ('wc-chosen');
		Wp_dequeue_script ('woocommerce');
		wp_dequeue_script(' pretyphoto ');
		wp_dequeue_script(' pretypto -init');
		Wp_dequeue_script ('jquery-blockui');
		Wp_dequeue_script ('jquery-占位符');
		Wp_dequeue_script ('jquery-payment');
		Wp_dequeue_script ('jqueryui');
		Wp_dequeue_script ('fancybox');
		Wp_dequeue_script ('wcqi-js');

	}
}
Add_action ('wp_enqueue_scripts', 'grd_woocommerce_script_cleaner', 99);

在小部件区域中启用短代码

试图在小部件区域使用短代码,却一无所获? Drop this in into functions.php 在小部件区域使用短代码:

add_filter(“widget_text”、“do_shortcode”);

Contributors

Alex Gurevich

自由撰稿人

United States

Alex has built, managed, 并领导了一家提供品牌推广的设计机构, marketing, 以及网络开发服务. 在不到三年的时间里,他将公司从一家小型初创公司发展成为该市最好的设计公司之一. During that time, he has provided branding, app design, 为包括福克斯体育在内的各行业客户提供UX/UI解决方案, Credit Karma, Goodwill, the USDA, and the US Air Force.

Show More

Submit a tip

提交的问题和答案将被审查和编辑, 并可能会或可能不会选择张贴, 由Toptal全权决定, LLC.

*所有字段均为必填项

Toptal Connects the Top 3% 世界各地的自由职业人才.

加入Toptal社区.