WordPress'te özel bir not stili veya markalı alıntı formatı gibi kendi biçimlendirme düğmelerinizi oluşturabilmeyi hiç dilediniz mi? Özel stiller tam olarak bunu yapar.
WordPress'te basit CSS eklemelerinden daha gelişmiş çözümlere kadar özel stillerle ilgili farklı yaklaşımları test ederek önemli zaman harcadım.
Bu deneyim, ekibinizdeki herkesin kullanabileceği özel biçimlendirme seçenekleriyle düzenleyicinizi iyileştirmenin en pratik yollarını belirlememe yardımcı oldu.
Bugün, WordPress görsel düzenleyicinize özel stiller ekleme konusunda size rehberlik edeceğim. Özel stillerin ne olduğunu, neden faydalı olduklarını ve bunları sitenize eklemek için adım adım talimatları, hepsi gerçek dünya test deneyimime dayanarak öğreneceksiniz.✨
💡Hızlı Özet: Özel Stiller Eklemenin En İyi Yolu
WordPress blok düzenleyicisine özel stiller eklemenin en etkili yolu, sitenize bir PHP kod parçacığı eklemektir. Bu, düğmeler, başlıklar ve alıntılar gibi bloklar için yeni stil çeşitlerini kaydetmenize olanak tanır.
En güvenli ve en kolay yöntem için, kodu eklemek üzere WPCode eklentisini kullanmanızı öneririm. Bu, temanızın functions.php dosyasını doğrudan düzenleme riskini ortadan kaldırır.
Bu makalede neleri ele alacağıma dair hızlı bir genel bakış:
- Özel Stiller Nelerdir ve WordPress Kullanım Şeklinizi Nasıl Değiştirebilirler
- WordPress Görsel Düzenleyiciye (Blok Düzenleyici) Özel Stiller Nasıl Eklenir
- Bonus: WordPress Widget'larına Özel Stiller Nasıl Eklenir
- Özel Stiller Hakkında Sıkça Sorulan Sorular
Şimdi hemen dalalım!
Özel Stiller Nelerdir ve WordPress Kullanım Şeklinizi Nasıl Değiştirebilirler
Basitçe ifade etmek gerekirse, özel stil, WordPress düzenleyicisindeki önceden tasarlanmış bir biçimlendirme kısayoludur.
Her içerik oluşturduğunuzda yazı tiplerini, renkleri ve düzenleri manuel olarak ayarlama sorununu çözer; bu zaman alıcı olabilir ve tutarsızlıklara yol açabilir.
Örneğin, başlıklar için özel bir yazı tipi oluşturabilir, çağrı kutuları için bir arka plan rengi seçebilir veya referanslar için tutarlı bir stil uygulayabilirsiniz.
Bunu tasarım öğeleri için bir şablon olarak düşünün. Her seferinde dolgu, yazı tipi veya renkleri manuel olarak ayarlamak yerine, özel stilinizi seçersiniz ve bu, tercih ettiğiniz tasarımı anında uygular.
Örneğin, bir iş blogu yürüttüğünüzü ve her zaman gönderilerinizin sonuna bir ürün önerisi veya feragatname eklediğinizi varsayalım. Her seferinde stil vermek yerine, 'Ürün İpucu' veya 'Önemli Not' gibi özel bir stil oluşturabilir ve anında uygulayabilirsiniz.
Bu size zaman kazandırır ve özellikle bir ekiple çalışıyorsanız veya çok fazla içerik yayınlıyorsanız her şeyin cilalı kalmasını sağlar.
Bunu söyledikten sonra, WordPress görsel düzenleyicisine özel stilleri kolayca nasıl ekleyeceğimize bir göz atalım.
WordPress Görsel Düzenleyiciye (Blok Düzenleyici) Özel Stiller Nasıl Eklenir
Blok düzenleyiciye özel stiller eklemek istiyorsanız, bunu yapmanın en etkili yolu PHP kodunu kullanmaktır. Ancak bu yaklaşımın orta düzey WordPress kullanıcıları için en uygun olduğunu unutmayın.
Bunun nedeni, temanızın functions.php dosyasını düzenlemeniz gerekecek olması ve en küçük bir hata bile sitenizi bozabilir. Bununla birlikte, işlemi basitleştirmek için başlangıç seviyesine uygun bir eklenti kullanabilirsiniz.
Bu tür özelleştirmeler için her zaman WPCode'u öneririm. Bana göre, piyasadaki en iyi WordPress kod parçacığı eklentisi budur. Hatalar riskini almadan özel kod eklemenin en kolay ve en güvenli yolu olduğunu kapsamlı bir şekilde test ettim.
Daha fazla bilgi edinmek için ekibimin tam WPCode incelemesine bakın.
📌 Önemli Not: Beceri seviyeniz ne olursa olsun, herhangi bir önemli kodla uğraşmadan önce her zaman sitenizin tam bir yedeğini oluşturmanızı öneririm. Bunu nasıl yapacağınıza dair talimatlar için WordPress web sitenizi nasıl yedekleyeceğinize dair rehberimize bakın.
Kullanacağım kod parçacığının varsayılan olarak Düğme bloğu için özel stiller ekleyecek şekilde ayarlandığını unutmayın. Ancak birkaç küçük ayarlama ile bunu kolayca diğer blokları desteklemek için kullanabilirsiniz, örneğin:
- 🔷 Süslü veya dış hatlı stillere sahip başlıklar
- 💬 Alıntı, Çekme Alıntı ve Ayet blokları
- 🗂️ Arşiv veya Kategoriler blokları
- ➕ Ve daha fazlası
Bu, tüm sitenizde yeniden kullanılabilir stiller tasarlamak için size büyük esneklik sağlar.
Öncelikle, WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Yardıma ihtiyacınız olursa, WordPress eklentisinin nasıl kurulacağına dair başlangıç kılavuzumuza bakın.
📌 Not: WPCode'un kullanabileceğiniz ücretsiz bir planı da bulunmaktadır. Ancak, pro sürüme yükseltmek size kod parçacıkları bulut kütüphanesi, blok kod parçacığı özelliği, akıllı koşullu mantık ve daha fazlası gibi özelliklere erişim sağlar.
Eklentiyi etkinleştirdikten sonra, kontrol panelinden Kod Parçacıkları » +Parçacık Ekle sayfasına gidin. Burada, ‘Özel Kodunuzu Ekle (Yeni Parçacık)’ seçeneğinin altındaki ‘Parçacık Kullan’ düğmesine tıklayın.
Bu sizi, kod parçacığınıza bir ad vermeniz gereken 'Özel Parçacık Oluştur' sayfasına yönlendirecektir. Bu ad yalnızca sizin kimliğiniz için olacaktır ve hiçbir kullanıcıya gösterilmeyecektir.
Ardından, sağ köşedeki 'Kod Türü' seçeneğine tıkladıktan sonra görünen istemden PHP Snippet'i seçin.
Bundan sonra, bir düğme için özel bir stil oluşturmak isterseniz, aşağıdaki özel kodu ‘Kod Önizleme’ kutusuna ekleyin.
// Function to enqueue and register styles for both frontend and editor
function my_custom_button_styles() {
// Register the style only once
wp_register_style(
'my-custom-button-styles',
false
);
// Add inline styles
wp_add_inline_style(
'my-custom-button-styles',
<<<CSS
.is-style-fancy-button .wp-block-button__link {
background-color: #f0c040;
color: #fff;
border: none;
border-radius: 15px;
padding: 10px 20px;
}
.is-style-outline-button .wp-block-button__link {
background-color: transparent;
color: #333;
border: 2px solid #333;
border-radius: 5px;
padding: 10px 20px;
}
CSS
);
// Enqueue the style for both frontend and editor
wp_enqueue_style('my-custom-button-styles');
}
// Function to add custom styles for Gutenberg editor
function my_custom_gutenberg_button_styles() {
// Call the general styles function for the editor
my_custom_button_styles();
// Enqueue inline script for the editor to register block styles
wp_add_inline_script(
'wp-blocks',
<<<JS
wp.domReady(function() {
wp.blocks.registerBlockStyle('core/button', {
name: 'fancy-button',
label: 'Fancy Button'
});
wp.blocks.registerBlockStyle('core/button', {
name: 'outline-button',
label: 'Outline Button'
});
});
JS
);
}
// Hook the styles function to frontend
add_action('wp_enqueue_scripts', 'my_custom_button_styles');
// Hook the custom block style registration
add_action('enqueue_block_editor_assets', 'my_custom_gutenberg_button_styles');
Bu kod parçacığı, WordPress'teki Düğmeler bloğuna iki özel stil ekler.
Harika olan şey, bu kodu diğer bloklar için de stil oluşturmak üzere uyarlayabilmenizdir. Ancak, bu 'düğme' kelimesini değiştirmekten biraz daha fazlasını gerektirir. Doğru çalışması için kodun iki ana bölümünü güncellemeniz gerekir:
- Blok Adı (Slug): Kodun JavaScript bölümünde
'core/button'ifadesini bulacaksınız. Bu, WordPress Düğme bloğunun resmi adıdır. Bunu, stilini değiştirmek istediğiniz bloğun slug'ı ile değiştirmeniz gerekir (örneğin,'core/heading'). - CSS Seçicileri: CSS kodu (
.is-style-fancy-button .wp-block-button__linkgibi) özellikle Düğme bloğunun HTML'si için yazılmıştır. Diğer blokların farklı bir yapısı vardır, bu nedenle onları doğru şekilde hedeflemek için yeni CSS kuralları yazmanız gerekecektir.
Arka plan rengini değiştirmek, kenar yarıçapını ayarlamak ve ihtiyaçlarınıza uyacak diğer stil değişikliklerini yapmak için CSS'yi de ayarlayabilirsiniz.
💡 Uzman İpucu: Kodu kendiniz özelleştirme konusunda tereddüt ediyorsanız, ChatGPT gibi bir yapay zeka asistanı iyi bir başlangıç noktası olabilir. Ancak, doğru kodu elde etmek için ona çok net ve ayrıntılı bir istem vermeniz gerekir.
Örneğin, basit bir istek yerine şu gibi bir istem sağlayabilirsiniz:
Here is a PHP, CSS, and JS snippet that adds custom styles to the 'core/button' block in WordPress. Please adapt it to target the 'core/heading' block instead. The new style should be named 'Green Highlight' and it should add a light green background color.
Ancak, canlı web sitenize eklemeden önce yapay zeka tarafından oluşturulan kodu her zaman bir hazırlık sitesinde test etmenizi öneririm. Bu, herhangi bir potansiyel hatayı risksiz bir şekilde yakalamanızı sağlar.
Şimdi, 'Devre Dışı' anahtarını 'Etkin' olarak değiştirmeye devam edin.
Son olarak, değişikliklerinizi kaydetmek için 'Snippet Kaydet' düğmesine tıklayın.
Ardından, blok düzenleyicide bir gönderi açın ve özel stiller eklediğiniz bloğu ekleyin.
Örneğin, Düğmeler bloğu için özel stiller eklediyseniz, bunu gönderinize ekleyin.
Bunu yaptıktan sonra, özel stillerin blok panelindeki 'Stiller' bölümünde kullanılabilir olduğunu göreceksiniz.
Bundan sonra, değişikliklerinizi kaydetmek için 'Güncelle' veya 'Yayınla' düğmesine tıklayın.
Ardından, özel stilleri görmek için WordPress web sitenizi ziyaret edin.
Bonus: WordPress Widget'larına Özel Stiller Nasıl Eklenir
WordPress görsel düzenleyicisine özel stiller eklemeyi öğrendiğinize göre, şimdi başka bir kullanışlı özelleştirmeye bakalım: WordPress widget'larına özel stiller ekleme.
Widget'ları benzersiz renkler, yazı tipleri veya düzenlerle özelleştirmek, sitenizin genel tasarımıyla uyumlu olmalarını sağlamaya yardımcı olur ve kullanıcı deneyimini iyileştirir.
WordPress widget'larına özel stiller eklemenin en kolay yolu, WPCode gibi bir eklentiyle ekleyebileceğiniz bir CSS kod parçacığı kullanmaktır.
Belirli widget'ları hedefleyen özel CSS ekleyebilir ve yazı tipi boyutları, arka plan renkleri, dolgu ve hatta kenarlıklar gibi şeyleri ayarlayabilirsiniz.
Bu, çok fazla teknik detaya girmeden widget'larınızın genel tasarımınızla uyumlu olmasını sağlamak için mükemmeldir.
Başlamak için, WordPress widget'larına özel stiller ekleme eğitimimize göz atın: WordPress widget'larına özel stiller ekleme.
Özel Stiller Hakkında Sıkça Sorulan Sorular
WordPress görsel düzenleyicisine özel stiller ekleme hakkında okuyucularımızın sıkça sorduğu bazı sorular şunlardır:
Bir eklenti kullanmadan özel stil ekleyebilir miyim?
Evet, kodu doğrudan temanızın functions.php dosyasına eklemek mümkündür. Ancak, yeni başlayanlar için bu yöntemi kesinlikle önermiyorum.
Bu dosyada yapılacak küçük bir hata sitenizi bozabilir ve temanızı güncellediğinizde özelleştirmeleriniz kaybolur. WPCode kullanmak en güvenli ve en güvenilir yaklaşımdır.
Bu özel stiller herhangi bir WordPress temasıyla çalışacak mı?
Genellikle evet. Bu eğitimde kullanılan kod, stilleri WordPress çekirdek düzenleyicisine kaydeder, bu nedenle herhangi bir modern, iyi kodlanmış temayla uyumlu olmalıdır.
Nadir durumlarda, çok agresif veya kötü yazılmış CSS'ye sahip bir tema özel stillerinizi geçersiz kılabilir, ancak bu yaygın değildir.
Stil vermek istediğim diğer bloklar için doğru adı (slug) nasıl bulabilirim?
Bir bloğun slug'ını bulmanın kolay bir yolu, WordPress düzenleyicisine gitmek, ilgilendiğiniz bloğu seçmek ve ardından blok araç çubuğundaki üç noktalı menüye tıklamaktır.
O menünün en altında 'Blok türünü kopyala'ya tıklayın. Bu, bloğun slug'ını (örneğin, core/image, core/quote) panonuza kopyalayacaktır, ardından bunu kod parçacığına yapıştırabilirsiniz.
Aynı blok için ikiden fazla özel stil oluşturabilir miyim?
Kesinlikle. Kod parçacığının JavaScript bölümünde, eklemek istediğiniz her yeni stil için wp.blocks.registerBlockStyle(...) fonksiyonunu çoğaltabilirsiniz.
Her birine benzersiz bir ad ve etiket verdiğinizden emin olun. Ayrıca kaydettiğiniz her yeni stil için karşılık gelen CSS kuralları eklemeniz gerekecektir.
Umarım bu makale, WordPress görsel düzenleyicisine özel stiller eklemeyi öğrenmenize yardımcı olmuştur. Ayrıca, özel bir WordPress bloğu oluşturma ve WordPress'te dolgu ile kenar boşluğu arasındaki fark hakkındaki karşılaştırmamızı içeren başlangıç rehberimize de göz atmak isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Toufic Ahemmed
Bu adamlar harika. Çoğu zaman bana yardım ediyorlar. Çok çok teşekkür ederim.
WPBeginner Desteği
Glad we could help
Yönetici
Aslan French
Bu makale, bu tür işlevsellik yakın zamanda Zengin Metin API'sine eklendiğinden, Gutenberg göz önünde bulundurularak güncellenmelidir.
WPBeginner Desteği
Merhaba Aslan,
Öneri için teşekkürler. Gutenberg çıktığında eski makalelere kesinlikle bakacağız.
Yönetici
Mehrdad
Çok teşekkürler.
Bu makale bana gerçekten çok yardımcı oldu.
sabbi
Bu, bir p-etiketine sınıflar ekler, değil mi?
Kendi etiketlerimizi oluşturmanın bir yolu var mı?
Ya da başka bir şey: seçilen özel bir Biçim, daha önce seçilmiş bir h-etiketini bir p ile üzerine yazar mı? Bir istemcinin varsayılan VE özel stillerde gezinirken başını belaya sokmasını önlemek için gerekli olacaktır.
Britany
Ne yazık ki bu bana hiç yardımcı olmadı. Doldurmanız gereken alanların her birinin ne anlama geldiğini açıklayan bir makale var mı?
İhtiyacım olan tek şey, podcast gösteri notları sayfalarımdaki alıntılara aynı biçimlendirmeyi uygulamanın bir yolu. Her alıntı aynı yazı tipine (bir başlık stili olarak ayarladığım), kalın ve ortalanmış.
Her alıntıya biçimin her bölümünü manuel olarak uygulamaktan ve tek bir düğmeye tıklayıp işi bitirmenin bir yolundan yoruldum.
Syams
Lütfen WP görsel düzenleyiciye yeni bir yazı tipi eklemeyi anlatır mısınız?
Moya Nicholson
Teşekkürler. Gerçekten yardımcı oldu.
stanley
Tema WP'mi değiştirmem gerekiyor
hell me please
Sandy Connolly
BUNUN İÇİN TEŞEKKÜRLER!!! AMAN TANRIM!!!! Tasarımımıza göre kendi içeriğini ekleyebilmek isteyen bir müşteriye siteyi teslim ederken ne kadar yardımcı oldu!
Marcin
Merhaba, her gün WordPress geliştiriyorum ve WP ile her şeyi yapıyorum ama bu kod parçası gördüğüm en kullanışlılardan biri… Varsayılan WYSIWYG'nin eksik olduğu tam olarak bu! İçerik alanında bazı harika şeyler yapmanıza olanak tanır. Paylaştığınız için Teşekkürler!
Foxglove
Bu eklentiyi bir süredir kullanıyorum, ancak artık wordpress.org'dan temin edilemiyor — görünüşe göre artık güncellenmiyor veya desteklenmiyor. Tarif ettiğiniz manuel yöntem dışında herhangi bir alternatiften haberi olan var mı?
Lisa McMahon
İşte makalede bahsedilen orijinal eklentinin güncellenmiş/forklanmış bir sürümü: TinyMCE Özel Stilleri
WPBeginner Desteği
Merhaba Lisa, bunu belirttiğiniz için teşekkürler. Makaleyi güncellenmiş/forklanmış sürümle güncelledik.
Yönetici
Shubha Das
span yerine p eklemek istiyorum. Ancak span adını p olarak değiştirdiğimde çalışmıyor.
'title' => 'Not', 'block' => 'p', 'classes' => 'note', 'wrapper' => true,
MacKenzie
Bunu gerçekten faydalı buldum ve neredeyse başardığımı hissediyorum ama henüz tam olarak çalışmıyor. Seçildiğinde metnim editörde span ve class etiketleriyle doğru şekilde etiketleniyor – ancak stil sayfasındaki stillerden hiçbiri yayınlanan nota uygulanmıyor.
Frank
Bir müşteri WordPress ayarları istediğinde her zaman gerilirim ve kusacak gibi hissederim. Harika, bu stil açılır menüsü AMA, daha önce de söylendiği gibi, stiller sonradan geri çekilemiyorsa ve sadece eklenip eklenip duruyorsa tamamen işe yaramaz...
WordPress'teki bu yarım yamalak çözümlere alışkınım – normalde ilkini yarı düzeltmek için tamamlayıcı bir yarım yamalak çözüm de bulunur. Ama burada mı?
Şimdi stiller açılır menüsü aracılığıyla eklenen ÖZEL STİLLERİ NASIL KALDIRMAYI önerirsiniz. Kod görünümü müşterim için hiçbir şekilde kabul edilebilir değil?
Birisi bunun bir yolunu bulup bu bilgiyi paylaşırsa (ve felaket denilen wordpress'i uzun bir süre uzağımda tuttuğu için (umarım) inanılmaz şanslı olurdum).
Şimdiden çok teşekkürler!
Frank
Chris
Stile açılır menüden tekrar tıklayın. Tamamlandı.
Shafi ken
Yardımcı eğitim için teşekkürler. Teşekkürler
K Shazzad
Whole tutorial worked flawlessly for me. Thanks a bunch
Stef
Bu eklentiyi denedim ancak özel bir stili değiştirdiğinizde, daha önce eklediklerinizi güncellemediğini fark ettim. Geri dönüp yeniden eklemeniz gerekiyor, çünkü özellik stili stil tablosu aracılığıyla değil, satır içi ekliyor.
Phil
Yardımcı öğretici için teşekkürler. Eklentiyi elle kodlamaya kıyasla kullanmanın herhangi bir performans cezası var mı? Teşekkürler,
WPBeginner Desteği
Hayır, ancak öğeleri yeniden kullanmak için bu yöntem oldukça kullanışlıdır. Ayrıca, bir müşteri için bir site oluşturuyorsanız ve onlardan görsel düzenleyiciden öğeler ekleyebilmelerini istiyorsanız kullanışlıdır.
Yönetici
Sei
Eğitim için teşekkürler!
İki işaretlemeyi aynı anda eklemenin bir yolu var mı? Mesela, metin gibi bir şey elde etmek
Sei
Tamam, yorumlarınız HTML'e dönüştürülüyor. Yani, tek bir stile tıklayarak metnimin etrafına hem 'h1' hem de 'span' işaretlemelerini almak istiyorum.
Lily
Özel sınıfları yapmayı başardım ve öğeler metin düzenleyicisinde ve sayfada doğru sınıflarla gösteriliyor, ancak sınıf görsel düzenleyicide uygulanmıyor, bu da kullanıcının işe yarayıp yaramadığını belirsiz hale getiriyor. Bunu düzeltmenin bir yolu var mı?
Bonnie Dasher-Andersen
İki özel stil ekledim. Bir sayfayı düzenlemeye gittiğimde, her biri aynı girişlere sahip iki Format menüm var (oluşturduğum iki stil). Bu stilleri uygulamaya çalıştığımda hiçbir şey olmuyor. Metin görünümünde etiketi görebiliyorum, ancak sayfayı görüntülediğimde stil uygulanmamış.
Herhangi bir öneriniz var mı? Bu WP sitesini güncelleyecek ve çok bilgili olmayan bir müşteri için bunu çözmem gerekiyor.
Marcello
Aynı sorunu yaşadım, etiketler koda uygulanmıyordu. 'wrapper'ı 'false' olarak ayarlayarak düzelttim. Teknik nedenlerini bilmiyorum, sadece denedim ve işe yaradı. Umarım yardımcı olur!
hugotom
Stil sayfasının kaydedilmediği aynı sorunu yaşadım.
Çözüm
Eğer zaten bu kayıt stil sayfaları functions.php dosyasında varsa, oraya stylesheet custom-editor-style.css eklemelisiniz
Örnek:
function styles_theme(){ wp_enqueue_style(‘bootstrap_css’, get_template_directory_uri() . ‘/sources/bootstrap/bootstrap.min.css’); wp_enqueue_style(‘main_css’, get_template_directory_uri() . ‘/style.css’); wp_enqueue_style(‘theme_css’, get_template_directory_uri() . ‘/custom/css/theme.css’); wp_enqueue_style(‘editor_css’, get_template_directory_uri() . ‘/custom-editor-style.css’); // BURADA };
Raphael Landau
Bunu kullandım ve stil/sınıfın tüm Paragraf'a uygulandığı sorunla da karşılaştım. Bunun nedeni, stil biçimini "blok" olarak ayarlamanızdır. ('block' => 'span',).
Hızlıca resmi Wordpress kod sözlüğünü ziyaret ederek stil biçimlendirmesi için çok daha fazla seçenek keşfetti.
http://codex.wordpress.org/TinyMCE_Custom_Styles
span varsayılan olarak satır içi bir stil olduğundan, 'block' yerine 'inline' yazmalısınız ve işte bu kadar! Stilleriniz beklendiği gibi çalışacaktır.
yani özetle:
dizi(
‘başlık’ => ‘Başlığınız’,
‘inline’ => ‘span’,
‘sınıflar’ => ‘sınıfınız’,
‘sarıcı’ => true,
),
nemaha
Merhaba,
Harika eğitim, bunun için teşekkürler! Benim de stilin (bir span) tüm paragrafa uygulanması sorunu var. Yapmak istediğim: Bir başlık yazıp onu başlık 1 olarak biçimlendirmek, ardından o başlık içindeki yalnızca belirli bir kelimeyi özel bir stil eklemek için işaretlemek. Bunu düzeltmek için herhangi bir güncelleme var mı? Teşekkürler!
bekee
Ben de stili sadece seçilen öğeye değil, tüm paragrafa uyguladığı sorunu yaşıyorum. Bununla ilgili bir güncelleme var mı? Teşekkürler!
Debbie
Aynı sorunu yaşıyorum. Tek bir kelimeyi vurguluyor, ancak tüm paragrafa etki ediyor.
James
Birkaç sorun buldum. İşe yarıyor gibi görünüyor, ancak beklendiği gibi değil. Kod bilmeyen biri için uygun değil.
1. Bir paragraftaki tek bir kelimeyi vurgulayarak bir ekleme yapın, ancak ekleme vurgulanan kelimeye değil, tüm paragrafa eklenir.
2. Kodu düzenlemeden CSS'i kaldırmanın bir yolu yok. Müşterim kodla uğraşmıyor! Hatta .nothing adında bir sınıf oluşturmayı denedim ama yeni sınıf sadece diğerlerine ekleniyor, mevcut sınıfın yerine geçmiyor.
WPBeginner Ekibi
WordPress'te yaygın resim sorunlarını nasıl gidereceğinizle ilgili kılavuzumuza bakın: WordPress'te yaygın resim sorunlarını giderme.
Sheikh Zuhaib Siddiqui
Merhaba, medya eklerken bir hatam var. Herhangi bir medya yüklemeye çalıştığımda, sadece yüklenmeye devam ediyor ve herhangi bir medya görünmüyor ve medya yükleyemiyorum... Hatanın ne olduğunu bana bildirin???
Ancak bu iyi çalışıyor …………sadece medya yükleyicide hata var. Lütfen bana bu çözümü sağlayın.
Marlice
Merhaba. Bu harika eğitim için teşekkürler. Editörde zaten bulunan içerikle ilgili bir sorunum var. Bir kelimeyi veya metin parçasını işaretleyip bir stil seçersem (örneğin "mavi düğme" - kodunuzdan), sadece işaretlenen kelimeyi veya metin parçasını sarmalamıyor. Bunun yerine tüm içeriği işaretliyor ve üzerine .blue button sınıfıyla bir span ekliyor. Bunu diğer sayfalar ve gönderilerle birkaç kez denedim - her zaman aynı: içerik zaten oradaysa ve ben onu işaretlersem, tüm içerik span sınıfını alıyor. Yeni düzenlenmiş bir metni sayfaya/gönderiye sararsam bu olmaz - o zaman her şey yolunda gider. Başka biri de bu fenomenle karşılaştı mı?
Teşekkürler,
Ute
John-Henry Ross
Merhaba. Bu yöntemi denedim ve harika çalışıyor, tam olarak aradığım şeydi, teşekkür ederim. Sadece bir formata eklemek yerine bir alt klasöre stil eklemenin bir yolu olup olmadığını öğrenmek istiyorum. Örneğin, tüm başlık stillerini içeren bir başlık alt klasörü, div stillerini içeren bir div alt menüsü vb. ekleyin.
dave
Teşekkürler!
2 yöntem göstermek de harika… müşterilerim herhangi bir kodla uğraşmaktan korkuyor.
I will sometimes use custom fields to “force” safe additional styles, but the TinyMCE can be handled by some people, so I’ll kee that in mind.
Merhaba, Dave
WPBeginner Ekibi
nokta eklemenize gerek yok
sınıflar’ => ‘.alert-blue’,
Olmalı
sınıflar’ => ‘alert-blue’,
Jeff Gaudette
Ne yazık ki bu işe yaramadı. Noktayı kaldırdım ama düzenleyicide hala hiçbir şey uygulanmıyor. Yardım masası olmadığınızı biliyorum ama ilgilenirseniz işte bir ekran görüntüsü: http://screencast.com/t/JI0zMvcH
Ortaya koyduğunuz tüm harika şeyler için teşekkürler!
WPBeginner Ekibi
functions.php dosyanıza eklediğiniz kodu yapıştırabilir misiniz? Ayrıca bu düğmeler için kullandığınız CSS'yi de yapıştırın.
Jeff Gaudette
Elbette. Fonksiyonlar:
/*
* MCE ayarlarını filtrelemek için geri çağırma işlevi
*/
function my_mce_before_init_insert_formats( $init_array ) {
// style_formats dizisini tanımla
$style_formats = array(
// Her dizi öğesi kendi ayarları olan bir formattır
array(
‘title’ => ‘Uyarı’,
‘block’ => ‘span’,
‘classes’ => ‘entry p.alert-blue’,
‘wrapper’ => true,
),
array(
‘title’ => ‘Mavi Uyarı’,
‘block’ => ‘p’,
‘classes’ => ‘alert-blue’,
‘wrapper’ => true,
),
array(
‘title’ => ‘Mavi Düğme’,
‘block’ => ‘span’,
‘classes’ => ‘alert-blue-button’,
‘wrapper’ => true,
),
);
// Diziyi, JSON KODLANMIŞ olarak, ‘style_formats’ içine ekleyin
$init_array[‘style_formats’] = json_encode( $style_formats );
return $init_array;
}
// ‘tiny_mce_before_init’ geri çağrısını ekle
add_filter( ‘tiny_mce_before_init’, ‘my_mce_before_init_insert_formats’ );
CSS
.alert-blue{
background: none repeat scroll 0 0 #E7F4FD;
border: 1px solid #C5D7E3;
color: #3A5971;
font-size: 18px;
line-height: 24px;
text-align: center;
margin: 0 0 15px !important;
padding: 15px 25px;
width: auto;
}
WPBeginner Ekibi
CSS'i stil sayfanıza eklediniz mi?
CSS'nize eklediğiniz stil kurallarının, MCE ayarlarını filtrelemek için Geri Çağırma fonksiyonunda eklediğiniz sınıflarla eşleştiğinden emin olun.
Kemi O
TinyMCE Advanced Profesyonel Formatlar ve Stiller yalnızca WP sürüm 3.6.1'e kadar desteklenir.
Keely Worth
Görsel Düzenleyici'den veba gibi kaçınıyorum! Yalnızca bir temanın yerleşik kısa kod düğmesini kullanmak için geçiş yapmam gerekirse kullanırım. Aksi takdirde – asla kullanmam.
Blair2004
İlk yöntemi denedim, yeni stiller mevcut ancak birini seçerken hiçbir şey olmuyor...
Jeff Gaudette
Bir blok ile bunu yapmaya çalışıyorum ve başarılı olamadım. Kod şu şekilde:
dizi(
‘başlık’ => ‘Mavi Uyarı’,
‘blok’ => ‘p’,
‘sınıflar’ => ‘.alert-blue’,
‘sarmalayıcı’ => true,
),
Span kullandığımda çalışıyor, ancak bu bir span sınıfı gerektiriyor ki bunu kullanamıyorum.
Yukarıdaki kodu kullandığımda, wp düzenleyicisinde hiçbir şey olmuyor. Metni seçiyorum, Alert Blue biçimlendirme seçeneğine tıklıyorum ve hiçbir şey olmuyor: http://screencast.com/t/dijujZ2ZdqBy
Herhangi bir tavsiye?