WordPress的网站显示内联的CSS代码 [英] Wordpress site displays inline css code
本文介绍了WordPress的网站显示内联的CSS代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在 http://kaniamea.com/turtle/ 网站上工作，如果您看到源代码，你会看到以下内容。这是内联代码，它随主题一起提供。有没有办法在子文件夹中的单独样式表中组织代码？
还有一种限制头标签的方法。看起来那里有很多冗余标签。
非常感谢！
< style type =text / css> .ssba {
}
.ssba img
{
width：40px！important;
padding：6px;
border：0;
box-shadow：none！important;
display：inline！important;
vertical-align：middle;
}
.ssba，.ssba a
{
text-decoration：none;
背景：无;
font-family：独立花;
font-size：20px;
}< / style>< style type =text / css> #header，#main，＃topbar-inner {max-width：1250px; }＃container.one-column {}＃container.two-columns-right #secondary {width：250px;浮动：权利; }＃container.two-columns-right #content {width：910px;向左飘浮; } / * fallback * /＃container.two-columns-right #content {width：calc（100％ - 280px）;向左飘浮; }＃container.two-columns-left #primary {width：250px;向左飘浮; }＃container.two-columns-left #content {width：910px;浮动：权利; } / * fallback * /＃container.two-columns-left #content {width：-moz-calc（100％ - 280px）;浮动：权利; width：-webkit-calc（100％ - 280px）;宽度：calc（100％ - 280px）; }＃container.three-columns-right .sidey {width：125px;向左飘浮; }＃container.three-columns-right #primary {margin-left：30px;保证金右：30PX; }＃container.three-columns-right #content {width：880px;向左飘浮; } / * fallback * /＃container.three-columns-right #content {width：-moz-calc（100％ - 310px）;向左飘浮; width：-webkit-calc（100％ - 310px）; width：calc（100％ - 310px）;}＃container.three-columns-left .sidey {width：125px;向左飘浮; }＃container.three-columns-left #secondary {margin-left：30px;保证金右：30PX; }＃container.three-columns-left #content {width：880px; float：right;} / * fallback * /＃container.three-columns-left #content {width：-moz-calc（100％ - 310px）;浮动：权利; width：-webkit-calc（100％ - 310px）; width：calc（100％ - 310px）; }＃container.three-columns-sided .sidey {width：125px;向左飘浮; }＃container.three-columns-sided #secondary {float：right; }＃container.three-columns-sided #content {width：880px;浮动：权利; / * fallback * / width：-moz-calc（100％ - 310px）;浮动：权利; width：-webkit-calc（100％ - 310px）;浮动：权利; width：calc（100％ - 310px）;浮动：权利;余量：0 155px 0 -1190px; } body {font-family：Ubuntu; } #content h1.entry-title a，#content h2.entry-title a，#content h1.entry-title，#content h2.entry-title {font-family：Yanone Kaffeesatz Regular; } .widget-title，.widget-title a {line-height：normal; font-family：打开Sans Light; } .entry-content h1，.entry-content h2，.entry-content h3，.entry-content h4，.entry-content h5，.entry-content h6，#comments＃reply-title，.nivo-caption h2， ＃front-text1 h1，＃front-text2 h1，.column-header-image {font-family：Open Sans Light; }＃site-title span a {font-family：Yanone Kaffeesatz Regular; } #access ul li a，#access ul li span {font-family：Droid Sans; } body {color：＃444444; background-color：＃FCFFC6} a {color：＃1693A5; } a：hover，.entry-meta span a：hover，.comments-link a：hover {color：＃D6341D; } #header {background-color：;} }＃site-title span a {color：＃1693A5; }＃site-description {color：＃999999; } .socials a {background-color：＃1693A5; } .socials-hover {background-color：＃D6341D; } / *主菜单顶层* / #access a，＃nav-toggle span {color：＃333333; } #access，＃nav-toggle {background-color：＃f0f37a; } #access> .menu> ul> li> a> span {border-color：＃d2d55c; -moz-box-shadow：1px 0 0＃ffff92; -webkit-box-shadow：1px 0 0＃ffff92; box-shadow：1px 0 0＃ffff92; } #access a：hover {background-color：＃fdff87; } #access ul li.current_page_item> a，#access ul li.current-menu-item> a，#access ul li.current_page_ancestor> a，#access ul li.current-menu-ancestor>一个{background-color：＃fdff87; } / *主菜单子菜单* /＃访问> .menu> ul> li> ul：before {border-bottom-color：＃2D2D2D;} #access ul ul ul：before {border-right-color：＃2D2D2D;} #access ul ul li {background-color：＃2D2D2D;边框顶部的颜色：＃3b3b3b; border-bottom-color：＃222222} #access ul ul li a {color：#BBBBBB} #access ul ul li a：hover {background：＃3b3b3b} #access ul ul li.current_page_item> a，#access ul ul li.current-menu-item> a，#access ul ul li.current_page_ancestor> a，#access ul ul li.current-menu-ancestor> {背景颜色：＃3b3b3b; } #topbar {background-color：＃000000; border-bottom-color：＃282828; box-shadow：3px 0 3px＃000000; } .topmenu ul li a {color：#CCCCCC; } .topmenu ul li a：hover {color：#EEEEEE; border-bottom-color：＃1693A5; } #main {background-color：#FFFFFF; }＃author-info，＃entry-author-info，.page-title {border-color：＃1693A5;背景：＃F7F7F7; }＃entry-author-info＃author-avatar，＃author-info＃author-avatar {border-color：#EEEEEE; } .sidey .widget-container {color：＃333333;背景颜色： ; } .sidey .widget-title {color：＃666666; background-color：＃F7F7F7; border-color：#cfcfcf;} .sidey .widget-container a {color :;} .sidey .widget-container a：hover {color :;} .entry-content h1，.entry-内容h2，.entry-content h3，.entry-content h4，.entry-content h5，.entry-content h6 {color：＃444444; } .sticky .entry-header {border-color：＃1693A5} .entry-title，.entry-title a {color：＃444444; } .entry-title a：hover {color：＃000000; } #content h3.entry-format {color：＃333333; background-color：＃f0f37a; } #footer {color：#AAAAAA;背景颜色： ; }＃footer2 {color：#AAAAAA;背景颜色：＃F7F7F7; } #footer a {color：;} } #footer a：hover {color：;} }＃footer2 a，.footermenu ul li：after {color：;} }＃footer2 a：hover {color：;} } #footer .widget-container {color：＃333333;背景颜色： ; } #footer .widget-title {color：＃666666; background-color：＃F7F7F7; border-color：#cfcfcf} a.continue-reading-link，#cryout_ajax_more_trigger {color：＃333333！important;背景：＃f0f37a;底部边框颜色：＃1693A5; } a.continue-reading-link：after {background-color：＃D6341D; } a.continue-reading-link i.icon-right-dir {color：＃1693A5} a.continue-reading-link：hover i.icon-right-dir {color：＃D6341D} .page-link a，。页面链接> span> em {border-color：#CCCCCC} .columnmore a {background：＃D6341D; color：＃F7F7F7} .columnmore a：hover {background：＃1693A5;} .file，.button，#respond .form-submit input＃submit ，输入[type = submit]，输入[type = reset] {background-color：#FFFFFF; border-color：#CCCCCC; box-shadow：0 -10px 10px 0＃F7F7F7 inset; } .file：hover，.button：hover，#respond .form-submit input＃submit：hover {background-color：＃F7F7F7; } .entry-content tr th，.entry-content thead th {color：＃444444; } .entry-content fieldset，#content tr td，＃content tr th，#content thead th {border-color：#CCCCCC; } #content tr.even td {background-color：＃F7F7F7！important; } hr {background-color：#CCCCCC; } input [type =text]，input [type =password]，input [type =email]，input [type =file]，textarea，select，input [type =color]，输入[类型= 日期]，输入[类型= 日期时间]，输入[类型= 日期时间本地]，输入[类型= 月]，输入[类型= 号码]，输入[类型=范围]，输入[type =search]，输入[type =tel]，输入[type =time]，输入[type =url]，输入[type =week] {background-color：＃F7F7F7; border-color：#CCCCCC #EEEEEE #EEEEEE #CCCCCC;颜色：＃444444; } input [type =submit]，input [type =reset] {color：＃444444; background-color：#FFFFFF; border-color：#CCCCCC; box-shadow：0 -10px 10px 0＃F7F7F7 inset;悬停，输入[type =password]：悬停，输入[type =email]：悬停，textarea：悬停，输入[type =color]：悬停，输入[type =date]：悬停，输入[type =datetime]：悬停，输入[type =datetime-local]：悬停，输入[type =month]：悬停，输入[type =数字]：悬停，输入[type =range]：悬停，输入[type =search]：悬停，输入[type =tel]：悬停，输入[type = input [type =url]：hover，input [type =week]：hover {background-color：rgba（247,247,247,0.4）; } .entry-content code {border-color：#CCCCCC; border-bottom-color：＃1693A5;} .entry-content pre {border-color：#CCCCCC; background-color：＃F7F7F7;} .entry-content blockquote {border-color：#EEEEEE; } abbr，acronym {border-color：＃444444; } .comment-meta a {color：＃444444; } #respond .form-allowed-tags {color：＃999999; } .reply a {background-color：＃F7F7F7; border-color：#EEEEEE; } .reply a：hover {background-color：＃f0f37a; color：＃1693A5; } .entry-meta .icon-metas：before {color：#CCCCCC;} .entry-meta span a，.comments-link a {color：＃666666;} .entry-meta span a：hover，.comments-link a：hover {color :;} .nav-next a：hover {} .nav -a a：hover {} .pagination {border-color：#ededed;} .pagination span，.pagination a {background：＃F7F7F7;左边框颜色：#DDDDDD;右边框的颜色：#FFFFFF; } .pagination a：hover {background：#ffffff; } #searchform input [type =text] {color：＃999999;} .caption-accented .wp-caption {background-color：rgba（22,147,165,0.8）;颜色：#FFFFFF} .tempera-image-one .entry-content img [class * ='align'] ,. tempera-image-one .entry-summary img [class * ='align']，.tempera-image-两个.entry-content img [class * ='align'] ,. tempera-image-two .entry-summary img [class * ='align'] {border-color：＃1693A5;} #content p，#content ul ，＃content，#content，＃frontpage blockquote {text-align：Default; } #content p，#content ul，#content ol，.sidey，.sidey a，table，table td {font-size：15px;字间距：默认值;字母间距：默认值; } #content p，#content ul，#content ol，.sidey，.sidey a {line-height：1.7em; } #content h1.entry-title，#content h2.entry-title {font-size：34px;} .widget-title，.widget-title a {font-size：18px;} #content .entry-content h1 { font-size：38px;} #content .entry-content h2 {font-size：34px;} #content .entry-content h3 {font-size：29px;} #content .entry-content h4 {font-size：24px ;} #content .entry-content h5 {font-size：19px;} #content .entry-content h6 {font-size：14px;}＃site-title span a {font-size：38px;} #access ul li一个{font-size：14px;} #access ul ul {font-size：12px;} .nocomments，.nocomments2 {display：none;}＃header-container> div {margin：40px 0 0 0px;} #content p，#content ul，#content ol，#content dd，#content pre，#content hr {margin-bottom：1.0em; }＃nav-toggle {text-align：left; #toTop {background：#FFFFFF; margin-left：1400px;} #toTop：hover .icon-back2top：before {color：＃D6341D;} #main {margin-top：20px; } #forbottom {margin-left：30px; margin-right：30px;}＃header-widget-area {width：33％; } #branding {height：120px; }< / style>
解决方案
问题
CSS在头部输出而不是从文件加载的原因是因为主题具有需要动态生成的样式选项。最简单（也是最懒惰）的方法就是生成CSS并将其转储到头部。这是一个精简的例子：
pre $ add $ action''wp_head'function（）{
echo' < style> .some-selector {color：'。$ user_selected_color'。;}< / style>';
}）;
这很糟糕，因为这个CSS不能被浏览器缓存;它将包含在对每一个请求的响应中。
解决方案
另一种方法是每次保存选项时将动态生成的CSS写入文件。这不像目前的方法那么简单，但它仍然不难。
add_action（'theme_name_options_saved'，function （）{
//确定css文件的路径
$ upload_dir = wp_upload_dir（）;
$ css_path = $ upload_dir ['basedir']。'/ theme-name / dynamic。 css';
ob_start（）;
/ **
*调用任何函数或包含
*输出动态CSS的文件。
* /
//将css写入文件
$ css = ob_get_clean（）;
file_put_contents（$ css_path，$ css）;
//更新版本号
update_option（'theme_name_css_version'，time（））;
}）;
add_action（'wp_enqueue_scripts'，function（）{
//确定css文件的URL
$ upload_dir = wp_upload_dir（）;
$ css_path = $ upload_dir ['baseurl']。'/theme-name/dynamic.css';
//列入css文件
wp_enqueue_style（'theme_name_dynamic_css'，$ css_path，array（），get_option （'theme_name_css_version'））;
}）;
Catch
theme_name_options_saved 不是内置操作。您必须深入了解主题的代码，找出保存选项的时间并自行调用该操作。
do_action（ 'theme_name_options_saved'）;
这应该不会太难，但可能需要一些搜索。
您还必须弄清楚主题是如何计算其动态CSS并将其纳入动作钩子。你提到它在一个名为 custom-styles.php 的文件中，所以它可能很简单，包括那个文件。
< hr>
不太难对吗？ 为什么主题开发人员不这样做呢？一些最受欢迎的付费主题只是将所有的动态CSS进入头部。
I am working on a site http://kaniamea.com/turtle/ and if you see the source code you will see the following. This is inline code and it comes with the Theme. Is there a way to organize this code in a separate stylesheet in the child folder? Also is there a way to limit the head tags. It seems there are many redundant tags there. Thanks a lot!
<style type="text/css"> .ssba {
}
.ssba img
{
width: 40px !important;
padding: 6px;
border: 0;
box-shadow: none !important;
display: inline !important;
vertical-align: middle;
}
.ssba, .ssba a
{
text-decoration:none;
background: none;
font-family: Indie Flower;
font-size: 20px;
}</style><style type="text/css"> #header, #main, #topbar-inner { max-width: 1250px; } #container.one-column { } #container.two-columns-right #secondary { width:250px; float:right; } #container.two-columns-right #content { width:910px; float:left; } /*fallback*/ #container.two-columns-right #content { width:calc(100% - 280px); float:left; } #container.two-columns-left #primary { width:250px; float:left; } #container.two-columns-left #content { width:910px; float:right; } /*fallback*/ #container.two-columns-left #content { width:-moz-calc(100% - 280px); float:right; width:-webkit-calc(100% - 280px); width:calc(100% - 280px); } #container.three-columns-right .sidey { width:125px; float:left; } #container.three-columns-right #primary { margin-left:30px; margin-right:30px; } #container.three-columns-right #content { width:880px; float:left; } /*fallback*/ #container.three-columns-right #content { width:-moz-calc(100% - 310px); float:left; width:-webkit-calc(100% - 310px); width:calc(100% - 310px);} #container.three-columns-left .sidey { width:125px; float:left; } #container.three-columns-left #secondary {margin-left:30px; margin-right:30px; } #container.three-columns-left #content { width:880px; float:right;} /*fallback*/ #container.three-columns-left #content { width:-moz-calc(100% - 310px); float:right; width:-webkit-calc(100% - 310px); width:calc(100% - 310px); } #container.three-columns-sided .sidey { width:125px; float:left; } #container.three-columns-sided #secondary { float:right; } #container.three-columns-sided #content { width:880px; float:right; /*fallback*/ width:-moz-calc(100% - 310px); float:right; width:-webkit-calc(100% - 310px); float:right; width:calc(100% - 310px); float:right; margin: 0 155px 0 -1190px; } body { font-family: Ubuntu; } #content h1.entry-title a, #content h2.entry-title a, #content h1.entry-title , #content h2.entry-title { font-family: Yanone Kaffeesatz Regular; } .widget-title, .widget-title a { line-height: normal; font-family: Open Sans Light; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, #comments #reply-title, .nivo-caption h2, #front-text1 h1, #front-text2 h1, .column-header-image { font-family: Open Sans Light; } #site-title span a { font-family: Yanone Kaffeesatz Regular; } #access ul li a, #access ul li a span { font-family: Droid Sans; } body { color: #444444; background-color: #FCFFC6 } a { color: #1693A5; } a:hover,.entry-meta span a:hover, .comments-link a:hover { color: #D6341D; } #header { background-color: ; } #site-title span a { color:#1693A5; } #site-description { color:#999999; } .socials a { background-color: #1693A5; } .socials-hover { background-color: #D6341D; } /* Main menu top level */ #access a, #nav-toggle span { color: #333333; } #access, #nav-toggle {background-color: #f0f37a; } #access > .menu > ul > li > a > span { border-color: #d2d55c; -moz-box-shadow: 1px 0 0 #ffff92; -webkit-box-shadow: 1px 0 0 #ffff92; box-shadow: 1px 0 0 #ffff92; } #access a:hover {background-color: #fdff87; } #access ul li.current_page_item > a, #access ul li.current-menu-item > a, #access ul li.current_page_ancestor > a, #access ul li.current-menu-ancestor > a { background-color: #fdff87; } /* Main menu Submenus */ #access > .menu > ul > li > ul:before {border-bottom-color:#2D2D2D;} #access ul ul ul:before { border-right-color:#2D2D2D;} #access ul ul li { background-color:#2D2D2D; border-top-color:#3b3b3b; border-bottom-color:#222222} #access ul ul li a{color:#BBBBBB} #access ul ul li a:hover{background:#3b3b3b} #access ul ul li.current_page_item > a, #access ul ul li.current-menu-item > a, #access ul ul li.current_page_ancestor > a, #access ul ul li.current-menu-ancestor > a { background-color:#3b3b3b; } #topbar { background-color: #000000;border-bottom-color:#282828; box-shadow:3px 0 3px #000000; } .topmenu ul li a { color: #CCCCCC; } .topmenu ul li a:hover { color: #EEEEEE; border-bottom-color: #1693A5; } #main { background-color: #FFFFFF; } #author-info, #entry-author-info, .page-title { border-color: #1693A5; background: #F7F7F7; } #entry-author-info #author-avatar, #author-info #author-avatar { border-color: #EEEEEE; } .sidey .widget-container { color: #333333; background-color: ; } .sidey .widget-title { color: #666666; background-color: #F7F7F7;border-color:#cfcfcf;} .sidey .widget-container a {color:;} .sidey .widget-container a:hover {color:;} .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { color: #444444; } .sticky .entry-header {border-color:#1693A5 } .entry-title, .entry-title a { color: #444444; } .entry-title a:hover { color: #000000; } #content h3.entry-format { color: #333333; background-color: #f0f37a; } #footer { color: #AAAAAA; background-color: ; } #footer2 { color: #AAAAAA; background-color: #F7F7F7; } #footer a { color: ; } #footer a:hover { color: ; } #footer2 a, .footermenu ul li:after { color: ; } #footer2 a:hover { color: ; } #footer .widget-container { color: #333333; background-color: ; } #footer .widget-title { color: #666666; background-color: #F7F7F7;border-color:#cfcfcf } a.continue-reading-link, #cryout_ajax_more_trigger { color:#333333 !important; background:#f0f37a; border-bottom-color:#1693A5; } a.continue-reading-link:after { background-color:#D6341D; } a.continue-reading-link i.icon-right-dir {color:#1693A5} a.continue-reading-link:hover i.icon-right-dir {color:#D6341D} .page-link a, .page-link > span > em {border-color:#CCCCCC} .columnmore a {background:#D6341D;color:#F7F7F7} .columnmore a:hover {background:#1693A5;} .file, .button, #respond .form-submit input#submit, input[type=submit], input[type=reset] { background-color: #FFFFFF; border-color: #CCCCCC; box-shadow: 0 -10px 10px 0 #F7F7F7 inset; } .file:hover, .button:hover, #respond .form-submit input#submit:hover { background-color: #F7F7F7; } .entry-content tr th, .entry-content thead th { color: #444444; } .entry-content fieldset, #content tr td,#content tr th, #content thead th { border-color: #CCCCCC; } #content tr.even td { background-color: #F7F7F7 !important; } hr { background-color: #CCCCCC; } input[type="text"], input[type="password"], input[type="email"], input[type="file"], textarea, select, input[type="color"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="month"],input[type="number"],input[type="range"], input[type="search"],input[type="tel"],input[type="time"],input[type="url"],input[type="week"] { background-color: #F7F7F7; border-color: #CCCCCC #EEEEEE #EEEEEE #CCCCCC; color: #444444; } input[type="submit"], input[type="reset"] { color: #444444; background-color: #FFFFFF; border-color: #CCCCCC; box-shadow: 0 -10px 10px 0 #F7F7F7 inset; } input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, textarea:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="range"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover { background-color: rgba(247,247,247,0.4); } .entry-content code { border-color: #CCCCCC; border-bottom-color:#1693A5;} .entry-content pre { border-color: #CCCCCC; background-color:#F7F7F7;} .entry-content blockquote { border-color: #EEEEEE; } abbr, acronym { border-color: #444444; } .comment-meta a { color: #444444; } #respond .form-allowed-tags { color: #999999; } .reply a{ background-color: #F7F7F7; border-color: #EEEEEE; } .reply a:hover { background-color: #f0f37a;color: #1693A5; } .entry-meta .icon-metas:before {color:#CCCCCC;} .entry-meta span a, .comments-link a {color:#666666;} .entry-meta span a:hover, .comments-link a:hover {color:;} .nav-next a:hover {} .nav-previous a:hover { } .pagination { border-color:#ededed;} .pagination span, .pagination a { background:#F7F7F7; border-left-color:#dddddd; border-right-color:#ffffff; } .pagination a:hover { background: #ffffff; } #searchform input[type="text"] {color:#999999;} .caption-accented .wp-caption { background-color:rgba(22,147,165,0.8); color:#FFFFFF} .tempera-image-one .entry-content img[class*='align'],.tempera-image-one .entry-summary img[class*='align'], .tempera-image-two .entry-content img[class*='align'],.tempera-image-two .entry-summary img[class*='align'] { border-color:#1693A5;} #content p, #content ul, #content ol, #content, #frontpage blockquote { text-align:Default ; } #content p, #content ul, #content ol, .sidey, .sidey a, table, table td { font-size:15px; word-spacing:Default; letter-spacing:Default; } #content p, #content ul, #content ol, .sidey, .sidey a { line-height:1.7em; } #content h1.entry-title, #content h2.entry-title { font-size:34px ;} .widget-title, .widget-title a { font-size:18px ;} #content .entry-content h1 { font-size: 38px;} #content .entry-content h2 { font-size: 34px;} #content .entry-content h3 { font-size: 29px;} #content .entry-content h4 { font-size: 24px;} #content .entry-content h5 { font-size: 19px;} #content .entry-content h6 { font-size: 14px;} #site-title span a { font-size:38px ;} #access ul li a { font-size:14px ;} #access ul ul ul a {font-size:12px;} .nocomments, .nocomments2 {display:none;} #header-container > div { margin:40px 0 0 0px;} #content p, #content ul, #content ol, #content dd, #content pre, #content hr { margin-bottom: 1.0em; } #nav-toggle { text-align: left; } #toTop {background:#FFFFFF;margin-left:1400px;} #toTop:hover .icon-back2top:before {color:#D6341D;} #main {margin-top:20px; } #forbottom {margin-left: 30px; margin-right: 30px;} #header-widget-area { width: 33%; } #branding { height:120px; } </style>
解决方案
The Problem
The reason that CSS is being output in the head instead of loaded from a file is because the theme has style options that need to be generated dynamically. The easiest (and laziest) way to do this is to just generate the CSS and dump it into the head. Here is a stripped down example of what is happening:
add_action('wp_head' function() {
echo '<style>.some-selector { color:' . $user_selected_color ' . ; }</style>';
});
This is bad because this CSS cannot be cached by the browser; it will be included in the response to every single request.
The Solution
An alternative approach would be to write the dynamically generated CSS to a file every time the options are saved. This isn't quite as easy as the current approach, but it is still not difficult.
add_action('theme_name_options_saved', function() {
//determine the path to the css file
$upload_dir = wp_upload_dir();
$css_path = $upload_dir['basedir'] . '/theme-name/dynamic.css';
ob_start();
/**
* Call whatever function or include whatever file that
* outputs your dynamic CSS here.
*/
//write the css to the file
$css = ob_get_clean();
file_put_contents($css_path, $css);
//update the version number
update_option('theme_name_css_version', time());
});
add_action('wp_enqueue_scripts', function() {
//determine the url of the css file
$upload_dir = wp_upload_dir();
$css_path = $upload_dir['baseurl'] . '/theme-name/dynamic.css';
//enqueue the css file
wp_enqueue_style('theme_name_dynamic_css', $css_path, array(), get_option('theme_name_css_version'));
});
The Catch
theme_name_options_saved is not a built in action. You're going to have to dig through the theme's code, figure out when the options are saved and call that action yourself.
do_action('theme_name_options_saved');
That shouldn't be too difficult, but it may take some searching.
You're also going to have to figure out how the theme is computing its dynamic CSS and incorporate it into the action hook. You mentioned it was in a file called custom-styles.php so it may be a simple as including that file.
Not too hard right? Kind of begs the question, "Why don't theme developers do it this way to begin with?" Some of the most popular paid themes just dump all of their dynamic CSS into the head.
这篇关于WordPress的网站显示内联的CSS代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
