我正在使用网站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;
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>
答案 0 :(得分：2)
CSS在头部输出而不是从文件加载的原因是因为主题具有需要动态生成的样式选项。最简单（也是最懒惰）的方法是生成CSS并将其转储到头部。以下是正在发生的事情的简要示例：
add_action('wp_head' function() {
echo '<style>.some-selector { color:' . $user_selected_color ' . ; }</style>';
});
这很糟糕，因为浏览器无法缓存此CSS;它将包含在对每个请求的响应中。
另一种方法是每次保存选项时将动态生成的CSS写入文件。这不像现在的方法那么容易，但仍然不难。
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'));
});
theme_name_options_saved不是内置动作。您将不得不深入挖掘主题代码，找出保存选项的时间并自行调用该操作。
do_action('theme_name_options_saved');
这应该不会太难，但可能需要一些搜索。
您还必须弄清楚主题如何计算其动态CSS并将其合并到动作钩子中。您提到它位于名为custom-styles.php的文件中，因此包含该文件可能很简单。
不是太难了吧？有点问题，“为什么主题开发人员不这样做才开始？”一些最受欢迎的付费主题只是转储他们所有的动态CSS进入头脑。
答案 1 :(得分：0)
只需使用创建内部CSS的插件即可：它是Simple Share Buttons Adder插件。