editor-style.cssの強制リロード


11

editor-style.cssTinyMCEエディターのスタイルシートを手動で変更したときに、を強制的に更新する方法はありますか?変更はすぐには表示されませんが、管理バックエンドの管理側にキャッシュされます。

たとえば、次のようになります。

editor-style.css?ver=3393201

開発目的の場合は、ブラウザでハードリフレッシュを実行するか、ブラウザのキャッシュをオフにしないのはなぜですか?
sanchothefat

3
私も同じ問題を抱えていて、ハードリフレッシュが常に機能するとは限りません。キャッシングはかなり頑固なようです。
レイガリック

回答:


10

そのためのフックがあります:'mce_css'。それが呼び出さ_WP_Editors::editor_settings()れ、最初の唯一のパラメーターとして、ロードされたすべてのスタイルシートをコンマで区切って取得します。

簡単になりました:グローバル変数を使用し$editor_styles(ここに、テーマと親テーマのエディタースタイルシートが既に保存されています)、ファイルの最終変更時刻をパラメーターとして追加し、文字列を再構築します。

プラグインとして:

<?php # -*- coding: utf-8 -*-
/**
 * Plugin Name: Refresh Editor Stylesheets
 * Description: Enforces fresh editor stylesheets per version parameter.
 * Version:     2012.07.21
 * Author:      Fuxia
 * Plugin URI:  http://wordpress.stackexchange.com/q/33318/73
 * Author URI:  https://fuxia.me
 * License:     MIT
 * License URI: http://www.opensource.org/licenses/mit-license.php
 */

    add_filter( 'mce_css', 't5_fresh_editor_style' );

    /**
     * Adds a parameter of the last modified time to all editor stylesheets.
     *
     * @wp-hook mce_css
     * @param  string $css Comma separated stylesheet URIs
     * @return string
     */
    function t5_fresh_editor_style( $css )
    {
        global $editor_styles;

        if ( empty ( $css ) or empty ( $editor_styles ) )
        {
            return $css;
        }

        // Modified copy of _WP_Editors::editor_settings()
        $mce_css   = array();
        $style_uri = get_stylesheet_directory_uri();
        $style_dir = get_stylesheet_directory();

        if ( is_child_theme() )
        {
            $template_uri = get_template_directory_uri();
            $template_dir = get_template_directory();

            foreach ( $editor_styles as $key => $file )
            {
                if ( $file && file_exists( "$template_dir/$file" ) )
                {
                    $mce_css[] = add_query_arg(
                        'version',
                        filemtime( "$template_dir/$file" ),
                        "$template_uri/$file"
                    );
                }
            }
        }

        foreach ( $editor_styles as $file )
        {
            if ( $file && file_exists( "$style_dir/$file" ) )
            {
                $mce_css[] = add_query_arg(
                    'version',
                    filemtime( "$style_dir/$file" ),
                    "$style_uri/$file"
                );
            }
        }

        return implode( ',', $mce_css );
    }

WordPress 3.9では、このプラグインが画像編集ボタンを壊すようになりました。その理由を理解する機会がありませんでした。
mrwweb 14年

2016 Updatefunctions.phpWP 4.6.1でこのコードをそのまま(ただし、プラグインではなくファイルに)追加すると、完全に機能します。メディアの追加やメディアのインライン編集に問題はないようです。それはあなたがに引数を追加することができないことをクレイジーだadd_editor_cssfilemtimeあなたが持つことができる方法wp_enqueue_style、またはファイル名の末尾にも、ごみ文字列...しかし、これは完全に動作します。
indextwo 2016

この便利なプラグインをありがとう!WP 4.9.6で使用しています。現時点で私が発見した唯一のバグは、プラグインがアクティブ化されたときに、<!--more-->タグがTinyMCE内に表示されないことです。どうすればこれを解決できますか?
pa4080

これにより、デフォルトのエディタースタイルの読み込みが中断されます。
xsonic

9

現在のバージョンのWordPress(4.7.2)でtoschoの答えを得ることができませんでした。これは、TinyMCE init配列のcache_suffixがに設定されているためと思われます'wp-mce-' . $tinymce_version

