Seeking advice on child theme development @theme

WordPress Theme Development
1

@theme Hello! I would like to create a child theme based on the Twenty Twenty-Four theme, primarily needing to modify the following:

  1. Change the website’s main color scheme.
  2. Add custom footer content.
  3. Modify the display style of the post list.

How should I get started? What files need to be created? Thank you!

2

@feibisi 你好！很高兴为你解答子主题开发的问题。基于 Twenty Twenty-Four 这个区块主题创建子主题，现在有更现代化的方法。以下是详细的步骤：

1. 创建子主题基本结构

在你的 WordPress 安装目录的 wp-content/themes/ 文件夹中，创建一个新文件夹，例如 twentytwentyfour-child。

必须的文件：

style.css - 子主题样式表头部信息：

/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://wpcommunity.com/
Description: Twenty Twenty-Four 的子主题
Author: 你的名字
Author URI: https://wpcommunity.com/
Template: twentytwentyfour
Version: 1.0.0
Text Domain: twentytwentyfour-child
*/

functions.php - 子主题功能文件：

<?php
/**
 * Twenty Twenty-Four Child Theme Functions
 */

// 加载父主题样式
add_action( 'wp_enqueue_scripts', 'twentytwentyfour_child_enqueue_styles' );
function twentytwentyfour_child_enqueue_styles() {
    wp_enqueue_style(
        'twentytwentyfour-child-style',
        get_stylesheet_uri(),
        array( 'twentytwentyfour-style' ),
        wp_get_theme()->get('Version')
    );
}

2. 修改主色调（通过 theme.json）

对于区块主题，推荐使用 theme.json 来修改样式：

theme.json - 创建在子主题根目录：

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "主色调",
          "slug": "primary",
          "color": "#3a86ff"  // 修改为你想要的颜色
        },
        {
          "name": "次要色调",
          "slug": "secondary",
          "color": "#8338ec"  // 修改为你想要的颜色
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--primary)",
      "text": "var(--wp--preset--color--secondary)"
    },
    "elements": {
      "link": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        }
      }
    }
  }
}

3. 添加自定义页脚内容

创建模板部件来修改页脚：

创建文件夹结构：

twentytwentyfour-child/
├── parts/
│   └── footer.html

parts/footer.html - 自定义页脚模板：

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
    <!-- wp:paragraph {"align":"center"} -->
    <p class="has-text-align-center">
        © <?php echo date('Y'); ?> 你的网站名称 - 自定义页脚内容
    </p>
    <!-- /wp:paragraph -->
    
    <!-- wp:social-links {"iconColor":"primary","iconColorValue":"#3a86ff","className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"center"}} -->
    <ul class="wp-block-social-links has-icon-color is-style-logos-only">
        <!-- wp:social-link {"url":"https://wpcommunity.com/","service":"wordpress"} /-->
        <!-- wp:social-link {"url":"https://github.com/","service":"github"} /-->
    </ul>
    <!-- /wp:social-links -->
</div>
<!-- /wp:group -->

4. 修改文章列表显示样式

方法一：通过模板文件（推荐）

创建 templates/ 文件夹和模板文件：

templates/home.html - 修改首页文章列表：

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
    <!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
    <div class="wp-block-query">
        <!-- wp:post-template -->
        <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"},"margin":{"top":"0","bottom":"var:preset|spacing|40"}},"border":{"radius":"8px"}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
        <div class="wp-block-group has-base-background-color has-background" style="border-radius:8px;margin-top:0;margin-bottom:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">
            <!-- wp:post-title {"level":3,"isLink":true} /-->
            <!-- wp:post-date {"format":"Y年m月d日"} /-->
            <!-- wp:post-excerpt {"moreText":"阅读更多"} /-->
        </div>
        <!-- /wp:group -->
        <!-- /wp:post-template -->
        
        <!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
        <!-- wp:query-pagination-previous /-->
        <!-- wp:query-pagination-numbers /-->
        <!-- wp:query-pagination-next /-->
        <!-- /wp:query-pagination -->
    </div>
    <!-- /wp:query -->
</div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

方法二：通过自定义 CSS

在子主题的 style.css 中添加：

/* 修改文章列表样式 */
.wp-block-post {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.wp-block-post-title a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

.wp-block-post-title a:hover {
    text-decoration: underline;
}

.wp-block-post-date {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 1rem;
}

5. 完整的子主题结构

最终你的子主题文件夹应该类似这样：

twentytwentyfour-child/
├── style.css
├── functions.php
├── theme.json
├── templates/
│   └── home.html
├── parts/
│   └── footer.html
└── screenshot.png（可选，主题截图）

启用和测试

  1. 将子主题文件夹上传到 wp-content/themes/
  2. 在 WordPress 后台的"外观" → "主题"中启用子主题
  3. 在"外观" → "编辑器"中可以进一步可视化编辑

学习资源推荐

  1. WordPress 子主题开发手册
  2. 区块主题开发指南
  3. theme.json 完整参考

有任何具体问题或需要进一步的代码示例，请随时提问！