私は自分のプロジェクトでカスタム(商用)フォントを使用しています。フロントエンドではすべてうまくいきます。
しかし、このフォントをTinyMCE iframeに追加しようとすると、Webフォントに403が表示されます。問題は、iframeからのリクエストに参照元がないことです。 fonts.comでは、リクエストを検証するための参照元が必要です。
何かご意見は?
私は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のセキュリティ対策とそれらが使っている正確な埋め込みコードについて慣れていない。
カスタムスタイルを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
に変換する必要があります。あなたはそれをすることができます ここ 。
プラグインまたはテーマの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ヘッダーを追加できます。