|
欢迎来到《真香，30天做一套wordpress主题》系列文案，咱们的目的是（无蛀牙！）创立一套全新的wordpress主题，花上30天的时间闭关修炼，倘若你看到的第1篇文案不是《基本框架搭建》，意见你关注咱们（数字江湖异志录），从该系列的第1篇起始阅读。
咱们将尽可能保持文案的循序渐进和通俗易懂，请确保自己已然把握了那一篇文案的所有内容时才选取跳过，否则可能会错失关键的信息噢~
这儿咱们假定你已然知晓了以下基本知识，这些基本知识对理解文案内容是至关重要的：
1. HTML/CSS/JS基本
2. PHP基本
3. 怎样运用Wordpress
4. 怎样搭建web环境
倘若你已然知晓了以上基本知识，恭喜你，本系列的任何文案内容对你而言都无什么难度。
直奔主题
新版的wordpress增多了自定义主题设置的功能，并且官方亦举荐研发者把关联的设置放到主题自定义里。默认的状况下，主题会自动开启有些自定义参数（即使咱们的主题还无运用它们）：
咱们在主题文件夹下创立一个functions.php文件，这个文件会影响到主题的方方面面，首要咱们创立自定义的主题参数连接： // Customizer
function my_customize_register($wp_customize) {
};
add_action( customize_register, my_customize_register );关联的主题设定咱们都会写到my_customize_register里，咱们先来认识三个基本概念：
1. Section
2. Settings
3. Control
为了方便理解，咱们能够把section当成设置的一级菜单，control是菜单里的设置控件，settings则是存储设置的容器。
经过查阅wordpress文档，咱们找出了哪些默认开启的section的独一id，而后咱们在代码里把它们去除： // Customizer
function my_customize_register($wp_customize) {
// remove default section
$wp_customize->remove_section(title_tagline);
$wp_customize->remove_section(custom_css);
$wp_customize->remove_section(static_front_page);
};而后咱们添加自己的section、control、settings，这儿咱们先盘点一下日前的需要，咱们需要对页面的公共顶部进行设置，公共顶部含有以下元素：
1. 博客标题
2. 主标语（slogan/tagline）
3. 副标语
那样咱们在functions.php里实现代码是像这般的： $wp_customize->add_section( header_setting , array(
title => __( Header Setting),
priority => 10,
) );
$wp_customize->add_setting( blog_title , array(
default => get_bloginfo(name),
transport => refresh,
) );
$wp_customize->add_setting( main_tagline , array(
default => Free the Internet,
transport => refresh,
) );
$wp_customize->add_setting( sub_tagline , array(
default => Across the Great Wall we can reach every corner in the world,
transport => refresh,
) );
$wp_customize->add_control(
input_blog_title,
array(
label => __( Blog Title),
section => header_setting,
settings => blog_title,
type => text,
)
);
$wp_customize->add_control(
input_main_tagline,
array(
label => __( Main tagline),
section => header_setting,
settings => main_tagline,
type => text,
)
);
$wp_customize->add_control(
input_sub_tagline,
array(
label => __( Sub tagline),
section => header_setting,
settings => sub_tagline,
type => textarea,
)
);这儿咱们用到了三个办法：
1. add_section
2. add_settings
3. add_control
对应section、settings、control的添加，需要重视的是，咱们在设置文本的title输出那里用到了魔术办法__()，这是为后期主题的国际化做准备，魔术办法__()和魔术办法_e()都是为了主题多语言而存在的，它们之间的区别便是__()返回字符串，而_e()直接把文本在页面里输出，当然，它们都是按照当前系统设定的语言找到对应的语言包输出的，主题国际化的关联内容咱们在本系列的后期进行展开。
这般设定之后，咱们就能够在主题的任意位置调用这些设置好的内容，此刻咱们把它们在home.php里表示出来瞧瞧。 <body>
<header>
<?php echo get_theme_mod(blog_title) ?>
<?php echo get_theme_mod(main_tagline, Free the Internet) ?>
<?php echo get_theme_mod(sub_tagline, Across the Great Wall we can reach every corner in the world) ?>
Header Area
</header>
</body>这儿咱们用到的内置办法是get_theme_mod，咱们传两个参数给它，一个是主题设置的settings id，一个是默认值。
还记得咱们在第1天创立框架时有添加的style amp-custom吗，咱们在里面添加一段css，让咱们的header凸显出来： <style amp-custom>
header {
width: 100vw;
height: 18.5185vw;
bac公斤round: gray;
}
</style>刷新页面，咱们应该能看到这般的页面输出：
这儿，Hhackers blog是我的blog名叫作，其它的便是刚才咱们设定的主标语和副标语的默认值了。
咱们在主题自定义那里设定这些settings并点击发布时，页面里对应的部分就会发生变化了。
接下来咱们顺便把主题的favicon参数亦实现了吧，favicon是表示在浏览器标签页上的小图标，咱们根据之前的办法，创立一套settings和control，并绑定到咱们的section里： $wp_customize->add_setting( favicon , array(
default => ,
transport => refresh,
sanitize_callback => absint,
) );
$wp_customize->add_control( new WP_Customize_Site_Icon_Control( $wp_customize, set_favicon,
array(
label => __( Favicon ),
description => __( Favicon is what you see in <strong>browser tabs</strong>, bookmark bars),
section => header_setting,
settings => favicon,
width => 32,
height => 32,
)
) );这儿咱们直接运用了wordpress的内置控件 WP_Customize_Site_Icon_Control,这个控件能够直接对照片进行上传和裁剪。
而后咱们在header.php公共头里运用运用这个favicon： <?php
if ($icon = wp_get_attachment_url(get_theme_mod(favicon))) {
echo <link rel="shortcut icon" href=".$icon.">;
}
?>这儿需要重视的是咱们直接get_theme_mod取到的内容是一个数字id，咱们需要运用wp_get_attachment_url获取照片id对应的url路径。
这般咱们刷新页面 ，就能在标签页上看到咱们设置好的的favicon了。
总结和预告
今天咱们定义了一套主题的设置选项，之后咱们会把所有跟主题关联的设置统统放到里面，wordpress的主题自定义设置设计得非常优雅，相针对以往的创立专门的主题设置页面而言，在自定义设置里添加相应的掌控选项非常简单和直接，让咱们能够对主题设定进行统一管理。
明天（第3天）咱们将真正将这一套公共顶部搭建起来，并且实现页面在PC、平板、手机上的响应式布局。
倘若你爱好这个系列的文案，赶快关注咱们吧，不要错失后续的更加多干货噢。
| 
发表于 2024-10-6 12:40:41