WordPress görsel düzenleyicisine özel stiller eklemek ister misiniz? Özel Stiller eklemek, metin düzenleyiciye gitmeden hızlı bir şekilde biçimlendirme uygulamanızı sağlar. Bu yazıda, WordPress görsel düzenleyicisine özel stilleri nasıl ekleyeceğinizi göstereceğiz.
Remarque: Bu eğitim, temel CSS bilgisi gerektirir.
Ne zaman olacak WordPress Görsel Düzenleyiciye özel bir stil eklemeniz mi gerekiyor?
Varsayılan olarak WordPress'in görsel düzenleyicisi temel biçimlendirme ve stil seçenekleri sunar. Ancak bazen, örneğin CSS düğmeleri eklemenize olanak tanıyan özel stillerin kullanışlı olması gerekebilir. içindekiler, kancalar vb.
Her zaman görsel düzenleyiciden metin düzenleyiciye geçebilir ve özel HTML ve CSS kodu ekleyebilirsiniz. Ancak bazı stilleri düzenli olarak kullanıyorsanız, bunları görsel düzenleyiciye eklemeniz daha iyi olur, böylece onları kolayca yeniden kullanabilirsiniz.
Bu size çok fazla zaman kazandıracak ve aynı zamanda her zaman aynı stilleri her yerde kullanmanıza izin verecektir. Site Web.
Daha da önemlisi, sitenizdeki makaleleri düzenlemek zorunda kalmadan stilleri kolayca düzenleyebilir veya güncelleyebilirsiniz.
Şimdi bunun WordPress'te nasıl yapıldığını keşfedeceğiz.
1 Yöntemi: Eklentiyle özel bir stil ekle
Yapmanız gereken ilk şey, eklentiyi yüklemek ve etkinleştirmek. " TinyMCE Özel Stilleri ". Daha fazla ayrıntı için nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın. WordPress Plugin.
Aktivasyondan sonra, ziyaret etmelisiniz " Ayarlar> Ayarlar »TinyMCE Özel Stilleri Eklenti ayarlarını yapılandırmak için.
Eklenti, stil sayfası dosyalarının konumunu seçmenize izin verir. Temanızı veya alt tema stilinizi kullanabilir veya özel bir konum seçebilirsiniz.
Ondan sonra, "butonuna tıklamanız gerekiyor tüm ayarları kaydet Ayarlarınızı saklamak için.
Şimdi özel stillerinizi ekleyebilirsiniz. Stil bölümüne gitmeniz ve düğmesine tıklamanız gerekir. Yeni stil ekleyin '.
Önce stil için bir başlık girmelisiniz. Bu başlık açılır menüde görüntülenecektir. O zaman tanımlamanız gerekir. Bir satır, blok veya seçim öğesi olup olmadığı.
Bundan sonra bir CSS sınıfı ekleyin ve ardından aşağıdaki ekran görüntüsünde gösterildiği gibi CSS kurallarınızı ekleyin.
Bir CSS stili ekledikten sonra, değişikliklerinizi kaydetmek için "tüm ayarları kaydet" düğmesine tıklamanız yeterlidir.
Şimdi mevcut bir makaleyi düzenleyebilir veya yeni bir makale oluşturabilirsiniz. WordPress görsel editörünün ikinci satırındaki açılır menüden bir format göreceksiniz.
Düzenleyicide bir metin seçin, ardından onu uygulamak için açılır menüden özel stilinizi seçin.
Özel stillerinizin doğru uygulanıp uygulanmadığını görmek için artık makalenizi önizleyebilirsiniz.
2 Yöntemi: Görsel Düzenleyiciye Elle Stil Ekleme
Bu yöntem, WordPress dosyalarınıza manuel olarak kod eklemenizi gerektirir. Bunu ilk kez yapıyorsanız, nasıl ekleneceğine ilişkin eğiticimize göz atın. WordPress Plugin.
Adım 1: WordPress Visual Editor'ın açılır menüsünden özel bir stil ekleyin.
İlk olarak, WordPress görsel düzenleyicisine bir açılır menü ekleyeceğiz. Bu açılır menü daha sonra özel stillerimizi seçmemize ve uygulamamıza izin verecektir.
Sen functions.php dosyasına veya Eklentinizde aşağıdaki kodu eklemeniz gerekir.
function wpb_mce_buttons_2 ($ düğmeler) {array_unshift ($ düğmeler, 'styleselect'); $ düğmeleri döndür; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
Adım 2: Açılır menüde seçenekler nasıl eklenir
Şimdi, az önce oluşturduğunuz açılır menüye bazı seçenekler eklemeniz gerekecek. Daha sonra, bu seçenekleri açılır menüdeki formatlardan seçip uygulayabileceksiniz.
Bu eğitim için, oluşturmak üzere üç özel stil ekleyeceğiz içindekiler blok ve düğmeler.
Aşağıdaki kodu functions.php veya belirli bir eklentinin "functions.php" dosyasına eklemeniz gerekecektir.
/ * * MCE ayarlarını filtrelemek için geri çağırma işlevi * / function my_mce_before_init_insert_formats ($ init_array) {// style_formats dizisini tanımlayın $ style_formats = array (/ * * Her dizi alt öğesi kendi ayarlarına sahip bir biçimdir * Her dizinin başlığı olduğuna dikkat edin , blok, sınıflar ve sarmalayıcı argümanları * Başlık, Formatlar menüsünde görünecek olan etikettir * Blok, bunun bir span, div, seçici veya satır içi stil olup olmadığını tanımlar * Sınıflar, CSS sınıflarını tanımlamanıza izin verir * Sarmalayıcı, seçilen herhangi bir öğenin etrafına yeni bir blok düzeyinde öğe ekleyin * / array ('title' => 'İçerik Bloğu', 'blok' => 'span', 'sınıflar' => 'içerik bloğu', 'sarmalayıcı' => true,), array ('title' => 'Blue Button', 'block' => 'span', 'classes' => 'blue-button', 'wrapper' => true,), array ('title' => 'Kırmızı Düğme', 'blok' => 'span', 'sınıflar' => 'kırmızı düğme', 'sarmalayıcı' => doğru,),); // JSON ENCODED dizisini 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats) içine ekleyin; $ init_array döndür; } // 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats') öğesine geri çağrı ekleyin;
Artık WordPress'e yeni bir gönderi ekleyebilir ve görsel düzenleyici açılır menüsünden formatlara tıklayabilirsiniz. Özel stillerinizin artık görünür olduğunu fark edeceksiniz.
Ancak, seçimleri WordPress'in görsel editöründe bir fark yaratmayacaktır.
3 Adımı: Bir CSS Stili Ekleme
Şimdi son adım, özel stilleriniz için CSS stil kuralları eklemektir.
Bu CSS'yi temanızın veya alt temanın style.css dosyasına eklemeniz gerekir.
.content-block {border: 1px solid #eee; dolgu: 3px; arkaplan: #ccc; maksimum genişlik: 250 piksel; Sağa çık; metin hizalama: merkez; } .content-block: {açık: her ikisinden sonra; } .blue-button {background-color: # 33bdef; -moz sınır yarıçapı: 6px; -webkit-border-radius: 6px; kenarlık yarıçapı: 6px; sınır: 1px katı # 057fd0; ekran: satır içi blok; imleç: nokta; renk: #ffffff; dolgu: 6px 24px; metin dekorasyonu: yok; } .kırmızı düğme {arka plan rengi: # bc3315; -moz sınır yarıçapı: 6px; -webkit-border-radius: 6px; kenarlık yarıçapı: 6px; kenarlık: 1px katı # 942911; ekran: satır içi blok; imleç: nokta; renk: #ffffff; dolgu: 6px 24px; metin dekorasyonu: yok; }
Düzenleyici stil sayfası, dosyanızın görünümünü kontrol eder. içindekiler görsel düzenleyicide. Bu dosyanın konumunu nasıl bulacağınızı görmek için belgelere bakın.
Temanızın stil sayfası dosyası yoksa her zaman bir tane oluşturabilirsiniz. Yeni bir CSS dosyası oluşturun ve ona bir ad verin " Özel-editör-style.css '.
Bu dosyayı temanızın kök dizinine yüklemeniz ve ardından bu kodu temanızın "functions.php" dosyasına eklemeniz gerekir.
my_theme_add_editor_styles fonksiyonu () {add_editor_style ( 'özel yazı style.css'); } ADD_ACTION ( 'init', 'my_theme_add_editor_styles');
Bu kadar. Özel stillerinizi WordPress görsel düzenleyicisine eklediniz. Artık doğru olduğunu düşündüğünüz özelleştirmeleri yapabilirsiniz.
En sevdiğiniz sosyal ağlarda bu öğreticiyi arkadaşlarınızla paylaşmaktan çekinmeyin.
