首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将CSS类添加到自定义Wordpress meta框?

在自定义WordPress meta框中添加CSS类的方法如下:

  1. 首先,在你的主题文件夹中创建一个新的文件夹,命名为"css"(如果已经存在则跳过此步骤)。
  2. 在"css"文件夹中创建一个新的CSS文件,命名为"custom-meta.css"(或者你喜欢的任何名称)。
  3. 打开"custom-meta.css"文件,并添加你想要的CSS类样式。例如,如果你想要添加一个红色背景的类,可以使用以下代码:
代码语言:txt
复制
.custom-meta {
    background-color: red;
}
  1. 保存并关闭"custom-meta.css"文件。
  2. 接下来,在你的主题文件夹中找到"functions.php"文件,并打开它。
  3. 在"functions.php"文件中添加以下代码:
代码语言:txt
复制
function enqueue_custom_meta_styles() {
    wp_enqueue_style( 'custom-meta-styles', get_template_directory_uri() . '/css/custom-meta.css' );
}
add_action( 'admin_enqueue_scripts', 'enqueue_custom_meta_styles' );
  1. 保存并关闭"functions.php"文件。

现在,你已经成功地将CSS类添加到自定义WordPress meta框中。当你在后台编辑页面时,你的自定义meta框将应用"custom-meta"类的样式。

注意:以上步骤假设你正在使用自定义主题。如果你使用的是现有的主题,请将"functions.php"文件中的代码添加到主题的"functions.php"文件中,而不是直接修改主题文件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WordPress 技巧:使用自定义字段给日志单独加载 JS 脚本

