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

WordPress:在TinyMCE编辑器的<p>-tag中添加自定义样式

WordPress是一种开源的内容管理系统(CMS),它提供了一个易于使用的平台,用于创建和管理网站和博客。它是基于PHP语言和MySQL数据库的,具有丰富的插件和主题生态系统,使用户可以根据自己的需求定制和扩展网站功能。

TinyMCE是WordPress默认的所见即所得(WYSIWYG)编辑器,用于编辑和格式化文章内容。在TinyMCE编辑器的<p>-tag中添加自定义样式,可以通过以下步骤完成:

  1. 创建自定义样式:首先,你需要在WordPress主题的样式表(style.css)中添加自定义样式。你可以使用CSS选择器来选择<p>标签,并为其添加所需的样式属性,例如颜色、字体大小、背景等。
  2. 添加自定义样式到TinyMCE编辑器:为了在TinyMCE编辑器中显示自定义样式,你需要将样式添加到WordPress的编辑器样式表(editor-style.css)中。你可以在主题文件夹中找到这个文件,并在其中添加与步骤1中创建的自定义样式相同的CSS代码。
  3. 启用编辑器样式:为了使WordPress使用编辑器样式表,你需要在主题的functions.php文件中添加以下代码:
代码语言:txt
复制
function custom_editor_styles() {
    add_editor_style( 'editor-style.css' );
}
add_action( 'admin_init', 'custom_editor_styles' );
  1. 更新文章样式:现在,当你在文章编辑器中使用<p>标签时,它将应用你在步骤1中创建的自定义样式。

总结: WordPress是一种流行的内容管理系统,它提供了一个易于使用的平台来创建和管理网站和博客。通过在TinyMCE编辑器的<p>标签中添加自定义样式,你可以为文章内容添加个性化的外观。要实现这一点,你需要在主题的样式表和编辑器样式表中添加相应的CSS代码,并在functions.php文件中启用编辑器样式。这样,你就可以为WordPress网站的文章内容添加自定义样式了。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 人工智能(AI):https://cloud.tencent.com/product/ai
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 区块链服务(BCS):https://cloud.tencent.com/product/bcs
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

8个用于设计漂亮表格WordPress插件

WordPress作为内容管理工具一个好处是,几乎所有文字处理软件能做事情(例如文本格式,布局格式,嵌入图像等等)都可以WordPress编辑器完成,但比较欠缺一种功能是表格设计。...为你网站添加有趣互动方式 以下是一些比较好用WordPress表格插件推荐 TinyMCE Advanced TinyMCE Advanced让用户可以不编辑HTML代码情况更好地控制内容,该插件还有在编辑器工具栏中有附带了许多其他功能...管理后台,提供了一个类似Excel界面。只需添加数据、选择样式和更改设置,然后发布即可。你可以使用该插件创建表格、图表,并且比TinyMCE具有更多格式设置。 League Table ?...也是可以完全自定义,不必在有限设计样式中选择。 免费版功能已经足够满足基本需求,付费版功能会更强大。  ...或许你不会在WordPress中经常用到表格工具,但是从上面可以了解到WordPress添加表格也是很容易事情,可以无痛添加

