分类: 学习

  • 如何解决XAMPP中的403错误

    如何解决XAMPP中的403错误

    如果您使用XAMPP本地开发环境来运行WordPress网站,您可能会不时遇到问题。尝试访问数据库时可能遇到的最常见问题之一是“错误403”,也称为“XAMPP访问禁止错误”。

    简而言之,XAMPP产生403错误意味着您没有必要的权限来访问或编辑数据库。在本文中,我们将讨论XAMPP是什么,为什么会出现此错误,以及如何在Windows和macOS设备上修复它。

    1. XAMPP简介
    2. XAMPP环境403错误概述
    3. 如何解决XAMPP产生的403错误(在Windows和macOS中)

    XAMPP简介

    XAMPP是一个本地开发环境。通过安装XAMPP,您还可以设置托管和运行本地WordPress网站所需的所有软件。

    XAMPP主页

    XAMPP主页

    您可能知道,WordPress有几个系统要求,而XAMPP满足所有这些要求。您可以使用XAMPP在您的计算机上安装的软件堆栈包括:

    • Apache这是一种服务器软件,可让您在计算机上托管和服务网站。
    • MariaDB 这是一个数据库软件,它为WordPress提供了一个保存信息的地方,因此可以根据需要再次访问它。
    • PHP  WordPress建立在PHP编程语言之上,因此必须在您的服务器上设置软件。
    • Perl虽然WordPress不使用Perl编程语言,但它是XAMPP为您配置的软件堆栈的一部分。

    您可能在浏览网页时遇到过403错误。错误代码表示您没有访问特定文件或页面的必要权限:

    来自Google Chrome的常规错误403消息

    来自Google Chrome的常规错误403消息

    但是,在使用XAMPP运行本地WordPress网站的上下文中,403错误具有不同的含义。如果您看到一条消息“Access forbidden!“,它通常与XAMPP数据库有关。

    XAMPP环境403错误概述

    通常,当您尝试通过浏览器访问本地数据库时,XAMPP会出现错误403。在正常情况下,您可以使用任何Web浏览器访问http://localhost/phpmyadmin地址:

    phpMyAdmin控制面板

    phpMyAdmin控制面板

    如果您没有访问数据库的必要权限,您将遇到错误403,内容如下:

    “新的XAMPP安全概念:只能从本地网络访问请求的目录。可以在文件httpd-xampp.conf中配置此设置。”

    就错误消息而言,这条信息相当丰富,因为它准确地告诉您解决问题需要做什么。但是,在我们开始故障排除之前,请务必注意,当XAMPP中存在冲突的端口配置时,通常会发生错误403。

    通常,绕过该问题的最简单方法是按照错误消息中的说明进行操作。在这种情况下,就是修改httpd-xampp.conf文件。

    如何解决XAMPP环境403错误 (在Windows和macOS中)

    XAMPP适用于Windows、macOS和Linux。在下面的部分中,我们将向您展示如何解决Windows和macOS中的XAMPP开发环境的错误 403。如果您使用的是Linux发行版,则可以按照macOS说明进行操作。

    如何对Windows中的XAMPP环境403错误进行故障排除

    要开始使用,请继续启动XAMPP,然后启动您网站使用的所有服务。如果您正在运行WordPress网站,那将是Apache和MySQL。

    XAMPP控制面板

    XAMPP控制面板

    两个服务都运行后,您可以单击Apache行中的Config按钮,然后选择Apache (httpd-xampp.conf)选项:

    打开httpd-xampp.conf文件

    打开httpd-xampp.conf文件

    现在httpd-xampp.conf文件将通过您的默认文本编辑器打开。打开文件后,使用搜索功能查找“phpMyAdmin”  您应该会看到如下所示的片段:

    httpd-xampp.conf文件

    httpd-xampp.conf文件

    找到它后,您可以继续删除“Require local”的文本,并将其替换为“Require all granted”:

     

    修改httpd-xampp.conf

    修改httpd-xampp.conf使其不会阻止对数据库的访问

    保存对httpd-xampp.conf的更改并关闭文件。然后您可以从XAMPP控制面板重新启动Apache和MySQL服务。一旦服务再次运行,您可以通过在浏览器中导航到localhost/phpmyadmin来尝试再次访问您的数据库。

    如何对macOS中的XAMPP环境403错误进行故障排除

    在macOS上修复XAMPP环境的403错误涉及与Windows设备几乎相同的步骤。但是,访问httpd-xampp.conf文件并不完全相同,因为XAMPP控制面板看起来有点不同:

    XAMPP的macOS控制面板

    XAMPP的macOS控制面板

    尽管风格不同,但访问您需要的文件仍然很简单。以下是要遵循的五个步骤:

    1. 转到XAMPP控制面板中的Volumes选项卡。
    2. 选择屏幕顶部的安装选项。
    3.  一旦变为可选状态,请单击Mount旁边的Explore按钮。
    4. 在弹出的资源管理器窗口中,导航到etc/extra 
    5. 打开http-xampp.conf文件。

    打开文件后,您可以在其中查找“phpmyadmin”。您看到的代码段应如下所示:

    Alias /phpmyadmin “C:/xampp/phpMyAdmin/”
    <Directory “C:/xampp/phpMyAdmin”>
    AllowOverride AuthConfig
    Require local
    ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
    </Directory>
    Alias /phpmyadmin “C:/xampp/phpMyAdmin/”
    <Directory “C:/xampp/phpMyAdmin”>
    AllowOverride AuthConfig
    Require local
    ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
    </Directory>
    Alias /phpmyadmin "C:/xampp/phpMyAdmin/"
    <Directory "C:/xampp/phpMyAdmin">
    AllowOverride AuthConfig
    Require local
    ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
    </Directory>

    接下来,您可以将“Require local”部分替换为“Require all granted”,并将更改保存到文件中。现在返回XAMPP控制面板,转到“Services”选项卡,然后单击Restart All。备份所有XAMPP服务后,您应该能够毫无问题地访问您的数据库。

    小结

    能够访问您网站的数据库至关重要,无论您使用的是实时服务器还是本地开发环境(例如XAMPP)。尽管XAMPP发生错误403可能很烦人,但无论您使用的是Windows、macOS还是Linux,都可以轻松解决。

    您所要做的就是编辑XAMPP的httpd-xampp.conf文件以确保每个人都可以访问phpMyAdmin。然后403错误应该立即消失。

  • Brotli压缩:GZIP压缩替代方案

    Brotli压缩:GZIP压缩替代方案

    速度对于任何网站都很重要。在网络追求快速加载时间的过程中,我们有许多不同的技术可以帮助我们。一种方法是在不影响其功能的情况下最小化您的站点将使用的底层代码。GZIP压缩是执行此操作的一种方法,但Brotli压缩是另一种引起注意的新兴方法。

    这是一个由Google开发的解决方案,看起来比GZIP压缩(以及替代)提供了许多好处。本文中的详细信息将准确介绍该技术所提供的功能,但Brotli压缩快速且高效——它满足了您研究它所需的所有条件。

    在本教程中,我们将研究Brotli压缩并向您展示如何检查您的站点是否使用它,以及如何在需要时启用它。首先,我们将把Brotli放在压缩算法空间中,并讨论为什么要使用它而不是其他解决方案。

    1. 网络数据压缩
    2. Brotli压缩
    3. Brotli压缩与GZIP压缩
    4. 如何检查您的网站是否使用Brotli压缩
    5. 如何为您的站点启用Brotli压缩

    网络数据压缩

    在最基本的形式中,数据压缩采用网站或应用程序的代码,并最小化文件大小。这使您可以在网络上移动更轻的文件,并减少加载和呈现网站所需的时间。您会发现有很多方法可以根据您使用的文件类型来压缩数据。

    一种常见的方法是“缩小”。这是一种算法去除您网站代码中一些多余元素的地方。这个想法是缩进、注释、空格等方面会增加文件大小,从而增加加载时间。

    在大多数情况下,删除这些元素不会影响用户体验 (UX)。但是,对于必须编译和渲染代码的计算机来说,它确实使事情变得更加简单。例如,以这组代码为例:

    define( ‘WP_INSTALLING’, true );
    /** Sets up the WordPress Environment. */
    require __DIR__ . ‘/wp-load.php’;
    require __DIR__ . ‘/wp-blog-header.php’;
    if ( ! is_multisite() ) {
    wp_redirect( wp_registration_url() );
    die();
    }
    $valid_error_codes = array( ‘already_active’, ‘blog_taken’ );
    define( ‘WP_INSTALLING’, true );
    /** Sets up the WordPress Environment. */
    require __DIR__ . ‘/wp-load.php’;
    require __DIR__ . ‘/wp-blog-header.php’;
    if ( ! is_multisite() ) {
    wp_redirect( wp_registration_url() );
    die();
    }
    $valid_error_codes = array( ‘already_active’, ‘blog_taken’ );
    define( 'WP_INSTALLING', true );
    /** Sets up the WordPress Environment. */
    require __DIR__ . '/wp-load.php';
    require __DIR__ . '/wp-blog-header.php';
    if ( ! is_multisite() ) {
    wp_redirect( wp_registration_url() );
    die();
    }
    $valid_error_codes = array( 'already_active', 'blog_taken' );

    上面的代码使用空格和回车等元素使其易于阅读,但计算机不需要这些元素来理解核心代码。更重要的是,这些批次的空格和换行符将占用宝贵的空间,删除这些空间可以提高性能。

    如果你最小化这段代码,它看起来完全不同:

    define( ‘WP_INSTALLING’, true ); /** Sets up the WordPress Environment. *
    / require __DIR__ . ‘/wp-load.php’;
    require __DIR__ . ‘/wp-blog-header.php’;
    if ( ! is_multisite() ) {
    wp_redirect( wp_registration_url() );
    die();
    }
    $valid_error_codes = array( ‘already_active’, ‘blog_taken’ );
    define( ‘WP_INSTALLING’, true ); /** Sets up the WordPress Environment. *
    / require __DIR__ . ‘/wp-load.php’;
    require __DIR__ . ‘/wp-blog-header.php’;
    if ( ! is_multisite() ) {
    wp_redirect( wp_registration_url() );
    die();
    }
    $valid_error_codes = array( ‘already_active’, ‘blog_taken’ );
    define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. *
    / require __DIR__ . '/wp-load.php';
    require __DIR__ . '/wp-blog-header.php';
    if ( ! is_multisite() ) {
    wp_redirect( wp_registration_url() );
    die();
    }
    $valid_error_codes = array( 'already_active', 'blog_taken' );

    但是,此代码的基本功能仍然相同。

    您会发现其他文件类型也有压缩数据的方法。例如,图像通常需要大量压缩来减小尺寸,而不会降低图像本身的质量:

    优化图像的示例

    优化图像的示例

    GZIP压缩是最小化文件包大小的标准方法——想想ZIP或Linux包等.tar包。但到目前为止,还没有真正的替代品。稍后我们将更多地讨论为什么应该存在替代方案,但首先让我们向您介绍GZIP的“竞争对手”。

    Brotli压缩

    简而言之,Broti是一种数据压缩算法。但是,如果这就是我们不得不说的全部内容,那么就没有理由对其进行调查。

    它提供“无损”压缩,由Google在MIT许可下开发。该公司通常处于网络推进技术的最前沿,因此,Brotli希望采用GZIP的做法并对其进行改进,并为用户和网站提供增强的体验也就不足为奇了。

    Brotli压缩使用与GZIP压缩相同的核心基础技术,即:

    事实上,如果您将这两种技术结合起来,您将获得DEFLATE作为GZIP和Brotli压缩基础的格式。这是我们在关于GZIP压缩的帖子中深入探讨的内容。

    简而言之,未压缩文件通过LZ77和Huffman算法运行,作为将它们压缩为Brotli格式的DEFLATE过程的一部分。从那里,一个INFLATE进程将在必要时再次解压缩文件。

    尽管Brotli目前是GZIP的主要竞争者,但还有其他类似的技术也使用DEFLATE. 在下一节中,我们将讨论是什么让Brotli脱颖而出。

    Brotli压缩与GZIP压缩

    如前所述,Brotli和GZIP都使用DEFLATE方法来压缩(和解压缩)数据。这可能会使许多人感到困惑,因为仅此一项并不能保证转换。

    然而,谷歌正在DEFLATE的基础上提供增强的技术,并将数据压缩到更高、更快的标准。

    Brotli如何使用字典改进数据压缩

    数据压缩格式的一个技术方面是Brotli压缩使用数据字典中现有的已知语言和文本来使用其算法的方式。

    开发人员将使用键值对字典来存储数据,因为它高效、灵活且可扩展。下面是PHP字典(称为“数组”)的样子:

    $cats = get_categories(
    array(
    ‘taxonomy’ => ‘link_category’,
    ‘hierarchical’ => 0,
    ‘include’ => $link_cat,
    )
    );
    $cats = get_categories(
    array(
    ‘taxonomy’ => ‘link_category’,
    ‘hierarchical’ => 0,
    ‘include’ => $link_cat,
    )
    );
    $cats = get_categories(
    array(
    'taxonomy' => 'link_category',
    'hierarchical' => 0,
    'include' => $link_cat,
    )
    );

    虽然GZIP不使用字典,但Brotli使用两个.

    Brotli的静态词典

    第一个是作为HTML、CSS和JavaScript文本参考的常用代码术语的静态(即预定义)字典。

    有六种不同语言的13,000多个单词,Brotli将使用这些作为代码中点的引用。这不是一个精确的类比,但它类似于WordPress钩子引用更大的代码套件的方式。

    因此,编码器不必逐字节筛选代码。相反,它可以作用于引用,从字典中提取定义,然后继续下一个。

    您还会发现字典中有真实世界的短语以及不会经常看到压缩的代码。这有助于一些标签(例如<HTML>type="text/javascript"参数)进行一些压缩,并为您带来更大的收益。

    字典中也有一些“转换”:部分、不完整和其他类型的短语,带有新的前缀、后缀或大小写成为一个全新的词——例如,“Work”转换为“Working”或“html” 转换为“HTML”。

    Brotli的动态词典

    动态字典从源头解析内容和代码,这对较小的设备有好处,但对较大的文件不太好。它也称为“滑动窗口”,大小可达16MB。这是压缩算法“缓存”一些最新数据以引用它的地方。它是超动态的,因为它不断变化。

    如果将此与大约32KB的GZIP滑动窗口进行比较,您会发现实时解析和压缩的范围非常大。事实上,最典型的做法是使用大约4MB的Brotli滑动窗口,与竞争算法相比,这仍然是巨大的。

    Brotli压缩与GZIP压缩:性能和支持

    谈到纯用户数,GZIP压缩仍然是第一位的。然而,Brotli压缩每天都有更多的使用。这部分是由于主要浏览器采取了更广泛的采用措施;基于Chromium的浏览器的兴起也有帮助。

    Can I Use…网站记录了浏览器采用的技术,并提供了各种历史记录。该网站指出,超过95%的浏览器在当前写作时使用Brotli压缩,包括所有主要版本。

    Brotli兼容情况

    The Can I Use…查看Brotli兼容情况。

    在我们的GZIP压缩文章中,我们注意到一个基准测试,与竞争算法相比,Brotli具有更好的压缩比,但在压缩和解压缩时间方面落后:

    多种不同算法之间的压缩性能比较

    多种不同算法之间的压缩性能比较(来源:OpenCPU)。

    然而,Squash基准测试显示了一个不同的故事——一个更微妙的故事。真正的收获是,总体而言,Brotli比GZIP更灵活,压缩比普遍更高。

    以下是Squash Benchmarks调查结果的摘要:

    • Brotli在每个压缩级别都有更好的压缩比(即它产生更小的压缩文件)。
    • 虽然GZIP在大多数情况下确实在速度上击败了Brotli,但您压缩的级别会影响您将看到的结果。

    Paul Calvano的细分提供了更多细节,但关键是Brotli需要更多CPU能力来提供更大的文件压缩系数。这显示在最高和最低压缩级别。Cloudflare的基准测试支持这一点:文件更小,压缩速度数字更接近。

    此外,请考虑一些测试工具,如Pingdom和一些内容交付网络 (CDN)尚不支持Brotli。这可能会歪曲其他人收集的有关 Brotli 运作方式的数据。如果您确实运行测试,您可能会看到“假阴性”:更高的页面速度数字忽略了您使用的文件压缩。

    Brotli压缩的好处

    到目前为止,有很多关于Brotli压缩的信息。但是,我们可以总结一下您为什么应该选择Brotli而不是GZIP:

    1. 它采用与GZIP相同的技术,并使用现代方法对其进行增强。
    2. Brotli基于字典的解析意味着它可以将更多文件压缩到更深层次。
    3. 虽然与GZIP相比,Brotli需要更多的计算能力,但结果意味着文件更小。
    4. 在大多数Web主机使用的压缩级别——诸如四级或五级之类的中等压缩级别——Brotli的性能比GZIP更好,而且毫不费力。
    5. 你会发现 Brotli 在浏览器中几乎得到了普遍支持,如果不是你习惯的一些基准测试工具的话。
    6. Brotli是免费使用和开源的。如果您使用与Broti兼容的CDN,例如Cloudflare ,这是一个优势。

    值得注意的是,Cloudflare在其所有服务器上都使用Brotli压缩。事实上,它使用了经过修改和优化的Brotli版本,让您在速度和文件传递方面获得更多收益。

    如何检查您的网站是否使用Brotli压缩

    因为Brotli压缩还不是标准的(虽然它几乎就在那里),你可能想知道你的网站是否使用它。有几种方法可以解决这个问题。

    1.使用在线工具

    检查您的网站是否使用Brotli压缩的最简单方法是通过在线工具。虽然有一些可供选择,但您会想要一些快速且易于使用的东西,它还会为您提供大量有关您的设置的信息。

    Gift of Speed是我们检查Brotli压缩的选择。

    Gift of Speed网站

    Gift of Speed网站

    它将确定您的站点是使用GZIP、Brotli还是根本不使用压缩,并提供一些其他指标来帮助您决定下一步该做什么。这些指标提供了重要的洞察力,因为您不仅要考虑您网站的服务器是否使用了正确的压缩“风格”。

    构成网站的元素很多,甚至还有第三方库和依赖项。您可能会选择使用CDN为它们提供服务,如果是这样,这也需要使用Brotli压缩以获得最佳性能。

    如果您使用Gift Of Speed测试单个资产,您可以查看Server值以了解其服务方式。

    Cloudflare资产的Gift Of Speed结果页面

    Cloudflare资产的Gift Of Speed结果页面

    因此,每个站点还将在整个链和服务器架构中使用Brotli压缩。

    2.检查使用浏览器的开发工具

    大多数开发人员都知道,浏览器提供了一些出色的工具来帮助您进行各种与Web相关的调查和故障排除。您可以快速检查您的网站(或特定资产)是否使用Brotli压缩。

    对于Brave、Edge、Firefox或Chrome等所有主要浏览器,您可以前往Network > All屏幕。

    首先,您不会看到任何与内容标题相关的内容——您需要从左侧选择资产或请求。如果您继续查看并向下滚动列表,您将看到一个面板打开,该面板默认为Headers信息。

    在这里,向下滚动输出,直到看到content-encoding: br行:

    Brave的开发工具,显示该站点启用了Brotili压缩

    Brave的开发工具,显示该站点启用了Brotili压缩

    简而言之:如果您看到content-encoding: br,这表明Brotli在该站点上处于活动状态。

    如何为您的站点启用Brotli压缩

    在最后几节中,我们将向您展示为您的站点启用Brotli压缩的多种不同方法。

    1.使用WordPress插件

    几乎每个WordPress网站都会使用至少一个插件——通常更多取决于网站需要的功能。缓存是插件的一种用例,周围有很多。然而,并不是所有的都可以让你启用Brotli压缩,所以你需要明智地选择并准备好切换你喜欢的解决方案。

    在对站点进行任何更改之前,请记住进行完整备份,以防以后需要恢复。对于这种方法,我们将使用W3 Total Cache,因为它很容易找到正确的设置。

    您需要前往WordPress中的Performance>Browser Cache:

    W3 Total Cache“浏览器缓存:链接

    W3 Total Cache“浏览器缓存:链接

    此屏幕显示两个设置。您要选择的是Enable HTTP (brotli) Compression

    在W3 Total Cache中启用Brotli压缩

    在W3 Total Cache中启用Brotli压缩

    在这些情况下,您需要采用另一种方法。

    2. 在服务器上启用Brotli

    在选择服务器类型时,Nginx与Apache是一场长期的战斗,(目前)前者正在获胜。无论如何,这两种服务器类型都可以启用Brotli压缩,并且每种都有不同的方法。

    在研究手动方法之前,您应该了解一些先决条件:

    • 您需要了解如何访问特定服务器的配置文件。
    • 命令行知识将是有益的,尤其是在涉及Apache服务器时。要运行任何命令,您需要成为具有sudo特权的root用户。
    • 您可能需要一个文本编辑器,但对于这样的快速更改,您应该没问题。
    • 在某些情况下,您需要将您的登录凭据作为服务器本身的安全外壳 (SSH) 用户。您可以在主机控制面板中找到这些,或联系支持人员询问。

    如果您对手动方法有任何疑问,我们建议您考虑另一种选择,或联系您的房东寻求帮助。无论如何,我们将依次简要概述每个服务器的过程,从Nginx开始。

    Nginx

    要在Nginx服务器上启用Brotli压缩,您首先需要找到nginx.conf文件。它将是几个位置之一:

    • /usr/local/nginx/conf
    • /etc/nginx
    • /usr/local/etc/nginx

    打开文件后,在底部添加以下内容:

    brotli on;
    brotli_static on;
    brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance.
    brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;
    brotli on;
    brotli_static on;
    brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance.
    brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;
    brotli on;
    brotli_static on;
    brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance.
    brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;

    该套件将打开Brotli并使用它来提供静态文件。brotli_comp_level设置是您可以根据您的用例和需求更改的设置。较高的数字提供更好的压缩平衡与较低性能的站点。

    Apache

    由于Apache在配置方面非常灵活,因此您可以启用Brotli压缩而无需大惊小怪。

    为此,请按照下列步骤操作:

    1. sudo以root用户身份使用命令提示符或终端应用程序登录到您的服务器。
    2. 运行a2enmod brotli命令以打开压缩。
    3. 在Apache VirtualHost或您的服务器配置中,添加AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript行以设置您想要压缩的正确文件类型。

    虽然Apache不支持静态压缩,但您可以使用BrotliCompressionQuality LEVEL-NUMBER 行更改您提供的Brotli压缩级别。但是,您需要将“LEVEL-NUMBER”占位符替换为1-11之间的数字。

    3. 使用支持的Web主机

    为您的站点启用Brotli压缩的最直接方法是确保您的主机默认执行此操作。

    您需要检查您选择的主机是否提供Brotli压缩,以及您需要将其配置到什么级别。为了运行性能最高、最稳定、最安全的网站,良好的托管是必不可少的。

    小结

    数据压缩是开发和使用现代网络的必要组成部分。由于您将使用丰富而复杂的文件类型来拼凑一个网站,因此文件大小可能会飙升。所有这些都需要某种形式的压缩。

    到目前为止,典型的方法一直是GZIP,但现在有一个新的孩子。

    Brotli压缩基于与GZIP相同的技术基础,但包括一些性能增强优势。正如我们所讨论的,它使用上下文映射来更快地处理压缩请求,以及使用动态填充的字典。这比GZIP所能提供的要大得多,而且还让移动用户也可以从压缩中受益。

  • 学习如何驯服React的useCallback钩子

    学习如何驯服React的useCallback钩子

    React.js近年来广受欢迎,这已经不是什么秘密了。它现在是许多互联网上最杰出的参与者(包括Facebook和WhatsApp)的首选JavaScript库。

    它兴起的主要原因之一是在16.8版本中引入了钩子。React钩子允许您在不编写类组件的情况下利用React函数。现在,带有钩子的功能组件已成为开发人员使用React的首选结构。

    在这篇博文中,我们将深入研究一个特定的钩子useCallback——因为它涉及函数式编程的一个基本部分,即记忆化。您将确切地知道如何以及何时使用useCallback钩子并充分利用其性能增强功能。

    1. 什么是Memoization?
    2. 渲染和反应
    3. React useCallback的性能优势
    4. React useCallback的缺点
    5. React使用回调示例

    什么是Memoization?

    Memoization是当一个复杂的函数存储它的输出以便下次使用相同的输入调用它时。它类似于缓存,但在本地级别上。它可以跳过任何复杂的计算并更快地返回输出,因为它已经计算过了。

    这会对内存分配和性能产生重大影响,而这种压力正是useCallback钩子的目的所在。

    React的useCallback与useMemo

    在这一点上,值得一提的是,useCallback与另一个名为useMemo的钩子很好地配对。我们将讨论它们,但在这篇文章中,我们将把重点放在useCallback主要话题上。

    关键区别在于useMemo返回一个记忆值,而useCallback返回一个记忆函数。这意味着useMemo用于存储计算值,同时useCallback返回一个您可以稍后调用的函数。

    这些钩子会给你一个缓存的版本,除非它们的依赖项之一(例如状态或道具)发生变化。

    让我们看一下这两个函数的作用:

    import { useMemo, useCallback } from ‘react’
    const values = [3, 9, 6, 4, 2, 1]
    // This will always return the same value, a sorted array. Once the values array changes then this will recompute.
    const memoizedValue = useMemo(() => values.sort(), [values])
    // This will give me back a function that can be called later on. It will always return the same result unless the values array is modified.
    const memoizedFunction = useCallback(() => values.sort(), [values])
    import { useMemo, useCallback } from ‘react’
    const values = [3, 9, 6, 4, 2, 1]
    // This will always return the same value, a sorted array. Once the values array changes then this will recompute.
    const memoizedValue = useMemo(() => values.sort(), [values])
    // This will give me back a function that can be called later on. It will always return the same result unless the values array is modified.
    const memoizedFunction = useCallback(() => values.sort(), [values])
    import { useMemo, useCallback } from 'react'
    const values = [3, 9, 6, 4, 2, 1]
    // This will always return the same value, a sorted array. Once the values array changes then this will recompute.
    const memoizedValue = useMemo(() => values.sort(), [values])
    // This will give me back a function that can be called later on. It will always return the same result unless the values array is modified.
    const memoizedFunction = useCallback(() => values.sort(), [values])

    上面的代码片段是一个人为的示例,但显示了两个回调之间的区别:

    1. memoizedValue会变成数组[1, 2, 3, 4, 6, 9]。只要values变量保持不变,memoizedValue它就会保持不变,并且永远不会重新计算。
    2. memoizedFunction将是一个返回数组的函数[1, 2, 3, 4, 6, 9]

    这两个回调的好处是它们会被缓存并一直存在,直到依赖数组发生变化。这意味着在渲染时,它们不会被垃圾收集。

    渲染和React

    为什么在React中记忆很重要?

    它与React如何渲染你的组件有关。React使用存储在内存中的虚拟DOM来比较数据并决定更新什么。

    虚拟DOM帮助React提高性能并让您的应用程序保持快速。默认情况下,如果您的组件中的任何值发生更改,整个组件将重新渲染。这使得React对用户输入具有“反应性”,并允许屏幕更新而无需重新加载页面。

    您不想渲染组件,因为更改不会影响该组件。这就是通过useCallbackuseMemo进行记忆的地方。

    当React重新渲染你的组件时,它也会重新创建你在组件中声明的函数。

    请注意,当比较一个函数与另一个函数的相等性时,它们总是为假的。因为函数也是一个对象,所以它只会等于它自己:

    // these variables contain the exact same function but they are not equal
    const hello = () => console.log(‘Hello Matt’)
    const hello2 = () => console.log(‘Hello Matt’)
    hello === hello2 // false
    hello === hello // true
    // these variables contain the exact same function but they are not equal
    const hello = () => console.log(‘Hello Matt’)
    const hello2 = () => console.log(‘Hello Matt’)
    hello === hello2 // false
    hello === hello // true
    // these variables contain the exact same function but they are not equal
    const hello = () => console.log('Hello Matt')
    const hello2 = () => console.log('Hello Matt')
    hello === hello2 // false
    hello === hello // true

    换句话说,当React重新渲染你的组件时,它会将在你的组件中声明的任何函数都视为新函数。

    这在大多数情况下都很好,简单的函数很容易计算并且不会影响性能。但是其他时候,当您不希望该功能被视为新功能时,您可以依靠useCallback来帮助您。

    你可能会想,“我什么时候不希望一个函数被视为一个新函数?” 好吧,在某些情况下useCallback更有意义:

    1. 您将函数传递给另一个也被记忆的组件(useMemo
    2. 你的函数有一个需要记住的内部状态
    3. 您的函数是另一个钩子的依赖项,例如useEffect

    React useCallback的性能优势

    如果useCallback使用得当,它可以帮助加速您的应用程序并防止组件在不需要时重新渲染。

    例如,假设您有一个组件,它获取大量数据并负责以图表或图形的形式显示该数据,如下所示:

     

    使用React组件生成的条形图

    使用React组件生成的条形图

     

    假设您的数据可视化组件的父组件重新渲染,但更改的道具或状态不会影响该组件。在这种情况下,您可能不想或不需要重新渲染它并重新获取所有数据。避免这种重新渲染和重新获取可以节省用户的带宽并提供更流畅的用户体验。

    React useCallback的缺点

    虽然这个钩子可以帮助你提高性能,但它也有它的缺陷。在使用useCallback(和useMemo)之前,需要考虑以下几点:

    • 垃圾收集: React将丢弃其他尚未记忆的函数以释放内存。
    • 内存分配:与垃圾回收类似,你拥有的记忆功能越多,需要的内存就越多。另外,每次你使用这些回调时,React中都有一堆代码需要使用更多的内存来为你提供缓存的输出。
    • 代码复杂性:当您开始在这些钩子中包装函数时,您会立即增加代码的复杂性。现在需要更多地了解为什么使用这些钩子并确认它们被正确使用。

    意识到以上这些陷阱可以让你省去自己跌跌撞撞的头痛。在考虑使用useCallback时,请确保性能优势大于缺点。

    React使用回调示例

    下面是一个带有Button组件和Counter组件的简单设置。Counter有两个状态并渲染出两个Button组件,每个组件将更新Counter组件状态的一个单独部分。

    Button组件有两个props:handleClick和name。每次呈现Button时,它都会登录到控制台。

    import { useCallback, useState } from ‘react’
    const Button = ({handleClick, name}) => {
    console.log(`${name} rendered`)
    return <button onClick={handleClick}>{name}</button>
    }
    const Counter = () => {
    console.log(‘counter rendered’)
    const [countOne, setCountOne] = useState(0)
    const [countTwo, setCountTwo] = useState(0)
    return (
    <>
    {countOne} {countTwo}
    <Button handleClick={() => setCountOne(countOne + 1)} name=“button1” />
    <Button handleClick={() => setCountTwo(countTwo + 1)} name=“button1” />
    </>
    )
    }
    import { useCallback, useState } from ‘react’
    const Button = ({handleClick, name}) => {
    console.log(`${name} rendered`)
    return <button onClick={handleClick}>{name}</button>
    }
    const Counter = () => {
    console.log(‘counter rendered’)
    const [countOne, setCountOne] = useState(0)
    const [countTwo, setCountTwo] = useState(0)
    return (
    <>
    {countOne} {countTwo}
    <Button handleClick={() => setCountOne(countOne + 1)} name=”button1″ />
    <Button handleClick={() => setCountTwo(countTwo + 1)} name=”button1″ />
    </>
    )
    }
    import { useCallback, useState } from 'react'
    const Button = ({handleClick, name}) => {
    console.log(`${name} rendered`)
    return <button onClick={handleClick}>{name}</button>
    }
    const Counter = () => {
    console.log('counter rendered')
    const [countOne, setCountOne] = useState(0)
    const [countTwo, setCountTwo] = useState(0)
    return (
    <>
    {countOne} {countTwo}
    <Button handleClick={() => setCountOne(countOne + 1)} name="button1" />
    <Button handleClick={() => setCountTwo(countTwo + 1)} name="button1" />
    </>
    )
    }

    在此示例中,无论何时单击任一按钮,您都会在控制台中看到:

    // counter rendered
    // button1 rendered
    // button2 rendered
    // counter rendered
    // button1 rendered
    // button2 rendered
    // counter rendered
    // button1 rendered
    // button2 rendered

    现在,如果我们应用useCallback到我们的handleClick函数并将我们的Button包装在 中React.memo,我们可以看到useCallback为我们提供了什么。React.memo类似于useMemo并且允许我们记忆一个组件。

    import { useCallback, useState } from ‘react’
    const Button = React.memo(({handleClick, name}) => {
    console.log(`${name} rendered`)
    return <button onClick={handleClick}>{name}</button>
    })
    const Counter = () => {
    console.log(‘counter rendered’)
    const [countOne, setCountOne] = useState(0)
    const [countTwo, setCountTwo] = useState(0)
    const memoizedSetCountOne = useCallback(() => setCountOne(countOne + 1), [countOne)
    const memoizedSetCountTwo = useCallback(() => setCountTwo(countTwo + 1), [countTwo])
    return (
    <>
    {countOne} {countTwo}
    <Button handleClick={memoizedSetCountOne} name=“button1” />
    <Button handleClick={memoizedSetCountTwo} name=“button1” />
    </>
    )
    }
    import { useCallback, useState } from ‘react’
    const Button = React.memo(({handleClick, name}) => {
    console.log(`${name} rendered`)
    return <button onClick={handleClick}>{name}</button>
    })
    const Counter = () => {
    console.log(‘counter rendered’)
    const [countOne, setCountOne] = useState(0)
    const [countTwo, setCountTwo] = useState(0)
    const memoizedSetCountOne = useCallback(() => setCountOne(countOne + 1), [countOne)
    const memoizedSetCountTwo = useCallback(() => setCountTwo(countTwo + 1), [countTwo])
    return (
    <>
    {countOne} {countTwo}
    <Button handleClick={memoizedSetCountOne} name=”button1″ />
    <Button handleClick={memoizedSetCountTwo} name=”button1″ />
    </>
    )
    }
    import { useCallback, useState } from 'react'
    const Button = React.memo(({handleClick, name}) => {
    console.log(`${name} rendered`)
    return <button onClick={handleClick}>{name}</button>
    })
    const Counter = () => {
    console.log('counter rendered')
    const [countOne, setCountOne] = useState(0)
    const [countTwo, setCountTwo] = useState(0)
    const memoizedSetCountOne = useCallback(() => setCountOne(countOne + 1), [countOne)
    const memoizedSetCountTwo = useCallback(() => setCountTwo(countTwo + 1), [countTwo])
    return (
    <>
    {countOne} {countTwo}
    <Button handleClick={memoizedSetCountOne} name="button1" />
    <Button handleClick={memoizedSetCountTwo} name="button1" />
    </>
    )
    }

    现在,当我们单击任一按钮时,我们只会看到我们单击

  • 如何使用Poedit翻译WordPress主题

    如何使用Poedit翻译WordPress主题

    大多数WordPress主题都带有一种且唯一的语言——英语。本教程向您展示如何将任何WordPress主题翻译成您选择的本地语言。

    事前准备工作

    在开始本指南之前,您需要以下内容:

    • 按照Poedit软件到您的计算机上。Poedit提供 OS X和Windows版本,可以从这里下载。
    • 您计算机上的WordPress主题文件。

    第 1 步 — 打开主题的默认语言模板

    打开Poedit并选择Create new translation

    创建主题翻译文件

    将弹出一个新窗口,选择您要翻译的WordPress主题。主题的默认翻译模板位于THEMEXXX/lang/YYY.po,其中THEMEXXX是您的主题的名称和YYY– 主题的默认语言(themename/lang/en_EN.po在本例中):

    Poedit生成翻译文件

    接下来,从下拉菜单中选择您要将主题翻译成的语言:

    选择需要翻译的语言

    您现在已准备好翻译您的主题。

    第 2 步 — 翻译您的主题

    突出显示您要翻译的任何字符串:

    逐句翻译

    Translation部分输入源字符串的所需翻译:

    根据源文本翻译

    翻译完主题后,将文件(lt_LT在本例中)保存在与原始模板相同的目录中:

    保存翻译文件

    第 3 步 — 更改您的WordPress网站语言

    将您在步骤2中保存的.po文件lt_LT.po(在本示例中)和.mo文件(lt_LT.mo由Poedit自动生成)上传到您的主机帐户上的相应目录。该目录应类似于public_html/wp-content/themes/THEMEXXX/lang,其中THEMEXXX是您的WordPress主题的名称。

    打开wp-config.php文件(它位于您的WordPress安装根目录中)并添加以下行:define ('WPLANG', 'ZZZ');ZZZ您用来保存翻译的文件的名称在哪里(在本例中的lt_LT):

    更改您的WordPress网站语言

    您的主题现在将显示为已翻译:

    翻译示例

    小结

    现在您知道如何使用Poedit翻译编辑器翻译您的WordPress主题了。如果您想使您的网站适应您的本地语言,这项技能很有价值。同样的翻译原则也适用于WordPress插件。

  • 创建和测试WordPress可访问性

    WordPress可用性

    在设计网站时,考虑您的受众很重要。如果您不针对各种用户优化网站,您将限制谁可以查看您的内容。如果不积极考虑 WordPress 的可访问性,它可能会导致用户快速离开您的网站并且永远不会返回。

    专注于 WordPress中的可访问性使更多的人能够浏览该网站并与之交互。借助可访问的设计和包容性功能,可以改善残障人士的整体用户体验 (UX)。

    在本文中,我们将仔细研究WordPress可访问性选项以及如何在您的网站上实施它们。然后,我们将向您展示如何在发布您的内容之前测试新功能。

    什么是Web可访问性?

    Web可访问性是使网站可供各种用户(包括残疾人)访问的过程。即使某人有视觉或运动障碍,网络可访问性也可以让他们平等地访问在线内容。

    WordPress可访问性简介

    例如,简单的对比色方案将使色盲用户能够轻松阅读内容。此外,由于其他访问者可能无法使用鼠标,因此您只需使用键盘即可使您的网站可导航。

    WordPress可访问性简介

    美国残疾人法案 (ADA)通过后,网络无障碍成为法律要求。如果您是Web开发人员或网站所有者,则在设计页面时必须牢记Web内容可访问性指南 (WCAG)

    例如,内容需要是:

    • 可感知。在线用户应该能够辨别网页上的信息,即使他们使用的是屏幕阅读器等辅助技术。
    • 可操作。网站必须易于浏览,无论访问者使用鼠标、键盘还是语音命令。
    • 可以理解。您的内容必须可读且易于理解。
    • 可自适应。用户应该能够使用各种设备访问您的内容,包括移动设备、浏览器和屏幕阅读器。

    对于WordPress,可访问性选项可能会受到影响。尽管WordPress可访问性团队始终评估核心软件、主题和插件,但不能保证这些功能会合规。

    本质上,开发人员和内容创建者负责选择他们自己的可访问性工具包。这可能需要额外的时间和精力,但它提供了许多好处:

    • 使广泛的用户能够查看您的内容
    • 改善残障人士的整体用户体验
    • 它有助于与您的观众建立信任

    简而言之,您希望每个人都能够访问您的WordPress网站。许多网站将有视力障碍或其他残疾的用户排除在外,但您应该在开发和设计过程中积极考虑他们。

    Web可访问性的主要特点是什么?

    在使您的网站可访问时,您需要处理几个功能。这些包括:

    • 导航。访问者应仅使用键盘或辅助技术访问网站的任何部分。
    • 替代文字。为视障用户使用描述性文本,以便他们可以使用屏幕阅读器访问信息。
    • 配色方案。调色板应该有对比色,使内容更具可读性。
    • 字体。网站上的所有文本大小至少应为16像素,并使用清晰的字体样式。

    即使您无法考虑所有医疗状况,但这些功能可以确保更多人可以与您的网站互动。

    WordPress可访问性的8个要点

    现在我们已经了解了Web可访问性的重要性,让我们讨论如何优化您的网站以符合这些准则。

    1. 选择正确的WordPress主题

    在设计网站时,您可能很想选择最好的免费WordPress主题之一。尽管许多选项很受欢迎、价格合理且设计精良,但这并不意味着它们可以使用。

    某些主题可能会使残障人士难以查看您的内容。例如,默认配色方案可能具有相似的色调,这意味着色盲用户将无法识别差异。

    残障人士访问障碍

    但是,您会在WordPress上找到几个可访问的主题。这些选项已通过可访问性审核,提供了便于导航和清晰可见性的附加功能。

    以下是您应该在可访问主题中寻找的一些基本功能:

    • 键盘导航
    • 合理的HTML标题结构
    • 对比色方案

    在搜索WordPress可访问性主题时,您可以使用过滤器缩小选项范围。在主题目录上,只需单击功能筛选器并选择可访问性就绪

    可访问性就绪主题

    应用过滤器后,您可以查看所有符合WordPress可访问性要求的主题。其中许多选项将具有简单的设计并为辅助技术提供支持。

    可访问性就绪主题列表

    但是,重要的是要注意这些主题仅需要满足最低可访问性要求。特定主题可能无法说明不同程度的残疾及其特定需求。为确保主题适合您个人,您需要阅读说明并评估其提供的可访问功能。

    2. 使用插件添加功能特性

    另一个简单的解决方案是使用WordPress可访问性插件。当您安装WordPress插件时,您可以自动提升网站的可访问性,而无需进行任何维护。

    在可访问性方面,有两种类型的插件可以提供帮助——一些插件旨在帮助您构建可访问的内容,而另一些插件可以使现有网站更具包容性。

    您可以通过应用正确的筛选器找到WordPress ADA合规插件。如果您使用的是插件目录,请确保使用“可访问性”插件标签浏览您的结果。

    WordPress ADA合规插件

    可访问性的最佳WordPress插件之一是One Click Accessibility

    One Click Accessibility

    建立网站后,此工具可以添加新功能,以便任何人都可以查看内容。例如,为键盘用户启用跳至内容功能,并使用负对比度、浅色背景或灰度选项更改配色方案。

    3. 用替代文字描述你的图片

    图像对网站而言与任何其他类型的内容一样重要。事实上,它们通常比文本块更可取,因为它们可以立即且更有创意地提供必要的信息。

    当由屏幕阅读器阅读时,编写良好的alt文本(也称为alt标签alt描述)可以向视障人士提供有关图像的类似信息,从而充分体验网站的内容。

    Alt文本在WordPress SEO中也发挥着重要作用,因为搜索引擎使用它们返回搜索结果。因此,处理您的alt描述不应该简单地看一眼。

    在WordPress中上传照片后,转到页面右侧的附件详细信息。在这里,您将看到添加titlecaptiondescriptionalt text的选项。

    附件详细信息

    对于替代文本,请确保在不超过字数限制(大约125个字符)的情况下编写图像描述。由于搜索引擎也使用此信息来理解图像,因此不要忘记包含目标关键字以提高您的排名。

    虽然标题是可选的,但它们可以为读者提供额外的信息。虽然替代文本应该简短且具有描述性,但您可以在字幕中更详细地介绍。

    向图像添加替代文本和标题可能是使您的WordPress网站更易于访问的一种简单方法。即使用户无法亲眼看到这些视觉效果,他们也可以通过听到它们的描述来理解它们。

    另一个有用的WordPress可访问性插件是Bulk Auto Image Alt Text

    Bulk Auto Image Alt Text

    顾名思义,此工具可以一次自动将替代文本添加到多个图像。它从图像名称、文章标题或关键字生成alt标签,并与Yoast SEOWooCommerce兼容。

    4.使用清晰的字体

    在设计在线内容时,您可能不会将字体视为可访问性问题。但是,错误的字体样式和大小会使人们难以阅读您的内容。

    如果您选择装饰性自定义字体,例如草书样式,有些人可能难以理解。因此,您需要选择简单易读的样式,例如CalibriArialTimes New Roman

    另一个需要考虑的因素是字体大小。通常,可访问的字体大小应至少为16像素。如果您的读者视力有限,他们还需要能够放大或调整显示大小。

    使用块主题时,您可以使用站点编辑器编辑站点的字体。在您的WordPress仪表板中,打开Appearance -> Editor。然后,选择排版

    排版设计

    接下来,单击文本元素。这将为您的字体样式和大小打开自定义选项。

    文本元素

    要启用字体大小调整,请使用Zeno Font Resizer等插件。

    Zeno Font Resizer

    使用此工具,您可以让访问者根据自己的喜好调整字体大小。此外,该插件使用cookie来保存用户的偏好。

    字体推荐:

    5.选择对比色

    当您自定义网站的配色方案时,重要的是要考虑可能有色盲的观众。如果您选择色调非常相似的颜色,视力不佳的人可能无法分辨它们之间的区别。

    选择对比色时,任何访问者都会轻松阅读您的内容。通常,带有白色背景的黑色文本是最可取的选择,因为它具有鲜明的对比。

    纽约时报网站

    幸运的是,如果您尝试使用相似的色调,WordPress会自动通知您。当它检测到难以阅读的颜色组合时,它会建议使用深色背景和明亮的配色方案。

    排版问题提示

    您还可以使用WebAIM对比度检查器为您的网站查找可访问的颜色。该工具允许尝试不同的阴影组合并查看它们是否具有足够的对比度。

    WebAIM对比度检查器

    选择颜色后,WebAIM对比度检查器将给出对比度。如果颜色的比例至少为4.5:1,则它们将通过WCAG可访问性要求。此外,您可以预览所选颜色的实际效果并确定它们是否适合您的网站。

    6.添加标题

    撰写新文章时,您需要使用适当的标题来组织它们。通过将文本分成不同的部分,您的内容将更易于阅读和理解。

    没有人愿意不间断地阅读一大段文字。因此,标题和适当的间距可以成为保持读者参与的有效方法。特别是如果您的观众有学习障碍,添加标题可以防止他们感到沮丧并完全离开网站。

    WordPress区块编辑器可以轻松为您的网站添加和组织标题。您可以简单地添加一个新的标题区块,然后选择您想要的大小。

    WordPress区块编辑器

    格式化标题后,您可以检查它们的大小是否正确。为此,请单击左上角的详细信息按钮。如果标题级别不正确,WordPress将提供警告消息。

    WordPress排版详细信息

    通过在您的文章中添加适当的标题,您将鼓励访问者从头到尾阅读帖子。反过来,这将降低跳出率并增加用户参与度。

    7.使用描述性锚文本

    增加WordPress可访问性的另一种方法是标记您的链接。撰写帖子时,您可能希望包含外部和内部链接,以将用户引导至不同的网页。但是,如果您只是使用“单击此处”作为锚文本,则不会描述链接的目标。

    如果您的观众使用屏幕阅读器,最好使锚文本更具描述性。这样,用户将在采取行动之前准确地知道他们正在点击什么。

    例如,您可能希望引导用户参加在线课程。通过使用“我的课程”锚定页面链接,您将告知查看者链接指向的位置。

    您还可以添加按钮以突出显示链接并使其更易于阅读。为此,只需在文章编辑器中插入一个按钮区块。

    按钮区块

    然后,写一个简短的描述,指定链接将指向何处。通过编辑按钮的文本和背景颜色,您可以设置易于阅读的对比色调。

    按钮样式

    总之,您会希望网站上的每个链接都经过精心描述和精心设计。当访问者使用屏幕阅读器时,描述性锚文本可以告知他们链接的目的地。这使他们能够毫不费力地浏览内容。

    8. 为视频写字幕和文字记录

    如果您的网站包含视频,那么也必须使这些内容易于访问。对于有听力或听觉处理困难的读者,您可以创建视频字幕和文字记录。这将有助于他们清楚地理解内容。

    将视频添加到WordPress的最简单方法之一是插入YouTube区块。幸运的是,YouTube具有自动字幕功能。这可以节省您自己创建字幕的时间。

    YouTube视频自动字幕

    对于较长的视频,请考虑创建脚本。这涉及将视频中的每个口语单词翻译成书面文件。

    成绩单可以帮助读者了解视频中发生的一切。如果您发布播客视频,将其转换为成绩单可提供有用的收听指南。

    一旦您决定编写成绩单,请在WordPress文章中输入此内容。如果您是一个很好的倾听者和快速打字员,这可能是一个简单的选择。

    但是,您也可以使用有用的转录软件来处理视频。使用VEED.IO等工具,您可以一键上传音频文件并将其转换为文本。

    VEED.IO

    该工具可以自动转录音频文件并将其翻译成100多种语言。您还可以选择在下载之前编辑成绩单。

    如何测试WordPress可访问性

    制作网站后,测试其可访问性很重要。您需要确保每个功能在启动之前都能正常运行。

    一个简单的方法是进行自动化测试。这涉及通过可访问性评估工具运行网站,以查看其执行情况。

    一种流行的测试WordPress可访问性的工具是WAVE。输入您网站的URL后,WAVE将提供可用辅助功能的摘要,以及您可以进行的改进列表。

    WordPress可访问性测试

    滚动浏览站点的预览窗口时,单击可访问性较差区域的警报图标。WAVE将通知您任何对比度错误、跳过的标题级别或冗余链接。

    WAVE工具可访问性测试示例

    同时,“结构”选项卡会告诉您您的内容是否易于浏览。

    WAVE工具可访问性测试结构

    尽管此工具非常有用,但它可能无法解决所有可访问性问题。因此,您可能还需要考虑手动测试网站。

    对于手动测试,请转到您网站的前端并尝试浏览内容,就好像您是新访问者一样。首先,检查是否有任何闪烁或移动的元素会分散或混淆用户的注意力。然后,评估字体大小和配色方案是否易于阅读。

    以下是运行手动测试的一些额外提示:

    • 确保您可以仅使用键盘浏览网站
    • 使用屏幕阅读器了解您的内容在大声朗读时的声音
    • 测试字体大小调整功能

    网站成功启动后,您可能希望收集访问者的反馈。如果您收到有关如何使内容更易于访问的评论,请尝试实施这些更改。

    小结

    专注于可访问性功能可能是留住在线访问者的关键。在考虑残疾人时,您可以轻松地为他们提供替代方案。这将有助于建立与读者的信任,并让他们回来获取新内容。

    回顾一下,这里有一些方法可以让您的WordPress网站更易于访问:

    1. 选择合适的主题
    2. 使用WordPress插件添加功能特性
    3. 用替代文字描述图像
    4. 使用清晰的字体
    5. 为网站设计选择对比色
    6. 包含较长文本的标题
    7. 清楚地标记链接
    8. 写标题和成绩单

    我们希望本指南有助于简化WordPress的可访问性,以便您可以使网站可供所有类型的访问者使用。

    WordPress可访问性常见问题解答

    到目前为止,我们已经讨论了一些使您的网站更易于访问的实用方法。现在,让我们看一些关于WordPress ADA合规性的常见问题。

    我的WordPress网站是否符合ADA标准?

    由于拥有无法访问的网站是违法的,因此确保您的网站符合ADA标准非常重要。如果您不确定您的WordPress网站是否符合ADA指南,请使用Accessibility Suite等插件。这将为您提供有关网站可访问性的详细报告。

    WordPress的可访问性如何?

    WordPress不保证其所有软件都可以访问,但某些主题和插件由辅助功能团队的专家检查。此外,WordPress希望其编码至少符合Web内容可访问性指南 (WCAG) 的AA级。当您拥有一个WordPress网站时,实现可访问的功能相当简单。您可以简单地选择WordPress可访问性就绪的主题和插件,然后使用WAVE之类的工具检查该站点。

  • WordPress React开发项目初学者指南

    WordPress React开发项目初学者指南

    WordPress是一个功能强大的内容管理系统 (CMS),可让您构建从简单网站到复杂复杂的电子商务商店的所有内容。要将平台的PHP代码与JavaScript集成,您可以利用WP REST API和WordPress React

    React由Facebook开发,是一个用户界面 (UI)库,它使用一种简单的、基于组件的方法来构建易于理解的可扩展、跨平台的应用程序。但是,重要的是要学习如何正确使用它以充分利用其特性和功能。

    在本指南中,我们将解释如何在WordPress中使用React。我们将讨论什么是框架,概述它的好处,并向您展示如何使用它。

    React简介

    在开始之前,我们首先要问一个问题,“什么是React?” . 也称为 ReactJS,它是可用于Web开发的最流行的JavaScript库之一。

    React官网

    它由Facebook创建和维护,包含大量可用于构建UI组件的JavaScript代码片段。

    与流行的看法相反,ReactJS不是一个JavaScript框架,因为它只呈现应用程序视图层的组件。因此,如果您正在寻找更复杂的功能,可以将其与Vue.js等实际框架配对。

    同样重要的是要注意有ReactJS和React Native。后者是基于React库构建的开源JavaScript框架。您可以使用它为iOS和Android创建跨平台应用程序和特定于平台的组件。

    React特性和功能

    要了解React的好处,了解它的工作原理会很有帮助。以下是它的一些最重要的特性和功能:

    JSX

    React中使用的主要JavaScript语法扩展是JSX。您可以使用它在JavaScript对象中嵌入HTML代码并简化复杂的代码结构。

    JSX还通过使第三方难以通过未明确写入应用程序的用户输入注入额外代码来帮助防止跨站点脚本 (XSS) 攻击。

    JSX标记包括名称、子项和属性。一个典型的HTML图像标签看起来像这样:

    < img class = “” src= “” alt= “” >
    < img class = “” src= “” alt= “” >
    < img class = "" src= "" alt= "" >

    但是,一个JSX标记应该如下所示:

    < img className= “” src= “” alt= “” / >
    < img className= “” src= “” alt= “” / >
    < img className= "" src= "" alt= "" / >

    此外,数值写在大括号内。与JavaScript类似,引号代表字符串:

    const name = ‘John Doe’;
    const element = <h1>Hello, {name}</h1>;
    ReactDOM.render(
    element,
    document.getElementById(‘root’)
    );
    const name = ‘John Doe’;
    const element = <h1>Hello, {name}</h1>;
    ReactDOM.render(
    element,
    document.getElementById(‘root’)
    );
    const name = 'John Doe’;
    const element = <h1>Hello, {name}</h1>;
    ReactDOM.render(
      element,
      document.getElementById('root')
    );

    您可以将任何有效的JavaScript表达式放在大括号内。例如,它可以是“user.firstName”或“formatName(user)”。

    虚拟DOM

    文档对象模型 (DOM)以数据树结构呈现网页,React将其存储在其内存中。React可以实现对树的某些部分的更新,而不是完全重新渲染它。

    Virtual DOM提供单向数据绑定。这使得操作和更新它比原始DOM更快。

    它使用称为差异的过程。这是React生成一个新的Virtual DOM树,将其与旧的比较,然后找到将更改应用到真实 DOM 的最有效方法的时候。这需要更少的时间和更少的资源,这对于涉及大量用户交互的大型项目是有益的。

    DOM还支持声明式API。这意味着您可以告诉React您希望UI处于哪种状态,以确保DOM将匹配该状态。

    组件

    正如我们所提到的,React组件是构成UI的独立、可重用的代码片段。这些组件的工作方式类似于JavaScript函数。他们接受道具,这是任意输入。当一个函数组件返回一个元素时,它会影响UI的外观。

    Props是只读的。这是一个例子:

    import React, { useState } from ‘react’
    import ReactDOM from ‘react-dom’
    const ParentComponent = () => {
    const [stateVariable, setStateVariable] = useState(‘this is the starting value for the variable’);
    return (
    <div>
    <h1>This is a function component view</h1>
    <ChildComponent exampleProp={stateVariable} />
    </div>
    )
    }
    const ChildComponent = (props) => {
    return (
    <div>
    <h2>{props.exampleProp}</h2>
    </div>
    )
    }
    ReactDOM.render( <ParentComponent />, document.getElementById(‘app’) );
    import React, { useState } from ‘react’
    import ReactDOM from ‘react-dom’

    const ParentComponent = () => {
    const [stateVariable, setStateVariable] = useState(‘this is the starting value for the variable’);

    return (
    <div>
    <h1>This is a function component view</h1>
    <ChildComponent exampleProp={stateVariable} />
    </div>
    )
    }

    const ChildComponent = (props) => {
    return (
    <div>
    <h2>{props.exampleProp}</h2>
    </div>
    )
    }

    ReactDOM.render( <ParentComponent />, document.getElementById(‘app’) );

    import React, { useState } from 'react' 
    import ReactDOM from 'react-dom' 
     
    const ParentComponent = () => { 
        const [stateVariable, setStateVariable] = useState('this is the starting value for the variable'); 
     
        return ( 
            <div> 
                <h1>This is a function component view</h1>
                <ChildComponent exampleProp={stateVariable} />
            </div> 
        ) 
    } 
     
    const ChildComponent = (props) => {
        return (
            <div>
                <h2>{props.exampleProp}</h2>
            </div>
        )
    }
     
     
    ReactDOM.render( <ParentComponent />, document.getElementById('app') );

    有两种主要类型——组件函数组件。类组件使用生命周期WordPress钩子和API调用:

    class ExampleComponent extends React.Component {
    constructor(props) {
    super(props);
    this.state = { };
    }
    render() {
    return (
    <div>
    <h1>This is a view created by a class component</h1>
    </div>
    );
    }
    }
    class ExampleComponent extends React.Component {
    constructor(props) {
    super(props);
    this.state = { };
    }
    render() {
    return (
    <div>
    <h1>This is a view created by a class component</h1>
    </div>
    );
    }
    }
    class ExampleComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = { };
      }
      render() {
        return (
          <div>
            <h1>This is a view created by a class component</h1>
          </div>
        );
      }
    }

    同时,一个功能组件看起来像下面的例子:

    const ExampleComponent = (props) => {
    const [stateVariable, setStateVariable] = useState();
    return (
    <div>
    <h1>This is a function component view</h1>
    </div>
    )
    }
    const ExampleComponent = (props) => {
    const [stateVariable, setStateVariable] = useState(”);
    return (
    <div>
    <h1>This is a function component view</h1>
    </div>
    )
    }
    const ExampleComponent = (props) => {
        const [stateVariable, setStateVariable] = useState('');
        return (
            <div>
                <h1>This is a function component view</h1>
            </div>
        )
    }

    功能组件用于在没有数据请求或状态管理的情况下呈现视图。

    状态

    State指的是React组件的内置对象。这是您存储元素属性值的地方。如果状态改变,组件会重新渲染。

    状态管理是管理这些应用程序状态并将数据存储在状态管理库中的过程。你可以使用一些状态管理库,包括ReduxRecoil,后者对初学者更友好。

    为什么要使用React?

    使用React进行WordPress开发有很多好处。对于初学者来说,它对初学者很友好,许多网络托管服务提供商都支持它的使用。

    由于它依赖于纯JavaScript和组件,因此您只需学习几天即可使用它来创建基于Web的应用程序。还有很多网站可以学习如何免费在线编码。对JavaScript基础知识的扎实理解可以简化该过程。

    React的另一个好处是它允许您在其他应用程序中重用组件。它是开源的,因此您可以预先构建您的组件并将它们嵌套在其他组件之间,而不会使您的代码臃肿。

    由于JSX集成,React组件的编写也相对简单,我们稍后会讨论。您可以合并HTML排版、标签并利用多种功能呈现来进行动态应用程序开发。

    借助React,您还可以使用官方命令行界面 (CLI) – Create React App – 来加快单页应用程序的开发。它带有预配置的工具,可以帮助您简化设置和学习过程。

    最后,React也是SEO友好的。虚拟DOM实现有助于提高页面速度、提高性能和服务器端渲染,使机器人更容易抓取您的网站。

    WP REST API概述

    WordPress REST应用程序接口 (API)使开发人员能够将JavaScript框架(例如React)与WordPress集成。您可以从站点的前端访问WP REST API,添加自定义文章类型,并构建由该API支持的React应用程序。

    WP REST API是一组用于构建软件应用程序的协议。它们定义了程序之间如何共享信息和数据以及它们的组件如何交互。REST是Representational State Transfer的缩写,指的是程序的风格定义架构约束。

    应用程序读取的结构化数据格式称为JavaScript Object Notation (JSON)。它有助于简化WordPress与其他应用程序和程序之间的通信。

    WP REST API产生了一个解耦环境,允许用户将WordPress视为无头CMS。这意味着可以使用多种前端框架来钩住WordPress的后端。这对于不太热衷于PHP的开发人员来说是有利的。

    React——开始之前

    JavaScript、CSS和HTML的基本知识将有助于学习React。此外,如果您熟悉ECMAScript 6(也称为 ES6)、函数式编程和面向对象编程,学习过程会更加高效。

    在程序方面,您还需要在计算机上安装一些依赖项。这包括NodeJSnpm以及一个文本编辑器。或者,您可能还想使用Git进行版本控制。

    为WordPress开发React项目最流行的方法是使用Create React App

    Create React App

    CRA提供了一个简单的环境来学习React并使用它来构建单页应用程序。请注意,为了使用它,您首先需要在您的设备上安装Node和npm。

    要创建一个新项目,您可以在终端中运行以下命令:

    npx create-react-app wp-react-demo
    npx create-react-app wp-react-demo
    npx create-react-app wp-react-demo
    

    如果您还没有这样做,它将确认您要在创建演示之前安装Create React App。这使样板模板。你也可以用你自己的名字替换“wp-react-demo”。

    接下来,运行以下命令:

    cd wp-react-demo
    npm start
    cd wp-react-demo
    npm start
    cd wp-react-demo
    npm start

    目录结构将如下所示:

    ├── README.md
    ├── package.json
    ├── public
    │ ├── favicon.ico
    │ ├── index.html
    │ └── manifest.json
    ├── src
    │ ├── App.css
    │ ├── App.js
    │ ├── App.test.js
    │ ├── index.css
    │ ├── index.js
    │ ├── logo.svg
    │ └── registerServiceWorker.js
    ├── README.md
    ├── package.json
    ├── public
    │ ├── favicon.ico
    │ ├── index.html
    │ └── manifest.json
    ├── src
    │ ├── App.css
    │ ├── App.js
    │ ├── App.test.js
    │ ├── index.css
    │ ├── index.js
    │ ├── logo.svg
    │ └── registerServiceWorker.js
    ├── README.md
    ├── package.json
    ├── public
    │ ├── favicon.ico
    │ ├── index.html
    │ └── manifest.json
    ├── src
    │ ├── App.css
    │ ├── App.js
    │ ├── App.test.js
    │ ├── index.css
    │ ├── index

  • 适合初学者和专业人士CSS备忘单

    适合初学者和专业人士CSS备忘单

    CSS是一种用于设计网站的语言,您可以使用它来添加背景、颜色,甚至过渡或其他交互元素。它还将帮助您创建一个对SEO友好的轻量级和响应式网站。

    但是,您可能很难熟悉各种CSS值,尤其是如果您是该语言的新手。

    为了帮助您,我们将分享一份完整的CSS备忘单,它将证明对您的所有Web开发项目都很有用。更重要的是,您会发现13页的CSS和CSS3声明以及几个可能的属性。

    了解CSS

    级联样式表或CSS是一种样式表语言,它决定了您的网站元素的外观。您可以通过将CSS文件嵌入HTML文档来控制网站内容的设计、布局、字体和颜色。

    让我们通过分解语法来看看CSS是如何工作的:

    selector {declaration}
    selector {declaration}
    selector {declaration}

    declaration可以分解为:

    selector {property: value;}
    selector {property: value;}
    selector {property: value;}

    如您所见,CSS语法由选择器和声明块组成。选择器是您要控制的HTML元素。而声明块包含HTML元素的属性名称和值——它们都由冒号 (:) 分隔并在大括号 ({}) 中声明。

    假设您希望标题一 ( h1 )的字体大小为20像素。您的语法应如下所示:

    h1 {font-size: 20px;}
    h1 {font-size: 20px;}
    h1 {font-size: 20px;}

    在这种情况下,选择器是h1。然后,font-size是属性名,20px是值。

    由于CSS有很多可能难以记住的选择器和声明,我们整理了一份完整的CSS和CSS3备忘单来帮助您掌握这门语言。

    下载CSS备忘单(下载地址见文末)后,将文件保存到您的设备或打印一份。这样,您就可以轻松找到所需的内容。

    CSS备忘单预览

    CSS备忘单预览

    这是我们PDF中最常见的CSS值和属性的预览!

    CSS备忘单预览图 备忘单预览图

    在此处下载完整的CSS备忘单:

    以.pdf 格式下载CSS备忘单

  • 如何将PHP代码添加到WordPress文章或页面

    如何将PHP代码添加到WordPress文章或页面

    想知道如何在WordPress文章或页面上运行PHP代码?你来对地方了。在这里,我们将揭示如何将PHP添加到WordPress页面或文章中,以便您改进它们的功能。

    将PHP代码添加到WordPress文章或页面的原因

    默认情况下,WordPress不允许您在文章或页面中运行PHP代码。添加PHP函数的推荐方法是修改子主题或创建自定义页面模板。

    尽管如此,在某些情况下,您可能希望将特定的PHP函数添加到单个文章或页面。在这些情况下,您可以使用WordPress代码小工具插件覆盖规则。

    以下教程将指导您完成使用Insert PHP Code Snippet插件将PHP代码直接添加到WordPress文章或页面的过程。

    如何使用插件将PHP代码添加到WordPress文章或页面

    在深入学习本教程之前,请确保您已安装并激活Insert PHP Code Snippet插件。

    1. 从您的WordPress仪表板,导航到XYZ PHP Code -> PHPCode Snippets

    2. 在PHP Code Snippets页面中,单击Add New PHP Code Snippet。将所需的 PHP 函数及其跟踪名称添加到指定的框中。在此示例中,我们将添加返回本地日期和时间的date()函数。然后,单击Create

    编辑PHP代码

    3. 如果该过程成功,屏幕上将出现一条确认消息和新功能。为将来使用,请通过检查“Action”部分确保您要使用的所有PHP函数都处于活动状态。活动的代码片段将显示一个绿色的暂停符号,而非活动的代码片段旁边将有一个绿色的复选标记。

    激活PHP代码

    4. 要将PHP代码添加到WordPress文章或页面,请将要使用的函数的片段短代码粘贴到所需位置。如果您使用的是Gutenberg区块编辑器,请使用简码代码区块来显示它。

    短码插入PHP代码

    5. 就是这样!您新创建的文章应执行PHP代码,如下例所示:

    PHP代码执行演示

    小结

    仅仅因为WordPress不允许您在文章或页面中运行 PHP 代码,这样做并非不可能。使用WordPress代码小工具插件,您可以轻松地将各种PHP函数添加到您的文章或页面中。

  • WordPress预发布环境初学者指南

    WordPress预发布环境初学者指南

    修改网站时,您需要确保所做的更改不会对您的网站产生负面影响。事故发生,网站崩溃,因此您需要一个安全的环境,您可以先在其中测试所有内容,然后再在线发布。

    为确保安全有效的修改,您可以创建一个WordPress预发布站点。

    本教程将向您展示如何创建一个预发布环境以安全地开发和修改您的WordPress网站,而不会影响您的原始网站。

    什么是WordPress预发布环境?

    WordPress预发布环境充当您网站的副本。使用它,您可以测试您计划对WordPress网站实施的任何更改,例如更新主题、插件或完全重新制作网站。

    请记住,WordPress预发布站点仅用于开发目的,公众或搜索引擎无法访问。

    开发人员通常会为同一个网站使用多个环境,以确保网站顺利运行。预发布环境站点是开发站点(开发人员在其中编写代码并执行初始测试)与生产站点(站点访问者看到的实时站点)之间的桥梁。

    为什么使用WordPress预发布环境?

    WordPress预发布站点可帮助您安全地测试对网站所做的任何更改。

    有了它,您可以修改站点而不会使其崩溃或更改实时版本的功能。这有助于避免停机时间和访问者糟糕的用户体验。

    但是,使用WordPress预发布站点有其优点和缺点,例如:

    优点

    • 无风险环境。一个更安全的环境来修改您的网站,而不会危及实时网站的功能。
    • 及早预防错误。它有助于在网站上线之前发现关键问题和系统崩溃。
    • 灵活的设置。根据您的喜好,可以在本地或在线进行设置。
    • 最好的输出。允许您构建一个更好的站点,因为您可以在启动它之前彻底测试所有内容。

    缺点

    • 陡峭的学习曲线。如果您是一个完整的初学者,那么创建一个WordPress预发布站点一开始似乎有些挑战。
    • 额外费用。如果您更喜欢让预发布站点在线,它可能包括额外的插件或托管费用。
    • 耗时。您将花一些时间测试WordPress预发布站点上的更改,并将这些相同的更改重新应用到该站点的实时版本。

    如何使用WP Staging创建WordPress预发布环境

    如果手动创建预发布站点似乎过于复杂,那么预发布站点插件可能是您的正确选择。

    WP Staging是设置预发布环境的首选插件之一,因此我们建议在使用任何其他插件之前先尝试一下。

    WP Staging

    在使用WP Staging创建预发布站点之前,请确定是在您的活动站点的子目录、子域还是其他域上设置预发布站点。

    在本教程中,我们将向您展示如何在子文件夹上创建WordPress预发布站点。

    1. 在子文件夹中创建新的预发布站点

    使用WP Staging创建预发布站点的最简单和最快的方法是使用子文件夹。此选项在免费高级插件版本中均设置为默认值。

    (1)在您的WordPress管理侧边栏上,导航到WP Staging -> Sites -> CREATE NEW STAGING SITE

    创建预发布站点

    (2)在Staging Site Name字段中输入预发布站点的名称。在此示例中,您的预发布站点URL将为https://mysite.com/staging

    预发布站点名称

    高级设置仅适用于WP Staging Pro用户。本节提供更高级的功能,例如创建克隆站点并将其保存到自定义目标目录的能力。

    2. 选择要包含和排除的数据库表

    在某些情况下,您可能希望从克隆过程中排除特定文件和数据库表。排除繁重的内容,例如由网络统计插件创建的表格,可以提高克隆过程的速度。

    您可以在插件的数据库表文件部分进行这些调整。

    数据库表

    请记住,如果您不确定自己在做什么,则不应篡改任何其他设置。如果有疑问,只需将所有内容保持默认即可。

    3. 开始克隆过程

    调整DB Tables and Files后,单击START CLONING按钮。

    此过程可能需要几分钟,具体取决于您网站的大小。

    克隆站点

    WP Staging完成创建临时网站后,它将通知您完成并显示临时网站的URL。您可以单击Open staging site按钮并直接访问新创建的预发布环境。

    访问预发布站点的另一种方法是从WordPress仪表盘导航到WP-Staging -> Sites。

    成功创建预发布站点

    WP Staging允许您在有空间的情况下创建尽可能多的预发布站点。

    其他WordPress预发布环境插件

    除了WP Staging,市场上还有另外三个优质的预发布环境站点插件。

    1.All-in-One WP Migration

    All-in-One WP Migration

    All-in-One WP Migration迁移所有WordPress网站文件,包括数据库、插件、主题和媒体文件。该插件提供了一个工具,只需将您的站点文件拖放到WordPress中即可将它们上传到不同的位置。

    All-in-One WP Migration的主要功能包括:

    • 绕过大小限制。分块上传或下载您的站点数据,克服任何文件大小限制。
    • 多合一登录凭据。使用与生产站点相同的用户名和密码登录预发布站点。
    • 导出期间的查找和替换。能够在导出过程中查找和替换数据库上的操作。
    • 选择性迁移。它提供了一个选项来排除特定文件,例如数据库和垃圾评论,从而更有效地复制您的WordPress网站。

    All-in-One WP Migration是一个免费插件。要添加更高级的功能,例如云存储迁移和更大尺寸的备份,您需要购买高级扩展。

    2.Duplicator

    Duplicator

    Duplicator是一个插件,可以在主机和域之间克隆、备份和迁移网站,让您轻松地将网站迁移到任何暂存位置。

    它通过创建一个包含站点数据库、内容、插件、主题和其他WordPress文件的ZIP文件的包来实现这一点。

    复印机的主要功能包括:

    • 预配置站点。Duplicator软件包使您可以避免重复设置。配置您的生产站点并将其捆绑到Duplicator包中。这样,您就不必在预发布环境站点上从头开始配置所有内容。
    • 恢复点。它可以让您在出现任何错误或执行错误更新时快速将系统恢复到已知且安全的状态。
    • 预定备份。高级版提供两种备份选项——立即或在特定时间安排。
    • 支持大型网站。打包形式的迁移使Duplicator能够有效地处理更大的网站。

    有两种类型的Duplicator插件:免费的Duplicator Lite和高级的Duplicator Pro。这些插件是独立的,因此您无法升级Duplicator Lite。如果您想使用 Duplicator Pro,则必须单独购买。

    Duplicator Pro附带每年69美元起的年度计划或549美元起的终身计划。

    3. WP Stagecoach

    WP Stagecoach

    WP Stagecoach使用数据库合并功能将您在预发布环境中所做的更改应用到实时站点。这意味着它不会在导入过程中覆盖您的数据库,这是一个很好的安全功能。

    WP Stagecoach还允许您更改实时站点,同时还可以在预发布站点上工作。

    该插件特别适用于电子商务网站或其他定期更新其内容或数据库的网站。它允许您在保持内容、订单或注册运行的同时对站点进行故障排除或修改。

    WP Stagecoach的主要功能包括:

    • 一键设置。您可以一键设置预发布站点或将更改推送到您的实时站点。这对非技术用户特别有益,因为他们可以跳过技术步骤,使他们的工作更快更容易。
    • 受密码保护的预发布站点。您的预发布环境站点位于您的服务器上并受密码保护,以便您可以安全地向您的客户或队友展示它。
    • 选择性迁移。您可以选择要将哪些更改上传到您的实时站点。
    • 支持大型网站。它也适用于多个网站。该插件可以分块导入站点文件,如果您的服务器速度较慢,这将很有帮助。
    • 恢复备份。当您不小心犯了错误时,WP Stagecoach会提供一个链接以恢复到您的旧站点。

    WP Stagecoach是一个付费插件,具有各种计划选项,起价为99美元/年。

    小结

    WordPress预发布环境为您提供了一个安全的地方来修改您的网站。

    与生产站点不同,预发布站点不会被搜索引擎索引,访问者将无法访问它们。这意味着,您不必担心犯错误和使您的网站崩溃。

    有两种方法可以创建WordPress预发布站点——通过手动设置或使用插件。评估您的技术技能并选择一种您觉得最舒服的方法。

  • 如何使用wp_nav_menu函数创建WordPress自定义菜单

    使用wp_nav_menu函数创建WordPress自定义菜单

    菜单是网站上一些最常见的元素。使用WordPress,如果您的主题支持,您可以轻松自定义菜单并从多个显示选项中进行选择。但是,如果您想在自定义位置使用菜单,则需要编辑主题文件并添加wp_nav_menu函数。

    通过将此功能与register_nav_menu结合使用,您将能够在网站的任何位置创建和放置菜单。即使您不是开发人员,添加和配置这些功能也相对简单。此外,您可以直接从WordPress仪表盘编辑菜单。

    在本文中,我们将讨论WordPress的wp_nav_menu函数的工作原理。我们将向您展示哪些参数和类与wp_nav_menu一起使用,然后解释如何在您的主题中使用该函数。

    什么是wp_nav_menu函数?

    wp_nav_menu是一个可以在WordPress中显示自定义菜单的功能。与显示现有页面列表的wp_page_menu不同, wp_nav_menu仅适用于自定义菜单。

    您可以将该功能添加到任何主题的模板文件中,以控制您希望菜单出现的位置。这是一个没有任何特定参数的函数的快速示例:

    wp_nav_menu( array $args = array() )
    wp_nav_menu( array $args = array() )
    wp_nav_menu( array $args = array() )
    

    您需要指定要显示哪个菜单才能使代码正常工作。实际上,页面模板中的 wp_nav_menu 示例函数如下所示:

    wp_nav_menu( array(
    ‘theme_location’ => ‘custom-menu’) );
    wp_nav_menu( array(
    ‘theme_location’ => ‘custom-menu’) );
    wp_nav_menu( array( 
        'theme_location' => 'custom-menu') );

    wp_nav_menu函数可以包含多个参数。在该示例中,我们使用theme_location来指定我们要使用的自定义菜单的名称。

    如果您不习惯将代码添加到您的网站,您可以选择WordPress菜单插件。一些工具将使您能够创建和放置自定义菜单,就像您使用wp_nav_menu一样。

    您也许还可以使用一些WordPress页面构建器。如果您已经在使用这些工具之一,请检查它是否提供自定义菜单功能。

    WordPress的wp_nav_menu参数和CSS类

    大多数WordPress函数都提供了各种预先确定的参数来修改它们的效果。对于wp_nav_menu,您同时拥有参数和CSS类。

    wp_nav_menu参数

    您可以使用一个或多个参数自定义wp_nav_menu函数。以下是可用选项:

    • ‘menu’ – 表示您正在使用哪个菜单。您可以使用ID、slug、名称或对象来指定菜单。
    • ‘menu_class’ – 为您的菜单配置CSS类。默认情况下,该函数将使用菜单类。
    • ‘menu_id’ – 指定菜单的ID。默认值或ID 是带有附加或递增数字的菜单的 slug。
    • ‘container’ – 选择用于菜单的容器类型。默认情况下,该函数使用div容器。
    • ‘container_class’ – 设置一个直接应用于菜单容器的CSS类。默认情况下,该菜单类将是menu-{menu slug}-container
    • ‘container_id’ – 设置菜单容器的ID。与菜单的ID一样,容器将默认使用递增的 slug。
    • ‘fallback_cb’ – 如果WordPress找不到您要显示的菜单,此参数会告诉它应该显示哪个其他元素。
    • ‘theme_location’ – 如果您使用register_nav_menu注册自定义菜单,此参数将显示它。
    • ‘items_wrap’ – 默认情况下,您的菜单将以无序列表 (ul)格式显示。此参数允许您配置如何包装菜单项。
    • ‘item_spacing’ – 大多数菜单使用空格来分隔项目。如果要禁用该空格,可以将此参数设置为discard

    我们没有提到一些额外的wp_nav_menu参数,包括用于向菜单添加文本的选项。但是,上面列出的参数是将自定义菜单添加到主题时使用的主要元素。

    下面是一个使用多个参数的函数示例:

    <?php
    wp_nav_menu( array(
    ‘theme_location’ => ‘custom-menu’,
    ‘container_class’ => ‘menu-class’
    ‘fallback_cb’ => ‘wp_page_menu’ ) );
    ?>
    <?php
    wp_nav_menu( array(
    ‘theme_location’ => ‘custom-menu’,
    ‘container_class’ => ‘menu-class’
    ‘fallback_cb’ => ‘wp_page_menu’ ) );
    ?>
    <?php
    wp_nav_menu( array( 
        'theme_location' => 'custom-menu', 
        'container_class' => 'menu-class'
        'fallback_cb' => ‘wp_page_menu’ ) ); 
    ?>

    如果可用参数的数量似乎过多,请不要担心。在大多数情况下,您只会使用theme_locationcontainer_class参数。这使得配置函数非常简单。

    wp_nav_menu CSS类

    当您使用wp_nav_menu函数时,它会自动将一系列CSS类应用于每个显示的菜单项。

    以下是最重要的wp_nav_menu CSS类

    • .menu-item – 此类自动应用于每个菜单项。
    • .menu-item-has-children – 仅适用于带有子项的菜单项。
    • .menu-item-object-{object} – 适用于每个菜单项。对象占位符可以是post_type或分类。
    • .menu-item-object-category – 这些菜单项对应于特定的WordPress类别。
    • .menu-item-object-tag – 对应于 WordPress 标签的菜单项。
    • .menu-item-object-page – 静态页面中的菜单项。
    • .menu-item-object-{custom} – 对应于自定义文章类型的项目。
    • .menu-item-type-{type} – 适用于每个菜单项。类型占位符可以是post_type或taxonomy 。
    • .menu-item-type-post_type – 对应于任何post_type的项目。
    • .menu-item-type-taxonomy – 对应于任何分类的项目。

    如您所见,wp_nav_menu CSS类有很多重叠之处。您可以使用的大量选项意味着您可以在使用CSS设置自定义菜单样式时非常具体。

    请记住,您还可以使用带有wp_nav_menu参数的自定义CSS类。如果预先确定的类都没有针对您想要设置样式的确切菜单或项目,那么这种方法可能是一个很好的选择。

    如何使用WordPress的wp_nav_menu函数创建和自定义菜单

    既然您知道wp_nav_menu函数是如何工作的,那么是时候学习如何在您的主题中使用它了。让我们从讨论wp_nav_register开始。

    步骤 1:使用 wp_nav_register 函数创建自定义菜单

    正如我们之前提到的,wp_nav_menu不允许您创建自定义菜单,但允许您放置它们。这意味着您需要在使用该功能之前手动制作菜单。

    wp_nav_register允许您为特定主题创建或“注册”菜单。您需要编辑主题的functions.php文件才能使用它。

    在开始工作之前,如果您还没有使用子主题,我们建议您设置一个子主题。使用子主题将防止对主题代码的任何更改在您更新时消失。在更改基本文件之前完全备份您的网站也是明智之举。

    解决此问题后,您需要访问主题的functions.php文件。最简单的方法是导航到仪表盘中的外观 -> 主题文件编辑器页面。

    主题编辑器应该打开到您的活动主题,您可以使用右侧的菜单选择functions.php文件。

    主题functions.php文件

    或者,您可以使用文件传输协议 (FTP)访问 functions.php 。如果您更喜欢使用成熟的文本编辑器,我们推荐这种方法。您只需添加一段代码,因此内置的WordPress代码编辑器就足够了。

    导航到文件末尾并将以下代码添加到其中:

    function wpb_custom_new_menu() {
    register_nav_menu(‘custom-menu’,__( ‘Custom Menu’ ));
    }
    add_action( ‘init’, ‘wpb_custom_new_menu’ );
    function wpb_custom_new_menu() {
    register_nav_menu(‘custom-menu’,__( ‘Custom Menu’ ));
    }
    add_action( ‘init’, ‘wpb_custom_new_menu’ );
    function wpb_custom_new_menu() {
      register_nav_menu('custom-menu',__( 'Custom Menu' ));
    }
    add_action( 'init', 'wpb_custom_new_menu' );

    您需要修改custom-menu菜单的名称和slug,这将是Custom Menu字段。但是,您可以为自定义菜单设置任何名称。

    保存对functions.php文件的更改。现在是时候编辑哪些项目将包含在新菜单中了。

    步骤 2:编辑您的自定义WordPress菜单

    要编辑您刚刚设置的自定义菜单,请前往外观 -> 菜单。查找屏幕右下角的菜单设置部分。

    该部分应包括您在第一步中注册的新菜单位置。

    自定义菜单显示位置

    要编辑该位置将显示的项目,请使用“选择要编辑的菜单: ”选项选择一个菜单或创建一个新菜单。

    然后,使用左侧的列表选择您希望菜单包含的元素,然后在“菜单结构”部分下重新排列它们。

    自定义菜单结构

    每个菜单项包括一个显示名称和一个链接。当您对您的选择感到满意时,请记住在“菜单设置”下验证您的新自定义菜单是否处于活动状态。如果是,请将更改保存到菜单。

    步骤 3:使用wp_nav_menu函数显示新菜单

    在这个阶段,您应该有一个使用您的主题注册的现成菜单。但是,尽管菜单存在,但在您使用wp_nav_menu函数指定其位置之前,它不会出现在任何地方。

    您需要在页面模板中添加wp_nav_menu函数来放置自定义菜单。您有权访问的页面模板文件取决于您使用的主题。

    导航到外观 -> 主题文件编辑器以访问仪表盘中的这些文件。右侧的主题文件部分包含您可以从此屏幕编辑的所有文件的列表。

    主题文件

    在我们的示例中,我们选择了主题的单页模板。您需要添加到模板的代码应如下所示:

    <?php
    wp_nav_menu( array(
    ‘theme_location’ => ‘custom-menu’,
    ‘container_class’ => ‘menu-class’
    ‘fallback_cb’ => ‘wp_page_menu’ ) );
    ?>
    <?php
    wp_nav_menu( array(
    ‘theme_location’ => ‘custom-menu’,
    ‘container_class’ => ‘menu-class’
    ‘fallback_cb’ => ‘wp_page_menu’ ) );
    ?>
    <?php
    wp_nav_menu( array( 
        'theme_location' => 'custom-menu', 
        'container_class' => 'menu-class'
        'fallback_cb' => ‘wp_page_menu’ ) ); 
    ?>

    在将更改保存到模板文件之前,请记住使用自定义主题的 slug 和您要使用的其他参数更新占位符。我们在示例中包含了container_classfallback_cb参数。

    但是,您使用的代码可以很简单:

    <?php
    wp_nav_menu( array(
    ‘theme_location’ => ‘custom-menu’ ) );
    ?>
    <?php
    wp_nav_menu( array(
    ‘theme_location’ => ‘custom-menu’ ) );
    ?>
    <?php
    wp_nav_menu( array( 
        'theme_location' => 'custom-menu' ) ); 
    ?>

    该代码的位置将决定页面上菜单的位置。如果您不确定该展示位置的工作原理,您可以在模板文件中尝试不同的位置。

    我们不建议在编辑模板文件时更改代码的任何其他部分,除非您知道它的作用。由于您只添加了几行代码,因此如果有任何错误,您可以将其删除。

    编辑后,通过访问使用您正在处理的模板的页面之一来检查菜单是否正在加载。如果菜单未显示,则可能是theme_location参数的slug有错误,因此请继续仔细检查。

    小结

    尽管您可以通过WordPress创建自定义菜单,但wp不允许您添加自定义菜单位置。这就是wp_nav_menu函数的用武之地。使用此功能,您可以在网站的任何部分显示使用register_nav_menu创建的自定义菜单。

    以下是如何使用wp_nav_menu函数的快速回顾:

    1. 使用register_nav_menu函数创建自定义菜单。
    2. 编辑您的自定义WordPress菜单。
    3. 使用wp_nav_menu函数显示新菜单。