【问题标题】:Wordpress wont display up to date cssWordpress 不会显示最新的 css
【发布时间】:2014-02-07 07:31:31
【问题描述】:

我没有缓存插件,css是

    #featured { border-bottom: 1px solid #ffffff; background: #000000; height: 300px; overflow: hidden; }
div.slide { height: 300px; position: relative; }
    div.overlay, div.top-overlay { background:url("images/dropshadow.png") repeat-x bottom left; bottom:0; height:22px; left:0; position:absolute; width:100%; }
    div.top-overlay { background:url("images/top-overlay.png") repeat-x bottom left; top: 0px; height: 43px; }
    .slide .description { background:url("images/overlay.png") no-repeat scroll 0 0 transparent; float:right; height:276px; margin-top:6px; padding:18px 68px 0 50px; width:342px; }
        .description h2.title { font-weight: bold; font-size: 36px; padding-top:3px; }
            .description h2.title a { color: #ffffff; text-shadow: 2px 2px 2px #000000; }
                .description h2.title a:hover { color: #eeeeee; text-decoration: none; }
        .description p.tagline { font-size: 14px; font-family: Georgia, serif; font-style: italic; color: #4f4f4f; padding: 7px 0px 4px; }
            .description p.tagline a { color: #4f4f4f; }
                .description p.tagline a:hover { color: #7c7c7c; text-decoration: none; }
        .description p { line-height: 19px; }

        .slide a.readmore { background:url(images/featured-readmore-right.png) no-repeat scroll right bottom; display:block; float:left; height:31px; line-height:32px; padding-right:11px; color: #ffffff; text-shadow: 1px 1px 1px #0080bd; margin-top:8px; }
            .slide a.readmore span { background:url(images/featured-readmore-left.png) no-repeat; display:block; padding: 0px 4px 0px 15px; }

  a#prevlink, a#nextlink { position:absolute; bottom:-2px; right:0; height: 40px; text-         indent: -9999px; display: block; z-index: 1000; }
  a#prevlink { right: 80px; background: url(images/arrow-left.png) no-repeat; width: 81px; }
  a#nextlink { width: 80px; background: url(images/arrow-right.png) no-repeat; }

当然,代码没有问题。它似乎只是缺少一个更新网络缓存的功能。代码是它应该的样子,但是当我的浏览器从我的网页上读取它时,我得到这个链接 wp-content/themes/TheSource/style.css:284 而不是 wp-content/themes/TheSource/style.css 这是我的主要问题,因为我无法从滑块上编辑简单的图像来做我想做的事。我知道这发生在我身上,我在谷歌上查看了一个小部件并找到了一个要添加的功能,因为我之前得到了类似 wp-content/themes/TheSource/style.css?ver:248 的东西,现在它取消了 ?ver但我需要一些可以让我更新我的主题的东西,以便我可以自定义它。

【问题讨论】:

  • 通常情况下,您将有更好的机会获得所需的答案并更快地获得答案,方法是让您的代码简洁明了。尝试删除与您的问题发生的部分没有直接关系的任何代码,或尝试制作一个简化的类似代码,为您展示相同的问题。

标签: css wordpress


【解决方案1】:

在开发过程中,您可以将以下代码附加到您的 CSS:

/wp-content/themes/TheSource/style.css?ver:248&t=<?php echo time(); ?>

它会在每次页面重新加载时生成不同的时间戳,从而避免浏览器缓存。

我强烈建议您在网站上线后删除此部分!然后,如果网站已经上线并且您需要调整 CSS,您可以手动更改版本 (+1) 以强制所有新页面重新加载使用新样式:

/wp-content/themes/TheSource/style.css?ver=249

...当您想更改 CSS 中的图像时,同样适用,即:

.class123 {
    background-image: url(images/slider1.jpg?v=2);
}

或者,如果确认我对您的理解正确并且这是一个浏览器缓存问题,您可以为您的浏览器使用一个插件来防止缓存(对于 Firefox - Web 开发人员工具栏)。

编辑 1:避免浏览器缓存 Wordpress 中的 CSS(和 JS)文件(通常在主题开发期间或 css/js 文件更改后使用)

目标: 1. 从查询字符串中删除 CSS(和 JS)'ver' 参数。 (您的主题中已经有此功能) 2. 在 CSS 和 JS 文件中添加自定义 'ver' (v) 参数。 3.在开发过程中添加自定义'timestamp'(t)参数,以避免每次页面重新加载时浏览器缓存。 (仅限 DEV 模式)

这是您主题的修改代码,它从 CSS(和 JS,如果需要)中删除版本,并添加特定参数!

/* Removes the 'ver' parameter from the query string of the CSS (and JS) */
function remove_cssjs_ver( $src ) {
    // Goal 1 - Remove the CSS (and JS) 'ver' parameter from the query string. (you already have this functionality in your theme)
    if( strpos( $src, '?ver=' ) ) {
        $src = remove_query_arg( 'ver', $src );
    }
    // Goal 2 - Add custom 'ver' (v) parameter to the CSS and JS files. (useful for Live sites, when you change the styles or functionalities)
    $src = add_query_arg( 'v', '25', $src ); // you can use increment by 1 after every change
    // Goal 3 - Add custom 'timestamp' (t) parameter during the development process to avoid browser caching on each page reload. (DEV mode only)
    $src = add_query_arg( 't', time(), $src ); // recommended to be used only during the development process as it avoids browser caching on every page reload

    return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 999, 1 );
// add_filter( 'script_loader_src', 'remove_cssjs_ver', 999, 1); // optional - apply the same to JS files

请注意,上面的代码未经测试,但应该可以工作。您可以删除(或评论)您不需要的目标。

一些参考链接:add_query_argremove_query_argadd_filter

我还将您的functions.php文件修改为新版本:http://pastebin.com/SLA7JkEZ

变化是:修复了不正确的嵌套 if: if ( ! function_exists( 'et_list_pings' ) ){... 您在此 IF 中放置了“function remove_cssjs_ver()”声明,这可能适用于您的情况,但它不正确!我还修复了 add_filter 函数的最后一个参数(从 2 到 1),因为 remove_cssjs_ver() 函数中只有 1 个参数。

给您的个人说明 - 我认为您应该将问题标题更改为:在 Wordpress 主题开发期间禁用 CSS 浏览器缓存,并在每次更改主题样式后清除缓存。

让我知道以上内容是否适合您!

【讨论】:

  • 我认为这正是我所需要的,但我将代码 o.o 放在什么文件夹中?
  • 您可以尝试我刚刚添加到帖子中的替代解决方案。关于您的问题-我需要更多信息...最好查看源代码,您能否提供主题的临时链接(ZIP)?
  • 这里 m8 i cn 只需在 skyp n 屏幕共享上添加你
  • 告诉我你是否愿意
  • 好吧,我认为这可能还不够,因为它可能需要很长时间,而且我不确定社区是否接受它(很可能不会)。你和我这样做会受到惩罚,所以最好是:给我们一个链接或给我们更多关于你的主题的细节(它是一个免费的主题,然后给我们名字;如果不是,我们可能需要内容的functions.php文件 - click here for a site where to post the PHP contents)
猜你喜欢
  • 1970-01-01
  • 2017-07-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-01-12
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多