5K20
  • WordPress自带TinyMCE编辑器相关功能增强

    WordPress 默认那个编辑器叫做TinyMCETinyMCE是一个轻量级基于浏览器所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好支持。...";')); 添加编辑器默认内容(编辑器内可见) 新建文章后编辑器内容默认是空,有些朋友做WordPress主题站、插件站或单纯下载站,一些标准格式化文章每次都会输入“主题名称”、“主题作者...'); 添加更多HTML标签(慎用) 此功能请慎用,因为WordPress自带TinyMCE编辑器会默认过滤掉不符合XHTML 1.0html标签,不排除某些情况下也可能会用到这些标签,所以把方法放出来供大家参考吧..."); //添加到工具栏第三行 让编辑器支持中文拼写检查 WordPress自带TinyMCE编辑器默认对英文拼写进行检查,怎么样才能让其支持中文拼写检查呢?...如果你使用了WordPress3.3+版本,可以用以下方法快捷方便在后台HTML编辑器中加入自定义按钮 步骤一:首先创建一个js文件,粘贴如下代码并保存为my_quicktags.js文件: QTags.addButton

    2.8K50

    WPJAM TinyMCE:一键增强 WordPress 经典编辑器

    现在大家都开始使用古腾堡编辑器了,特别是 WordPress 最新几个版本发行,大部分更新都围绕古腾堡编辑器,不过一些地方还是有用到经典编辑器,比如我们花生小店商品编辑,就用不到古腾堡那么高级编辑器...经典编辑器基本够用,但是有些格式化工具缺失,还是挺烦人,所以我们为了商家花生小店时候方便编辑商品,我们做了一个 WordPress 经典编辑器增强插件,为了方便就叫做 WPJAM TinyMCE。...添加编辑器按钮 WPJAM TinyMCE 这个插件首先增加几个样式按钮:下划线,背景颜色,两端对齐等,增加了常用 WordPress 内容分页按钮,还支持设置字体和大小,最后还把按钮布局调整了一下,...安装 WPJAM TinyMCE 之前编辑器: 安装 WPJAM TinyMCE 之后编辑器: 新增插入表格功能 我增加了 TinyMCE 表格插件,让大家在编辑器就能够直接插入表格: 还支持表格行...现在在屏幕截图之后,只需要按快捷键就能粘贴到编辑器里面,然后文章保存时候自动把图片上传到媒体库。非常方便快捷。

    82510

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

    WordPress 开启固定链接之后,标签固定链接都是使用标签别名,比如: https://blog.wpjam.com/tag/wordpress-tips/ 标签默认固定链接不好看 如果标签没有设置别名...有自定义分类,也可以设置自定义分类固定链接中使用 ID 。...博客 支持一键将文章图片下载到 WordPress 媒体库 搜索优化 支持限制和关闭搜索 WordPress 插件 编辑器优化 优化 WordPress 传统 TinyMCE 编辑器 添加下划线等按钮...Script Loader 通过恢复 WordPress 联合加载方式来优化 WordPress 后台脚本加载。 外部链接 将文章或评论外部链接加上安全提示中间页。...让用户确认之后再跳转,并还支持添加 nofollow rel 属性。 话题标签 文章插入 #话题标签#。

    1.3K20

    WordPress 3.9+ TinyMCE 4 编辑器增强开发

    WordPress 3.9版本后,WordPress 默认编辑器 TinyMCE 随之升级到了版本4,带来问题以前默认编辑器增强开发效果可能失效。...这篇文章旨在破旧立新,通过几个例子给大家带来几个TinyMCE4 编辑器增强开发技巧。...还原字体种类及大小选择按钮 默认的话,字体种类及大小这两个按钮没有添加TinyMCE 编辑器,通过下面的函数,就可以实现有下拉形式字体种类及大小这两个按钮。...除了默认字体,根据个人需求你可能需要添加其他字体,比如说Google font(不过天朝嘛目前貌似有点难连接这个)上字体,那么你可以用下面的代码注册一个自定义字体。...先看图,就知道实现效果是什么了,这个的话 Devework主题1.5 版本之后短代码功能上按照这个增加了可视化状态下输入按钮。

    99860

    解决新版wordpress打开速度超级慢问题

    然后仔细排查了一下原因,发现是由于 Google服务器无法访问造成,因为新版wordpress系统中会加载谷歌Opensans字体样式,导致网站非常慢,需要等待很久。...文件改名为function.php.backup 作为备份,使用你常用文本编辑器,比如 EverEdit 编辑器,打开 function.php文件,添加下面代码,保存,用ftp上传覆盖即可 function...WordPress 3.5 ~ WordPress 3.7 各版本(含类似 3.5.1 这样小版本),核心程序文件 wp-includes/script-loader.php 和自带主题函数文件...含类似 3.8.1 这样小版本),除了核心程序文件 script-loader.php文件和自带主题函数文件 functions.php 文件外,WordPress 自带编辑器样式文件也调用了 Google...含类似 3.9.1 这样小版本),和 WordPress 3.8 版本一样,只是 WordPress 自带编辑器样式文件更换了位置:wp-includes/script-loader.phpwp-includes

    5.6K30

    三种插件开发模式,带你玩废tinymce

    配置就好了 custom_elements 这个配置目的在于可以tinymce编辑器中指定非 HTML 元素,换一话说 就是可以自定义标签(自定义节点,这个节点 与 Web Components...因为是自定义标签,并且是 tinymce 编辑器,所以出了这个编辑器,客户端浏览器可是识别不了, 所以需要想个办法 转换一下。...通过两个过滤器 ,针对自定义节点 加入对应转换逻辑,实现无论是在编辑器环境 还是客服浏览器中都能完美的渲染出来 Parser : 即 API tinymce.html.DomParser...tinymce 实例 Window 因为自定义节点是插入 tinymce 实例。...tinymce 实例 Window 因为自定义节点是插入 tinymce 实例

    5K30

    Django之富文本(获取内容,设置内容方式)

    富文本 1、Rich Text Format(RTF) 微软开发跨平台文档格式,大多数文字处理软件都能读取和保存RTF文档,其实就是可以添加样式文档,和HTML有很多相似的地方 图示 ?...# 注册富文本应用 'tinymce', ] 添加默认配置 # 以字典形式配置富文本框架tinymce # 作用于管理后台中富文本编辑器 TINYMCE_DEFAULT_CONFIG =...format)宽高 'width': 800, 'height': 600, # 汉化 'language': 'zh', # 自定义常用固定样式 'style_formats...': [ # title=样式名称 # styles=自定义css样式 # inline:xxx = 将加样式文本放在行内元素显示 # block:xxx = 将加样式文本放在块级元素显示...tinyMCE.getInstanceById(editorId).getBody().innerHTML = content; //获取富文本编辑器内容 var con = tinyMCE.getInstanceById

    4.1K30

    Django Admin后台管理

    admin.py创建一个admin.ModelAdmin子类,注册模型类时调用admin.site.register方法时,第二个参数中指定自定义模型管理类。...5.其他 富文本编辑器 后台管理员如果需要在后台编辑带样式文字,如编辑对商品详细信息描述,就需要使用富文本编辑器。这里以tinymce为例Django Admin后台中如何使用富文本编辑器。...安装tinymce pip install django-tinymce==2.6.0 项目的settings.pyINSTALLED_APPS元组中加入’tinymce’ INSTALLED_APPS...', # 富文本编辑器 ) 项目的settings.py最后位置添加tinymce配置 TINYMCE_DEFAULT_CONFIG = { 'theme': 'advanced',...)), ..., url(r'^tinymce/', include('tinymce.urls')), # 富文本编辑器 随后就可在模型类中使用该字段,应用models.py添加如下内容

    2.8K10

    腾讯云:WordPress创建带缩略图文章内链

    如何用 WordPress 短代码或可视化编辑器按钮来创建一个图文混排文章内链 更多内容关注qq群(197783973) 文章内链 SEO 链接建设中一直是相当重要,良好内链结构对 SEO 十分有益...当你有在当前文章页调用站内其他文章或页面时,积极页面增加内链可以极大地提高蜘蛛抓取次数和深度,增加了收录量同时也提高了锚文本关键词收录。...有些旧文章如果更新了,你也可以通过新文章添加内链来引导蜘蛛重新抓取收录更新。 常见内链形式是文字链接,结构为 锚文本。...some-mysql:mysql -p 49000:8…… 效果如下: 如果你不是文章内容,而是在其他地方调用,则可使用 do_shortcode('') 来调用。...四、添加 TinyMCE 可视化界面下编辑器按钮 1)文本状态下添加快捷按钮 WordPress 默认内置TinyMCE 编辑器

    93730

    WordPress 技巧:优先执行 Shortcode,移除 Shortcode 自动添加 br 和 p 标签

    我们使用 WordPress Shortcode API 开发插件时候,有个比较麻烦问题,就是 WordPress 会自动 shortcode 内添加 br 或者 p 标签,这样可能会打乱你原先预想...造成这个问题原因是 WordPress 默认日志内容处理流程,wpautop(将回车转换成 p 或者 br 标签函数)是 Shortcode 前面运行。...所以我们解决方案也是非常简单,改变它们执行顺序,在当前主题 functions.php 文件添加: remove_filter( 'the_content', 'wpautop' ); add_filter...这样调整顺序之后,你 shortcode 里面的内容,就不会有自动添加 p 或者 br 标签,但是如果 shortcode 中部分内容你又需要一些 p 或者 br 标签用来换行的话,你需要自己手动自己...shortcode 处理程序添加 wpautop 来处理了: function bio_shortcode($atts, $content = null) { $content = wpautop

    61420

    WordPress 全能分类管理插件:WPJAM Taxonomy

    WPJAM「分类管理插件」是 WordPress 果酱出品全能型分类管理插件,这个插件目前主要有七大功能: 一、层式管理分类 分类管理界面增加「只显示第一级」按钮实现分类层式管理: 点击之后混杂分类就会变得非常清晰...四、标签和分类固定链接使用ID WordPress 开启固定链接之后,标签固定链接都是使用标签别名,比如: https://blog.wpjam.com/tag/wordpress-tips/ 点击...博客 支持一键将文章图片下载到 WordPress 媒体库 搜索优化 支持限制和关闭搜索 WordPress 插件 编辑器优化 优化 WordPress 传统 TinyMCE 编辑器 添加下划线等按钮...Script Loader 通过恢复 WordPress 联合加载方式来优化 WordPress 后台脚本加载。 外部链接 将文章或评论外部链接加上安全提示中间页。...让用户确认之后再跳转,并还支持添加 nofollow rel 属性。 话题标签 文章插入 #话题标签#。

    1.3K20

    wordpress添加文章表情

    用上良心主题已经有一段时间了,看到他文章里有表情。唉,不错,有的心情,想法,用一个符号就可以解决了,开始满世界找把表情添加到文章办法。...其实,wordpress自带了表情,只不过非常难看,可以在后台撰写设置将表情符号转化为对应表情。...这个方法简单,不需要修改文件啥,自己找到好看表情覆盖掉wordpress自带表情即可,缺点就是谁还记得那么多表情符号啊。 :!: 另想他法。费了好大劲,换关键字,heson这里找到了。...进后台编辑器看看效果吧。直接在编辑器就可以添加表情,哇咔咔。...代码里有表情路径,应该可以改,不知道为什么我改了路径后台编辑器就不显示了,但是文章可以显示,可能是我把主题中所有图片搬到图床原因吧~算了,不整了,直接用FTP覆盖掉原来表情文件也不是神马难事

    55650

    WordPress免费主题:Document,让阅读变得更加方便

    作为一个程序员,日常工作、生活、学习过程基本都有很多需要做笔记地方;做笔记主要目的之一是为了“温故而知新”,另一个则是为了在下一次遇到时候,不需要再次耗费精力去找解决方法; 回顾自己之前写那个主题...2022-10-25更新 1.经典编辑器新增表格插件(Tinymce自身table插件) 表格列 表格列 表格列 表格列 表格列 表格列 表格列 表格列 表格列 2.新增快捷下划线 这是下划线,这是下划线...关于主题 大部分代码都有注释,作为学习wordpress主题开发学习主题模板应该是很OK 安装之后 主题默认启用经典文章编辑器、经典小部件编辑器,同时对经典文章编辑器进行了增强...新建菜单 添加菜单项 发布到顶部菜单  5.小部件、侧边栏 主题具有文章信息、作者信息、最新文章、最近更新 四个小部件(小部件自带配置,可在添加时候填写),添加后默认文章页面的右侧边栏显示。...关闭之前主题自带小工具 拖入document主题小部件 保存修改 不保存的话,会显示之前主题小部件导致样式错乱 6.邮箱SMTP配置 wordpress自带邮件发送服务不太友好,你可以主题选项开启主题自带邮件服务

    4.2K30

    WordPress 4.6 发布:原生字体和更新更简洁

    编辑器改机 内链检查 现在 WordPress 会在你写文章时候检查你输入链接是否存在。...内容恢复 现在 WordPress 使用浏览器本地存储功能来自动保存文档,所以 WordPress 4.6 恢复已保存内容将更加简单。...底层引擎改进 Resource Hints:资源提示(Resource Hints)可以让浏览器决定预加载哪些资源,WordPress 4.6 自动根据网站样式和脚本文件自动设置。...更强健HTTP请求API:WordPress 改进了 HTTP 标准支持,添加了不区分大小写 headers,支持并行 HTTP 请求,以及支持国际化域名。...Meta 注册 API:现在可以支持 types,描述,并且可直接用在 REST API 。 语言包:只要社区上有翻译了,WordPress 就会安装和使用主题或者插件最新语言包。

    46010

    WPJAM「评论增强插件」支持后台添加评论

    WPJAM「评论增强插件」新增后台添加评论功能,这样管理员也给一些文章添加一些评论来丰富文章内容了,操作也非常简单,在后台文章列表,点击「添加评论」按钮: 就会弹出管理员添加评论界面: 按照要求输入平路用户昵称...博客 支持一键将文章图片下载到 WordPress 媒体库 搜索优化 支持限制和关闭搜索 WordPress 插件 编辑器优化 优化 WordPress 传统 TinyMCE 编辑器 添加下划线等按钮...配置器 全自动 WordPress 配置器,不用一行代码就可以开发。 支持自定义文章类型,自定义字段,自定义分类,分类选项,全局选项。...Script Loader 通过恢复 WordPress 联合加载方式来优化 WordPress 后台脚本加载。 外部链接 将文章或评论外部链接加上安全提示中间页。...格式文章 WordPress 实现真正文章格式 草稿分享 一键生成草稿临时分享链接 并可设置分享链接有效期 文章专题 设置文章专题,并在文章末尾显示一个文章专题列表。

    1.1K20

    WordPress添加简书风格连载目录和文章导航

    需求 自从机缘巧合开始翻译Gensis系列教程,越来越沉迷于研究这款WordPress主题框架了,一边翻译一边学习一边也自己丘壑博客上实验。...要实现模态效果需要引入一个jQuery模态插件, remodal ,这个插件用法挺简单,基本上是开箱即用,也自带了CSS主题,还可以做各种自定义配置,用来实现我需求已经很够用,够用就行。...后来发现了一个最简单办法:WordPress模板PHP文件里可以直接把shortcode内容显示出来,有一个函数do_shortcode() ,这就太方便了,把之前另一篇文章里用到插件 display...但这不符合我需求,我需求是: 只需要在添加了Genesis Explained这个tag文章下面才显示 在这两个链接中间插入一个“目录”按钮 只同系列文章之间导航,不显示其他无关文章 如果文章是该系列第一篇...第二步 添加模态对话框 这一步很简单,直接把remodalJavaScript文件和CSS文件下载下来,扔进子主题js文件夹里,注册到WordPress里就行了,都不需要在写额外js文件来初始化或者运行这个插件

    2K20
    领券