乌海网站开发:WordPress主题定制基本指南

主题太棒了!您不需要构建和维护数千行代码,其他人已经为您完成了。主题使您的网站看起来很棒,并提供您需要的独特功能。优质的主题,如我们提供的那些,在布局,集成和导航方面给你足够的灵活性。

尽管如此,所有的主题都是模板。他们试着对尽可能多的人有用,但他们不能满足每一个小细节。这就是主题定制出现的地方。通过使用子主题,您可以向主题中添加少量代码(或大块代码),而不会丢失要更新的选项。

在本文中,乌海网站开发将介绍一些您可能希望完成的常见修改,以及如何进行这些修改。我将主要关注如何处理比实际使用的代码更重要的操作。我会用迪维作为一个例子,这里的方法可以应用于任何主题。我们跳进去!

创造一个儿童主题

第一步应该是创建一个子主题。如果您计划进行任何定制,那么您应该从一开始就创建一个子主题开始。

子主题是依赖于父主题存在的主题。他们尽可能多地借用父主题的功能。您的工作是在需要时覆盖部分功能。

若要创建子主题,请在wp-content/themes目录。你可以给它起任何你想要的名字,我给它起名字divi-child。在此文件夹中创建两个文件:style.cssfunctions.php。在样式表中,粘贴下面的代码:

/*
Theme Name: My Divi Child Theme
Theme URI: http://mydomain.com/
Version: 1.0
Description: A customized version of Divi which adds a number of tiny features I need.
Author: Your Name
Author URI: http://www.yourwebsite.com
Template: Divi
*/

下一步是确保在子主题中使用父主题的样式。在过去,将其包含在样式表中是司空见惯的事情。这不是推荐的方法,您应该在函数文件中对父样式表进行排队,如下所示:

<?php
add_action( 'wp_enqueue_scripts''my_enqueue_assets' );
function my_enqueue_assets() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

如果您访问管理中的外观部分,您应该会看到您的新主题列出。您现在可以激活它并访问前端。结果应该与父主题完全相同。在这个阶段,所有的东西都由父主题处理,所有的文件,所有的视图,所有的样式都来自那里。

儿童主题的快速入门

如果您以前从未使用过子主题,这里有一个关于如何使用它们的快速指南。使用子主题时,所有功能都是从父主题继承的。这意味着,除非在子主题中另有规定,否则所有元素都将从父主题中提取。

可以使用三种方法来修改父主题的功能:

  • 覆盖整个文件

  • 创建附加样式

  • 使用钩

如果您想要进行结构更改,例如将标题移至特征图像下面,则通常选择覆盖整个文件的方法。如果你需要做一些简单的CSS更改,让主题做你的出价,创建额外的样式是要走的路。这可以包括从修改侧边栏位置到重新着色元素。

只要有可能,就应该使用钩子,因为它们提供了进行更改的最模块化的方式。如果你不熟悉钩子,暂时不要担心。钩子可以改变功能,如节选长度,图像输出和许多其他默认的WordPress功能。

这些规则有一个例外,函数文件。子函数文件不覆盖父母的。首先加载子函数文件,然后加载父函数文件。

主题定制示例

乌海网站开发有了上面的知识,让我们对Divi做一些修改。我会尽我所能,确保我能解释我曾经想过的思想过程。多么,怎样修改某物。实际使用的代码不太重要,但我当然也会这样做。

侧栏定位

divi允许您在任何页面(包括WooCommerce页面)上更改侧栏的位置,但是没有内置的设置来修改默认博客页面上的侧栏位置。这实际上是修改功能的第一步:确保没有内置的方法来实现它。

