WYSIWYG WordPress Editor nasıl ayarlanır
WordPress Editor, içerik oluşturma için ana çalışma merkezidir. Siteniz aktif ve çalıştıktan sonra, zamanınızın yaklaşık% 80’ini orada geçirebilirsiniz. Eğer düşünürseniz, oldukça etkileyici. Web sitenizin bir kısmı, çalışmanızın% 80’ini ele almanızı sağlıyor mu? Güçlü bir araç gibi geliyor. WordPress editörü önemsiz olduğunu düşündüğümüz bir şeydir. Görünüşe göre, davranışı, biçimlendirme seçeneği bile çok sezgiseldir, böylece yeni başlayanlar bile buna alışır. Ancak bu aşinalık oldukça yapay. Tıpkı diğer platformlar gibi, WYSIWYG WordPress düzenleyicisini ayarlayabilirsiniz. Aslında, neredeyse tüm yönleri kontrol edebilirsiniz. Hemen hemen her şey değiştirilebilir ve istediğiniz gibi görünmek ve davranmak için yapılabilir.
Nasıl? Şey, oraya geldim. Neden WordPress Editor’u oynamak istiyorsunuz? Editör harika bir araç olmasına rağmen (onunla çalışmayı seviyorum) geliştirilebilecek birkaç alan var. Özellikle, bu makalede aşağıdaki sorunları tartışmak istiyorum:
Tema tasarımı ile editördeki içeriğin içeriğini uyumlu hale getirin
Düzenleyicide ek düğmeleri ve biçimlendirme seçeneklerini etkinleştirin
HTML ve CSS’yi manuel olarak eklemeye gerek kalmadan özel bir stil uygulamak
İçeriğinizin arkadaki görüntülenmesinin, sitenizin önündeki görünümünden çok farklı olduğunun çok farkında olabilirsiniz.
Wysiwyg, ne elde edeceğinizi görmek için “ne gördüğünüz şeydir” kısaltması olsa da, genellikle birincil düğmeye basmanız gerekir. Uzun form içeriği yazarken, bu çok fazla alternatif üretebilir. O zaman, dünyada yayınlanmadan önce içeriğinizi cilalamak için daha iyi harcanabilir. Bu sorunun üstesinden gelmek için, editörde ön uçtaki ile aynı stil kullanılarak birkaç tema uygulanmaya başladı. Yirmi beş bir örnektir: temiz, değil mi? Endişelenmeyin, aynı şeyi daha fazla nasıl yapacağınızı öğreneceksiniz.
Kısacası, bu makalenin amacı WYSIWYG WordPress editörünü çalışma ortamınız üzerinde tam kontrol sahibi olmanızı sağlayacak şekilde ayarlamaktır. Farkında değilseniz, içeriğinizin önünüze benzemesini sağlayın, WordPress Editor olarak bildiğiniz şey aslında Tinymce Editor adlı bağımsız bir yazılımın parçasıdır. Tinymce, JavaScript ve HTML ile oluşturulan açık kaynaklı, platformdan bağımsız, web tabanlı editördür. Kendisi çok ayarlanmıştır: görünüm, seçenek, biçimlendirme ve diğer birçok şey değiştirilebilir. WordPress’te editörün kendi tarzı sayfası var. İyi haber şu ki, istediğimiz gibi görünmesini sağlayabileceğimiz anlamına gelir – CSS ile nasıl başa çıkacağınızı biliyorsanız, WordPress’in Tinymce için ek stil sayfaları çağırmanıza izin veren Add_yitor_Style adlı bir işlevi vardır. Codex WordPress’te daha fazla bilgi edinebilirsiniz. Bunu avantajlarımız için kullanacağız ve editörde içeriği istediğimiz şekilde düzenleyeceğiz. 1. WordPress Editor için özel bir stil sayfası oluşturun İlk adım olarak, böyle bir dosya olup olmadığını kontrol edeceğiz. Daha önce de belirtildiği gibi, editörün görünümünü temanın ön ucu ile hizalamaya başladı. Hiçbir şey belirlenmezse, add_itor_style varsayılan olarak editor-style.css adlı bir dosyayı kontrol eder. Yirmi on beşte, bu dosyayı WP-Concent/Themes/Yirmi Fifteen/CSS altında bulabilirsiniz.
Tabii ki, temanız sağladıysa, dosyayı kopyalayıp kendi ayarlamanız için bir temel olarak kullanabilirsiniz. Ancak, ödül editörleri için herhangi bir stil sayfanız olmadığını varsayacağız. Bu durumda sadece kendiniz yapmanız gerekir. Bu, benim-editor-styles.css gibi adlandırılan yeni bir metin dosyası oluşturmak kadar kolaydır, tutun ve daha sonra tema klasörünüze yükleyin. Ek not: WordPress çocuklarının temasında doğal olarak bu tür bir ayarlamayı yapmalısınız. Bu şekilde tema güncellemesi için sıkı çalışmayı kaybetmeyeceksiniz. Aslında, ana temanız WordPress Editor için kendi stil sayfasıyla donatılmışsa, çocuğunuzun tema klasöründe aynı konumda aynı ada sahip bir stil sayfası yerleştirerek gerçekleşirsiniz. Dosyayı function.php olarak arayın. WordPress’in gerçekten yeni stil sayfamızı kullandığından emin olmalıyız. Bu nedenle, functions.php dosyasına aşağıdaki kodu ekleyeceğiz (Child): [php] Custom_edyles function () {add_editor_style (‘editor-saya-styles.css’); } Add_action (‘admin_init’, ‘custom_ditor_styles’); [/php] hepsi bitti mi? İyi. Şimdi özelleştirmemizi alma zamanı. 3. Aşağıdaki özel düzenleyici stilini uygulayın Bir Tinymce editörü oluşturmak için yeni oluşturduğunuz dosyayı web siteniz gibi daha görünür olarak nasıl kullanabileceğinize dair bazı örnekleri tartışacağız.
3.1. Düzenleyiciyi içerik alanınızla aynı genişliğe ayarlayın Neden WordPress düzenleyicisindeki içerik alanını ön ucunuzla aynı genişliğe sahip? Yine, çalışma alanınızı nihai sonucunuza yaklaştırmak için. Kendinizi belirli bir genişlikle sınırlandırarak, bir paragraf çok uzun olduğunda veya metin bloğunun çekilemeyecek kadar büyük olduğunda, kırık çizginin tam olarak nerede olduğunu görebilirsiniz. Artı, çok kolay. İçerik alanını hedeflemenin iki yolu vardır: gövde etiketleri (yirmi on beşte olduğu gibi) veya kimlik üzerinden #TinyMce. Bu örnekte her ikisini de yapacağız. İçerik alanınızı 640 piksel genişliğe sahip olduğunu düşünürsek, editör tarzı sayfanızdaki uygun CSS şöyle görünecektir: [CSS] gövde {Maksimum genişlik: 640 piksel; } [/css] Daha önce de belirtildiği gibi, alternatif olarak kullanabilirsiniz: [css]#small {maksimum genişlik: 640 piksel; } [/Css] her ikisi de aynı sonuçları üretmelidir. Başarılı olursa, içeriğiniz şimdi editörde ve sitenizin ön ucunda aynı yerde kırılacaktır. Bunun sadece editörün ekranınıza uzanması durumunda çalıştığını bilin. Çok geniş bir içerik alanınız varsa ve bu tekniği kullanmak istiyorsanız, ekran seçeneğinde bir sütun ekranına geçmek isteyebilirsiniz.
3.2. H2 başlığının başlığının altını çiz, değil mi? Endişelenme, bir sonraki de değil. Bu örnek için, H2 unvanınızın altını çizmeye karar verdiğinizi varsayacağız.
İyi bir fikir mi yoksa başka bir soru mu, ama bize uygulanması gereken bir şey verecektir. Hangi CSS’yi değiştirmemiz gerektiğini öğrenmenin en kolay yollarından biri, WordPress düzenleyicisine bir şeyler yazmak, H2 olarak biçimlendirmek, daha sonra bir geliştirici veya firebug ile kontrol etmektir. Bu, yakında başlık etiketlerimizi değiştirebileceğimizi gösterecektir. Kod ile çok basit bir şekilde aşağıdakiler: [CSS] H2 {Metin dekorasyonu: alt çizgisi; } [/css] Operatöre biraz daha spesifik olmak istiyorsanız, bununla aynı şeyi de başarabilirsiniz: [CSS]#Small H2 {Metin Dekorasyonu: Underline; } [/css] Kolay, değil mi? Sana söylemiştim. 3.3. Ön uç stil sayfasını temel olarak kullanın, WordPress düzenleyicisindeki stili değiştirmek için yeterince basit olsa da, her şeyi manuel olarak uygulamaya çalışırken yakında rahatsız hissedeceksiniz. İyi haber şu ki, bunu yapmanıza gerek yok. Daha iyi bir yol var. @Import kurallarının yardımıyla, ön uç stil sayfanızı içe aktarırsınız. Bu şekilde ön sayfanızın tüm biçimlendirmesi düzenleyicide de kullanılacaktır. Yirmi on beş için bir çocuk teması ile şu şekilde çalışır: [CSS] @Import URL (‘../ twentyfifteen/style.css’); [/css] Tabii ki, tüm stiller editörler için yararlı değildir. Sonuç olarak, başlangıçta oldukça çekici görünmeyebilir:
Bu nedenle, daha kullanıcı dostu olmak için bazı ayarlamalar yapmalısınız. Örneğin, my-editor-styles.css’ye aşağıdaki satırı eklerseniz: [css] gövde {arka plan rengi: #fff; Marj: 20px 40px; Maksimum genişlik: 640 piksel; } [/css] eskisinden çok daha iyi görünüyor, katılıyorum?
Veya, tüm stil sayfalarınızı içe aktarmak yerine, yirmi on beşten bir düzenleyici sayfası bir plan olarak da kullanabilirsiniz. Tüm önemli stilleri yakaladığınızdan emin olmak daha kolaydır. WordPress düzenleyicisine ek düğmeler ekleyin Daha önce de belirtildiği gibi, Tinymce bağımsız bir üründür. WordPress geliştiricisi, mevcut tüm biçimlendirme seçenekleri de dahil olmak üzere mantıklı olduğunu düşündükleri bir şekilde düzenledi. Ancak, bilmediğiniz şey, aslında her zamankinden daha fazla düğme ve biçimlendirme seçenekleri olan Tinymce düzenleyicisinin. Bana inanmıyor musun? Aşağıda liste. Aslında, WordPress 3.9’da WordPress Editor’da bulunan bazı düğmeler kayboldu. Şu anda, başlık editörü şöyle görünüyor: Peki ya ek düğmeyi girmek istersek? Bundan daha kolay bir şey yok. Hemen size önceki iki düğmeyi editörümün üst kısmındaki üçüncü satıra nasıl ekleyeceğinizi göstereceğim. [Php] add_ditor_buttons işlevi ($ buttons) {$ buttons [] = ‘Seç Koruma’; $ buttons [] = ‘saat’; $ Düğme döndür; } add_filter (‘MCE_BUTTONS_3’, ‘Add_Ditor_Buttons’); [/PHP] Yukarıdaki kodu Functions.php’e ekledikten sonra, editörünüz şimdi şöyle görünecektir: MCE_Buttons_3’ün üçüncü sıra için bir filtre olduğunu bilin. İkinci sıraya bir şey eklemek için MCE_BUTTONS_2 kullanmanız gerekir. Özel stilinizi yapmak sadece WordPress düzenleyicisine daha fazla düğme ekleyemez, aynı zamanda özel içerikle de doldurabilir. Aslında oraya “Styleselect” menüsünü getirmemin nedeni bu. Bu, kendi stil seçeneğinizi eklemenize olanak tanır, bu da manuel olarak yazmak zorunda kalmak yerine, açılır listeden içeriğinize özel HTML ve CSS eklemenize olanak tanır. Bu makalenin sonu, bunun nasıl başarılacağına adanmış olacaktır. 1. Stil için menü seçeneklerini etkinleştir hah, değil mi? Evet yaptık. Ancak sadece bir düğmeyi geri yüklemeyi planlıyorsanız, bunu yapmanın biraz daha zarif bir yolu vardır. [Php] add_style_sect_button function ($ buttons) {array_unshift ($ buttons, ‘SELECT style’); $ Düğme döndür; } add_filter (‘mce_buttons_2’, ‘add_style_select_button’); [/php] Aşağıda görebileceğiniz gibi, bu ikinci sıranın başında düğmeler ekler. Çok daha iyi görünüyor, değil mi? 2. Özel bir stil kaydetme yerinde bir düğme ile kaydedin, birçok özel stil kaydetme zamanı. Özellikle yapmak istediğim, önemli metin bölümünü ve yeşil düğmeyi vurgulamak için bir vurgulayıcı eklemek. Bu stili eklemek için, buraya işlevime koydum.php: [php] // wordPress işlev düzenleyicisine özel bir stil ekleyin my_mce_before_init_insert_formats ($ insit_array) {$ style_format = array (// Bu setin özel bir stili (‘başlık’ => ‘torngot’, ‘satır’ => ‘aralık’, ‘sınıf’ => ‘tatma’, ‘sarma’ => true,), set (‘başlık’ => ‘yeşil düğme’, ‘ blok ‘=>’ aralık ‘,’ sınıf ‘=>’ yeşil düğme ‘,’ sarma ‘=> doğru,),); // JSON kodlu diziyi ‘style_formats’ $ init_array [‘style_formats’] = json_encode ($ style_formats) içine girin; Dönüş $ init_array; } // ‘tiny_mce_before_init’ add_filter (‘tiny_mce_before_init’, ‘my_mce_before_init_insert_formats’); [/php] ‘e geri çağrı ekleyin, şimdi editörüme gittiğimde, her ikisi de format altında göreceğim. Kodun kısa bir açıklaması: Başlık argümanı, editörde göreceğiniz başlığı tanımlar, blok ve satırda blok veya sekans öğesinin kullanılıp kullanılmadığını ve ne tür bir öğenin sarılacağını belirler, sınıf, CSS sınıfıdır. Yeni öğe ve sarma, formatın zaman olup olmadığını söyler, bu blok öğesi için bir kaptır. Burada daha fazla bilgi. 3. Kullanılabileceğim yeni kuvveti belirleyin. Düzenleyicimdeki herhangi bir metni vurgulayabilir, açılır menüyü kullanarak ve içeriğe ayarlayabilirim. Ancak, şimdiye kadar herhangi bir CSS belirlemediğimiz için etkilemeyecektir. Düzeltme zamanı. Neyse ki, yeni yapılmış CSS sınıfımız bunu oldukça kolaylaştırdı. Style.css temasına aşağıdaki kodu ekleyin. [CSS]. Yeşilleme {arka plan rengi:#00cc00; -Moz-Sınırlı-Radius: 3px; -Webkit-Sınırlı-Radius: 3px; Sınırlar: 3px; Sınır: Yok; Ekran: Hat bloklarında; İmleç: işaretçi; Rulman: 10px 30px; Metin dekorasyonu: yok; }. Green-bombol a {sınır: orada değil; Renk: #ff; } .green-Button A: İmlec {Border: orada değil; Renk: #333; }. Stabilo {arka plan rengi: ## ffff66; } [/css] Şimdi makalemizin önizlemesini görürsek, yeni çalışma tarzını görebiliriz. Yeni stilinizi editörde gösterin, ancak yaptığımızda, sadece özel stilimizi web sitemizde değil, aynı zamanda editörün kendisinde de görmek istiyoruz. Eğer takip ettiyseniz, ihtiyaç duyulan şey sadece benim-editor-styles.css’ye aynı stili eklemektir ve ön sayfanızla aynı görünecektir. İşte burada. İyi bitti! Eklenti WordPress düzenleyicisini ayarlamak için DIY türü değilseniz, WordPress düzenleyicisini herhangi bir dosyaya dokunmadan ayarlamanıza izin veren bir dizi eklenti de vardır. Bazılarını çok hızlı bir şekilde tartışalım. WP Düzenle Bu eklenti size ek düğmeler ve ek editör seçenekleri sunar. Diğer şeylerin yanı sıra, resimler, videolar ve diğer medya eklemenize ve tablolar oluşturmanıza izin verin. Ayrıca WordPress editörüne ifadeler için destek ekledi.
Advanced Tinymce, WordPress düzenleyicisini, düğmeyi istediği gibi ekleme, silme ve sıfırlama seçenekleriyle artırır. Ayrıca tablolar oluşturabilir ve düzenleyebilir, içeriğinizde arama ve değiştirme kullanabilir ve CSS ve HTML’yi düzenleyebilirsiniz.
Özel Editör Visual Eklenti düğmesi Kustom düğmesi size HTML ve CSS stilleri için ek bir seçenek sunar. Ayrıca editöre ek düğmeler ve kendiniz yapma imkanı ekler. Plug-n-edit plug-n-edit, WordPress düzenleyicisini yapıcı sürükle ve bırak sayfasına değiştirdi. Elemanları birbirine kaplayabilir, bir düğme oluşturabilir, Google yazı tipini entegre edebilir, görüntüleri arka plan olarak kullanabilir ve daha fazlasını yapabilirsiniz. Pod – Özel içerik türleri ve özel yayınların alanları ve alanları çok yararlıdır. Bu eklenti sadece bunu yapmanıza yardımcı olmakla kalmaz, aynı zamanda WordPress düzenleyicisinden doğrudan erişim sağlar. WordPress’te ücretsiz yazma modu iyi bir fikirdir, bazı insanlar biçimlendirme seçeneklerinin eksikliğinden şikayet eder. Sadece yazma, huzurlu bir yazma ortamına ek düğmeler ekleyerek düzeltir.
