编程马·菜鸟教程

Appearance

12.3 自定义设置实战 ​

在了解了如何添加可自定义项后，我们可以将这些知识应用到实际主题中，创建一个功能完整的主题选项面板。本章节将详细介绍如何在实际主题中实现自定义设置，包括添加布局设置、字体设置、社交媒体设置等方面。

添加布局设置 ​

1. 注册布局设置 ​

首先，我们需要在 functions.php 文件中注册布局设置。

php
/**
 * 注册主题设置
 */
function simple_blog_register_settings() {
    // 注册布局设置
    register_setting('simple-blog-settings-group', 'simple_blog_layout_type');
    register_setting('simple-blog-settings-group', 'simple_blog_sidebar_position');
    register_setting('simple-blog-settings-group', 'simple_blog_posts_per_page');
    
    // 其他设置
}
add_action('admin_init', 'simple_blog_register_settings');

2. 添加布局设置字段 ​

在主题设置页面中添加布局设置字段。

php
<h2>布局设置</h2>
<table class="form-table">
    <tr valign="top">
        <th scope="row">布局类型</th>
        <td>
            <?php $layout_type = get_option('simple_blog_layout_type', 'sidebar-right'); ?>
            <label>
                <input type="radio" name="simple_blog_layout_type" value="sidebar-left" <?php checked('sidebar-left', $layout_type); ?> />
                左侧侧边栏
            </label>
            <br>
            <label>
                <input type="radio" name="simple_blog_layout_type" value="sidebar-right" <?php checked('sidebar-right', $layout_type); ?> />
                右侧侧边栏
            </label>
            <br>
            <label>
                <input type="radio" name="simple_blog_layout_type" value="no-sidebar" <?php checked('no-sidebar', $layout_type); ?> />
                无侧边栏
            </label>
            <p class="description">请选择布局类型</p>
        </td>
    </tr>
    <tr valign="top">
        <th scope="row">侧边栏位置</th>
        <td>
            <?php $sidebar_position = get_option('simple_blog_sidebar_position', 'right'); ?>
            <select name="simple_blog_sidebar_position">
                <option value="left" <?php selected('left', $sidebar_position); ?>>左侧</option>
                <option value="right" <?php selected('right', $sidebar_position); ?>>右侧</option>
            </select>
            <p class="description">请选择侧边栏位置</p>
        </td>
    </tr>
    <tr valign="top">
        <th scope="row">每页显示文章数</th>
        <td>
            <?php $posts_per_page = get_option('simple_blog_posts_per_page', 10); ?>
            <input type="number" name="simple_blog_posts_per_page" value="<?php echo esc_attr($posts_per_page); ?>" min="1" max="50" />
            <p class="description">请输入每页显示的文章数量</p>
        </td>
    </tr>
</table>

3. 在主题中使用布局设置 ​

在 index.php 文件中使用布局设置。

php
<?php get_header(); ?>

<main class="main-content">
    <div class="container">
        <?php $layout_type = get_option('simple_blog_layout_type', 'sidebar-right'); ?>
        <?php if ($layout_type === 'sidebar-left') : ?>
            <div class="row">
                <div class="col-md-4">
                    <?php get_sidebar(); ?>
                </div>
                <div class="col-md-8">
                    <!-- 文章列表 -->
                </div>
            </div>
        <?php elseif ($layout_type === 'sidebar-right') : ?>
            <div class="row">
                <div class="col-md-8">
                    <!-- 文章列表 -->
                </div>
                <div class="col-md-4">
                    <?php get_sidebar(); ?>
                </div>
            </div>
        <?php else : ?>
            <div class="row">
                <div class="col-md-12">
                    <!-- 文章列表 -->
                </div>
            </div>
        <?php endif; ?>
    </div>
</main>

<?php get_footer(); ?>

在 functions.php 文件中使用每页显示文章数设置。

php
/**
 * 修改每页显示文章数
 */
function simple_blog_posts_per_page($query) {
    if (is_admin() || !$query->is_main_query()) {
        return;
    }
    
    if (is_home() || is_archive() || is_search()) {
        $posts_per_page = get_option('simple_blog_posts_per_page', 10);
        $query->set('posts_per_page', $posts_per_page);
    }
}
add_action('pre_get_posts', 'simple_blog_posts_per_page');

添加字体设置 ​

1. 注册字体设置 ​

在 functions.php 文件中注册字体设置。

php
/**
 * 注册主题设置
 */