由于我知道我是多么容易出错,我使用了另一种方法,以确保这需要一个子主题修改。我假设主题将使用应用于侧栏容器的类来修改位置。使用ChromeDeveloper工具,我查看了侧栏元素(#sidebar)。它没有任何定位类,但我在Developer工具侧边栏中找到了解决方案,它显示了应用于此元素的CSS规则:

Chrome开发工具中侧边栏的定位规则

全班et_right_sidebar添加到body元素中。如果您查看侧边栏位于左侧的页面,则可以看到et_left_sidebar被利用了。这是完美的,因为它可以被修改,而不需要修改任何模板文件。

添加到主体的类可以通过body_class钩子。中可以看到添加自己的类的主题。functions.php第1313-1346行在撰写本报告时。这,这个,那,那个et_divi_sidebar_class()函数被链接到body_class钩子。

要修改这种行为,我们需要做的是将我们自己的功能挂在这个钩子上。打开子主题中的函数文件,让我们创建我们的钩子函数。

add_filter( 'body_class''divi_child_body_classes', 20 );
function divi_child_body_classes() {

}

如果主题显示主博客页面,我们希望为左侧定位的侧边栏添加类。这可以通过is_home()函数,它在显示主博客索引时返回true。

以防万一,我们将确保删除可能的右侧侧边栏类,然后添加自己的类。以下是如何:

add_filter( 'body_class''divi_child_body_classes', 20 );
function divi_child_body_classes( $classes ) {

    if( is_home() ) {
        $key array_search'et_right_sidebar'$classes );
        if( !empty$key ) ) {
            unset( $classes[$key] );
        }

        $classes[] = 'et_left_sidebar';
    }

    return $classes;
}

这一功能很好,因为它表明需要在钩子中确定优先次序。如果不添加20作为优先级,则此函数将无法工作。还记得我们是如何讨论父函数文件是在子函数文件之后加载的吗?如果您不添加优先级,您的函数将首先执行,然后是父函数,这将导致添加重复的类。

取代标题和特色形象

让我们看一个需要修改文件的示例。Divi中的一个帖子页面显示标题、元数据和另一个下面的特征图像。在上面显示特征图像怎么样?

要做到这一点,我们需要复制single.php从父主题到子主题的文件。从现在开始single.php子主题中的文件将负责单个POST页面,而不是父主题。

首先,让我们找到我们需要的元素。标题显示在第11行。the_title()函数,则元数据将使用et_divi_post_meta()函数在第16行。缩略图需要更多的代码,显示它的最后一行是在第38行。

解决这个问题的方法是将第11行和第16行剪短,并将其粘贴到div之前,并使用.entry-content。以下是它的外观:

<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>
<?php
    if ( ! post_password_required() ) :
    // Other code here
?>
<h1><?php the_title(); ?></h1>
<?php et_divi_post_meta() ?>

<div class="entry-content">

这是一个很好的结构,我们所需要做的就是在图像上增加一点空白,以使其空间缩小一些。我认为使用与主题相同的保证金是明智的。为了解决这个问题,我看了源代码,特别是元素的底部边距。

乌海网站开发

图像、标题和元数据的源代码。

最后,我将删除元素的边距,并将其添加到title元素中:

.post > h1 {
    margin-top:6px;
}

.et_pb_post .post-meta {
    margin-bottom:0px;
}

如果你想知道我为什么用.post > h1而不是.post h1这和继承有关。如果我们使用更晚的版本,文章中的所有1级标题都将有6PX的最高页码。防止h1继承这些规则的POST内容中的元素,我只确保h1元素是主POST元素的直接后代,具有新的边距。

标题和元数据位于顶部的图像

更改Widget标题样式

小部件标题样式

让我们看看一个纯粹的CSS变化,以完善我们的主题修改知识。左边的屏幕截图显示了底部的原始标题样式,顶部显示了我们修改过的样式。

为了进行此更改,我修改了背景颜色、边框、填充、字体大小和样式以及边距。我使用黑色与不透明度,而不是特定的阴影,以确保它看起来好,独立于背景色。

请注意,每个小部件类型都有一个特定的类,您可以使用这个类来不同的样式。例如,若要仅对最近的注释小部件标题使用不同的样式,可以使用.widget_recent_comments h4.widgetitle。下面,我以同样的方式对所有小部件标题进行了样式设计:

h4.widgettitle {
background: rgba(0,0,0,0.02);
border-left4px solidrgba(0,0,0,0.1);
padding7px 0 7px 11px;
font-size16px;
text-transformuppercase;
letter-spacing1px;
margin-bottom11px;
}

概述

我们乌海网站开发已经完成了三种基本的主题定制方法:使用钩子、覆盖文件和修改样式规则。记住,钩子是最灵活和模块化的,在可能的情况下使用钩子!

作为主题作者,你应该慷慨地利用它们。因为Divi使用内置的body_class钩子,我们有一个非常容易的时间修改的主题,以执行我们的出价。

希望您现在可以添加和删除现有主题的零碎部分。如果您有任何问题或您有困难修改您的主题,让我们知道!





二维码