Editör Stilleri ve Typekit


10

Web sitem, ön uçta çalışan özel yazı tiplerini almak için typekit kullanıyor.

Bunu arka uçtaki editör tarzlarıma koymak istiyorum. Ancak bunu nasıl yapacağımı bilmiyorum. Typekit, css font-face gömme snippet'i yerine js gömme snippet'i kullanır.


bunun stackoverflow'a taşındığını önermek - bu gerçekten bir WP sorunu değil.
anu

2
Çünkü genel durumda nasıl typekit yapacağımı biliyorum. Yapmaya çalıştığım şey WordPress editörüne koymak. Stack Overflow'a taşındıysa "hmmm olacak bir sürü insan olacak ama bu bir WordPress sorusu = s" olacak
Tom J Nowell

Yanıtlar:


3

Tom Nowell'in TinyMCE eklenti çözümü mükemmel çalışıyor, JavaScript'i Typekit'in yeni zaman uyumsuz kodunu kullanacak şekilde güncelleyin . Yeni eşzamansız gömme kodunu kullandıktan sonra, 403 sorunu ortadan kalkar ve Typekit özellikli TinyMCE'ye sorunsuzca sahip olursunuz!

Tom, tüm kodları bir blog yayınında bir araya getirdi. Bu konuda tüm ağır kaldırmayı yaptı, bu yüzden ona biraz sayfa görünümü verin ve oradaki özellikleri okuyun !


Öyle mi? (Ben de sordum ve cevapladım = p) benim çözümüm güvenlik için olmasaydı işe yarayacaktı, iframe'in src'sini çalışacağı aynı alanda boş bir sayfaya ayarlayabilirsem, yeni asenkron kodunu test edeceğim rağmen!
Tom J Nowell

Peki Huzzah yapar !! =]
Tom J Nowell

Yanıtınızı yalnızca eksiksiz olması için kodumun güncellenmiş sürümü ile değiştirebilir misiniz?
Tom J Nowell

Buraya bir blog yazısı yazdım: tomjn.com/150/typekit-wp-editor-styles gists kod ile, async bit bulmak için size kredi verebilir bir twitter hesabınız var mı?
Tom J Nowell

Blog yayınınıza bağlantı vermek için cevabımı güncelleyeceğim. Burada ağır kaldırma yaptınız!
Chris Van Patten

6

Ben bir tinymce eklentisi ekleyerek bu sorunu var, neredeyse orada ama Im typekit yazı tipi css almaya çalışırken bir 403 yasak alıyorum:

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 = "var TypekitConfig = {\n\
                    kitId: '*******'\n\
                    };\n\
                    (function() {\n\
                    var tk = document.createElement('script');\n\
                    tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';\n\
                    tk.type = 'text/javascript';\n\
                    tk.async = 'true';\n\
                    tk.onload = tk.onreadystatechange = function() {\n\
                    var rs = this.readyState;\n\
                    if (rs && rs != 'complete' && rs != 'loaded') return;\n\
                    try { Typekit.load(TypekitConfig); } 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.0"
            };
        }
    });
    tinymce.PluginManager.add('typekit', tinymce.plugins.typekit);
})();

PHP

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;
}

Bu tamamen benim için çalıştı. Biraz çalışma ve sabır gerektirir, ancak gerçekten iyi çalışır!
racl101

0

Komut dosyasını yönetici için enqueue edebilirsiniz, o zaman editörünüz için kullanılabilir olmalıdır. Cs

    add_action( 'admin_print_scripts', 'admin_typekit' );
    function admin_typekit( ) {
         global $pagenow;
         $arg = array( 'post.php', 'post-new.php', 'page-new.php', 'page.php' );
         if ( ! in_array( $pagenow, $arg ))
                return; ?>

          <script type="text/javascript">
              (function () {
                 var config = {
               kitId:'xxxxxx',
               scriptTimeout:3000
               };
               var h = document.getElementsByTagName("html")[0];
               h.className += " wf-loading";
               var t = setTimeout(function () {
               h.className = h.className.replace(/( |^)wf-loading( |$)/g, "");
               h.className += " wf-inactive"
               }, config.scriptTimeout);
               var tk = document.createElement("script");
               tk.src = '//use.typekit.net/' + config.kitId + '.js';
               tk.type = "text/javascript";
               tk.async = "true";
               tk.onload = tk.onreadystatechange = function () {
           var a = this.readyState;
            if (a && a != "complete" && a != "loaded")return;
               clearTimeout(t);
                try {
                  Typekit.load(config)
                } catch (b) { } };
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(tk, s)
             })();
             </script>

   <?php }

Düzenle:

Bahsettiğiniz gibi bazı satır içi js gerektirdiğinden yukarıdaki kod typekit için güncellendi. Ayrıca admin_enqueue_scripts kullanmadığından $ hook değişkenini $ pagenow olarak değiştirmeliyiz.


Bu kadar basit değil, bu satır içi komut dosyası, ancak css onu almak için admin eklemek yeterli ise o zaman = =
Tom J Nowell

Bu aslında işe yaramıyor. Eksik noktalı virgül ve kapanış ayracı dışında, yazı tipi düzenleme ekranına yazı tipi eklediğinde, WordPress kullanıcı arayüzünü değiştirebilirim, ancak yazı tipini editör stillerinde kullanamıyorum. Yazı içeriğim typekit yazı tiplerini kullanmayı reddediyor ve bunun yerine bir sonraki yedek yazı tiplerinde kullanılabilecekleri gösteriyor.
Tom J Nowell

JS kendisi iframe TinyMCE kullanımlara sokmaya ihtiyaçlarını görünür ekleyin, üst çerçeve yükleyen WordPress yazı UI
Tom J Nowell

Css dosyasını editör-style.css dosyasına kopyalayarak yasak olan CSS dosyasının sorununu çözebildim. Onun süper bir hackish düzeltme ama hemen hemen her şey denedim sonra çalıştı.
Cole
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.