自定义文章类型：在Kalium子主题中定制Artists单页布局

问题背景 #

已成功创建自定义文章类型「Artists」，希望修改点击“Read more”后的艺术家单页布局样式。已将Kalium主题的single.php复制到子主题，但不清楚如何调整代码。目标页面为艺术家详情页（示例：Philisiwe Twijnstra的艺术家页面）。

当前使用的自定义模板代码如下：

<?php
/*
* Template Name: AWPN Featured Article
* Template Post Type: Artists
*/
/**
* Kalium WordPress Theme
*
* Single post template.
*
* @author Laborator
* @link https://kaliumtheme.com
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Direct access not allowed.
}

/**
* Theme header.
*/
get_header();

/**
* Show post information if exists.
*/
if ( have_posts() ) :

while ( have_posts() ) : the_post();

/**
* kalium_blog_single_before_content
*
* @hooked kalium_blog_single_post_image_full_width – 10
**/
do_action( 'kalium_blog_single_before_content' );

?>
<div <?php kalium_blog_single_container_class(); ?>>

<div class="container">

<div class="row">

<?php
/**
* kalium_blog_single_content hook
*
* @hooked kalium_blog_single_post_image_boxed – 10
* @hooked kalium_blog_single_post_layout – 20
* @hooked kalium_blog_single_post_sidebar – 30
**/
do_action( 'kalium_blog_single_content' );
?>

</div>

</div>

</div>
<?php

/**
* kalium_blog_single_after_content
*
* @hooked kalium_blog_single_post_comments – 10
**/
do_action( 'kalium_blog_single_after_content' );

endwhile;

endif;

/**
* Theme footer.
*/
get_footer();

修改方案 #

Kalium主题通过**动作钩子（Action Hooks）**组织页面内容，无需直接修改主题核心函数，只需在子主题模板中调整钩子绑定即可定制布局。

步骤1：移除默认内容渲染钩子 #

原模板中kalium_blog_single_content钩子绑定了三个默认函数，负责输出默认文章布局、图片和侧边栏。需要先移除这些默认动作：

// 在while循环内，do_action('kalium_blog_single_content')之前添加
remove_action( 'kalium_blog_single_content', 'kalium_blog_single_post_image_boxed', 10 );
remove_action( 'kalium_blog_single_content', 'kalium_blog_single_post_layout', 20 );
remove_action( 'kalium_blog_single_content', 'kalium_blog_single_post_sidebar', 30 );

步骤2：添加自定义内容渲染函数 #

编写自定义函数，输出艺术家页面需要的内容（如自定义字段、个人简介等），再将其绑定到kalium_blog_single_content钩子：

// 在模板文件开头（get_header()之前）添加自定义函数
function awpn_custom_artist_single_layout() {
    $post = get_post();
    
    // 输出标题
    echo '<h1 class="artist-title">' . get_the_title() . '</h1>';
    
    // 输出艺术家头像（假设自定义字段"artist_avatar"存储图片ID）
    $avatar_id = get_post_meta( $post->ID, 'artist_avatar', true );
    if ( $avatar_id ) {
        echo '<div class="artist-avatar">' . wp_get_attachment_image( $avatar_id, 'medium' ) . '</div>';
    }
    
    // 输出艺术家简介（自定义字段"artist_bio"）
    $bio = get_post_meta( $post->ID, 'artist_bio', true );
    if ( $bio ) {
        echo '<div class="artist-bio">' . wpautop( $bio ) . '</div>';
    }
    
    // 输出文章正文
    echo '<div class="artist-content">' . get_the_content() . '</div>';
    
    // 可按需添加更多自定义模块
}

// 在while循环内绑定钩子
add_action( 'kalium_blog_single_content', 'awpn_custom_artist_single_layout', 10 );

步骤3：完整修改后的模板代码 #

整合上述代码后的最终模板：

<?php
/*
* Template Name: AWPN Featured Article
* Template Post Type: Artists
*/
/**
* Kalium WordPress Theme
*
* Single post template.
*
* @author Laborator
* @link https://kaliumtheme.com
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Direct access not allowed.
}

// 自定义艺术家单页布局函数
function awpn_custom_artist_single_layout() {
    $post = get_post();
    
    // 标题
    echo '<h1 class="artist-title">' . get_the_title() . '</h1>';
    
    // 头像（自定义字段示例）
    $avatar_id = get_post_meta( $post->ID, 'artist_avatar', true );
    if ( $avatar_id ) {
        echo '<div class="artist-avatar">' . wp_get_attachment_image( $avatar_id, 'medium' ) . '</div>';
    }
    
    // 简介（自定义字段示例）
    $bio = get_post_meta( $post->ID, 'artist_bio', true );
    if ( $bio ) {
        echo '<div class="artist-bio">' . wpautop( $bio ) . '</div>';
    }
    
    // 正文内容
    echo '<div class="artist-content">' . get_the_content() . '</div>';
}

/**
* Theme header.
*/
get_header();

/**
* Show post information if exists.
*/
if ( have_posts() ) :

while ( have_posts() ) : the_post();

/**
* kalium_blog_single_before_content
*
* @hooked kalium_blog_single_post_image_full_width – 10
**/
do_action( 'kalium_blog_single_before_content' );

?>
<div <?php kalium_blog_single_container_class(); ?>>

<div class="container">

<div class="row">

<?php
// 移除默认布局钩子
remove_action( 'kalium_blog_single_content', 'kalium_blog_single_post_image_boxed', 10 );
remove_action( 'kalium_blog_single_content', 'kalium_blog_single_post_layout', 20 );
remove_action( 'kalium_blog_single_content', 'kalium_blog_single_post_sidebar', 30 );

// 添加自定义布局钩子
add_action( 'kalium_blog_single_content', 'awpn_custom_artist_single_layout', 10 );

// 执行内容钩子
do_action( 'kalium_blog_single_content' );
?>

</div>

</div>

</div>
<?php

/**
* kalium_blog_single_after_content
*
* @hooked kalium_blog_single_post_comments – 10
**/
do_action( 'kalium_blog_single_after_content' );

endwhile;

endif;

/**
* Theme footer.
*/
get_footer();

样式调整 #

完成代码修改后，可在子主题style.css中添加自定义CSS调整排版：

.artist-title {
    color: #2c3e50;
    margin-bottom: 20px;
}
.artist-avatar {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}
.artist-bio {
    font-style: italic;
    color: #7f8c8d;
    margin-bottom: 30px;
}

内容的提问来源于stack exchange，提问作者user3581755