Visual WordPress Editor’a özel stil nasıl eklenir

Visual WordPress düzenleyicisine özel bir stil eklemek ister misiniz? Özel bir stil eklemek, metin düzenleyicisine geçmeden biçimlendirmeyi hızlı bir şekilde uygulamanıza olanak tanır. Bu makalede, Visual WordPress düzenleyicisine nasıl özel bir stil ekleyeceğinizi göstereceğiz.

Not: Bu öğretici, CSS hakkında temel bilgi gerektirir. Varsayılan olarak görsel WordPress editörleri için neden ve özel bir stile ihtiyacınız olduğunda, Visual WordPress düzenleyicisi birkaç biçimlendirme seçeneği ve temel stillerle birlikte gelir. Ancak, bazen CSS düğmesini, içerik bloğunu, sloganı vb. Eklemek için kendi özel stilinize ihtiyacınız olabilir.
Her zaman görsel editörden metne geçebilir ve özel HTML ve CSS ekleyebilirsiniz. Ancak düzenli olarak birkaç stil kullanıyorsanız, tekrar kolayca kullanabilmeniz için görsel düzenleyiciye eklemek daha iyi olacaktır. Bu, metin ve görsel editör arasında geçiş yapmak için zaman ayıracaktır. Bu aynı zamanda web sitenizde sürekli olarak aynı stili kullanmanıza izin verecektir. En önemlisi, web sitenizdeki yayınları düzenlemeye gerek kalmadan stili kolayca değiştirebilir veya güncelleyebilirsiniz. Bu nedenle, Visual WordPress düzenleyicisine nasıl özel bir stil ekleyeceğinize bakalım.
Yöntem 1: Yapmanız gereken ilk eklentiyi kullanarak Visual Editor’a özel bir stil ekleyin Tinymce Custom Styles eklentisini yüklemek ve etkinleştirmektir. Daha fazla bilgi için, WordPress eklentilerinin nasıl yükleneceğine dair adım adım kılavuzumuza bakın. Etkinleştirmeden sonra, eklenti ayarlarını yapılandırmak için Ayarlar sayfasını ziyaret etmeniz gerekir.

Bu eklenti, stil sayfası dosyasının konumunu seçmenizi sağlar. Çocuğunuzun teması veya tema stili sayfasını kullanabilir veya kendi özel konumunuzu seçebilirsiniz. Bundan sonra, değişikliklerinizi kaydetmek için ‘Tüm Ayarlar Kaydet’ düğmesine tıklamanız gerekir. Artık özel stilinizi ekleyebilirsiniz. Kuvvet bölümüne biraz aşağı inmeniz ve yeni stil düğmesini tıklamanız gerekir. İlk olarak, stil başlığını girmelisiniz. Bu başlık çekme-hesal menüsünde görüntülenecektir. Ardından, satır içi, blok veya seçici öğe olup olmadığını seçmelisiniz. Bundan sonra CSS sınıfını ekleyin ve ardından aşağıdaki resimde gösterildiği gibi CSS kurallarınızı ekleyin.
CSS stilini ekledikten sonra, değişikliklerinizi kaydetmek için ‘Tüm Ayarları Kaydet’ düğmesini tıklamanız yeterlidir. Artık mevcut yayınları düzenleyebilir veya yenilerini oluşturabilirsiniz. Visual WordPress düzenleyicisinin ikinci satırında açılır format menüsünü göreceksiniz.

Editörde birkaç metin seçin, ardından uygulamak için römorkör menüsünden özel stilinizi seçin. Artık özel stilinizin doğru uygulandığını görmek için yayınınızın önizlemesini görebilirsiniz. Yöntem 2: Visual WordPress düzenleyicisine manuel olarak özel bir stil ekleyin Bu yöntem, kodu WordPress dosyanıza manuel olarak eklemenizi gerektirir. WordPress’e ilk kez bir kod ekliyorsanız, lütfen Web’den WordPress’e bir kod görüntüsü ekleme konusunda kılavuzumuza bakın. Adım 1: Visual WordPress düzenleyicisine özel bir çekme menüsü ekleyin

İlk olarak, Visual WordPress düzenleyicisine bir römorkör menü ekleyeceğiz. Bu gerilme menüsü daha sonra özel stilimizi seçmemize ve uygulamamıza izin verecektir. Dosya işlevine aşağıdaki kodu eklemeniz gerekir.
$ düğmeleri döndür;
}
add_filter (‘MCE_BUTTONS_2’, ‘WPB_MCE_BUTTONS_2’);
Adım 2: Seçenek Seçin Çıkış Menüsüne Seçin
Şimdi, yeni yaptığınız gerilme menüsüne seçeneği eklemeniz gerekiyor. Daha sonra bu seçeneği röportaj menüsünden seçebilir ve uygulayabilirsiniz.
Bu öğretici uğruna, içerik blokları ve düğmeleri oluşturmak için üç özel stil ekledik. Aşağıdaki kodu Fonksiyonlara eklemeniz gerekir.

