Ana İçeriğe Geç

WordPress editörü görsel stil eklemek için nasıl

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

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.

stylesinwpeditor

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 editörü biçimlendirme ve temel stil seçenekleri sunar. Bununla birlikte, bazen CSS düğmeleri, içerik blokları, kancalar vb. Eklemenize izin verecek özel stillere sahip olmanız gerekebilir.

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 muazzam miktarda zaman kazandıracak ve ayrıca web sitenizin her yerinde aynı stilleri kullanmanıza izin verecektir.

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, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Aktivasyondan sonra, ziyaret etmelisiniz " Ayarlar> Ayarlar »TinyMCE Özel Stilleri Eklenti ayarlarını yapılandırmak için.

Kontrol-of-the eklenti-TinyMCE

Eklenti, stil sayfası dosyalarının konumunu seçmenize izin verir. Temanızın veya alt temanızın stilini kullanabilir veya özel bir konum seçebilirsiniz.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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.

kurala of-style-css

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.

style-özelleştir-editör-wordpress

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.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

2 Yöntemi: Görsel Düzenleyiciye Elle Stil Ekleme

Bu yöntem, WordPress dosyalarınıza manuel olarak kod eklemenizi gerektirir. İlk defa yapıyorsanız, WordPress eklentisinin nasıl ekleneceğine dair dersimize göz atın.

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ğitici yazı için, blok içeriği ve düğmeler oluşturmak üzere üç özel stil ekleyeceğiz.

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

özet-of-the düğmeleri-tinymce-ekleme-of-style-kişiselleştiren

Editör Stil Sayfası, içeriğinizin Görsel Editör'deki görünümünü kontrol eder. Bu dosyanın konumunu nasıl bulacağınızı öğrenmek için belgelere bakın.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
7 hisseleri
hisse6
cıvıltı
Enregistrer1