Tag: WordPress子主题教程

  • 如何编辑和优化WordPress子主题模板文件及功能(详细教程)

    如何编辑和优化WordPress子主题模板文件及功能(详细教程)

    我们这期的教程还是关于子主题的。我们前面讲了怎么创建子主题。现在,我们看看怎么编辑子主题的模板文件怎么向子主题添加新功能以及怎么解决一些 WordPress 子主题的问题

    如何编辑子主题的模板文件

    大多数 WordPress 主题都有模板,这些模板是控制主题内特定区域设计和布局的主题文件。例如,页脚部分通常由 footer.php 文件处理,而页眉则由 header.php 文件处理。

    每个 WordPress 主题也有不同的布局。例如,Twenty Twenty-One 主题有页眉、内容循环、页脚小部件区域和页脚。

    如果想修改模板,那么必须在父主题文件夹中找到该文件并将其复制到子主题文件夹中。之后,打开该文件并进行所需的修改。

    本案列父主题是 Twenty Twenty-One,可以转到/wp-content/themes/twentytwentyone文件管理器。然后,右键单击模板文件(如 footer.php)并选择“复制”。

    图片[1]-361Sale WordPress Care

    之后,输入子主题的文件路径

    完成后,单击“复制文件”即可。

    图片[2]-361Sale WordPress Care

    然后会被重定向到文件路径。

    编辑 footer.php文件,右键单击文件并选择“编辑”。

    图片[3]-361Sale WordPress Care

    例如:我们会从页脚区域删除“Proudly powered by WordPress’”链接,并在那里添加版权声明。

    操作也简单,删除<div class= "powered-by">标签之间的所有内容:

    <div class="powered-by">
                    <?php
                    printf(
                        /* translators: %s: WordPress. */
                        esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
                        '<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
                    );
                    ?>
                </div><!-- .powered-by -->

    然后粘贴在下面示例中的那些标签下找到的代码:

    <div class="powered-by">
    <p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
    </div><!-- .powered-by -->

    现在应该在文本编辑器中看到这些内容:

    图片[4]-361Sale WordPress Care

    继续并保存文件使更改生效。

    之后,刷新并访问网站前端即可查看新的版权声明

    图片[5]-361Sale WordPress Care

    如何向子主题添加新功能

    主题中的functions.php文件使用 PHP 代码添加功能或更改 WordPress 网站上的默认功能。它就像 WordPress 网站的插件一样,会随当前的主题自动激活。

    我们前面的很多 WordPress 教程需要将代码片段复制并粘贴到 functions.php 中。但是,如果将修改添加到父主题,那么主题更新时,文件都会被覆盖。

    这也是为什么我们建议在添加自定义代码片段时使用子主题。在本教程中,我们会向主题添加一个新的小部件区域。

    我们可以通过将此代码片段添加到子主题的 functions.php 文件中来实现这一点。为了安全起见,我们一直建议使用WPCode插件,尤其是对于新手来说,这样就不用直接编辑 functions.php 文件,从而降低很多风险。

    下面是添加 functions.php 文件需要的代码:

    // Register Sidebars
    function custom_sidebars() {
     
    $args = array(
    'id'            => 'custom_sidebar',
    'name'          => __( 'Custom Widget Area', 'text_domain' ),
    'description'   => __( 'A custom widget area', 'text_domain' ),
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    );
    register_sidebar( $args );
     
    }
    add_action( 'widgets_init', 'custom_sidebars' );

    保存文件后,可以访问WordPress 仪表盘的外观»小部件页面。

    在这里,能看到可以添加小部件的新自定义小部件区域。

    图片[6]-361Sale WordPress Care

    可以使用自定义代码片段将许多其他功能添加到主题中。

    怎么解决 WordPress 子主题的问题

    如果以前从没有创建过子主题,遇到错误也不要慌,这也是正常的。所以,为了保险起见,我们一直是建议使用备份插件备份网站数据部署一个新演示站点

    如果出现问题,可以随时重新开始。例如,如果不小心删除了父主题所需的某些内容,那么只需从子主题中删除该文件并重新开始即可。

    而且WordPress 社区和我们站点资源丰富,无论你遇到什么问题,都有解决方法。解决不了的,也可以找专业的团队帮你搞定它!