function simple_blog_register_settings() {
    // 注册字体设置
    register_setting('simple-blog-settings-group', 'simple_blog_font_family');
    register_setting('simple-blog-settings-group', 'simple_blog_font_size');
    register_setting('simple-blog-settings-group', 'simple_blog_line_height');
    
    // 其他设置
}
add_action('admin_init', 'simple_blog_register_settings');

2. 添加字体设置字段 ​

在主题设置页面中添加字体设置字段。

php
<h2>字体设置</h2>
<table class="form-table">
    <tr valign="top">
        <th scope="row">字体系列</th>
        <td>
            <?php $font_family = get_option('simple_blog_font_family', 'Segoe UI'); ?>
            <select name="simple_blog_font_family">
                <option value="Segoe UI" <?php selected('Segoe UI', $font_family); ?>>Segoe UI</option>
                <option value="Arial" <?php selected('Arial', $font_family); ?>>Arial</option>
                <option value="Helvetica" <?php selected('Helvetica', $font_family); ?>>Helvetica</option>
                <option value="Georgia" <?php selected('Georgia', $font_family); ?>>Georgia</option>
                <option value="Times New Roman" <?php selected('Times New Roman', $font_family); ?>>Times New Roman</option>
            </select>
            <p class="description">请选择字体系列</p>
        </td>
    </tr>
    <tr valign="top">
        <th scope="row">字体大小</th>
        <td>
            <?php $font_size = get_option('simple_blog_font_size', '16px'); ?>
            <select name="simple_blog_font_size">
                <option value="14px" <?php selected('14px', $font_size); ?>>14px</option>
                <option value="16px" <?php selected('16px', $font_size); ?>>16px</option>
                <option value="18px" <?php selected('18px', $font_size); ?>>18px</option>
                <option value="20px" <?php selected('20px', $font_size); ?>>20px</option>
            </select>
            <p class="description">请选择字体大小</p>
        </td>
    </tr>
    <tr valign="top">
        <th scope="row">行高</th>
        <td>
            <?php $line_height = get_option('simple_blog_line_height', '1.6'); ?>
            <input type="number" name="simple_blog_line_height" value="<?php echo esc_attr($line_height); ?>" step="0.1" min="1" max="3" />
            <p class="description">请输入行高</p>
        </td>
    </tr>
</table>

3. 在主题中使用字体设置 ​

在 style.php 文件中使用字体设置。

php
<?php
// 获取字体设置
$font_family = get_option('simple_blog_font_family', 'Segoe UI');
$font_size = get_option('simple_blog_font_size', '16px');
$line_height = get_option('simple_blog_line_height', '1.6');
?>

/* CSS Variables */
:root {
    --font-family: '<?php echo esc_attr($font_family); ?>', Tahoma, Geneva, Verdana, sans-serif;
    --font-size: <?php echo esc_attr($font_size); ?>;
    --line-height: <?php echo esc_attr($line_height); ?>;
    /* 其他变量 */
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    /* 其他样式 */
}

添加社交媒体设置 ​

1. 注册社交媒体设置 ​

在 functions.php 文件中注册社交媒体设置。

php
/**
 * 注册主题设置
 */
function simple_blog_register_settings() {
    // 注册社交媒体设置
    register_setting('simple-blog-settings-group', 'simple_blog_facebook_url');
    register_setting('simple-blog-settings-group', 'simple_blog_twitter_url');
    register_setting('simple-blog-settings-group', 'simple_blog_instagram_url');
    register_setting('simple-blog-settings-group', 'simple_blog_linkedin_url');
    register_setting('simple-blog-settings-group', 'simple_blog_youtube_url');
    
    // 其他设置
}
add_action('admin_init', 'simple_blog_register_settings');

2. 添加社交媒体设置字段 ​

在主题设置页面中添加社交媒体设置字段。

