WordPress Görsel Düzenleyicisine Özel Stiller Nasıl Eklenir

WordPress görsel düzenleyicinize bir göz atın. İçeriğinizi biçimlendirmek ve şekillendirmek için bazı standart seçenekler vardır, ancak yazılarınızın ve sayfalarınızın biraz gerçekten süslü görünmesini sağlamak için özelleştirme açısından fazla bir şey yoktur.

Şimdi, düğmeler ve metin blokları gibi şeyler oluşturmak için bazı CSS'leri atmak için WordPress'teki Metin ve Görsel düzenleyiciler arasında ileri geri atlama yeteneğine sahip olduğunuzu biliyor olabilirsiniz, ancak bu bir acıdır ve eğer yoksa Kod düzenleme konusunda çok fazla deneyim, Metin düzenleyici biraz göz korkutucu görünüyor.

Kendi özel stillerinizi oluşturabilseniz, bunları WordPress düzenleyicideki bir açılır menüye yerleştirebilseniz ve ihtiyaç duyduğunuzda kullanmayı seçebilseydiniz daha kolay olmaz mıydı? Evet, çok daha kolay, bu yüzden burada bunu nasıl yapacağımızı özetlemek istiyoruz. Bu süreci olabildiğince basitleştirmeye çalışmamıza rağmen, özel stillerin tüm avantajlarını keşfetmek istiyorsanız biraz CSS bilgisine sahip olmanızın yardımcı olacağını unutmayın.

WordPress görsel düzenleyicisine nasıl özel stiller ekleneceğine bir göz atalım.

Kod Ekleyerek WordPress Görsel Düzenleyicisine Özel Stiller Ekleyin

Bu ilk seçenek, CSS'yi nasıl dahil edeceğiniz ve değiştireceğiniz hakkında biraz bilgi sahibi olmanızı gerektirir, ancak bu bilgiyi gelecekte kullanabilmeniz için temel bilgileri öğrenmenize yardımcı olmak için size biraz bilgi vereceğim. Sitenizi bir eklenti ile ağırlaştırmak istemiyorsanız bu güzel bir seçenektir.

Bunun amacı, WordPress görsel düzenleyicinize özel stiller içeren yeni bir açılır menü eklemektir; bu, size düzenleyicinizdeki öğeleri seçme ve ardından bunlara özel stiller uygulama olanağı verir. Yeni bir tema geliştiriyorsanız, function.php dosyanızı bulun ve aşağıdaki kodu o dosyaya yerleştirin veya zaten yerleşik bir tema ile çalışıyorsanız, bu kodu bir alt temanın functions.php dosyasına yapıştırın.

 function myprefix_mce_buttons_1( $buttons ) { array_unshift( $buttons, 'styleselect' ); return $buttons; } add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );

WordPress gönderilerinizden birinde editöre geri dönün ve şimdi editörün üst satırında yeni bir “Formatlar” düğmesi görmelisiniz. “mce_buttons_1? Bu, biçimler menü düğmesini mce düzenleyicisinin ilk satırına yerleştirir. İkinci sıraya yerleştirmek için “mce_buttons_2” veya 3. sıraya yerleştirmek için “mce_buttons_3” filtresini de kullanabilirsiniz.

