博客

  • 如何将自定义CSS添加到您的WordPress网站

    有时您可能会发现自己需要在WordPress网站中添加自定义 CSS。在本教程中,我们将介绍如何在不编辑任何主题文件的情况下轻松地将自定义CSS添加到您的WordPress网站。

    如何将自定义CSS添加到您的WordPress网站

    方法 1:使用Theme Customizer添加自定义 CSS

    从WordPress 4.7开始,用户现在可以直接从WordPress管理后台添加自定义CSS。这非常简单,您可以立即通过实时预览看到您的更改。

    首先,您需要转到外观»自定义页面。

    WordPress外观自定义

    这将启动WordPress主题定制器界面。

    您将在左窗格中看到您网站的实时预览和一堆选项。单击左侧窗格中的额外CSS选项卡。

    WordPress主题额外CSS

    该选项卡将滑动显示一个简单的框,您可以在其中添加自定义CSS。一旦添加了有效的CSS规则,您就可以在网站的实时预览窗格中看到它的应用。

    编辑主题额外CSS代码

    您可以继续添加自定义CSS代码,直到您对其在网站上的外观感到满意为止。

    完成后不要忘记单击顶部的“保存并发布”按钮。

    发布主题自定义CSS

    注意:您使用主题定制器添加的任何自定义CSS仅适用于该特定主题。如果您想将其与其他主题一起使用,则需要使用相同的方法将其复制并粘贴到新主题中。

    方法 2:使用插件添加自定义CSS

    第一种方法只允许您为当前活动的主题保存自定义CSS。如果更改主题,则可能需要将自定义CSS复制并粘贴到新主题。

    如果您希望无论使用哪种WordPress主题都应用自定义CSS ,那么此方法适合您。

    您需要做的第一件事是安装并激活Simple Custom CSS插件。激活后,只需转到外观»Custom CSS并写下或粘贴您的自定义CSS。

    Simple Custom CSS

    不要忘记按“Update Custom CSS”按钮来保存您的更改。

    您现在可以查看您的WordPress网站以查看正在运行的自定义CSS。

    使用自定义CSS插件与在主题中添加CSS

    建议初学者使用上述两种方法。高级用户还可以将自定义CSS直接添加到他们的主题中。

    但是,不建议将自定义CSS片段添加到您的父主题中。如果您在没有保存自定义更改的情况下不小心更新了主题,您的CSS更改将会丢失。

    最好的方法是使用子主题。但是,许多初学者不想创建子主题。除了添加自定义CSS,初学者通常真的不知道他们将如何使用该子主题。

    使用自定义CSS插件可以让您独立于主题存储自定义CSS。这样您就可以轻松切换主题,而您的自定义CSS仍然存在。

    将自定义CSS添加到WordPress网站的另一种好方法是使用CSS Hero插件。这个出色的插件允许您在WordPress网站上编辑几乎所有CSS样式,而无需编写任何代码。

    CSS Hero插件

    我们希望本教程有助于将自定义CSS添加到您的WordPress网站。您可能还想了解如何选择最佳网页设计软件最佳WordPress拖放页面构建器插件

  • 如何在WordPress中添加短代码

    短代码是一种将动态内容添加到WordPress文章、页面和侧边栏的简单方法。

    许多WordPress插件和主题使用短代码来添加专门的内容,如联系表格、图片库、滑块等。

    在本教程中,我们将向您展示如何在WordPress中轻松添加短代码。我们还将向您展示如何在WordPress中创建您自己的自定义短代码。

    如何在WordPress中添加短代码

    什么是短代码?

    WordPress中的简码是代码快捷方式,可帮助您在WordPress文章、页面和侧边栏小部件中添加动态内容。它们显示在方括号内,如下所示:

    [myshortcode]
    [myshortcode]
    [myshortcode]

    为了更好地理解短代码,让我们先来看看为什么添加它们的背景。

    WordPress过滤所有内容以确保没有人使用文章和页面内容在数据库中插入恶意代码。这意味着您可以在文章中编写基本的HTML,但不能编写PHP代码。

    但是,如果您想在文章中运行一些自定义代码来显示相关文章、横幅广告、联系表单、画廊等,该怎么办?

    这就是Shortcode API的用武之地。

    基本上,它允许开发人员将他们的代码添加到一个函数中,然后将该函数作为短代码注册到WordPress,因此用户无需任何编码知识即可轻松使用它。

    当WordPress找到短代码时,它会自动运行与之关联的代码。

    让我们看看如何在您的WordPress文章和页面中轻松添加短代码。

    在WordPress文章和页面中添加短代码

    首先,您需要编辑要添加短代码的文章和页面。之后,您需要单击添加块按钮以插入短代码区块。

    插入短代码区块

    添加短代码区块后,您只需在区块设置中输入您的短代码即可。短码将通过各种WordPress插件来提供,你可能如使用是WPForms的联系表单,OptinMonster的电子邮件营销表单,WP Call button插入一个拨打电话按钮,等等。

    插入不同插件的短代码

    要了解有关使用区块的更多信息,请参阅我们的古腾堡教程以获取更多详细信息。

    您现在可以保存您的文章或页面并预览您的更改以查看正在运行的短代码。

    在WordPress侧边栏小工具中添加短代码

    您还可以在WordPress侧边栏小工具中使用短代码。只需访问外观»小工具页面并将“文本”小部件添加到侧边栏。

    现在您可以将您的短代码粘贴到小工具的文本区域内。

    添加短代码至小工具

    不要忘记单击“Save”按钮来存储您的小工具设置。

    之后,您可以访问您的WordPress网站,在侧边栏小部件中查看短代码的实时预览。

    在旧的WordPress经典编辑器中添加短代码

    如果您仍在WordPress中使用旧的经典编辑器,那么您可以通过以下方式向WordPress文章和页面添加短代码。

    只需编辑要添加短代码的文章和页面。您可以将短代码粘贴到内容编辑器中要显示的任何位置。只要确保短代码在它自己的行中。

    经典编辑器插入短代码

    不要忘记保存您的更改。之后,您可以预览您的帖子和页面以查看正在运行的短代码。

    如何在WordPress主题文件中添加短代码

    短代码旨在用于WordPress文章、页面和小部件。但是,有时您可能希望在WordPress主题文件中使用短代码。

    WordPress可以轻松做到这一点,但您需要编辑WordPress主题文件。

    基本上,您只需添加以下代码即可向任何WordPress主题模板添加短代码。

    <?php echo do_shortcode(“[your_shortcode]”); ?>
    <?php echo do_shortcode(“[your_shortcode]”); ?>
    <?php echo do_shortcode("[your_shortcode]"); ?>

    WordPress现在将查找短代码并在您的主题模板中显示其输出。

    如何在WordPress中创建自己的自定义短代码

    当您想在WordPress文章和页面中添加动态内容或自定义代码时,简码非常有用。但是,如果您想创建自定义短代码,则需要一些编码经验。

    如果您对编写PHP代码感到满意,那么这里有一个示例代码,您可以将其用作模板。

    // function that runs when shortcode is called
    function wpb_demo_shortcode() {
    // Things that you want to do.
    $message = ‘Hello world!’;
    // Output needs to be return
    return $message;
    }
    // register shortcode
    add_shortcode(‘greeting’, ‘wpb_demo_shortcode’);
    // function that runs when shortcode is called
    function wpb_demo_shortcode() {
    // Things that you want to do.
    $message = ‘Hello world!’;
    // Output needs to be return
    return $message;
    }
    // register shortcode
    add_shortcode(‘greeting’, ‘wpb_demo_shortcode’);
    // function that runs when shortcode is called
    function wpb_demo_shortcode() { 
    // Things that you want to do. 
    $message = 'Hello world!'; 
    // Output needs to be return
    return $message;
    } 
    // register shortcode
    add_shortcode('greeting', 'wpb_demo_shortcode');

    在这段代码中,我们首先创建了一个运行一些代码并返回输出的函数。之后,我们创建了一个名为“greeting”的新短代码,并告诉WordPress运行我们创建的函数。

    您现在可以使用以下代码将此短代码添加到您的文章、页面和小部件中:

    [greeting]
    [greeting]
    [greeting]
    

    它将运行您创建的函数并显示所需的输出。

    现在让我们来看看短代码的更实际用法。在此示例中,我们将在短代码中显示Google AdSense广告banner。

    // The shortcode function
    function wpb_demo_shortcode_2() {
    // Advertisement code pasted inside a variable
    $string .= ‘<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
    <ins class=”adsbygoogle”
    style=”display:block; text-align:center;”
    data-ad-format=”fluid”
    data-ad-layout=”in-article”
    data-ad-client=”ca-pub-0123456789101112″
    data-ad-slot=”9876543210″></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>’;
    // Ad code returned
    return $string;
    }
    // Register shortcode
    add_shortcode(‘my_ad_code’, ‘wpb_demo_shortcode_2’);
    // The shortcode function
    function wpb_demo_shortcode_2() {
    // Advertisement code pasted inside a variable
    $string .= ‘<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
    <ins class=”adsbygoogle”
    style=”display:block; text-align:center;”
    data-ad-format=”fluid”
    data-ad-layout=”in-article”
    data-ad-client=”ca-pub-0123456789101112″
    data-ad-slot=”9876543210″></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>’;
    // Ad code returned
    return $string;
    }
    // Register shortcode
    add_shortcode(‘my_ad_code’, ‘wpb_demo_shortcode_2’);
    // The shortcode function
    function wpb_demo_shortcode_2() { 
    // Advertisement code pasted inside a variable
    $string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
    style="display:block; text-align:center;"
    data-ad-format="fluid"
    data-ad-layout="in-article"
    data-ad-client="ca-pub-0123456789101112"
    data-ad-slot="9876543210"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>';
    // Ad code returned
    return $string; 
    }
    // Register shortcode
    add_shortcode('my_ad_code', 'wpb_demo_shortcode_2');

    不要忘记用您自己的广告代码替换广告代码。

    您现在可以在WordPress文章、页面和侧边栏小部件中使用 [my_ad_code] 短代码。WordPress将自动运行与短代码关联的功能并显示广告代码。

    简码与古腾堡区块

    用户经常问我们简码与新古腾堡块之间的区别。

    基本上,如果您发现短代码有用,那么您会喜欢WordPress编辑器区块。块允许您以更用户友好的方式做同样的事情。

    与要求用户添加用于显示动态内容的短代码不同,区块允许用户使用更直观的用户界面在文章/页面中添加动态内容。许多流行的WordPress插件都改用Gutenberg区块而不是短代码,因为它们对初学者更友好。

    最后,希望本教程能帮助您了解如何在WordPress中添加短代码。

  • 如何将Ajax实时搜索添加到您的WordPress

    将即时搜索添加到WordPress可改进默认站点搜索,并使访问者更容易找到他们正在寻找的页面和文章。

    在本教程中,我们将向您展示如何将Ajax实时搜索添加到您的WordPress网站。

    如何将Ajax实时搜索添加到您的WordPress

    为什么要向WordPress添加Ajax实时搜索?

    Ajax实时搜索(也称为即时搜索)通过添加在Google等搜索引擎中很常见的下拉菜单和自动完成功能来改善默认的WordPress搜索体验。

    这是一个实际的例子:

    即时搜索效果展示

    实时搜索会在用户键入时猜测他们正在搜索的内容,并帮助他们更快地找到相关内容。这是对默认WordPress搜索的巨大改进。

    通过帮助用户快速找到他们正在寻找的内容,实时搜索将帮助他们在您的网站上停留更长时间,从而增加综合浏览量并降低跳出率

    话虽如此,让我们来看看如何简单地将Ajax实时搜索添加到您的WordPress博客或网站。

    使用WordPress插件将Ajax搜索添加到WordPress

    将Ajax实时搜索添加到WordPress的最简单方法是使用SearchWP插件。它是市场上最好的WordPress搜索插件,被30,000多个网站使用。

    SearchWP插件

    该插件超越了为文章内容编制索引,并将为您网站上的所有内容编制索引,例如自定义字段、PDF文档、文本文件、WooCommerce产品等。

    对于本教程,您可以使用免费的SearchWP Live Ajax Lite搜索插件,因为它会自动启用Ajax实时搜索。

    您需要做的第一件事是安装并激活插件。激活后,默认的WordPress搜索表单现在将自动包含Ajax实时搜索功能。

    在您的WordPress网站上显示Ajax实时搜索

    由于任何活动搜索栏现在都有实时搜索,您所要做的就是决定您希望它们显示的位置。

    下面您将了解如何将实时搜索栏添加到WordPress网站上的常见位置。

    将Ajax实时搜索添加到WordPress侧边栏

    添加搜索栏的最受欢迎的区域之一是WordPress侧边栏。这使您的访问者无论在您网站上的哪个位置都可以轻松进行搜索。

    要将搜索小工具添加到WordPress,只需转到外观 » 小工具以调出基于块的小工具编辑器。

    即时搜索小工具

    WordPress主题的每个小工具区域在块编辑器中都有一个单独的选项卡。

    在我们的测试站点上,我们的侧边栏小部件区域称为“Right Sidebar”,但根据您的主题,您的可能有不同的名称。

    只需单击侧边栏部分下方的“+”图标。

    添加实时搜索至侧边栏

    然后,在搜索栏中键入“SearchWP”并单击“SearchWP Live Search”图标。

    这将自动将Ajax实时搜索小工具插入您的侧边栏中。

    如何将Ajax实时搜索添加到您的WordPress-6

    您可以自定义标题部分以更改搜索框的标题。完成后,单击“更新”按钮保存更改并使搜索栏生效。

    自定义实时搜索小工具

    现在,您的所有网站访问者都可以使用您的实时搜索栏。

    侧边栏Ajax实时搜索演示

    您可以按照相同的过程将实时搜索栏添加到您网站的任何其他小部件区域。要将其添加到您的导航菜单区域,请参阅我们关于如何将搜索栏添加到WordPress菜单的教程

    将Ajax实时搜索添加到WordPress页面

    您可能还想向网站的其他页面添加Ajax实时搜索框。例如,您可以有一个存档页面,让访问者可以搜索您的内容。

    为此,您需要导航到要编辑的文章或页面。对于此示例,我们将向您展示如何将实时搜索栏添加到WordPress页面。

    首先,转到页面»所有页面,然后单击要编辑的页面。

    将Ajax实时搜索添加到独立页面

    打开页面后,单击页面编辑器屏幕上的“+”图标。

    这将调出区块菜单。

    添加Ajax实时搜索区块

    接下来,在框中键入“Search”,然后单击“Search”图标将其添加到您的页面。

    它会自动为您放置搜索栏。

    Ajax实时搜索区块

    您还可以在搜索框中自定义搜索标题和占位符文本。

    之后,请务必点击页面右上角的“更新”按钮。

    发布Ajax实时搜索区块文章页面

    现在,您的访问者可以使用您网站上的实时搜索栏快速找到他们正在寻找的内容。

    您可以使用相同的过程向任何文章或页面添加搜索栏。

    Ajax实时搜索前端演示

    自定义WordPress即时搜索结果

    SearchWP是一个非常通用的搜索插件,它不仅仅是发布内容并索引您网站上的所有内容,包括自定义字段、ACF字段、文本文件、PDF文档内容、自定义表格、自定义分类法、WooCommerce产品属性等。

    SearchWP插件的专业版可让您通过创建自己的相关性比例和调整算法来完全自定义您的搜索结果,而无需编写任何代码。

    SearchWP插件设置界面

    您还可以获得指标功能,可让您查看访问者正在搜索的内容,以及许多其他强大的功能,可进一步改进您的现场搜索功能。

    我们希望本教程能帮助您了解如何将Ajax实时搜索添加到您的WordPress网站。

  • 如何在WordPress中实现按类别搜索

    向WordPress添加按类别搜索功能可让您的访问者快速找到他们正在寻找的内容。您可以添加选项来搜索特定的博客类别、产品类别等。

    在本教程中,我们将向您展示如何向WordPress站点添加按类别搜索功能。

    如何在WordPress中实现按类别搜索

    为什么要在WordPress中添加按类别搜索?

    按类别搜索功能允许您的访问者搜索特定的网站类别。

    如果您有很多内容,那么类别可以帮助组织您的内容,并使访问者更容易找到他们正在寻找的内容。

    您可以向存档页面添加类别搜索功能,以帮助访问者快速找到他们正在寻找的内容。

    按类别搜索框

    类别搜索也可以添加到您的在线商店,以便访问者可以快速找到他们想要的确切产品。

    总体而言,这为您的访问者提供了更好的现场体验,并可以帮助您的WordPress网站发出积极的SEO信号,例如增加停留时间和降低跳出率。

    添加类别搜索功能的最佳方法是使用 WordPress 插件。

    我们将分享两个不同的WordPress搜索插件,它们可以帮助您自定义WordPress搜索。只需使用下面的快速链接选择您要添加的WordPress类别搜索类型。

    方法 1:使用SearchWP将类别选择搜索表单添加到WordPress

    SearchWP是WordPress最好的搜索插件。它非常易于使用,并允许您添加类别选择功能,让您的用户控制他们的搜索结果。

    首先,您需要安装并激活SearchWP插件。激活后,导航到Settings » SearchWP。这会调出主搜索设置菜单。

    SearchWP插件设置

    您可以通过单击“文章”、“页面”或“库”下拉菜单来调整搜索引擎设置。

    更改“Weight Multiplier”滑块可自定义搜索引擎对内容的评价方式。如果您希望搜索引擎对页面内容的评价高于标题,请相应地调整滑块。

    SearchWP插件搜索引擎设置

    完成后,请确保单击“Save Engines”按钮以生成您的第一个搜索引擎。

    接下来,我们将自定义搜索表单以添加类别选择选项,以便您的访问者可以决定他们想要搜索的类别。

    为此,您需要将代码添加到WordPress文件中。

    您需要复制并粘贴以下代码并将其添加到您的functions.php文件、特定于站点的插件中或使用代码片段插件。

    function my_searchwp_get_search_form_with_categories_dropdown( $form ) {
    ob_start(); ?>
    <form role=“search” method=“get” class=“search-form” action=“<?php echo home_url( ‘/’ ); ?>”>
    <label>
    <span class=“screen-reader-text”>Search For</span>
    <input type=“search” class=“search-field” placeholder=“Search…” value=“<?php echo esc_attr( get_search_query() ); ?>” name=“s” title=“Search for:” />
    </label>
    <?php
    // for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories
    $swp_cat_dropdown_args = array(
    ‘show_option_all’ => __( ‘Any Category’ ),
    ‘name’ => ‘swp_category_limiter’,
    );
    wp_dropdown_categories( $swp_cat_dropdown_args );
    ?>
    <input type=“submit” class=“search-submit” value=“Search” />
    </form>
    <?php return ob_get_clean();
    }
    add_filter( ‘get_search_form’, ‘my_searchwp_get_search_form_with_categories_dropdown’ );
    function my_searchwp_get_search_form_with_categories_dropdown( $form ) {
    ob_start(); ?>
    <form role=”search” method=”get” class=”search-form” action=”<?php echo home_url( ‘/’ ); ?>”>
    <label>
    <span class=”screen-reader-text”>Search For</span>
    <input type=”search” class=”search-field” placeholder=”Search…” value=”<?php echo esc_attr( get_search_query() ); ?>” name=”s” title=”Search for:” />
    </label>
    <?php
    // for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories
    $swp_cat_dropdown_args = array(
    ‘show_option_all’ => __( ‘Any Category’ ),
    ‘name’ => ‘swp_category_limiter’,
    );
    wp_dropdown_categories( $swp_cat_dropdown_args );
    ?>
    <input type=”submit” class=”search-submit” value=”Search” />
    </form>
    <?php return ob_get_clean();
    }

    add_filter( ‘get_search_form’, ‘my_searchwp_get_search_form_with_categories_dropdown’ );

    function my_searchwp_get_search_form_with_categories_dropdown( $form ) {
        ob_start(); ?>
            <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
                <label>
                    <span class="screen-reader-text">Search For</span>
                    <input type="search" class="search-field" placeholder="Search..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:" />
                </label>
                <?php
                    // for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories
                    $swp_cat_dropdown_args = array(
                            'show_option_all'  => __( 'Any Category' ),
                            'name'             => 'swp_category_limiter',
                        );
                    wp_dropdown_categories( $swp_cat_dropdown_args );
                ?>
                <input type="submit" class="search-submit" value="Search" />
            </form>
        <?php return ob_get_clean();
    }
     
    add_filter( 'get_search_form', 'my_searchwp_get_search_form_with_categories_dropdown' );

    此代码修改您的WordPress博客上的搜索表单,并为用户提供一个下拉框来选择他们喜欢的类别。

    添加代码后,您可以查看任何搜索表单,您将看到已添加类别搜索下拉列表。

    按分类搜索演示

    您还可以使用SearchWP来自定义您的WooCommerce产品搜索页面。有关更多详细信息,请参阅有关如何进行智能WooCommerce产品搜索的教程

    方法 2:使用Ivory Search将按类别搜索添加到WordPress

    Ivory Search是另一个流行的WordPress搜索插件。它非常易于使用,可帮助您轻松控制WordPress中的搜索类别。

    您需要做的第一件事是安装插件。激活插件后,您将拥有一个名为“Ivory Search”的新WordPress菜单项。

    转到Ivory Search » Search Forms,然后单击“Add New Search Form Button”。

    Ivory Search搜索表单

    现在是时候开始构建您的类别搜索表单了。

    首先,为您的搜索表单命名。当您将搜索功能添加到您的网站时,该名称不会出现。它仅用于管理目的。

    自定义Ivory Search搜索表单

    接下来,单击“Post Types”元框中的下拉菜单。这会弹出一个菜单来选择您想要允许的内容类型。您可以将文章、页面和媒体添加到搜索中。

    您可以简单地启用要允许的内容类型的切换。

    Ivory Search搜索内容设置

    之后,单击“Posts”选项以显示展开的菜单。然后,打开“Search posts of only selected taxonomies”切换开关。

    这允许您选择可以添加到搜索中的WordPress类别。

    Ivory Search搜索文章设置参数

    选择一个或多个类别后,单击“Save Form”按钮。

    现在,在您的搜索表单标题下,复制短代码并将其粘贴到文本文件中。

    Ivory Search搜索短代码

    此短代码使您可以灵活地将WordPress类别搜索添加到您网站的任何页面、文章或小部件区域。

    您现在要做的就是打开要添加类别搜索并粘贴短代码的文章、页面或小部件。有关更多详细信息,请参阅有关如何在WordPress中添加短代码的教程。

    搜索短代码示例

    单击“Save”后,文章或页面现在将拥有您的活动类别搜索表单。

    您可以根据需要将此短代码添加到站点的任意多个区域。

    Ivory Search搜索框演示

    当用户使用此表单进行搜索时,他们将只能查看所选类别中的文章。

    在这种情况下,访问者将只能查看“Tutorials”类别中的文章。

    Ivory Search搜索结果演示

    如果您想创建多个不同类别的搜索,请按照上述步骤创建另一个搜索表单并将新的短代码嵌入您的网站。

    我们希望本教程能帮助您在WordPress中按类别添加搜索。

  • 如何创建自定义WordPress搜索表单

    搜索是大多数用户在您的网站上查找内容的方式。如果他们无法轻松找到他们正在寻找的内容,那么他​​们可能会转到另一个网站。

    在本教程中,我们将逐步向您展示如何通过创建自定义WordPress搜索表单来改进您的网站搜索。

    如何创建自定义WordPress搜索表单

    为什么要为WordPress创建自定义搜索表单?

    默认的WordPress搜索功能非常有限,并不总能找到最相关的内容。

    随着您向网站添加更多内容,您将需要更好的方法来帮助您的网站访问者轻松找到您网站上的内容。

    如果您经营在线商店或会员网站,您希望用户在其中找到合适的产品或课程,这一点就变得更加重要。

    您可能还想自定义搜索算法以显示高于其他内容的特定内容,或自定义搜索表单的外观。

    话虽如此,让我们来看看如何自定义WordPress搜索表单和结果页面。我们将介绍两种方法,您可以使用以下链接进行选择:

    如何自定义WordPress搜索表单和结果

    SearchWP是WordPress最好的自定义搜索插件。它易于使用,可让您完全控制搜索结果,并且比默认的WordPress搜索更准确。

    第一步是安装SearchWP插件。激活后,您需要访问设置 » SearchWP页面,然后单击“License”菜单选项。

    SearchWP授权设置

    然后,在“License”框中输入您的许可证密钥,然后单击“Activate”按钮。您可以在SearchWP网站上的帐户中找到此信息。

    自定义搜索引擎

    完成后,您需要单击“Engines”菜单选项。在那里,您应该单击“Add New”按钮以创建新的搜索引擎。

    SearchWP搜索引擎设置

    这将创建一个名为“supplemental”的新搜索引擎。要更改名称,您需要单击“Sources & Settings”按钮。

    SearchWP搜索源设置

    这会将您带到一个页面,该页面还允许您选择是否搜索文章、页面、媒体文件、评论和用户。我们将保留默认设置。

    我们将搜索引擎的名称更改为“Custom”。继续并将其输入到“Engine Label”字段中。

    SearchWP自定义搜索源

    请注意,已为您选择了“Keyword Stems”选项。当您的用户进行搜索时,这将忽略词尾,以便显示最相关的搜索结果。

    完成后,请确保单击“Done”按钮。

    搜索引擎的设置页面包含文章、页面、媒体和用户部分。在每个部分,您可以优先考虑不同的文章属性,或者在搜索结果中仅包含某些类别或标签。

    您可以通过调整“Attribute Relevance”滑块来做到这一点。

    这些改变了搜索引擎对内容的评价和排名方式。例如,如果您希望文章标题的权重高于内容,那么您可以相应地调整滑块。

    您应该完成每个部分并对您喜欢的滑块进行任何调整。

    SearchWP搜索源权重设置

    您还可以为每个部分创建规则,以确定是在搜索结果中包含还是排除某些内容。

    例如,您可以让访问者轻松搜索与他们刚刚阅读的主题相同的内容。或者在在线商店中,您可以帮助您的客户快速找到同一类别的其他产品。

    继续并单击文章部分中的“Edit Rules”按钮。

    您会注意到,您可以创建有关文章类别、标签和格式、发布日期和文章ID的规则。

    SearchWP文章搜索规则设置

    您可能希望让访问者搜索特定的网站类别。例如,您可以向存档页面添加类别搜索功能,以帮助访问者快速找到他们正在寻找的内容。

    要了解如何执行此操作,请参阅有关如何在WordPress中按类别搜索的教程中的方法 1 。

    完成自定义默认搜索引擎设置后,请务必单击页面顶部的“Save Engines”按钮以创建自定义搜索引擎。

    SearchWP设置保存

    添加带有简码的搜索表单

    SearchWP Shortcodes Extension简化了将新的自定义文章搜索表单添加到WordPress网站的工作。

    只需访问SearchWP Shortcodes Extension网站,然后单击“Download available with active license”按钮即可。

    SearchWP Shortcodes Extension

    之后,您需要按照安装上述插件的相同方式安装和激活扩展。

    现在,您可以使用短代码将自定义搜索表单添加到您的文章、页面和小部件。如果您之前没有使用过短代码,那么您可以在我们的初学者指南中了解更多关于如何在WordPress中添加短代码的教程

    只需编辑文章并将光标放在要添加搜索表单的位置。之后,单击加号“ + ”添加块图标以显示块菜单。

    添加搜索框短代码

    接下来,在搜索框中键入“html”,然后单击“自定义HTML”块以将其添加到文章中。

    添加新块后,您应该将以下短代码和HTML粘贴到其中。

    [searchwp_search_form engine=”custom” var=”searchvar” button_text=”Custom Search”]
    <div class=“search-results-wrapper”>
    [searchwp_search_results engine=”custom” var=”searchvar” posts_per_page=4]
    <h2>[searchwp_search_result_link direct=”true”]</h2>
    [searchwp_search_result_excerpt]
    [/searchwp_search_results]
    </div>
    <div class=“no-search-results-found”>
    [searchwp_search_results_none]
    No results found, please search again.
    [/searchwp_search_results_none]
    </div>
    <div class=“search-results-pagination”>
    [searchwp_search_results_pagination direction=”prev” link_text=”Previous” var=”searchvar” engine=”custom”]
    [searchwp_search_results_pagination direction=”next” link_text=”Next” var=”searchvar” engine=”custom”]
    </div>
    [searchwp_search_form engine=”custom” var=”searchvar” button_text=”Custom Search”]

    <div class=”search-results-wrapper”>
    [searchwp_search_results engine=”custom” var=”searchvar” posts_per_page=4]
    <h2>[searchwp_search_result_link direct=”true”]</h2>
    [searchwp_search_result_excerpt]
    [/searchwp_search_results]
    </div>

    <div class=”no-search-results-found”>
    [searchwp_search_results_none]
    No results found, please search again.
    [/searchwp_search_results_none]
    </div>

    <div class=”search-results-pagination”>
    [searchwp_search_results_pagination direction=”prev” link_text=”Previous” var=”searchvar” engine=”custom”]
    [searchwp_search_results_pagination direction=”next” link_text=”Next” var=”searchvar” engine=”custom”]
    </div>

    [searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
       
    <div class="search-results-wrapper">
     [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4]
      <h2>[searchwp_search_result_link direct="true"]</h2>
      [searchwp_search_result_excerpt]
     [/searchwp_search_results]
    </div>
       
    <div class="no-search-results-found">
     [searchwp_search_results_none]
     No results found, please search again.
     [/searchwp_search_results_none]
    </div>
       
    <div class="search-results-pagination">
     [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"]
     [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
    </div>

    此代码会将您的自定义搜索表单添加到文章中,创建一个部分来显示搜索结果,如有必要显示无结果消息,并在结果进入多个页面时添加分页。

    如果您为搜索引擎指定了不同的名称,则需要engine=“custom”在四个位置更改为您自己的引擎名称。

    您还可以选择通过编辑将搜索按钮上的文本更改为更具描述性的内容button_text=“Custom Search”。其余代码可以保持不变。

    确保您单击发布或更新以保存您的文章并使其生效。

    编辑搜索短代码

    要查看正在运行的搜索表单,只需查看WordPress网站上的文章即可。这就是它在我们运行二〇二一主题的演示站点上的外观。

    自定义搜索框预览

    添加实时Ajax搜索

    实时Ajax搜索通过在用户键入查询时自动提供下拉搜索结果来改进您的搜索表单。

    实时搜索框预览

    将Ajax实时搜索添加到WordPress的最简单方法是免费的SearchWP Live Ajax Lite搜索插件,因为它会自动启用实时搜索。

    有关如何安装它的分步说明,请参阅我们关于如何将实时Ajax搜索添加到您的WordPress站点的指南

    使用SearchWP的高级设置

    现在您应该导航到设置 » SearchWP并单击Advanced选项卡。在此页面上,您可以启用一些设置,让您的用户更容易找到他们要查找的内容。

    SearchWP高级设置

    选中您想要的任何这些选项:

    • 部分匹配(Partial matches)还将显示与正在搜索的术语不完全匹配的结果。
    • Automatic “Did you mean?” corrections会建议一个略有不同的搜索词,以匹配您网站上的更多文章。
    • Support “quoted/phrase searches”将允许您的用户在搜索确切短语时使用引号。
    • Highlight terms in results将使您的访问者更容易在搜索结果中找到他们正在寻找的内容。

    设计搜索表单和结果页面

    您的WordPress主题控制您网站的外观,包括搜索表单和搜索结果页面。它们将WordPress网站所有元素的格式规则存储在CSS样式表中。

    您可以添加自己的自定义CSS来覆盖主题的样式规则。

    如果您以前没有这样做过,请参阅我们关于如何在WordPress中添加自定义CSS的文章。例如,这里有一些适用于大多数主题的自定义CSS。第一部分更改搜索表单的样式,第二部分自定义搜索结果。

    .searchform {
    font-family:arial;
    font-size:16px;
    background:#ace5e3;
    color:#ffffff;
    border:1px solid #61c3c0;
    padding:10px;
    height:90px;
    width:600px;
    }
    .search-results {
    font-family:arial;
    font-size:16px;
    background:#ace5e3;
    color:#000000;
    border:1px solid #61c3c0;
    padding:10px;
    width:600px;
    }
    .searchform {
    font-family:arial;
    font-size:16px;
    background:#ace5e3;
    color:#ffffff;
    border:1px solid #61c3c0;
    padding:10px;
    height:90px;
    width:600px;
    }

    .search-results {
    font-family:arial;
    font-size:16px;
    background:#ace5e3;
    color:#000000;
    border:1px solid #61c3c0;
    padding:10px;
    width:600px;
    }

    .searchform {
    font-family:arial;
    font-size:16px;
    background:#ace5e3;
    color:#ffffff;
    border:1px solid #61c3c0;
    padding:10px;
    height:90px;
    width:600px;
    }
     
    .search-results {
    font-family:arial;
    font-size:16px;
    background:#ace5e3;
    color:#000000;
    border:1px solid #61c3c0;
    padding:10px;
    width:600px;
    }

    您可以更改代码中的格式以适合您自己的站点。您还可以删除任何不想修改的行。例如,如果您不想更改搜索表单的高度和宽度,则只需删除这些行即可。

    以下是我们的演示网站在添加自定义CSS之前和之后的屏幕截图。

    自定义CSS样式展示

    衡量搜索结果和改善转化

    设置好自定义WordPress搜索表单后,下一步就是衡量结果。

    SearchWP带有一个搜索指标扩展,可以准确地显示您的网站搜索的执行情况。

    SearchWP搜索指标扩展

    您还可以使用搜索指标通过提升获得更多点击次数的结果来自动改进搜索结果。

    我们希望本教程能帮助您学习如何创建自定义WordPress搜索表单。

  • 如何为WordPress自定义文章类型创建高级搜索表单

    您想在WordPress中为自定义文章类型创建高级搜索表单吗?

    您可以通过在结果中添加包含您的自定义文章类型的搜索表单,为访问者提供更好的网站体验。

    在本教程中,我们将向您展示如何为WordPress自定义文章类型创建高级搜索表单。

    如何为WordPress自定义文章类型创建高级搜索表单

    为什么要为WordPress自定义文章类型创建高级搜索表单?

    如果您有许多不同的内容类型,那么自定义文章类型搜索表单可让您帮助访问者更轻松地找到最相关的内容。

    如果我们向每个页面添加自定义文章类型搜索表单,那么搜索结果将仅显示该类别的文章。

    这种自定义搜索可帮助您的访问者查看更多页面并在您的网站上停留更长时间,这会发出积极的WordPress SEO信号,例如较低的跳出率和增加的停留时间。

    话虽如此,让我们向您展示如何在WordPress中为自定义文章类型创建高级搜索表单。

    使用WordPress插件创建新的WordPress搜索算法

    为自定义文章类型创建高级搜索表单的最简单方法是使用SearchWP插件。它是30,000 多个网站使用的最佳WordPress搜索插件。

    它易于使用,并且让您可以完全控制您的WordPress搜索结果。

    您需要做的第一件事是安装并激活插件。激活后,您需要转到设置»SearchWP,然后单击“License”菜单选项。

    SearchWP插件激活

    然后,在“License”框中输入您的许可证密钥,然后单击“Activate”按钮。

    您可以在SearchWP网站上的帐户中找到此信息。

    完成后,您需要单击“Engines”菜单选项。

    SearchWP插件引擎设置

    这会将您带到一个屏幕,您可以在其中设置搜索引擎设置。可以把它想象成为您的网站创建自己的Google搜索算法。

    使用SearchWP,您需要先创建一个站点范围的搜索引擎,然后才能创建自定义文章类型搜索引擎,因此我们将首先执行此操作。

    您可以通过单击“Posts”、“Pages”、“Library”或其他自定义文章类型下拉菜单来调整搜索引擎设置。

    每个部分都有一个“Weight Multiplier”,它将改变搜索引擎对内容的排名方式。

    如果您希望搜索引擎重视页面标题高于内容,则相应地调整滑块。

    SearchWP插件搜索内容权重设置

    完成自定义默认搜索引擎设置后,请务必单击“Save Engines”按钮以创建您的第一个搜索引擎。

    现在您的初始搜索引擎已设置,是时候为您的自定义文章类型创建高级搜索表单了。

    添加仅限于单个自定义文章类型的高级搜索表单

    要创建自定义搜索框,我们将首先添加一个单独的搜索引擎,该引擎仅针对您想要的自定义文章类型。

    首先,导航到设置 » SearchWP,然后单击“Add New”按钮。

    SearchWP插件新增引擎

    这将自动创建一个新的独立搜索引擎。

    接下来,单击“Sources & Settings”按钮。

    SearchWP插件引擎内容源设置

    这将弹出一个弹出窗口,您可以在其中选择自定义搜索引擎的来源。

    只需取消选中您不想包含的来源的框即可。

    在此示例中,我们将只选中“Coupons”框,因为我们希望创建一个仅允许用户搜索我们的优惠券页面的搜索表单。

    您还需要为您的搜索引擎命名。记下“Engine Name”框中的名称,因为您将在稍后的步骤中用到它。

    自定义SearchWP插件引擎

    然后,单击“Done”按钮。

    完成后,单击“Save Engines”按钮以保存新的自定义文章类型搜索引擎。

    现在,您需要下载SearchWP简码扩展,以便轻松地将新的自定义文章搜索表单添加到WordPress。

    首先,前往SearchWP Shortcodes Extension网站,然后单击“Download available with active license”按钮。

    SearchWP Shortcodes Extension

    之后,您需要按照安装上述插件的相同方式安装和激活扩展。

    现在,您可以使用短代码创建新的自定义文章搜索表单页面。

    只需导航到Pages » Add New,然后为您的页面命名。

    之后,单击加号“Add Block”图标以显示块菜单。

    添加SearchWP短代码

    接下来,在搜索框中输入“HTML”。

    然后,选择“自定义HTML”区块。

    SearchWP短代码自定义

    完成后,您可以将以下短代码和HTML添加到您的页面。如果您需要更多帮助,请参阅我们关于如何在WordPress中添加短代码的教程。

    [searchwp_search_form engine=”coupon” var=”searchvar” button_text=”Find Results”]
    <div class=“search-results-wrapper”>
    [searchwp_search_results engine=”coupon” var=”searchvar” posts_per_page=4]
    <h2>[searchwp_search_result_link direct=”true”]</h2>
    [searchwp_search_result_excerpt]
    [/searchwp_search_results]
    </div>
    <div class=“no-search-results-found”>
    [searchwp_search_results_none]
    No results found, please search again.
    [/searchwp_search_results_none]
    </div>
    <div class=“search-results-pagination”>
    [searchwp_search_results_pagination direction=”prev” link_text=”Previous” var=”searchvar” engine=”my_test_engine”]
    [searchwp_search_results_pagination direction=”next” link_text=”Next” var=”searchvar” engine=”my_test_engine”]
    </div>
    [searchwp_search_form engine=”coupon” var=”searchvar” button_text=”Find Results”]

    <div class=”search-results-wrapper”>
    [searchwp_search_results engine=”coupon” var=”searchvar” posts_per_page=4]
    <h2>[searchwp_search_result_link direct=”true”]</h2>
    [searchwp_search_result_excerpt]
    [/searchwp_search_results]
    </div>

    <div class=”no-search-results-found”>
    [searchwp_search_results_none]
    No results found, please search again.
    [/searchwp_search_results_none]
    </div>

    <div class=”search-results-pagination”>
    [searchwp_search_results_pagination direction=”prev” link_text=”Previous” var=”searchvar” engine=”my_test_engine”]
    [searchwp_search_results_pagination direction=”next” link_text=”Next” var=”searchvar” engine=”my_test_engine”]
    </div>

    [searchwp_search_form engine="coupon" var="searchvar" button_text="Find Results"]
      
    <div class="search-results-wrapper">
     [searchwp_search_results engine="coupon" var="searchvar" posts_per_page=4]
      <h2>[searchwp_search_result_link direct="true"]</h2>
      [searchwp_search_result_excerpt]
     [/searchwp_search_results]
    </div>
      
    <div class="no-search-results-found">
     [searchwp_search_results_none]
     No results found, please search again.
     [/searchwp_search_results_none]
    </div>
      
    <div class="search-results-pagination">
     [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="my_test_engine"]
     [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="my_test_engine"]
    </div>

    上面的代码将添加您的搜索引擎,创建一个部分来显示搜索结果,必要时显示无结果消息,如果结果进入多个页面,则添加分页。

    您需要将引擎名称更改engine="coupon"为您自己的引擎名称。其余代码可以保持不变。

    指定SearchWP搜索引擎

    确保您单击“发布”或“更新”以保存您的页面并使其生效。

    您的自定义文章类型搜索引擎现已在您的网站上发布。

    WordPress自定义文章类型搜索框演示

    SearchWP是一个非常灵活和可定制的搜索插件。您还可以使用此插件添加实时Ajax搜索、创建按类别搜索功能等。

    我们希望本教程能帮助您了解如何为WordPress自定义文章类型创建高级搜索表单。

  • 如何将搜索栏添加到WordPress菜单

    默认情况下,WordPress允许您向网站侧边栏、页脚和其他小工具等区域添加搜索。但是,许多用户更喜欢在导航菜单中使用WordPress搜索框,因为它在顶部很容易引人注目。

    在本教程中,我们将向您展示如何在没有任何编码知识的情况下向WordPress菜单添加搜索栏。

    如何将搜索栏添加到WordPress菜单

    为什么要在WordPress导航菜单中添加搜索栏

    搜索栏使您的用户无需离开您的WordPress网站即可轻松找到他们正在寻找的内容。它有助于改善您网站上的用户体验并提高参与度。

    这就是大多数可用性专家建议在导航菜单中添加搜索选项的原因,以便用户可以轻松找到它。但是,默认的WordPress搜索小工具仅限于小工具区域(侧边栏)。

    幸运的是,有许多不同的WordPress搜索插件,可让您将搜索栏添加到网站上的不同位置,包括菜单。

    在本教程中,我们将使用免费的SearchWP Modal Search Form。它易于使用,适合任何主题,而且不会对您网站的性能产生负面影响。

    让我们步入正题,一起看看如何向WordPress导航菜单添加搜索栏。

    向WordPress导航菜单添加搜索栏

    您需要做的第一件事是安装并激活SearchWP Modal Search Form插件。

    激活后,您需要访问外观»菜单以将搜索页面添加到您的WordPress菜单。在那里,确保选择了主菜单。

    SearchWP Modal Search Form插件

    接下来,单击SearchWP Modal Search Form以显示菜单项的设置。请注意,插件已自动添加默认搜索模板。您应该选择它,然后单击“Add to menu”按钮。

    添加搜索栏至主题菜单

    新的Native WordPress Modal Search Form菜单项将添加到右列。您需要单击它以展开其设置。

    您需要将导航标签重命名为“搜索”,然后单击“保存菜单”按钮以保存设置。

    自定义菜单搜索栏

    您可以通过访问您的WordPress网站来查看新的搜索菜单项。弹出式搜索框将自动呈现您的主题外观,您可以在我们测试网站的这两个屏幕截图中看到。

    搜索栏效果展示

    添加Ajax支持的实时搜索

    通过使用Ajax技术添加实时搜索结果,我们可以使我们的搜索表单更加用户友好。这将在您的访问者键入查询时自动更新搜索结果。

    首先,您需要安装并激活SearchWP Live Ajax Search插件。

    一旦激活,插件将立即开始工作。它会自动将实时搜索结果添加到您的所有搜索表单中。

    要查看它的实际效果,只需访问您的WordPress网站并输入搜索查询即可。搜索结果将在您键入时出现。

    添加Ajax支持的实时搜索

    要更多地自定义您的搜索,请参阅我们关于如何使用SearchWP改进WordPress搜索的教程。希望本教程能帮助您了解如何向WordPress菜单添加搜索栏。

  • 如何添加代码片段粘贴至WordPress网站

    在WordPress主题文件中复制和粘贴代码对于有经验的用户来说似乎很容易,但对于初学者来说可能会比较折腾。

    在本教程中,我们将向您展示如何在不破坏您的网站的情况下从网络复制和粘贴代码片段到WordPress。

    如何添加代码片段粘贴至WordPress网站

    为什么要向WordPress网站添加代码片段?

    由于其提供的灵活性,WordPress是世界上最好的网站开源系统之一。向您的站点添加新特性和功能非常容易,并且可以帮助构建几乎任何类型的网站。

    我们分享了各种提示和技巧,您可以使用它们来改善您的网站。其中一些提示会要求您向WordPress添加代码。

    虽然向您的网站添加自定义代码片段是可选的,而且您经常可以找到插件来完成相同的任务,但有时一个简单的代码片段会更有效。

    通常,添加代码片段是修复许多常见WordPress错误、提高WordPress安全性以及向网站添加新功能的简单方法。

    话虽如此,让我们来看看如何安全地将代码片段添加到您的WordPress网站中。

    在WordPress中添加代码片段的最佳方法是什么?

    值得一提的是,在开始向WordPress网站添加代码片段之前,您应该安装并使用WordPress备份插件

    这可以确保您的WordPress站点安全,并且您可以随时从备份中恢复它,以防出现任何问题。

    当添加片段到WordPress,你会发现说明将它们添加到WordPress主题模板文件,如index.phpsingle.php等。

    这些片段仅对那些特定的主题文件有用,因此您必须直接添加它们或创建子主题

    但是,大多数代码片段将添加到您的WordPress主题的functions.php文件中。一些教程可能会建议将其直接添加到文件中,但有更好的替代方法可以让您的更改在未来得到验证。

    这样,即使您更改了主题,也不会删除您的自定义功能。

    话虽如此,让我们来看看在WordPress中添加自定义代码片段的一些最适合初学者的方法。

    1. 使用代码片段WordPress插件

    代码片段WordPress插件

    使用代码片段插件是将代码添加到 WordPress 的最安全且对初学者最友好的方式。

    Code Snippets插件,您可以在您的网站添加和管理自定义代码片段容易。

    它带有一个故障安全开关,如果它导致错误,它会立即停用代码片段。这可以防止您在添加自定义代码片段时无法访问您的网站。

    注意:代码片段方法对于需要添加到functions.php文件中的片段很有用。如果要求您在其他主题文件中添加代码片段,则此方法将不起作用。

    2. 创建子主题以保存自定义代码

    创建子主题以保存自定义代码

    将代码添加到WordPress的另一个好方法是创建WordPress子主题。使用子主题将有助于在更新主题时保持对网站所做的任何更改完整无缺。

    有关更多详细信息,请参阅有关如何在WordPress中创建子主题的初学者指南。

    注意:此方法也适用于需要添加到其他主题模板文件中的代码片段。

    3. 为自定义代码使用特定于站点的插件

    为自定义代码使用特定于站点的插件

    另一个灵活的选择是使用特定于站点的WordPress插件。这是一个自定义插件,您可以为自己的网站创建并用于保存所有自定义代码。

    这种方法的优点是您的代码不依赖于您的主题,即使您更改主题,它也会保持活动状态。它也不受您网站上任何WordPress更新的影响。

    注意:此方法仅适用于需要添加到functions.php文件中的代码片段。

    4.使用Insert Headers and Footers插件添加自定义代码

    Insert Headers and Footers插件添加自定义代码

    有时您可能只需要将代码添加到您的主题header.phpfooter.php文件中。将Insert Headers and Footers插件可以帮你轻松做到这一点。

    当您需要将Google Analytics、Facebook Pixel、Google AdSense等的跟踪代码添加到您的网站时,这会派上用场。

    此外,它还可以让您在一个地方管理所有页眉和页脚代码,防止任何手动错误,并让您无需担心升级或更改主题。

    注意:此方法最适合跟踪脚本、自定义CSS和Javascript代码。

    4.直接在Functions.php文件中添加代码

    在Functions.php文件中添加代码

    最后,可以将代码片段直接添加到主题functions.php文件中。但是,我们建议使用上面的其他选项,因为有一些缺点。

    首先,如果您更新WordPress主题,那么您的所有更改都将消失。

    接下来,您添加的代码仅在您使用该特定主题时才有效。

    话虽如此,让我们来看看如何正确复制和粘贴代码片段并避免破坏您的网站。

    如何编辑和添加代码到WordPress文件

    根据您选择在WordPress博客或网站上添加自定义代码片段的方法,有多种编辑WordPress文件的方法。

    1. 在Code Snippets插件中添加自定义代码

    如果您打算使用Code Snippets插件向WordPress添加代码,那么您将直接在WordPress管理仪表盘中添加代码。

    首先,您需要安装并激活插件。激活后,只需转到WordPress 管理仪表板中的Snippets » Add New

    这会将您带到一个界面,您可以在其中添加自定义代码。您所要做的就是为您的代码片段命名以帮助您记住,然后将您的代码粘贴到框中。

    在Code Snippets插件中添加自定义代码

    然后,单击“Activate”按钮,您的代码段将在您的网站上生效。

    有关详细说明,请参阅有关如何在WordPress中轻松添加自定义代码片段的教程。

    2. 在特定站点的WordPress插件中添加自定义代码

    如果您使用的是特定于站点的插件,那么您可以使用内置的WordPress插件编辑器来添加您的自定义代码。

    首先,您需要转到插件»插件编辑器,然后从标有“选择要编辑的插件:”的下拉菜单中选择您的插件。

    编辑器将加载您的站点特定插件。然后,您可以简单地向页面添加代码。

    插件编辑器

    完成后,请务必单击“更新文件”按钮以保存更改。

    如果您的代码中缺少某些内容或可能破坏您的网站,那么插件编辑器将自动撤消您的更改。

    将自定义代码添加到特定于站点的插件的另一种方法是使用FTP。

    只需使用您首选的FTP客户端打开您的网站,然后右键单击插件文件并选择“查看/编辑”选项。

    FTP编辑插件代码

    这将打开文件,以便您可以添加代码片段。当您再次保存并上传文件时,更改将自动显示。

    3. 使用Insert Headers and Footers插件添加自定义代码

    如果您打算使用Insert Headers and Footers插件来添加代码片段,那么您可以直接从WordPress管理面板执行此操作。

    首先,您需要安装并激活插件。之后,您可以转到设置»Insert Headers and Footers,然后将您的代码片段输入到您网站的页眉、正文或页脚部分。

    Insert Headers and Footers插入代码片段

    确保您点击“保存”按钮,您的代码片段就会出现在您的网站上。

    有关更多详细信息,请参阅有关如何在WordPress中添加页眉和页脚代码的指南。

    4.向Functions.php或其他主题模板添加自定义代码

    如果您将代码片段直接添加到主题functions.php文件或任何其他页面模板,则可以通过导航到WordPress 管理面板中的外观»主题编辑器来添加代码。

    然后,您可以从右侧栏中选择该文件,它将在编辑器中打开。

    主题编辑器添加代码片段

    您所遵循的教程将告诉您可以在何处添加代码片段,但如果没有,则需要在文件底部的所有现有代码下方添加代码。

    另一种选择是使用WordPress托管文件管理器的FTP将自定义代码添加到您的主题文件。

    只需将您的FTP客户端连接到您的网站,然后转到wp-content » themes » your-theme-folder并右键单击需要编辑的文件。

    FTP编辑主题文件

    然后,单击“查看/编辑”选项以在文本编辑器中打开文件并添加您的代码片段。

    添加自定义代码时对PHP错误进行故障排除

    初学者在将自定义代码片段添加到他们的WordPress网站时会犯一些常见的错误。幸运的是,大多数这些错误都可以轻松避免和修复。

    让我们来看看这些错误以及修复它们的最佳方法。

    1. PHP开始和结束标签的错误使用

    WordPress主要是用PHP编程语言编写的,它有一个特定的语法,告诉您的服务器以下代码需要由PHP处理。下面是一个典型的PHP代码片段:

    // PHP Begin Tag
    <?php
    // Rest of the code goes here
    // PHP End Tag
    ?>
    // PHP Begin Tag
    <?php

    // Rest of the code goes here

    // PHP End Tag
    ?>

    // PHP Begin Tag
    <?php
     
    // Rest of the code goes here
     
    // PHP End Tag
    ?>

    您所有的PHP代码都需要在<?php?>标签内。

    PHP结束标记在PHP和HTML之间来回切换的文件中非常重要。这包括大多数使用PHP标签和HTML的WordPress主题文件。

    您需要确保如果您将代码粘贴到PHP开始标记未关闭的位置,那么您需要添加不带PHP开始标记的代码。

    <?php
    // Some pre-existing code
    // your custom code
    ?>
    <?php
    // Some pre-existing code

    // your custom code

    ?>

    <?php 
    // Some pre-existing code
     
    // your custom code
     
    ?>

    如果您将自定义代码粘贴到PHP结束标记之外或之后,则还需要添加PHP开始标记。

    <?php
    // Some pre-existing code
    ?>
    // Your custom code snippet
    <?php
    ?>
    <?php
    // Some pre-existing code
    ?>

    // Your custom code snippet
    <?php

    ?>

    <?php 
    // Some pre-existing code 
    ?> 
     
    // Your custom code snippet
    <?php 
     
    ?>

    几乎90%的错误都是由PHP开始或结束标记的错误放置引起的。查看您的代码将帮助您了解是否需要在自定义代码片段中添加PHP开始或结束标记。

    但是,许多WordPress主题文件functions.php可能根本没有PHP结束标记。这意味着您可以在文件底部添加代码而无需开始或结束标记。

    下面是一个示例。

    <?php
    // Lots of code in your theme’s functions.php file
    //
    //
    // Your custom code
    function custom_loginlogo() {
    echo ‘<style type=”text/css”>
    h1 a {background-image: url(‘.get_bloginfo(‘template_directory’).‘/images/login_logo.png) !important; }
    </style>’;
    }
    add_action(‘login_head’, ‘custom_loginlogo’);
    <?php
    // Lots of code in your theme’s functions.php file
    //
    //
    // Your custom code
    function custom_loginlogo() {
    echo ‘<style type=”text/css”>
    h1 a {background-image: url(‘.get_bloginfo(‘template_directory’).’/images/login_logo.png) !important; }
    </style>’;
    }
    add_action(‘login_head’, ‘custom_loginlogo’);
    <?php
    // Lots of code in your theme's functions.php file
    //
    //
    // Your custom code
    function custom_loginlogo() {
    echo '<style type="text/css">
    h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
    </style>';
    }
    add_action('login_head', 'custom_loginlogo');

    请记住,某些教程可能假定您已经知道如何使用 PHP 开始和结束标记。因此,他们可能只是向您展示一个没有这些标签的代码片段。

    function custom_loginlogo() {
    echo ‘<style type=”text/css”>
    h1 a {background-image: url(‘.get_bloginfo(‘template_directory’).‘/images/login_logo.png) !important; }
    </style>’;
    }
    add_action(‘login_head’, ‘custom_loginlogo’);
    function custom_loginlogo() {
    echo ‘<style type=”text/css”>
    h1 a {background-image: url(‘.get_bloginfo(‘template_directory’).’/images/login_logo.png) !important; }
    </style>’;
    }
    add_action(‘login_head’, ‘custom_loginlogo’);
    function custom_loginlogo() {
    echo '<style type="text/css">
    h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
    </style>';
    }
    add_action('login_head', 'custom_loginlogo');

    有时,当给出代码片段时,它们可以添加到多个位置,因此不会包含PHP结束和开始标记。

    当您在主题文件中添加这样的代码片段时,您需要确保它位于PHP标签内。

    2. 不正确的嵌套错误

    PHP对函数、条件逻辑和循环有特定的语法。此语法依赖于指示函数何时开始和何时结束的大括号。

    例如,这是一个简单的PHP函数:

    <?php
    function wbolt_tutorial() {
    echo “Hello World!”;
    }
    ?>
    <?php
    function wbolt_tutorial() {
    echo “Hello World!”;
    }
    ?>
    <?php 
    function wbolt_tutorial() { 
    echo "Hello World!"; 
    } 
    ?>

    现在如果你想添加一个与这个函数无关的自定义代码片段,那么你需要把它放在这个函数之外,如下所示:

    // Pre-existing code in your theme file
    <?php
    function wbolt_tutorial() {
    echo “Hello World!”;
    }
    // Your custom code
    function custom_loginlogo() {
    echo ‘<style type=”text/css”>
    h1 a {background-image: url(‘.get_bloginfo(‘template_directory’).‘/images/login_logo.png) !important; }
    </style>’;
    }
    ?>
    // Pre-existing code in your theme file
    <?php
    function wbolt_tutorial() {
    echo “Hello World!”;
    }
    // Your custom code
    function custom_loginlogo() {
    echo ‘<style type=”text/css”>
    h1 a {background-image: url(‘.get_bloginfo(‘template_directory’).’/images/login_logo.png) !important; }
    </style>’;
    }
    ?>
    // Pre-existing code in your theme file
    <?php
    function wbolt_tutorial() { 
    echo "Hello World!"; 
    } 
    // Your custom code 
    function custom_loginlogo() {
    echo '<style type="text/css">
    h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
    </style>';
    }
    ?>

    如果你错过了开始或结束的大括号,那么这将破坏代码,你最终会得到一个错误页面。

    了解WordPress中的PHP错误

    由于向WordPress添加自定义代码而导致的错误通常会导致详细的错误消息。其中大部分是由于意外字符导致的语法错误、解析错误或致命错误

    好消息是这些错误会告诉您代码中的哪一行导致了错误。

    WordPress报错排查

    然后,您可以转到确切的行查看代码并找出您遗漏了什么。

    为此,我们建议使用适当的文本编辑器进行代码编辑,因为它们具有行号和语法突出显示,可以帮助您轻松解决问题。

    当您的WordPress网站无法访问时该怎么办?

    首先,不要惊慌。您网站的所有文件仍然存在,您可以访问它们。

    只需使用FTP客户端或WordPress 托管帐户中cPanel中的文件管理器应用程序连接到您的网站。

    接下来,找到您添加了导致错误的代码的文件,然后打开它进行编辑。

    然后,您可以尝试使用代码段修复问题。如果您无法解决这些问题,只需删除您添加的代码片段并保存更改即可。

    现在,您的网站应该会再次恢复正常。如果它仍然显示一些错误,请下载您的WordPress主题的新副本并将zip文件解压缩到您的计算机。

    之后,找到您之前进行更改的文件,并在覆盖旧文件的同时将其上传到您的服务器。

    有关解决这些问题的更多方法,请参阅我们关于最常见的WordPress错误以及如何修复它们的指南

    最后,我们希望本教程能帮助您了解如何将代码片段粘贴到WordPress中。

  • 如何为您的WordPress网站添加自定义代码

    常在阅读WordPress教程时,您可能会被要求在主题的functions.php文件或特定于站点的插件中添加自定义代码片段。问题是,即使是最轻微的错误也会破坏您的网站。在本文中,我们将向您展示一种在WordPress中添加自定义代码而不会破坏您的网站的简单方法。

    如何为您的WordPress网站添加自定义代码

    自定义代码片段的问题

    通常,您会在WordPress教程中找到代码片段,其中包含将它们添加到主题的functions.php文件或站点特定插件中。

    问题是,即使自定义代码片段中的一个小错误也可能破坏您的WordPress网站并使其无法访问。

    另一个问题是,如果您在特定于站点的插件中添加多个代码片段,则管理文件会变得困难。

    最近在寻找解决方案时,我们发现用户可以轻松地在WordPress中添加和管理自定义代码片段。

    在WordPress中添加自定义代码片段

    您需要做的第一件事是在您的网站上安装并激活Code Snippets插件。

    激活后,该插件会在您的WordPress管理栏中添加一个标有Snippets的新菜单项。单击它会显示您保存在网站上的所有自定义代码片段的列表。

    由于您刚刚安装了插件,因此您的列表将为空。

    继续并单击“安装插件”按钮以在WordPress中添加您的第一个自定义代码片段。

    Snippets代码片段插件

    这会将您带到“Add New Snippet”页面。

    您需要首先输入自定义代码片段的标题。这可以是任何可以帮助您识别代码的东西。之后,您可以将代码片段复制并粘贴到代码框中。

    添加代码片段

    在上面的屏幕截图中,我们添加了一个自定义代码片段以从我们的测试站点中删除WordPress版本号

    function wpb_remove_version() {
    return ;
    }
    add_filter(‘the_generator’, ‘wpb_remove_version’);
    function wpb_remove_version() {
    return ”;
    }
    add_filter(‘the_generator’, ‘wpb_remove_version’);
    function wpb_remove_version() {
    return '';
    }
    add_filter('the_generator', 'wpb_remove_version');

    在代码框下方,您将看到一个用于添加描述的文本区域。您可以在此处添加任何内容,以帮助您了解此代码的作用、您在何处找到它以及将其添加到网站的原因。

    代码片段描述

    您还可以为代码片段分配标签。这将帮助您按主题和功能对代码片段进行排序。

    最后,您可以单击“Save Changes and Activate”按钮。

    如果您只想保存代码片段而不激活它,那么您可以单击“Save Changes”按钮。

    您还可以更改代码片段的范围。您只能在WordPress管理后台、网站前端或任何地方运行它。如果您不确定,请保持选中默认的“Run snippet everywhere”选项。

    保存并激活代码段后,它将立即在您的网站上生效。

    处理自定义代码中的错误

    通常,如果您在特定于站点的插件或主题文件中添加自定义代码时出错,它会立即使您的站点无法访问。

    您会开始在您的站点上看到语法错误500内部服务器错误。要解决此问题,您需要使用FTP客户端手动撤消您的代码。

    Code Snippets插件的巧妙之处在于它会自动检测代码中的语法错误并立即停用它。

    处理自定义代码中的错误

    它还会向您显示有用的错误消息,以便您可以调试错误。

    管理您的自定义代码片段

    Code Snippets插件提供了一个更简单的图形用户界面来管理您在WordPress中的自定义代码片段。

    您可以保存代码片段而无需在您的网站上激活它们。您可以随时停用该代码段。您还可以导出特定的代码片段或批量导出所有代码片段。

    导出代码片段

    如果您要将网站移动到不同的服务器,您可以通过访问Snippets » Import页面,使用代码片段插件轻松导入代码片段。

    导入代码片段

    Code Snippets插件开箱即用,但您可以通过访问Snippets » Settings页面来调整插件设置。

    Code Snippets插件设置

    我们希望本文能帮助您了解如何在WordPress中轻松添加自定义代码。想在您的网站上试验一些代码片段吗?查看我们的关于WordPress函数文件详细介绍文章。

  • 如何自定义WordPress网站RSS Feed页脚内容

    您可以在RSS Feed中的文章内容下方添加自定义文本、链接甚至广告。在本教程中,我们将介绍如何在WordPress中轻松控制RSS Feed页脚,以便您可以显示所需的内容。

    如何自定义WordPress网站RSS Feed页脚内容

    为什么要在WordPress的RSS Feed页脚中添加内容?

    RSS Feed为用户提供了一种更简单的方式,可以在他们最喜欢的提要阅读器应用程序(例如Feedly)中阅读您的博客文章。

    但是,内容抓取工具也可以使用RSS Feed在您的博客文章发布后立即自动采集它们。

    有时,这些内容采集工具最终在搜索引擎中的排名高于您的原始文章。

    要了解更多信息,请参阅我们在WordPress中防止博客内容被抓取采集的教程。

    向RSS Feed页脚添加其他内容允许您在每篇文章的末尾添加指向主站点和原始文章的反向链接。这可以帮助您在文章中获得更高的排名,即使它们被内容抓取工具复制。

    通过操作您的RSS Feed页脚,您还可以让您的读者直接从RSS Feed访问您的WordPress博客。

    话虽如此,让我们来看看如何在 WordPress 中轻松控制您的 RSS 提要页脚。

    方法 1. 使用多合一 SEO将内容添加到RSS Feed页脚

    这种方法更简单,推荐给所有 WordPress 用户。它使用多合一SEO插件,这是最佳WordPress SEO插件之一。

    首先,您需要安装并激活多合一SEO插件。激活后,您需要访问All in One SEO » General Settings页面,然后单击“RSS Content”选项卡。

    这为您提供了WordPress RSS Feed设置和RSS Feed链接的概览。

    All in One SEO常规设置

    在“RSS Content Settings”下,第一个框允许您在每个文章之前添加内容。第二个框允许您向文章页脚添加内容。

    接下来,向下滚动到“RSS After Content”部分以编辑您的RSS Feed页脚。

    RSS Feed页脚内容设置

    马上,您会注意到AIOSEO会在RSS Feed页脚中自动添加带有反向链接的版权所属文本到您的网站。

    您可以按原样使用文本,也可以添加自己的内容和标签。

    自定义RSS Feed页脚内容

    在退出屏幕之前,不要忘记单击“保存更改”。

    您现在可以查看您的RSS Feed以查看更改。在每篇文章的末尾,您将能够看到您添加到RSS Feed页脚的内容。

    RSS Feed页脚内容自定义示例

    方法 2:在WordPress中手动将内容添加到RSS Feed页脚

    此方法要求您将代码添加到WordPress文件中。如果您以前没有这样做过,请查看我们的指南,了解如何在WordPress中复制和粘贴代码

    您需要将以下代码复制并粘贴到主题的functions.php文件、特定于站点的插件中或使用代码片段插件

    function wpb_feed_filter($query) {
    if ($query->is_feed) {
    add_filter(‘the_content’,‘wpb_feed_content_filter’);
    add_filter(‘the_excerpt_rss’,‘wpb_feed_content_filter’);
    }
    return $query;
    }
    add_filter(‘pre_get_posts’,‘wpb_feed_filter’);
    function wpb_feed_content_filter($content) {
    // Content you want to show goes here
    $content .= ‘<p>Thanks for reading, check out <a href=”‘. get_bloginfo(‘url’) .‘”>’. get_bloginfo(‘name’) .‘</a> for more awesome stuff.</p>’;
    return $content;
    }
    function wpb_feed_filter($query) {
    if ($query->is_feed) {
    add_filter(‘the_content’,’wpb_feed_content_filter’);
    add_filter(‘the_excerpt_rss’,’wpb_feed_content_filter’);
    }
    return $query;
    }
    add_filter(‘pre_get_posts’,’wpb_feed_filter’);

    function wpb_feed_content_filter($content) {
    // Content you want to show goes here
    $content .= ‘<p>Thanks for reading, check out <a href=”‘. get_bloginfo(‘url’) .’”>’. get_bloginfo(‘name’) .'</a> for more awesome stuff.</p>’;
    return $content;
    }

    function wpb_feed_filter($query) {
    if ($query->is_feed) {
    add_filter('the_content','wpb_feed_content_filter');
    add_filter('the_excerpt_rss','wpb_feed_content_filter');
    }
    return $query;
    }
    add_filter('pre_get_posts','wpb_feed_filter');
      
    function wpb_feed_content_filter($content) {
    // Content you want to show goes here 
    $content .= '<p>Thanks for reading, check out <a href="'. get_bloginfo('url') .'">'. get_bloginfo('name') .'</a> for more awesome stuff.</p>';
    return $content;
    }

    此代码仅检查请求的页面是否为RSS Feed,然后过滤内容以在RSS Feed页脚中显示您的消息。

    我们希望本教程能帮助您了解如何在WordPress中控制RSS Feed页脚。您可能还想进一步了解如何为WordPress设置多合一SEO插件以及最佳RSS Feed插件推荐清单