そのため、代わりに、tiny_mce_before_initフィルターで次のように上書きするだけです。

function wpse33318_tiny_mce_before_init( $mce_init ) {

    $mce_init['cache_suffix'] = 'v=123';

    return $mce_init;    
}
add_filter( 'tiny_mce_before_init', 'wpse33318_tiny_mce_before_init' );

もちろん、これはほど良くはありませんfilemtime()が、少なくとも4.7.2では機能します。

注:これにより、他のエディタースタイル(skin.min.css、content.min.css、dashicons.min.css、wp-content.cssなど)にもキャッシュバスターが追加されます


2
アクティブなテストと開発を行っている場合は、常に異なる「バージョン」番号を追加します。これを実現するための一つの方法は、Unixエポック(1970年1月1日00:00:00 GMT)からの秒を使用している $mce_init['cache_suffix'] = "v=" . time(); かのようにも単純なもの $mce_init['cache_suffix'] = "v=" . rand(100000000,999999999);
roberthuttinger

6

add_editor_styleCSSファイルを呼び出すだけでなく、キャッシュ無効化クエリ文字列パラメーターを追加します。

add_action('admin_enqueue_scripts', function(){
  if(is_admin()){
    add_editor_style(get_template_directory_uri().'/assets/css/editor.css?1');
  }
});

これは、これまでで最も完全に機能する最も簡単な方法です。
antikbd 2018

1
このアプローチの単純さと、クエリ文字列が他の無関係なスタイルシートに追加されないという事実が気に入っています。これと組み合わせて、filemtime()キャッシュ無効化更新を自動化しました:add_editor_style(get_stylesheet_directory_uri() . '/editor-style.css?v=' . filemtime(get_stylesheet_directory() . '/editor-style.css'));
Josh Harrison

ここで重要なのはget_template_directory_uri()、キャッシュバスターを追加するときに、問題のcssファイルの絶対パスを常に使用する(つまり、を使用する)ことです。そうしないと機能しません。
ZoliSzabó19年

3

同じ問題がありました(2012、WP 3.4.2 !!)。このバグが発生している間の可能な解決策:

1)firebugを使用する場合は、[Net]パネルの[x] Disable Browser Cacheが役立ちます。 非常に奇妙な問題さえありました。キャッシュされたエディタースタイルが(cssフィルター処理された)Firebugネットパネルに一瞬表示され、再び消えるということです。スクリーンショットを撮って自分で証明した。

2)完全なブラウザキャッシュのクリアが役立ちます。その後、何らかの理由で問題は再現しませんでした。

3)最後に、確認する必要がある場合、つまり、ステージングサーバーまたはライブサーバーのクライアントが段階的に改善される(迷惑なキャッシュクリアランスアドバイスがない場合)、私の推奨のアドバイス:

ファイルを再配置し、カウントアップを続けます。

// add_editor_style('editor-style-01.css'); bump for every deployment
// add_editor_style('editor-style-02.css');
add_editor_style('editor-style-03.css');

ハッキーですが、信頼できます。


0

私が想定する最新バージョンで受け入れられた回答の問題は、$editor_styles配列にはテーマを使用して追加されたスタイルシートしか含まれていないため、コアワードプレスまたはプラグインによって追加されたスタイルシートの残りが返される文字列から取り除かれるということです。

以下は、コードを微調整した後に思いついた解決策です。functions.phpファイルで使用できます。私のソリューションでは、ネストされたループを使用して、$editor_styles配列に存在するスタイルシートをチェックし、最後に変更された時刻をパラメーターとしてクエリ文字列に追加し、配列の値を更新します。

add_filter('mce_css', 'fresh_editor_style');

function fresh_editor_style($mce_css_string){
    global $editor_styles;
    $mce_css_list = explode(',', $mce_css_string);

    foreach ($editor_styles as $filename){
        foreach($mce_css_list as $key => $fileurl){
            if(strstr($fileurl, '/' . $filename)){
                $filetime = filemtime(get_stylesheet_directory() . '/' . $filename);
                $mce_css_list[$key] =  add_query_arg('time', $filetime, $fileurl);
            }
        }
    }

    return implode(',', $mce_css_list);
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.