wordpress文章中表格增加CSS样式效果

今天遇到一个小伙伴,买到的主题呢发布的表格模式,没有样式,来找到了我,为此我弄了下给大家看看方案;

wordpress增加表格CSS样式效果应该怎么弄比较好,

一、增加表格样式

如果在wordrpess中没有表格样式,就需要自己增加一个样式到 style.css 当中了:(以下内容增加到主题的样式文件: style.css )

.table{width:100%;border-top:1px solid #d8d8d8;border-left:1px solid #d8d8d8;margin-bottom:20px}
.table th{text-align:center;background-color:#f6f5f2;font-weight:normal}
.table td,.table th{text-align:center;padding:10px 15px;font-size:14px;border-right:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8}

要使以上样式生效,需要在 <table> 标签中增加 class="table":

<table class="table">

实际效果:

方法 属性 方法
实例方法 调用 实例属性 $this->pu_shuxing
实例方法 调用 静态属性 self::$jing_shuxing;
静态方法 调用 实例属性 $this->pu_shuxing; 错误!
静态方法 调用 静态属性 self::$jing_shuxing;

后台样式:

wordpress文章中表格增加CSS样式效果

 

效果截图:

wordpress文章中表格增加CSS样式效果

二、自动生成 class=”table”

当然,如果是和我一样懒到一定境界,不愿意进入wordpress后台修改的话,可以增加以下代码至 functions.php ,自动将所有 <table> 变成 <table class=”table”>:(以下内容增加到主题的样式文件: functions.php )

// 所有 <table> 变成 <table class="table">
function wp_replace_text($text_wp){
$replace = array(
// '原始文字' => '替换为这些'
'<table>' => '<table class="table">',
);
$text_wp = str_replace(array_keys($replace), $replace, $text_wp);
return $text_wp;
}
add_filter('the_content', 'wp_replace_text'); //正文

以上就是”怎么给wordpress增加表格CSS样式效果教程“的介绍。

如需购买虚拟主机,推荐酷番云,共享虚拟主机、独享虚拟主机齐备,各类配置均有,最低只需要9/月,满足不同网站建设需求,低成本建站;价格实惠;同时提供快速0元备案,让你快速运营。

购买地址:

https://www.kufanyun.com/host/buy.html

图片来源于AI模型,如侵权请联系管理员。作者:酷小编,如若转载,请注明出处:https://www.kufanyun.com/ask/708.html

(0)
上一篇 2020年4月20日 23:47
下一篇 2020年6月15日 00:53

相关推荐

  • 玩lol需要配置多少,玩lol需要配置

    如何配置 LOL 以实现极致游戏体验与高效训练在《英雄联盟》(League of Legends)这款高强度的竞技游戏中,硬件配置与软件设置不仅是流畅运行的基础,更是决定玩家操作上限、反应速度以及长期训练效率的关键因素,许多玩家往往忽视了“配置”的双重含义——既包括电脑硬件的选型,也涵盖游戏内键位、画质及外设的……

    2026年6月9日
    0623
  • 华硕笔记本配置大更新,到底哪款最值得入手?

    在科技日新月异的今天,笔记本电脑的配置更新不仅是性能数字的跃升,更是对用户未来需求的精准预判,作为行业的领军者之一,华硕近期对其全系列笔记本进行了深度的配置更新,其核心驱动力来自于最新的英特尔酷睿Ultra处理器与AMD锐龙8040系列处理器,以及NVIDIA GeForce RTX 40 SUPER系列显卡的……

    2025年10月16日
    02540
  • 移动web开发设计页面,移动web开发设计页面怎么做

    移动Web开发的核心在于构建“响应式+高性能”的混合架构,通过CSS Grid/Flexbox布局适配多端,结合PWA技术与懒加载策略,确保在2026年5G普及环境下实现毫秒级首屏渲染与极致用户体验,移动Web开发的核心技术演进布局与适配策略的标准化在2026年,随着折叠屏手机和超宽屏设备的普及,传统的“移动端……

    2026年5月27日
    0893
    • 服务器间歇性无响应是什么原因?如何排查解决?

      根源分析、排查逻辑与解决方案服务器间歇性无响应是IT运维中常见的复杂问题,指服务器在特定场景下(如高并发时段、特定操作触发时)出现短暂无响应、延迟或服务中断,而非持续性的宕机,这类问题对业务连续性、用户体验和系统稳定性构成直接威胁,需结合多维度因素深入排查与解决,常见原因分析:从硬件到软件的多维溯源服务器间歇性……

      2026年1月10日
      020
  • 分布式文件存储系统平台如何实现高并发与数据可靠性?

    分布式文件存储系统平台的核心架构与技术实现分布式文件存储系统平台作为现代数据基础设施的核心组件,通过将数据分散存储在多个物理节点上,实现了高可用性、高扩展性和数据安全性的统一,这类平台不仅解决了传统单机存储在容量和性能上的瓶颈,还通过冗余机制和负载均衡技术,为大数据、云计算、人工智能等场景提供了可靠的数据存储支……

    2025年12月20日
    02240

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注