web-dev-qa-db-ja.com

Fonts.comフォントをTinyMCEで動作させるようにしました（iframeリファラー問題）。

私は自分のプロジェクトでカスタム（商用）フォントを使用しています。フロントエンドではすべてうまくいきます。

しかし、このフォントをTinyMCE iframeに追加しようとすると、Webフォントに403が表示されます。問題は、iframeからのリクエストに参照元がないことです。 fonts.comでは、リクエストを検証するための参照元が必要です。

何かご意見は？

wp-adminadmintinymceiframe
5
Aron Woost

私はTypekitでこの問題に遭遇しました、これが私の解決策です：

http://www.tomjn.com/150/typekit-wp-editor-styles/ /

add_filter("mce_external_plugins", "tomjn_mce_external_plugins");
function tomjn_mce_external_plugins($plugin_array){
    $plugin_array['typekit']  =  get_template_directory_uri().'/typekit.tinymce.js';
    return $plugin_array;
}

そしてこのjs：

(function() {
    tinymce.create('tinymce.plugins.typekit', {
        init: function(ed, url) {
            ed.onPreInit.add(function(ed) {

                // Get the DOM document object for the IFRAME
                var doc = ed.getDoc();

                // Create the script we will add to the header asynchronously
                var jscript = "(function() {\n\
                    var config = {\n\
                        kitId: 'xxxxxxx'\n\
                    };\n\
                    var d = false;\n\
                    var tk = document.createElement('script');\n\
                    tk.src = '//use.typekit.net/' + config.kitId + '.js';\n\
                    tk.type = 'text/javascript';\n\
                    tk.async = 'true';\n\
                    tk.onload = tk.onreadystatechange = function() {\n\
                        var rs = this.readyState;\n\
                        if (d || rs && rs != 'complete' && rs != 'loaded') return;\n\
                        d = true;\n\
                        try { Typekit.load(config); } catch (e) {}\n\
                    };\n\
                    var s = document.getElementsByTagName('script')[0];\n\
                    s.parentNode.insertBefore(tk, s);\n\
                })();";

                // Create a script element and insert the TypeKit code into it
                var script = doc.createElement("script");
                script.type = "text/javascript";
                script.appendChild(doc.createTextNode(jscript));

                // Add the script to the header
                doc.getElementsByTagName('head')[0].appendChild(script);

            });

        },
        getInfo: function() {
            return {
                longname: 'TypeKit For TinyMCE',
                author: 'Tom J Nowell',
                authorurl: 'http://tomjn.com/',
                infourl: 'http://Twitter.com/tarendai',
                version: "1.1"
            };
        }
    });
    tinymce.PluginManager.add('typekit', tinymce.plugins.typekit);
})();

それはiframeの中にタイプキットコードを挿入します、あなたはfonts.com埋め込みスクリプトとテストにコードを変えたいと思うでしょう。残念ながら、私はfonts.comのセキュリティ対策とそれらが使っている正確な埋め込みコードについて慣れていない。

5
Tom J Nowell

カスタムスタイルをWordPressのTinyMCEエディタに追加したい場合は、CSSファイル（editor.cssなど）を作成してそれをテーマフォルダに配置する必要があります。その後、このCSSに次のようにフォントフェイスの初期化を追加します。

@font-face {
  font-family: 'Your font name';
  font-style: normal;
  font-weight: 400;
  src: local('Your font name'), local('Your font name'), url(http://yoursite.com/path/to/your/font.woff) format('woff');
}

body {
    font-family: 'Your font name', Helvetica, Arial, sans-serif;
}

/* etc styling */

その後、editor.cssファイルを正しくエンキューする必要があります。それを行うには、add_editor_styleスタイル関数を呼び出す必要があります。

add_action( 'after_setup_theme', 'wpse8170_init_editor_styles' );
function wpse8170_init_editor_styles() {
    add_editor_style( 'editor.css' );
}

.ttfフォントファイルのみがある場合は、それを.woffに変換する必要があります。あなたはそれをすることができます ここ 。

1
Eugene Manuilov

プラグインまたはテーマのfunctions.phpファイルでこの関数を使用してください。

// Tell the TinyMCE editor to use a custom stylesheet
add_filter('the_editor_content', "firmasite_tinymce_style");
function firmasite_tinymce_style($content) {
    add_editor_style('assets/css/customfont.php');

    // This is for front-end tinymce customization
    if ( ! is_admin() ) {
        global $editor_styles;

        $editor_styles = (array) $editor_styles;
        $stylesheet    = array();

        $stylesheet[] = 'assets/css/customfont.php';        

        $editor_styles = array_merge( $editor_styles, $stylesheet );

    }
    return $content;
}

そこで、私たちはcustompont.phpファイルをwpエディタに呼び出しました。このファイルはphpファイルですが、cssファイルとして機能します。そしてこれが私たちのcustomfont.phpです。

<?php
/*
 * This file using for loading custom google font in wp-editor
*/
define('WP_USE_THEMES', false);
if (file_exists($_SERVER['DOCUMENT_ROOT'] . '/wp-blog-header.php')) {
    /** Loads the WordPress Environment and Template */
    require($_SERVER['DOCUMENT_ROOT'] . '/wp-blog-header.php');
    status_header(200);
    header("Content-type: text/css");
} else {
    exit;
}
?>
@import url(http://fonts.googleapis.com/css?family=<?php echo urlencode("Amarante"); ?>&subset=latin,latin-ext);
body { font-family: Amarante,sans-serif !important;}

これは Firmasite theme からの例です。多分これはあなたのために働くでしょう。それでも403が表示される場合は、header("Referer: http://example.org");のようなphpヘッダーを追加できます。

1
Ünsal Korkmaz