Artık menü öğesini etkinleştirdiğinize göre, gönderilerinizde kullanmak üzere özel stillerinizi eklemenin zamanı geldi. Aşağıda listelenen kodu alın ve "Tema Düğmesi" ve "Vurgula" – Formatlar açılır menüsüne 2 yeni stil ekleyecek olan function.php dosyanıza yapıştırın.

 /** * Add custom styles to the mce formats dropdown * * @url https://codex.wordpress.org/TinyMCE_Custom_Styles * */ function myprefix_add_format_styles( $init_array ) { $style_formats = array( // Each array child is a format with it's own settings - add as many as you want array( 'title' => __( 'Theme Button', 'text-domain' ), // Title for dropdown 'selector' => 'a', // Element to target in editor 'classes' => 'theme-button' // Class name used for CSS ), array( 'title' => __( 'Highlight', 'text-domain' ), // Title for dropdown 'inline' => 'span', // Wrap a span around the selected content 'classes' => 'text-highlight' // Class name used for CSS ), ); $init_array['style_formats'] = json_encode( $style_formats ); return $init_array; } add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );

Başlıkları açılır menünüzde farklı adlar gösterecek şekilde değiştirebilir, diziden öğe ekleyebilir/kaldırabilirsiniz, vb. Kendi özel biçim stillerinizi ortaya çıkarmak için bu koddaki hemen hemen her şeyi değiştirebilirsiniz. kabul edilen parametrelerin ve dönüş değerlerinin daha ayrıntılı açıklaması.

Artık yeni stilleriniz olduğuna göre, düzenleyicinizdeki içeriği vurgulayabilir ve stilleri uygulayabilirsiniz. Dikkat edin, “Tema Düğmesi” formatının nasıl bir seçici parametresi var? Bu, stilin yalnızca belirli seçiciye uygulanabileceği anlamına gelir (bu durumda "a" veya "bağlantı" etiketi). "Vurgula" eklediğimiz ikinci biçim, bir seçici parametreye sahip değil, bunun yerine, stili düzenleyicinizde vurguladığınız herhangi bir metne uygulamasını ve benzersiz sınıf adınızla bir yayılma alanına sarmasını söyleyen bir "satır içi" parametreye sahip. Kullanıcıların düzenleyicideki herhangi bir madde işaretine bir kontrol listesi görünümünü kolayca uygulayabilmeleri için biçimleri nasıl kullandığımıza dair Total WordPress temamızdan bir örnek görebilirsiniz.

Artık özel biçimlerinizi kullanabilirsiniz, ancak sitenize stil vermek için bazı özel CSS eklemedikçe bunlar farklı görünmeyecektir. Temanızın (kendi temanızı oluşturuyorsanız) veya alt temanızın stil sayfasını bulmalı ve aşağıdaki CSS kodunu dosyaya yapıştırmalısınız.

 .theme-button { display: inline-block; padding: 10 15px; color: #fff; background: #1796c6; text-decoration: none; } .theme-button:hover { text-decoration: none; opacity: 0.8; } .text-highlight { background: #FFFF00; }

Şimdi, bu, ön uç için yeni biçimlerinize stil katacak, böylece uygulandığında bunları canlı olarak görebilirsiniz. Yay! Ancak, stillerinizi uygulanırken gerçek düzenleyicide de görmek güzel olmaz mıydı? Bunu yapmak için WordPress'teki "düzenleyici stil sayfası" işlevini kullanmanız gerekecektir. Kendi temanızı oluşturuyorsanız, temanızda "editor-style.css" adında yeni bir css dosyası oluşturmak isteyeceksiniz (istediğiniz gibi adlandırabilirsiniz, sadece aşağıdaki pasajı buna göre düzenlediğinizden emin olun) özel CSS ile biçimleriniz için eklendi ve ardından arka uca yüklemek için aşağıdaki işlevi ekleyin.

 function myprefix_theme_add_editor_styles() { add_editor_style( 'editor-style.css' ); } add_action( 'init', 'myprefix_theme_add_editor_styles' );

Başka birinin temasıyla çalışıyorsanız, bunu alt temanıza eklemeniz gerekir, ana temanızla çakışmaması için benzersiz bir ad verdiğinizden veya ana temanızın zaten bir CSS dosyası olduğundan emin olun. editör onu gerçekten kopyalayabilir ve alt temanıza yapıştırabilirsiniz (yukarıdaki PHP kodunu eklemeden), ardından yeni CSS'nizi ekleyin çünkü WordPress ana temanın düzenleyici CSS dosyasını yüklemeden önce alt temayı kontrol eder ve bulursa bulur bunun yerine alt temadan yükleyin.

Güzel Bir Eklentiyle WordPress Görsel Düzenleyicisine Özel Stiller Ekleyin

Kodlarla uğraşacak vaktiniz yoksa veya kendi başınıza çözmeyi anlayamıyorsanız, size iyi bir haberimiz var. Kodla uğraşmak zorunda kalmadan yukarıda yaptığımız şeyi tam olarak tamamlamanıza izin veren bir eklenti var.

TinyMCE Custom Styles eklentisini arayın, kurun ve etkinleştirin ve WordPress sitenizde etkinleştirin.

WordPress kontrol panelinizin sol tarafında Ayarlar > TinyMCE prof.styles'a gidin. Eklenti için ayarlarınızı değiştireceğiniz yer burasıdır.

Eklenti, stil sayfalarınızın nerede olduğunu veya nereye yerleştirmek istediğinizi seçmenize olanak tanır. Yeni bir özel dizin oluşturmanız önerilir. Üçüncü seçeneği seçin ve dizininize bir ad verin, ardından sonraki adıma geçmeden önce Ayarları Kaydet seçeneğini tıklatmak için sayfayı aşağı kaydırın.

Ayarları kaydettikten sonra, Yeni Stil Ekle düğmesini seçmek için aşağı kaydırın.

Burası, özel stillerinizin nasıl görünmesini istediğinizi özelleştirdiğiniz yerdir. Temelde sizin için CSS kodunu oluşturan basit bir web tabanlı düzenleyicidir. Açılır menüde görünmesini istediğiniz şey için bir Başlık yazın. Seçici, satır içi veya blok türü isteyip istemediğinizi seçin. CSS sınıflarını ve stillerini doldurmak için yukarıdaki ekran görüntüsünü kullanmaktan çekinmeyin veya açılır menüyü kullanmayı planladığınız şeye bağlı olarak kendinizinkini oluşturun. Bittiğinde, sayfanın altındaki Ayarları Kaydet'e tıklayın.

Şimdi yeni özel stilin düzenleyicinizde nasıl göründüğünü görmenin zamanı geldi. Yeni bir gönderi veya sayfa açın ve Görsel düzenleyicinin sol tarafındaki Biçimler açılır menüsünü bulun. İkinci satırda görünüyor. Açılır menüyü tıkladığınızda, az önce oluşturduğunuz yeni stili ortaya çıkaracaktır.

Düzenleyicinizde ortaya çıktığını görmek için Büyük Mavi Düğme seçeneğine veya oluşturduğunuz her şeye tıklayın. Kullanmak için biçimlendirmek istediğiniz metni vurgulayın, ardından seçeneğinizi tıklayın ve işte!

Çözüm

Şimdilik bu kadar! Bu konuya ayrılmış WordPress kodeksi sayfasına göz atarak yeni stillerin nasıl kullanılacağı hakkında her zaman daha fazla bilgi edinebilirsiniz.

WordPress görsel düzenleyicisine özel stillerin nasıl ekleneceği hakkında herhangi bir sorunuz varsa yorumlar bölümünde bize bildirin. Ve sitenizin biraz daha güzel görünmesi için oluşturduğunuz sıra dışı stilleri paylaşmaktan çekinmeyin!