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

相关推荐

  • 开发一个基础版租房平台app,预算需要多少?

    开发一个租房平台App的费用是一个复杂且多维度的问题,它没有一个固定的答案,其成本范围可以从几万元到上百万元人民币不等,最终的费用取决于项目的规模、功能的复杂性、设计要求、技术选型以及开发团队的地理位置和经验水平,为了清晰地理解这笔投入,我们可以将其拆解为几个核心组成部分进行详细分析,功能复杂度:决定成本的核心……

    2025年10月18日
    0170
  • 安全生产技术数据微盘如何高效管理?

    在工业生产领域,安全生产始终是发展的生命线,而技术数据的高效管理与应用则是筑牢这条生命线的基石,随着数字化转型的深入推进,“安全生产技术数据微盘”作为一种轻量化、便捷化的数据管理工具,正逐渐成为企业提升安全管理水平的重要抓手,安全生产技术数据的内涵与价值安全生产技术数据涵盖设备运行参数、环境监测指标、人员操作记……

    2025年11月6日
    070
  • 红帽网络配置界面,有何独特之处?配置技巧与优化方法揭秘!

    在当今信息化时代,网络配置对于服务器管理至关重要,Red Hat作为Linux发行版中的佼佼者,其网络配置功能丰富,界面友好,本文将详细介绍Red Hat的网络配置方法,帮助读者轻松掌握网络设置技巧,Red Hat网络配置概述Red Hat的网络配置主要通过以下几个步骤进行:检查网络接口状态配置网络接口设置静态……

    2025年11月11日
    070
  • 服务器最高配置是什么?性能极限揭秘与选购指南!

    在当今信息化时代,服务器作为企业、组织和个人数据存储与处理的核心,其配置的高低直接影响到系统的稳定性和性能,本文将详细介绍服务器最高配置的相关内容,包括硬件配置、软件配置以及性能优化等方面,硬件配置处理器(CPU)服务器的核心部件是处理器,它决定了服务器的计算能力,目前市场上主流的服务器处理器有Intel Xe……

    2025年11月8日
    090

发表回复

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