* MCE ayarlarını filtrelemek için geri arama işlevi
*/
İşlev my_mce_before_init_insert_formats ($ intit_array) {
// Style_formats dizisini tanımlayın
$ style_formats = dizi (
/*
* Her dizi çocuğu kendi ayarlarıyla bir biçimdir
* Her dizinin başlık, blok, sınıflar ve sarıcı bağımsız değişkenleri olduğuna dikkat edin
* Başlık, formatlar menüsünde görülebilecek etikettir
* Block, bir açıklık, 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
* Seçici, seçilen herhangi bir öğe etrafına yeni bir blok seviyesi öğesi ekleyip eklememeniz
*/
dizi (
‘Başlık’ => ‘İçerik Bloğu’,
‘Blok’ => ‘açıklık’,
‘Sınıflar’ => ‘içerik bloğu’,
‘sargı’ => true,
),
dizi (
‘başlık’ => ‘mavi düğme’,
‘Blok’ => ‘açıklık’,
‘Sınıflar’ => ‘mavi-düğme’,
‘sargı’ => true,
),
dizi (
‘başlık’ => ‘kırmızı düğme’,
‘Blok’ => ‘açıklık’,
‘Sınıflar’ => ‘kırmızı düğme’,
‘sargı’ => true,),
);
// JSON kodlu diziyi ‘style_formats’ içine ekleyin
$ İnit_array [‘style_formats’] = json_encode ($ style_formats);
Dönüş $ init_array;
}
// ‘tiny_mce_before_init’e geri arama ekleyin
add_filter (‘tiny_mce_before_init’, ‘my_mce_before_init_formats’);
Artık WordPress’e yeni bir gönderi ekleyebilir ve Visual Düzenleyiciye Çekme Kedileri Formatı menüsünü tıklayabilirsiniz. Özel stilinizin artık format altında göründüğünü göreceksiniz.
Ancak, bunu seçmek mevcut yazı düzenleyicisinde herhangi bir fark yaratmaz. Adım 3: CSS Style Ekle Şimdi son adım, özel stilinize CSS stili kuralları eklemektir. Bu CSS’yi style.css ve editor-style.css dosya temaları veya çocuğunuzun temaları eklemeniz gerekir .. Concent-Block {
Sınır: 1 piksel katı #eee;
Dolgu: 3px;
Arka plan: #CCC;
Maksimum genişlik: 250px;
Sağa çık;
Metin-align: merkez;
}
.Content-Block: Sonra {
İkisini de temizle;
}
.Blue-Button {
Arka Plan rengi:#33Bdef;
-Moz-Sınırlı-Radius: 6px;
-Webkit-Sınırlı-Radius: 6px;
Border-Radius: 6px;
Sınır: 1px katı #057FD0;
Ekran: satır içi blok;
İmleç: işaretçi;
Renk: #ffffff;
Dolgu: 6px 24px;
Metin dekorasyonu: yok;
}
.kırmızı buton {
Arka Plan rengi:#BC3315;
-Moz-Sınırlı-Radius: 6px;
-Webkit-Sınırlı-Radius: 6px;
Border-Radius: 6px;
Sınır: 1px katı #942911;
Ekran: satır içi blok;
İmleç: işaretçi;
Renk: #ffffff;
Dolgu: 6px 24px;
Metin dekorasyonu: yok;
}
Stylessheet Editor, içeriğinizin görsel düzenleyicideki görüntülenmesini kontrol eder. Bu dosyanın konumunu bulmak için tema belgelerinizi kontrol edin. Temanızda stil sayfası düzenleyici dosyası yoksa, her zaman yapabilirsiniz. Yeni bir CSS dosyası oluşturun ve Custom-editor-style.css adını verin. Bu dosyayı temanızın kök dizinine yüklemeniz ve ardından bu kodu dosya işlevine ekleyin.
}
Add_action (‘init’, ‘my_theme_add_editor_styles’);

Sadece bu. Özel stilinizi görsel WordPress düzenleyicisine başarıyla eklediniz. Kendi öğelerinizi ve stilinizi ekleyerek kodla oynamaktan çekinmeyin.
Bu makalenin Visual WordPress düzenleyicisine nasıl özel bir stil ekleyeceğinizi öğrenmenize yardımcı olduğunu umuyoruz. WordPress widget’a nasıl özel bir stil ekleyeceğiniz konusunda kılavuzumuzu da görmek isteyebilirsiniz. Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube kanalımıza abone olun. Bizi Twitter ve Facebook’ta da bulabilirsiniz.