我们在介绍一些 Javasctipt 库或者特效的时候,为了能够更加清楚的展示 Javascript 的效果,需要在日志中做演示,这个时候我们需要加载 Javascript 脚本或者 CSS 样式表,...但是 WordPress 日志编辑会对过滤这些 Javascript 脚本,所以我们无法直接把脚本写到日志,如果修改主题,把脚本添加到主题的 header.php 文件中,那么博客所有的页面都会加载这些脚本...所以这个时候我们可以通过 WordPress 自定义字段来给某篇的日志单独加载 Javascript 脚本和 CSS 样式表。...custom_head(){ if (is_single() || is_page()) { global $post; $custom_head = get_post_meta...> 然后在编辑日志的时候,在自定义字段区域,创建一个新的自定义字段,名字为:"custom_head",输入你要单独为这篇日志加载的 Javascript 代码或者 CSS 样式表即可。

66120
  • WordPress主题开发基础:Body 指南

    这些CSS中的几个会自动添加到WordPress网站上每个页面的部分。 什么是WordPress Body?...接下来,您可以直接编辑WordPress网站上的任何文章或页面。在文章编辑屏幕上,您会在右侧列中找到一个名为“文章(Post Classes)”的新元。 单击以添加您的自定义CSS。...这允许主题开发人员在将自定义CSS添加到body_class函数之前检查条件是否为true或false。 让我们看一些使用条件标签将自定义添加到body的示例。...添加到主题的样式表中,以利用我们刚刚添加的新的自定义CSS。...动态添加自定义body的其他示例 除了条件标签外,您还可以使用其他技术从WordPress数据库中获取信息并为body创建自定义CSS

    2.1K20

    【译】WordPress 中的50个过滤器(5):第31-40个过滤器

    过滤默认的相册样式 WordPress 中会使用[ gallery]这个短代码来加载预定义的CSS。这些默认设置你通过use_default_gallery_style函数自定义。...> 添加文章CSS名 body_class这个过滤器在WordPress 开发中常常用到,那么你知道有个post_class过滤器可以让你在文章内添加自定义CSS 吗?...> 这样就为你的WordPress 网站的第一篇文章添加了.first-post 这个,之后在开发中你就可通过CSS 自定义.first-post 的样式而不用担心因为使用:first这个伪而产生的跨浏览器兼容问题了...在附件中增加自定义的输入WordPress 中,附件大体上相当于一种额外的文章类型——仅仅有小小区别。...通过下面的代码即可为你增加个“license”的输入。 <?

    1.1K70

    Wordpress按评论时间给文章排序

    wordpress作为最受欢迎的程序,我们对其功能要求也是更为多样。我们都知道wordpress文章发布后都是按照发布时间进行排位,最新发布的在最前面。...原理:给每篇文章添加一个自定义字段_commentTime(这个字段的值为最新一条评论的时间)然后使用query_posts函数实现所有文章按照自定义字段_commentTime的值进行排序 具体操作:...所以这里我给出了两个批量添加方法 1.使用函数将代码添加到主题 functions.php文件中,刷新页面就可以自动为所有文章添加自定义字段。...center为自定义字段的名称,true为值,可根据情况修改。...phpmyadmin面板中SQL输入中并执行2.使用sql语句将下列SQL语句添加到phpmyadmin面板中SQL输入中并执行 insert into wp_postmeta (post_id,

    72230

    替换WordPress默认搜索为百度站内搜索(知更鸟主题可照搬)

    可以发现有个【搜索样式】,进去自定义设置一番,会获得一段代码,这时候只要把代码贴到侧边栏的文本应该就能用了吧?...不过,此文并非分享如何将百度站内搜索添加到博客的侧边栏,所以想添加到侧边栏的朋友,请看知更鸟作者鸟哥很久以前的相关教程:《将百度站内搜索添加到侧边小工具中》,理论上适用于各种 WordPress。...---- 下面说下知更鸟主题的博客,如何将上方博客导航里面内嵌的搜索换成百度站内搜索: 一、准备工作 温馨提示:建议在博客的百度收录比较完整的时候,再使用此功能,否则搜索结果将远远小于实际可搜索内容,甚至空白...四、最终效果 在知更鸟主题导航的内嵌搜索中输入任意内容,回车即可: ? ? 虽然样式无法自定义,但总体还算满意!文章写的有点流水账,有兴趣的可以参考操作试试。...至于牵扯到的相关 CSS 样式神马的,请自行调整,就不赘述了,毕竟折腾 WP 还是要有那么一点功底的。

    2.6K40

    自定义 WordPress 评论表单和功能实现

    WordPress 是一个可以高度自定义的平台,它提供了很多接口等方便开发者根据自己的需求来自定义功能和外表。...关于 WordPress 表单的基础知识 我们先来了解一下基础知识。在 WordPress 主题中,使用 comment_form 函数来生成一个评论表单。...我们下面就通过修改这几个参数来实现自定义表单。 自定义 WordPress 评论表单的方法 增加、去掉评论表单中的项目,需要使用 fields 参数。...WordPress 也提供了对应 hook 来实现本文的效果,例如前面提到的去掉表单中的某个文本,可以使用 comment_form_default_fields 这个 hook 来实现。...了解了基本实现过程,你就可以根据自己的需求新建表单的文本等信息了,不要忘了编写对应的 CSS 代码让表单更加美观。 ----

    94410

    WPJAM 「脚本加载优化」:一键加快 WordPress 后台

    用户管理 最强 WordPress 一键用户管理插件。 支持自定义头像,屏蔽个人设置,优化姓名设置, 隐藏登录名,限制登陆失败次数,防止密码被暴力破解等功能。...配置器 全自动 WordPress 配置器,不用一行代码就可以开发。 支持自定义文章类型,自定义字段,自定义分类,分类选项,全局选项。...文章隐藏 设置文章在列表⻚不显示,并且可以根据不同平台进行设置 Meta Data 可视化管理 WordPress Meta 数据,支持所有内置的 Meta 数据: Post Meta,Term Meta...,User Meta 和 Comment Meta。...微信小程序 微信小程序 WordPress 基础插件,包含基础库和管理。 微信群二维码 轮询显示微信群二维码,突破微信群100人限制。

    1K30

    WPJAM「静态文件」:一键合并 WordPress 插件和主题的 JS 和 CSS 文件,加快页面加载速度

    用户管理 最强 WordPress 一键用户管理插件。 支持自定义头像,屏蔽个人设置,优化姓名设置, 隐藏登录名,限制登陆失败次数,防止密码被暴力破解等功能。...配置器 全自动 WordPress 配置器,不用一行代码就可以开发。 支持自定义文章类型,自定义字段,自定义分类,分类选项,全局选项。...文章隐藏 设置文章在列表⻚不显示,并且可以根据不同平台进行设置 Meta Data 可视化管理 WordPress Meta 数据,支持所有内置的 Meta 数据: Post Meta,Term Meta...,User Meta 和 Comment Meta。...微信小程序 微信小程序 WordPress 基础插件,包含基础库和管理。 微信群二维码 轮询显示微信群二维码,突破微信群100人限制。

    7K30

    WordPress主题制作(四):制作头部模板header.php

    更改样式表style.css路径 在此之前你看到的首页都是混乱的,原因是还没加载css样式。现在我们一起把样式加上。.../style.css" type="text/css" media="screen" /> 你可能会问wp-content\themes\Candy目录下不是已经有一个style.css 吗?...>" /> 添加wp_head 有些插件需要在网页头部执行一些如添加一些js或css的动作,要让这些插件能够正常的工作,也让你的主题有更好的兼容性,你应该添加wp_head()函数。...description时显示自定义字段的内容,否则使用文章内容前200字作为描述 $description = $description1 ?...$description1 : $description2; // 填写自定义字段keywords时显示自定义字段的内容,否则使用文章tags作为关键词 $keywords = get_post_meta

    1.3K20

    WordPress 标签的固定链接可以使用 ID 吗?

    自定义分类,也可以设置自定义分类在固定链接中使用 ID 。...勾选之后,点击标签的链接,就是使用标签 ID 来做数字链接了,并且在标签编辑页面也简化了编辑,省略了别名输入: WPJAM 分类管理插件 WPJAM「#分类管理插件#」是 WordPress 果酱出品的付费插件...配置器 全自动 WordPress 配置器,不用一行代码就可以开发。 支持自定义文章类型,自定义字段,自定义分类,分类选项,全局选项。...文章隐藏 设置文章在列表⻚不显示,并且可以根据不同平台进行设置 Meta Data 可视化管理 WordPress Meta 数据,支持所有内置的 Meta 数据: Post Meta,Term Meta...微信小程序 微信小程序 WordPress 基础插件,包含基础库和管理。 微信群二维码 轮询显示微信群二维码,突破微信群100人限制。

    1.3K20

    原创插件:网站收录查询和显示WordPress插件(自定义栏目优化版)

    WordPress 不是还有自定义栏目嘛??而且,自定义栏目还可以在后台随时修改键值呢!因为百度偶尔会将已收录的文章 K 掉,最近张戈博客实在遭遇太多这种早上收录,晚上被 K 的惨况!...小小的研究了一下 WordPress自定义栏目,不到半小时,我就将上次分享的百度已收录的查询和显示代码改成了自定义栏目改进版(post_meta)! 一、效果预览 ? ?...二、WordPress 插件版 刚好昨晚开发了一个 WordPress 对话插件,趁热打铁,索性也将这个功能打包成了 WordPress 插件,方便小白站长们使用!...> 比如,张戈博客是将以上函数添加到了文章模板的副标题位置: ? 三、纯代码部署 理论上,任何 WordPress 插件都能采用纯代码来替代,所以继续分享一下纯代码部署的方法。...strpos($rs,'很抱歉,没有找到与') ){             update_post_meta($post_id, 'baidu_record', 1) || add_post_meta

    1.4K60

    WordPress 初学者词汇表(术语解释)

    默认情况下,WordPress 会自动使用您帖子的前 55 个单词作为摘录,不过您可以在创建帖子时自定义一个摘录。 Meta 不,我们不是在谈论 Facebook。...谈到 WordPress Meta是指有关您的内容的关键信息。Meta标签用于帮助搜索引擎或社交平台确定您的网站是什么以及您的帖子是关于什么的。这可以包括帖子作者,您的帖子何时发布,有多少评论等。...这可以包括上传自定义徽标、选择主要网站强调色、创建菜单、添加小部件、自定义帖子类型设置等等。此部分可以在外观 > 自定义下的 WordPress 主仪表板中找到。...它由 Automattic(因此是 WordPress 本身)创建和维护,如果您计划使用多个插件将这些功能添加到 yoru 站点,它可能是一个很好的解决方案。...更好的是,优秀的 WordPress 托管公司在其托管平台中内置了 Let’s Encrypt,因此您通常只需选中几个或单击一个按钮,您的网站就应该可以使用了!

    7.2K20

    WordPress文章添加类似说说的状态样式

    php echo get_avatar( get_the_author_meta( 'ID' ), apply_filters( 'Readd_status_avatar', '48' ) ); ?...步骤三:添加CSS样式,添加到style.css里面的任意位置 rticle.format-status .avatar{float:left;margin-right:24px;box-shadow...0;boeder:5px solid:red;background:#F0F0F0;border-radius:15px; 现在已经好了,马写一篇试下吧,哈哈,记得选择文章样式为状态(在后台文章编辑右侧...---- skills:如果需要修改头像大小,样式,说说的背景样式大小等等,可以自行修改CSS代码。 截图中①处的‘发布时间’是网上教程所没有的,我自己修改了一下。我用的代码贴在下面。...php echo get_avatar( get_the_author_meta( 'ID' ), apply_filters( 'Readd_status_avatar', '48' ) ); ?

    1.4K30

    怎么添加网站到谷歌站长工具(Google Search Console)

    今天这篇文章,就来个大家讲讲如何将网站添加到谷歌 站长工具.打开谷歌站长工具,添加网站打开 谷歌搜索‘google search console’,点击进入谷歌站长工具官网,当进入谷歌 官网之后,需要我们选择添加资源类型...WordPress网站添加Meta tag验证代码WordPress添加验证代码到网站header部分有很多种方式,最直接简单的方法就是直接进入header.php文件,将meta代码添加到...但是我一般不推荐这种方式,因为对于新手,如果误删除了WordPress本身的代码,网站很容易崩溃。我们可以通过插件方式安装。...Headers and Footers’插件并且激活,激活成功后,后台左侧菜单栏就会出现Code Snippets选项菜单,选择Code Snippets –> Header & Footer, 将Meta...这样我们的网站就会成功添加到谷歌站长工具。总结当我们的网站刚开始添加成功后,谷歌站长工具还没有数据。需要等待一天左右的时间才可以展示数据。

    64110
    领券