真香，30天做一套wordpress主题（第2天）：吃透主题设置-外链论坛

4zhvml8 发表于 2024-10-6 12:40:41

真香，30天做一套wordpress主题（第2天）：吃透主题设置

欢迎来到《真香，30天做一套wordpress主题》系列文案，咱们的目的是（无蛀牙！）创立一套全新的wordpress主题，花上30天的时间闭关修炼，倘若你看到的第1篇文案不是《基本框架搭建》，意见你关注咱们（数字江湖异志录），从该系列的第1篇起始阅读。
咱们将尽可能保持文案的循序渐进和通俗易懂，请确保自己已然把握了那一篇文案的所有内容时才选取跳过，否则可能会错失关键的信息噢~
这儿咱们假定你已然知晓了以下基本知识，这些基本知识对理解文案内容是至关重要的：
1. HTML/CSS/JS基本
2. PHP基本
3. 怎样运用Wordpress
4. 怎样搭建web环境
倘若你已然知晓了以上基本知识，恭喜你，本系列的任何文案内容对你而言都无什么难度。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">直奔主题</h1>
新版的wordpress增多了自定义主题设置的功能，并且官方亦举荐研发者把关联的设置放到主题自定义里。默认的状况下，主题会自动开启有些自定义参数（即使咱们的主题还无运用它们）：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/7ebdb1acf907450fa7b364e265e3f15f~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728363870&x-signature=GCmjY8p5c8leTPzu8MP4T8eCTIw%3D" style="width: 50%; margin-bottom: 20px;"></div>
咱们在主题文件夹下创立一个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>刷新页面，咱们应该能看到这般的页面输出：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/pgc-image/f569aea6c35c4a34affb6427866a9ee8~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728363870&x-signature=uCeGAUqfFEgkAw7gCVoR0HhKuL8%3D" style="width: 50%; margin-bottom: 20px;"></div>
这儿，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 browser tabs, 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了。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/fb820f98f41c4cd88f2521b261e0ef87~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728363870&x-signature=pl7HzzlD0US8zlh2tf39aGAS1N8%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">总结和预告</h1>
今天咱们定义了一套主题的设置选项，之后咱们会把所有跟主题关联的设置统统放到里面，wordpress的主题自定义设置设计得非常优雅，相针对以往的创立专门的主题设置页面而言，在自定义设置里添加相应的掌控选项非常简单和直接，让咱们能够对主题设定进行统一管理。
明天（第3天）咱们将真正将这一套公共顶部搭建起来，并且实现页面在PC、平板、手机上的响应式布局。
倘若你爱好这个系列的文案，赶快关注咱们吧，不要错失后续的更加多干货噢。

qzmjef 发表于 2024-10-19 05:19:34

可以发布外链的网站 http://www.fok120.com/

页: [1]

外链论坛's Archiver

真香，30天做一套wordpress主题（第2天）：吃透主题设置