php
<h2>社交媒体设置</h2>
<table class="form-table">
    <tr valign="top">
        <th scope="row">Facebook</th>
        <td>
            <?php $facebook_url = get_option('simple_blog_facebook_url'); ?>
            <input type="url" name="simple_blog_facebook_url" value="<?php echo esc_attr($facebook_url); ?>" />
            <p class="description">请输入Facebook页面URL</p>
        </td>
    </tr>
    <tr valign="top">
        <th scope="row">Twitter</th>
        <td>
            <?php $twitter_url = get_option('simple_blog_twitter_url'); ?>
            <input type="url" name="simple_blog_twitter_url" value="<?php echo esc_attr($twitter_url); ?>" />
            <p class="description">请输入Twitter页面URL</p>
        </td>
    </tr>
    <tr valign="top">
        <th scope="row">Instagram</th>
        <td>
            <?php $instagram_url = get_option('simple_blog_instagram_url'); ?>
            <input type="url" name="simple_blog_instagram_url" value="<?php echo esc_attr($instagram_url); ?>" />
            <p class="description">请输入Instagram页面URL</p>
        </td>
    </tr>
    <tr valign="top">
        <th scope="row">LinkedIn</th>
        <td>
            <?php $linkedin_url = get_option('simple_blog_linkedin_url'); ?>
            <input type="url" name="simple_blog_linkedin_url" value="<?php echo esc_attr($linkedin_url); ?>" />
            <p class="description">请输入LinkedIn页面URL</p>
        </td>
    </tr>
    <tr valign="top">
        <th scope="row">YouTube</th>
        <td>
            <?php $youtube_url = get_option('simple_blog_youtube_url'); ?>
            <input type="url" name="simple_blog_youtube_url" value="<?php echo esc_attr($youtube_url); ?>" />
            <p class="description">请输入YouTube频道URL</p>
        </td>
    </tr>
</table>

3. 在主题中使用社交媒体设置 ​

在 footer.php 文件中使用社交媒体设置。

php
<div class="footer-social">
    <h3>Follow Us</h3>
    <div class="social-icons">
        <?php if (get_option('simple_blog_facebook_url')) : ?>
            <a href="<?php echo esc_url(get_option('simple_blog_facebook_url')); ?>" class="social-icon" aria-label="Facebook">
                <i class="fab fa-facebook-f"></i>
            </a>
        <?php endif; ?>
        <?php if (get_option('simple_blog_twitter_url')) : ?>
            <a href="<?php echo esc_url(get_option('simple_blog_twitter_url')); ?>" class="social-icon" aria-label="Twitter">
                <i class="fab fa-twitter"></i>
            </a>
        <?php endif; ?>
        <?php if (get_option('simple_blog_instagram_url')) : ?>
            <a href="<?php echo esc_url(get_option('simple_blog_instagram_url')); ?>" class="social-icon" aria-label="Instagram">
                <i class="fab fa-instagram"></i>
            </a>
        <?php endif; ?>
        <?php if (get_option('simple_blog_linkedin_url')) : ?>
            <a href="<?php echo esc_url(get_option('simple_blog_linkedin_url')); ?>" class="social-icon" aria-label="LinkedIn">
                <i class="fab fa-linkedin-in"></i>
            </a>
        <?php endif; ?>
        <?php if (get_option('simple_blog_youtube_url')) : ?>
            <a href="<?php echo esc_url(get_option('simple_blog_youtube_url')); ?>" class="social-icon" aria-label="YouTube">
                <i class="fab fa-youtube"></i>
            </a>
        <?php endif; ?>
    </div>
</div>

测试自定义设置 ​

在添加了自定义设置后，我们需要测试它们是否能正常工作。

步骤1：更新主题文件 ​

将修改后的 functions.php、index.php、footer.php 和 style.php 文件上传到主题目录中。

步骤2：测试设置页面 ​

在WordPress后台，进入"外观" > "主题设置"，检查设置页面是否正确显示，包括布局设置、字体设置和社交媒体设置。

步骤3：测试设置保存 ​

在主题设置页面中修改一些设置，然后点击"保存更改"按钮，检查设置是否能正确保存。

步骤4：测试设置应用 ​

在浏览器中访问网站，检查设置是否能正确应用，包括布局设置、字体设置和社交媒体设置。

小结 ​

自定义设置实战是主题开发的重要步骤，它可以让用户更灵活地定制主题。通过本章节的学习，你应该：

  1. 了解如何添加布局设置，包括布局类型、侧边栏位置和每页显示文章数
  2. 掌握如何在主题中使用布局设置，确保布局能够正确显示
  3. 了解如何添加字体设置，包括字体系列、字体大小和行高
  4. 掌握如何在主题中使用字体设置，确保字体能够正确显示
  5. 了解如何添加社交媒体设置，包括Facebook、Twitter、Instagram、LinkedIn和YouTube
  6. 掌握如何在主题中使用社交媒体设置，确保社交媒体图标能够正确显示
  7. 了解如何测试自定义设置，确保它们能正常工作

通过以上步骤，你可以为主题添加更多自定义设置，让用户能够更灵活地定制主题，提高主题的用户体验。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建