WordPress主题开发教程 7_读取配置

朋友们好！我们又见面了！

上次咱们说到 functions.php 及 如何引入 Codestar Framework 开发后台配置项。在“酱茄Free主题”中，有不少小的功能点，和 WordPress 本身关系不大，都是通过后台配置项来实现的。这次咱们就“书接上回”，看一看如何通过“读取和在页面显示后台配置项”来实现这些小功能。

实现一个小功能只需要三步：1.后台配置数据 -> 2.读取数据 -> 3.前端显示数据

第2步读取数据，就是使用WordPress函数：get_option 读取 Codestar Framework 配置项中的各种数据。我们在 functions.php 文件中，简单封装了一个函数：

/**
 * 读取设置项的值
 */
$the_first_options = null;
function the_first_option($key, $default = '')
{
    global $the_first_options;
    if (!$the_first_options) {
        $the_first_options = get_option('zhuige_the_first');
    }


    if (isset($the_first_options[$key])) {
        return $the_first_options[$key];
    }


    return $default;
}

$logo = the_first_option('site_logo');
if ($logo && $logo['url']) {
$logo_src = $logo['url'];
} else {
$logo_src = get_stylesheet_directory_uri() . '/images/xlogo.png';
}
?>
<img alt="picture loss" src="<?php echo $logo_src;?>">

$logo = the_first_option('site_logo');
echo json_encode($logo);

{
"url": "http://【你的域名】/wp-content/uploads/2024/03/avatar.png",
"id": "17",
"width": "512",
"height": "512",
"thumbnail": "http://【你的域名】/wp-content/uploads/2024/03/avatar-150x150.png",
"alt": "",
"title": "avatar",
"description": ""
}

/**
 * 显示网站LOGO
 */
function the_first_site_logo()
{
    $logo = the_first_option('site_logo');
    if ($logo && $logo['url']) {
        $logo_src = $logo['url'];
    } else {
        $logo_src = get_stylesheet_directory_uri() . '/images/xlogo.png';
    }


    echo '<img alt="picture loss" src="' . $logo_src . '">';
}

<a class="logo" href="<?php echo home_url(); ?>"><?php the_first_site_logo() ?></a>

<!--页脚图标链接-->
<?php $footer_icons = the_first_option('footer_icons');
if (is_array($footer_icons) && !empty($footer_icons)) { ?>
<div class="container ta-c pb-30 main-footer-links">
<?php
foreach ($footer_icons as $icon) : ?>
<a style="color: white;" href="<?php echo $icon['url'] ?>" title="" target="_blank">
<img alt="picture loss" src="<?php echo $icon['image']['url'] ?>" width="50" height="50" />
</a>
<?php endforeach; ?>
</div>
<?php } ?>

<p style="text-align: center">意见反馈、合作、咨询、代理</p>
<p style="text-align: center">微信：jianbing2011 （请说明来意）</p>
<p style="text-align: center">E-mail：help@jiangqie.com</p>
<p style="text-align: center">温馨提示：购买前请详细阅读购买说明</p>

<!--关于我们-->
<div class="column xs-12 sm-6 md-4 pt-30 pb-30">
<h3 class="mb-30">关于我们</h3>
<?php
$footer_about = the_first_option('footer_about');
if (empty($footer_about)) {
$footer_about = '请到后台设置此处信息';
}
echo $footer_about;
?>
</div>

<!--页脚导航-->
<div class="column xs-12 sm-6 md-4 pt-30 pb-30">
<h3 class="mb-30">快速导航</h3>
<?php
$footer_nav = the_first_option('footer_nav');
if (is_array($footer_nav) && !empty($footer_nav)) {
foreach ($footer_nav as $nav) :
echo '<p><a href="' . $nav['url'] . '" title="' . $nav['title'] . '">' . $nav['title'] . '</a></p>';
endforeach;
}
?>
</div>

<!--页脚版权-->
<div class="container ta-c pt-40 main-footer-copyinfo">
<?php
$footer_copyright = the_first_option('footer_copyright');
if (empty($footer_copyright)) {
$footer_copyright = '主题设计 <a href="https://www.zhuige.com" target="_blank" title="追格" style="color:#7F7F7F;">追格（zhuige.com）</a>';
}
echo $footer_copyright; ?>
</div>

网站统计和其他的配置有点不一样：1.是一段JS代码，2.不需要在页面中显示。

在后台配置好从百度统计或其它数据统计平台获取的数据：

<div style="display: none;">
<script>
<?php echo the_first_option('footer_statistics'); ?>
</script>
</div>

现在，这个套路大家都比较熟悉了，再有其他类似的小功能，应该可以轻松搞定了。

这次再说一个小知识点。可能有的朋友已经注意到，使用 the_first 主题后，网页顶部的 admin_bar 不见了。

如何才能加上 admim_bar 呢？只要在 header.php 中调用 wp_head；在 footer.php 中调用 wp_footer 就可以了。

<?php wp_head(); ?>

<?php wp_footer(); ?>

wp_head 和 wp_footer 的作用远不止添加 admin_bar 这么简单，不过暂时我们也不管那么多了。刷新一下页面，admin_bar 已经回来了。

下周见，朋友们！