WordPress 函数:add_theme_support() 开启主题自定义功能(全面)

news2025/1/12 17:21:05

add_theme_support() 用于在我们的当前使用的主题添加一些特殊的功能,函数一般写在主题的functions.php文件中,当然也可以再插件中使用钩子来调用该函数,如果是挂在钩子上,那他必须挂在after_setup_theme钩子上,因为 init hook 对于一些功能来说,已经太迟了.

(在后台外观->主题_>点击自定义)

先看效果截图:

用法

<?php add_theme_support($feature);?>

参数说明

$feature

(string) (必须) 需要添加特殊功能名称,可以是以下参数:

◆‘post-thumbnails’—– 增加缩略图支持

◆‘automatic-feed-links’—–自动输出RSS

◆‘post-formats’—– 增加文章格式功能

◆‘custom-background’—– 增加自定义背景

◆‘custom-header’—– 增加自定义顶部图像

◆‘menus’——自定义导航菜单

默认: None

$args:

数组,功能相关的额外参数。

也就是说你可以如下使用:(该函数必须在主题的 functions.php 文件中调用)

 add_theme_support('post-thumbnails');
 add_theme_support('automatic-feed-links');
 add_theme_support('post-formats', array( 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat'));
 add_theme_support(
 'custom-background',
     array(
 'default-color'=>'0B3B41',
 'default-image'=> get_template_directory_uri().'/images/bg.jpg',
 )
 );
add_theme_support('custom-header');

Post Thumbnails(启用文章特色图片缩略图功能)

从WordPress2.9版本开始,可以给模板添加文章特色图片缩略图功能。操作方法很简单,只需要把下面的代码添加到functions.php里面。

示例:

// 特色图像
add_theme_support( 'post-thumbnails' ); // 所有输出内容支持特色图像
add_theme_support( 'post-thumbnails', array( 'page' ) ); // 仅 page 类型支持特色图像
add_theme_support( 'post-thumbnails', array( 'post' ) ); // 仅 post 类型支持特色图像
add_theme_support( 'post-thumbnails', array( 'post', 'movie' ) ); // 仅 post 和 movie 类型支持特色图像

注意:示例代码中 movie 为通过 register_post_type() 函数注册的文章类型。

register_post_type( string $post_type, array|string $args = array() )

通过 WordPress 输出内容时,如果选择了特色图像,系统会在 wp_postmeta 表下创建一个对应 post_id 的 _thumbnail_id 字段用于存储当前 Post 内容的特色图像。

判断是否有文章缩略图

has_post_thumbnail( int|WP_Post $post = null )

获取文章缩略图

if ( has_post_thumbnail()){
     the_post_thumbnail();
}

设置缩略图大小

set_post_thumbnail_size(120,120, true );

  1. //前面两个参数分别为-宽、高

  1. //后面参数为是否裁剪图片到这么大 true为裁剪

注意,设置了缩略图大小之后,并不是说你输出特色图像的时候就直接输出这个大小,这个代码的功能只是在你设置缩略图的时候将那个图片生成了一个你设定大小的图片。输出特色图像的时候还是要加上大小,不然就会输出原图。

Custom-logo (自定义主题LOGO)

加主题自定义网站Logo图标支持,会在“主题后台/外观/自定义/站点身份”中添加一个自定义标志的选项。

示例:

// 标志
add_theme_support( 'custom-logo', array(

'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
) );

Custom Background(自定义主题背景)

3.4 版本引进让主题支持定义背景。添加自定义网站背景图像支持,会在“主题后台/外观/自定义/背景图像”中添加图像上传功能。

  1. add_theme_support('custom-background');

设置默认背景的参数:

// 背景图像

$defaults = array(
'default-image' => '',
'default-preset' => 'default', // 'default', 'fill', 'fit', 'repeat', 'custom'
'default-position-x' => 'left', // 'left', 'center', 'right'
'default-position-y' => 'top', // 'top', 'center', 'bottom'
'default-size' => 'auto', // 'auto', 'contain', 'cover'
'default-repeat' => 'repeat', // 'repeat-x', 'repeat-y', 'repeat', 'no-repeat'
'default-attachment' => 'scroll', // 'scroll', 'fixed'
'default-color' => '',
'wp-head-callback' => '_custom_background_cb',
'admin-head-callback' => '',
'admin-preview-callback' => '',
);
add_theme_support( 'custom-background', $defaults );

注意:无论你填加了custom-header 或者 custom-background 支持,系统都会默认显示出颜色小节选项,用于配置页眉文字及背景颜色。

无论是 custom-logo 、 custom-header 还是 custom-background 都会将其配置数据存储在 wp_options 表下的 theme_mod_主题名 字段下。

Custom Header(支持自定义头部图像)

3.4 版本引进的让主图支持自定义头图。添加自定义网站头部图像支持,会在“主题后台/外观/自定义/页眉图像”中添加图像上传功能。

请注意您可以添加的默认参数列表:

$defaults = array(
  'default-image'=>'',     //默认图像
  'random-default'=> false,  //是否默认随机
  'width'=>0,      //宽度
  'height'=>0,      //高度
  'flex-height'=> false,
  'flex-width'=> false,
  'default-text-color'=>'',     //默认文本颜色
  'header-text'=> true,   //顶部文本开关
  'uploads'=> true,   //是否允许上传
  'wp-head-callback'=>'',
  'admin-head-callback'=>'',
  'admin-preview-callback'=>'',
   'video' => false,
   'video-active-callback' => 'is_front_page',
 );
 add_theme_support('custom-header', $defaults );

Automatic Feed Links(头部自动生成 RSS 地址)

这个功能让 WordPress 自动在主题 head 添加 日志和留言的 RSS feed links。这个功能是在 3.0 版本引进的。自动生成页面 feed 链接,需要在主题 header.php 文件中调用 <?php wp_head();?> 。

示例:

// 自动添加 feed 链接
add_theme_support( 'automatic-feed-links' );

customize-selective-refresh-widgets(修改实时预览效果)

添加此功能支持后可以配置一些小工具或自定义设置中,修改设置后页面自动刷新实时预览效果

示例

// 小工具选中自动刷新
add_theme_support( 'customize-selective-refresh-widgets' );

html5

对主题中的搜索表单,评论表单,评论列表,画廊和标题等内容添加 HTML5 标签支持。

/ HTML5 支持

add_theme_support(
'html5',
array(
'comment-form',
'comment-list',
'gallery',
'caption',
'style',
'script',
'navigation-widgets',
)
);

添加完成后,输出的内容就都是符合 html5 标准的标签了。

title-tag

自动生成页面标题,老版本需要使用 wp-title() 获取对应标题,新版本只需要在主题 header.php 文件中调用 <?php wp_head();?> 即可自动生成title 标签。

示例

// 标题标签
add_theme_support( 'title-tag' );

responsive-embeds

WordPress 支持 Embed 功能,就是它可以将一些文章、视频、音频等链接以卡片式显示的方式自动嵌入到你的文章中去,但是这种嵌入的方式可能会导致嵌入的内容超出容器宽度,启用 responsive-embeds 支持可以让 WordPress 自动自适应包裹容器大小,已尽可能好地显示嵌入内容。

// 自适应嵌入内容
add_theme_support( 'responsive-embeds' );

align-wide

添加该功能,WordPress 会自动识别全幅或宽幅图片,并自动将其居中对齐以实现更好的显示效果。注意:只有设置了 full 或 wide 的图片才有效。

// 全幅或宽幅图片居中对齐
add_theme_support( 'align-wide' );

wp-block-styles

添加主题块样式支持

// 块样式支持
add_theme_support( 'wp-block-styles' );

editor-styles

允许自定义主题编辑器样式,需配合 add_editor_style() 使用,以引入相应样式文件。自定义编辑器样式可很好地实现所见即所得。

示例

// 修改编辑器样式
add_theme_support( 'editor-styles' );

// 添加编辑器样式文件
add_editor_style( array|string $stylesheet = 'editor-style.css' )

dark-editor-style

启用编辑器深色模式。默认编辑器字体颜色为黑色,如果自定义编辑器样式的颜色偏暗会影响用户编辑,合适的时候启用深色模式可很好解决这一问题。

// 启用深色模式
add_theme_support( 'dark-editor-style' );

修改 edit-styles 后如下:

disable-custom-font-sizes

编辑器字体大小可以由用户自定义,使用 disable-custom-font-sizes 可以禁止用户字体大小。

示例

// 禁用编辑器自定义字号
add_theme_support( 'disable-custom-font-sizes' );

editor-font-sizes

添加自定义字体大小选择的支持,传入字体数据可控制下拉选择中的字号项目。

示例

// 自定义字体大小选择

add_theme_support('editor-font-sizes', array(
array(
'name' => __('Small', 'twentynineteen') ,
'shortName' => __('S', 'twentynineteen') ,
'size' => 14,
'slug' => 'small',

) ,

array(
'name' => __('Normal', 'twentynineteen') ,
'shortName' => __('M', 'twentynineteen') ,
'size' => 20,
'slug' => 'normal',

) ,

array(
'name' => __('Large', 'twentynineteen') ,
'shortName' => __('L', 'twentynineteen') ,
'size' => 38,
'slug' => 'large',

) ,

));

disable-custom-colors

编辑器字体颜色及背景颜色默认可以由用户自定义,使用 disable-custom-colors 可以禁止用户自定义颜色。

示例

// 禁用编辑器自定义颜色
add_theme_support( 'disable-custom-colors' );

editor-color-palette

添加自定义编辑器调色板的支持,传入颜色数据可控制调色板上默认显示的颜色。

示例

// 自定义颜色面板

add_theme_support('editor-color-palette', array(
array(

'name' => __('Dark Gray', 'qgg') ,
'slug' => 'dark-gray',
'color' => '#111',

),

array(

'name' => __('Light Gray', 'qgg') ,
'slug' => 'light-gray',
'color' => '#767676',

),

array(

'name' => __('White', 'qgg') ,
'slug' => 'white',
'color' => '#FFF',

),

array(

'name' => __('Pink', 'qgg') ,
'slug' => 'pink',
'color' => '#f78da7',

),

array(

'name' => __('Green', 'qgg') ,
'slug' => 'green',
'color' => '#00d084',

),

array(

'name' => __('Cyan', 'qgg') ,
'slug' => 'cyan',
'color' => '#8ed1fc',

),

array(

'name' => __('Yellow', 'qgg') ,
'slug' => 'yellow',
'color' => '#fcb900',

),

array(

'name' => __('Red', 'qgg') ,
'slug' => 'red',
'color' => '#cf2e2e',

),

));

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/373524.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring Security OAuth2四种授权模式总结 - Mysql存储客户端信息和令牌(八)

写在前面&#xff1a;各位看到此博客的小伙伴&#xff0c;如有不对的地方请及时通过私信我或者评论此博客的方式指出&#xff0c;以免误人子弟。多谢&#xff01;如果我的博客对你有帮助&#xff0c;欢迎进行评论✏️✏️、点赞&#x1f44d;&#x1f44d;、收藏⭐️⭐️&#…

Vue3 核心模块源码解析(上)

Vue3相比大家也都有所了解&#xff0c;即使暂时没有使用上&#xff0c;但肯定也学习过&#xff01;Vue3是使用TS进行重写&#xff0c;采用了MonoRepo的管理方式进行管理&#xff0c;本篇文章我们一起来看看 Vue3的使用&#xff0c;与Vue2有什么区别&#xff0c;以及我们该如何优…

【密码学】 一篇文章讲透数字证书

【密码学】 一篇文章讲透数字证书 数字证书介绍 数字证书是一种用于认证网络通信中参与者身份和加密通信的证书&#xff0c;人们可以在网上用它来识别对方的身份。 我们在上一篇博客中介绍了数字签名的作用和原理&#xff0c;数字签名可以防止消息被否认。有了公钥算法和数字签…

史上最全面的软件测试面试题总结(接口、自动化、性能全都有)

目录 思维发散 Linux 测试概念和模型 测试计划与工具 测试用例设计 Web项目 Python基础 算法 逻辑 接口测试 性能测试 总结感谢每一个认真阅读我文章的人&#xff01;&#xff01;&#xff01; 重点&#xff1a;配套学习资料和视频教学 思维发散 一个球&#xff…

二叉树——二叉搜索树的最小绝对差

二叉搜索树的最小绝对差 链接 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝对值。 示例 1&#xff1a; 输入&#xff1a;root [4,2,6,1,3] 输出&#xff1a;1 示例 2&…

PowerDesigned16连接Oracle出现“Could not initialize JavaVM“时的解决步骤

PowerDesigned需要连接到数据库&#xff0c;我使用的是oracle&#xff0c;但总是连接不上&#xff0c;输出栏提示"Could not initialize JavaVM"。 经过查找资料&#xff0c;发现是PowerDesigned16是32位的&#xff0c;只能使用32位的JDK来运行JDBC驱动&#xff0c;…

如何从零开始系统的学习项目管理?

经常会有人问&#xff0c;项目管理到底应该学习一些什么&#xff1f;学习考证之后能得到什么价值&#xff1f; 以下我就总结一下内容 一&#xff0c;学习项目管理有用吗&#xff1f; 有效的项目管理带来的益处大致包括以下几个方面&#xff1a;更有效达成业务目标、满足相关…

人工智能轨道交通行业周刊-第35期(2023.2.20-2.26)

本期关键词&#xff1a;重庆智慧轨道、智能运维主机、标准轨距、地方铁路公报、景深、机器视觉应用 1 整理涉及公众号名单 1.1 行业类 RT轨道交通人民铁道世界轨道交通资讯网铁路信号技术交流北京铁路轨道交通网上榜铁路视点ITS World轨道交通联盟VSTR铁路与城市轨道交通Rai…

第12天-商品维护(发布商品、商品管理、SPU管理)

1.发布商品流程 发布商品分为5个步骤&#xff1a; 基本信息规格参数销售属性SKU信息保存完成 2.发布商品-基本信息 2.1.会员等级-会员服务 2.1.1.会员服务-网关配置 在网关增加会员服务的路由配置 - id: member_routeuri: lb://gmall-memberpredicates:- Path/api/member/…

学习python第一天---前缀和

一、3956.截断数组&#xff08;前缀和&#xff09;二、前缀和&#xff08;前缀和&#xff09;[0]list(map(int,input().split()))三、子矩阵的和&#xff08;前缀和&#xff09;range(1,n1)四、K倍区间&#xff08;前缀和&#xff09;五、激光炸弹&#xff08;前缀和&#xff0…

模型部署笔记

目录模型部署工作ONNX存在的意义ONNX&#xff08;Open Neural Network Exchange&#xff09;ONNX示例模型推理示例Batch调整量化量化方式常见问题模型部署工作 训练好的模型在特定软硬件平台下推理针对硬件优化和加速的推理代码 训练设备平台&#xff1a; CPU、GPU、DSP ONN…

2023.02.26 学习周报

文章目录摘要文献阅读1.题目2.摘要3.介绍4.模型4.1 SESSION-PARALLEL MINI-BATCHES4.2 SAMPLING ON THE OUTPUT4.3 RANKING LOSS5.实验5.1 数据集5.2 验证方式5.3 baselines5.4 实验结果6.结论深度学习元胞自动机1.定义2.构成3.特性4.思想5.统计特征流形学习1.降维2.空间3.距离…

一些硬件学习的注意事项与快捷方法

xilinx系列软件 系统适用版本 要安装在Ubuntu系统的话&#xff0c;要注意提前看好软件适用的版本&#xff0c;不要随便安好了Ubuntu系统又发现对应版本的xilinx软件不支持。 如下图&#xff0c;发行说明中会说明这个版本的软件所适配的系统版本。 下载 vivado vitis这些都可以…

IT男的一次中年破局尝试--出书

一、转战外企 接上回《人到中年——IT男择业感悟》后&#xff0c;自己从大央企去了某知名外企。外企虽然最近几年的日子已经没有10年前的辉煌与滋润&#xff0c;但相对来说&#xff0c;还能勉强找到工作与生活的平衡点。 划重点&#xff0c;35岁上下的人换工作理由&#xf…

SpringBoot+React博客论坛系统 附带详细运行指导视频

文章目录一、项目演示二、项目介绍三、项目运行截图四、主要代码一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBootReact框架开发的博客论坛系统。首先&#xff0c;这是一个前后端分离的项目&#xff0c;文章编辑器…

大学物理期末大题专题训练总结-磁学大题

&#xff08;事先声明指的是简单的那个磁学大题&#xff0c;另外一类涉及储存的磁能、磁感应强度分布下次说&#xff09;求个磁通量&#xff0c;求个感应电动势&#xff0c;求个安培力大小......这个感觉是不是像你梦回高中&#xff1f;当然&#xff0c;这一块大题跟高中磁学部…

hadoop-Combiner合并、OutputFormat

一、Combiner合并 Combiner是MR程序中Mapper和Reducer之外的一种组件。 2&#xff09;Combiner组件的父类就是Reducer 3&#xff09;Combiner和Reducer的区别在与运行的位置&#xff1b;Combiner是在每一个MapTask所在的节点运行&#xff1b;Reducer是接收全局所有Mapper的输出…

c++11 标准模板(STL)(std::unordered_set)(九)

定义于头文件 <unordered_set>template< class Key, class Hash std::hash<Key>, class KeyEqual std::equal_to<Key>, class Allocator std::allocator<Key> > class unordered_set;(1)(C11 起)namespace pmr { templat…

Linux学习(8.5)文件内容查阅

目录 文件内容查阅&#xff1a; 直接检视文件内容 cat (concatenate) tac (反向列示) nl (添加行号列印) 可翻页检视 more (一页一页翻动) less (一页一页翻动) 数据撷取 tail (取出后面几行) 非纯文字档&#xff1a; od 修改文件时间或建置新档&#xff1a; touc…

数据结构(六)二叉树

一、树形结构概念树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。它具有以下的特点&#xff1a;1、有一个…