Bir WordPress Editor’un web sitenize benzemesini nasıl sağlanır
WordPress, tam bir uygulama çerçevesi ile giderek daha fazla tehdit ediliyor olsa da, basit gönderi editörleri zamanlarının çoğunu harcayan bir arayüz alanı olmaya devam ediyor. Bu, son birkaç yılda önemli ölçüde artan arka ucun bir parçası – WordPress 3.9’daki Tinymce’nin 4.0 sürümüne en son transfer, spot ışığında – ancak hala iyileştirme için çok fazla alan var. Editörleri olan kullanıcıların sahip olduğu en yaygın sorunlardan biri, içeriğin nasıl görünür olacağını görmek için düzenleme ve önizleme modları arasında sürekli geçiş yapma ihtiyacıdır.
Bu makalede, doğru sorunun üstesinden geleceğiz ve WordPress metin düzenleyicisinin ön uç tasarımınız gibi görünmesi ve işlev görmesi için nasıl ayarlanacağını bozacağız. Neden editörü ayarlamak istiyorum? İlk taslak gönderiyi veya sayfayı yapmakla meşgul olduğunuzda, metnin son görünümü ve hissi zihninizdeki son şeydir. Önemli olan zihninizi azaltmak ve – Steven Pressfield’ın çok zarif bir şekilde söylediği gibi – tuvali kapsamaktır. Ancak, ciddi bir düzenleme ve revizyon işine döndüğünüzde, içeriğinizin bağlamda olması giderek daha önemli hale gelir. Genellikle, bu kendini konjenital önizleme düğmesine ağır bir bağımlılık olarak gösterir.
Açıklığa kavuşturalım – içsel olarak önizleme düğmesinde yanlış bir şey yok. Bu, parmaklarınızın ucunda olması için harika bir işlevdir. Bir makalede yalnızca bir veya iki satırı güncelliyor gibi görünüyorsanız, bu, yayın bastırmadan önce değişikliklerinizi kontrol etmenin iyi bir yoludur. İncelemeye göndermeden önce bir makaleye kapsamlı bir düzeltme yapmanız gerekiyorsa, bu da yararlıdır. İdealden çok uzak olduğu yer, günlük bir parça ve ana taslağı derlemek için cesaretlendirilmiştir. Aslında, potansiyel uzun mesafeli bir bağlantı ile uzun bir bölüm üzerinde çalışırken, iki önemli nedenden dolayı hızla büyük bir sorun haline gelebilir: Bağlam Değişikliği: Yazma, arsaya girmekle ilgilidir. İçinde bulunduktan sonra orada kalmak istiyorsun. Tarayıcı penceresi arasında sürekli geçiş yapmalı ve farklı görsel bağlamlar odak ve akış için katildir.
Zaman: Editör ve önizleme penceresi arasındaki tüm geziler bir hafta çalışma sırasında arttı. Kendini test et. Bir dahaki sefere bir iş üzerinde çalıştığınızda, sekmeleri ne sıklıkla taşıyacağınızı unutmayın. Gerçek içeriği parlatmak için harcanabilecek zamanı gelmişti.
Düzenleme ekranını ön uç ekranınıza uyacak şekilde ayarlayarak, çalışma önizlemenizi sürekli olarak görme ihtiyacını ortadan kaldırırsınız. Bu, editörü orijinal Wysiwyg aracından çok daha fazlasını yapar.
Örneğin, temanız tarafından kullanılan çizgilerin ve yazı tiplerinin yüksekliği göz önüne alındığında, bazı paragrafların biraz fazla uzun sürdüğünden endişe edebilirsiniz (burada WPMU Dev’de görüldüğü gibi). Gönderi düzenleyicinizi ayarlayın ve nihai sonuç yazdığınızda önünüzdeki ekranda. Arka uçları ayarlamak için ekstra zaman ayırmak, gösterilmesi gereken birkaç ana avantaja sahiptir: Bu, teknik olmayan ekip üyelerinin hemen bilecekleri bağlamda içerik girmesini çok daha kolay hale getirir.
WordPress’e ilk kez gelebilecek harici istemciler için bir site hazırladığınızda eklemek için iyi bir son dokunuş yapar.
Ön uç editör ne olacak? Bazılarınız bu noktada sorabilir: Ön uç içerik düzenleyicisi ne olacak? Tasarlandıkları bu değil mi? Ve bir sonraki WordPress sürümünde temel bir özellik olarak yerleşik ön uç düzenleyici eklentisi hakkında bir konuşma yok mu?
İyi soru. Birer teker alalım. Ön uç editörler şık özelliklerdir ve Squarespace ve Weebly gibi WordPress rakipleri tarafından giderek daha fazla yönlendirilmektedir. Bu editörün en büyük vaadi, teknik olmayan kullanıcıların değişiklik yapmak için doğrudan web sitesi içeriğiyle etkileşime girmelerine izin vermeleridir. Yalnızca mevcut içerik bölümünde küçük değişiklikler yapmak istiyorsanız ve genellikle daha az deneyimli yönetici veya site sahibi tarafından doğru hazırlandıklarını varsayarak kullanımı kolaysa mükemmel olabilirler. Dezavantajı, hem kendisini düzenleme hem de meta kutular gibi gelişmiş gönderi özelliklerine erişim eksikliği açısından, genellikle çözüm tarafından sunulan sınırlı işlevsellik yelpazesidir. Ayrıca sizin ve diğer arka uç yöneticilerinde sunulan işlevler arasında bariyeri koydular. O zaman dikkate alınması gereken bir editoryal ve kontrol iş akışı sorunu var. İnsanların oraya girmesini ve hemen birçok şeyi değiştirmesini istiyorsanız, ön uç editörler çok iyidir, ancak bu her zaman olmaz. Ortaya çıkan son nokta karmaşıklık sorunudur. Sağlam bir ön uç düzenleyici geliştirmek önemsiz bir görev değildir. Oradaki en iyi eklentilerin çoğu ticari tekliflerdir, yani ayarlarınıza diğer ücretli bağımlılık seviyesini eklersiniz ve temanızın diğer kısımlarıyla gelecekteki uyumluluk konusunda endişelenmeniz gerekir. Kısacası, bu karmaşık bir sorundur.
Birçoğumuz, WordPress Core’a ön uç düzenleyici eklentisinin dahil edilmesiyle karmaşıklığın bir kısmının azaltılacağını umuyoruz. Ne yazık ki, ilk heyecandan sonra, bu umut nihayet kaybolmaya mahkum edildi.
WordPress ön uç editör eklentisi. 2013’ün sonundan Kasım 2014’ün sonuna kadar, eklenti, bir özellik eklentisi olarak geliştirilmesinde aktif hale geliyor, yani nihayet çekirdeğe çıkması planlanıyor. Ne yazık ki, bu proje o zamandan beri durdu ve aktif olmayan özellikler eklentileri listesine aktarıldı. Ne yazık ki, yakın gelecekte çekirdekte görünüşünü görmeyeceğimizi söylemek güvenlidir. Ön uç düzenleyiciyi denemekle ilgileniyorsanız, ön uç düzenleyiciyi (ücretsiz) veya görsel besteci (ücretsiz) denemeyi öneririz. ödenmiş), ancak yukarıda bahsettiğimiz potansiyel komplikasyonların farkında olun. Bu makalede alacağımız yaklaşım, bu engelden kaçınmak ve mevcut sorunlara inmek için size basit bir yol sunuyor: İçeriğinizi ilginç hale getirin. Bunu gerçekleştirmeye başlayalım. Her bir sitenin aşamasının doğal olarak hazırlanması, farklı içeriğe ve çok farklı olma potansiyeline sahip temaların uygulanmasına sahip olacaktır. Bu makalenin amacı için, size kendi ayarlarınızın özel gereksinimlerine uygulanacak şekilde yayınlanacağınız temel bilgileri güçlü bir şekilde anlamak için her şeyi açıklayacağız.
Yerel WordPress ayarlarını kullanacağız ve noktalarımızı göstermek için WordPress Tema Test Veri sürümüyle başlayacağız. Kendi ortamınızı ayarlamaya başlarsanız, bu yaklaşımı almak bazı somut avantajlar sunar:
Yerel olarak gelişerek, kullanıcılarınızı veya iş arkadaşlarınızı rahatsız etme riski olmadan deney yapmakta özgürsünüz.
Bu kombinasyon bize doğrudan kutunun dışında oynatılacak işaretleme ve biçimlendirme ve tesviye görüntüleri gibi iyi organize edilmiş bir sayfa verir.
İşaretleme Sayfası ve WP Test Formatan.
Takip ederseniz, bu yaklaşımı çoğaltabilir veya mevcut site içeriğinizle yerel kurulumlarda kendi temanızı etkinleştirebilirsiniz. İlk aşama olarak birincisini öneriyoruz. WP testi tarafından sağlanan içerik, büyük değişiklikler yapmaya başlamadan önce mevcut tema stilinizin ne kadar eksiksiz olduğunu kontrol etmenin en iyi yoludur. Görülmesi gereken makul bir içerik örneğimizden sonra branda arkasında neler olduğunu anlamak, editörün kendisini ayarlamadan önce WordPress’te çadırın altında ne olduğunu anlamak için zaman ayıralım. Yukarıda bahsettiğimiz gibi, WordPress standart olarak açık kaynaklı bir Tinymce editörü ile gönderildi. Bu, tema kazıklarının alt kısmı söylenebilir. Tinymce, içeriğin içinde nasıl görüntülendiğini kontrol eden kendi stil sayfasına sahiptir. Varsayılan olarak, bu dış dünyadan çok habersizdir. Tinymce geliştiricisi, içerik_css adlı bir kanca aracılığıyla ek stil sayfası için yüklenmesi için yer sağlamak mantıklıdır.
Kendi adına, WordPress geliştiricileri bunu add_yitor_style adlı orijinal işlevine saracak kadar iyidir. Bu, 3.0.0 sürümünden beri WordPress’in çekirdeğine dahil edilmiştir. Çevrimiçi belgelere danışırsanız, bu işlevin WP-Incomudes/tham.php’de saklandığını göreceksiniz. Bu işlevi sadece birkaç dakika içinde doğrudan çağırmanın yollarını arayacağız. Varsayılan olarak, WordPress, bu işlevi, editör içeriğini organize etmek için kullanılabilen Editor-style.css adlı temanın kök dizininde CSS dosyalarının varlığını kontrol etmek için kullanır. Yani, mevcut temayı ayarlamak istiyorsanız, kendinize sormanız gereken ilk sorulardan biri editör style.css dosyasının zaten temanızda olup olmadığıdır? Örneğin yirmi on beş temayı alırsak, böyle bir dosya olduğunu görebiliriz. İşaretleme sayfasının önizlemesinin ve yöneticisinin görüntülenmesi ile biçimlendirmemiz arasında hızlı bir şekilde geçiş yapmak, çekirdek stilin çevre arasında sadakatle çoğaltıldığını gösterir.
Bir adım ileriye atalım ve editör penceresinde gördüğümüz stilin Editor-style.css tarafından kontrol edilmesi gerektiğini tekrar kontrol edelim. Sorun olduğunu doğrulamak için sadece web müfettişine kısa bir yolculuk yapmamız gerekiyor.
Varsayılan olarak, editör editör style.css arıyor Umarım temel senaryo bu aşamada nispeten açıktır. Özet için:
WordPress editörü Tinymce tarafından desteklenir.
Tinymce, varsayılan stilin değiştirilmesini sağlar.
WordPress, varsayılan kuvveti değiştirmek için hangi CSS dosyalarının kullanılacağını belirlemek için Add_yitor_Style adlı bir işlev kullanır.Varsayılan olarak, WordPress aktif temanın kökeninde düzenleyici-style.css adlı bir dosya arıyor. Bir sonraki soru, kendi değişikliğinizi yapmak için nasıl ele alınacağınızdır. Yukarıda önerildiği gibi kendi değişikliğinizi yapın, ilk tamamlanması, temanızın kök klasöründe varsayılan bir stil sayfası düzenleyicisi dosyası olup olmadığı sorusudur. Eğer varsa, aynı konumda bir kopya yapmalı ve custom-editor-style.css adını vermelisiniz. Bu, denemeye başlamak için temiz bir yer ve başlangıç ayarlarına geri dönmenin kolay bir yolunu sunar. Yerinde bir dosya yoksa, custom-editor-style.css adlı yeni bir dosya oluşturun ve temanızın kök klasörüne yerleştirin. Özel CSS’nizi bağlayarak bir sonraki adımımız WordPress’e varsayılan yerine yeni dosyamızı bulmasını söylemektir. Bunu, yeni stil sayfamızı kullanmak için add_editor_style ve add_editor_style adresini çağırmak için function.php üzerine geçersiz kılma ekleyerek yapacağız. Fonksiyonunuzu açın. Midoriberlin’in çekirdeğini yükleme/400A2C58D26EC1033817
Şimdi editörümüzün gerçekten yeni bir stil sayfası kullanıp kullanmadığını kontrol edelim. Bir kez daha, müfettişe kısa bir yolculuk emin olmak için gereken her şey. Aşağıda görebileceğiniz gibi, şimdi yeni dosyamızla bağlantı kurmayı başardık.
Editor-style.css’in özel sürümü yükleniyor.
Şimdi arka uçta alındığından emin olmak için CSS dosyasında bazı hızlı değişiklikler yapalım. Her şeyden önce, custom-editor-style.css düzenleyerek başlığı yeşil hale getireceğim.
Başlık yeşile döner. Başlık, aşağıdaki CSS’yi ayarlayarak değiştirilir:
Midoriberlin/C3AE04D4A56A00D1A650’nin çekirdeğini içerir ve şimdi görüntümüze pürüzsüz bir sınır ekleyelim. #TinyMce, eğer merak ederseniz, kimlik Tinymce düzenleyicisindeki etiketine otomatik olarak belirlenir. Görüntü hizalama sayfası aracılığıyla bu değişikliğin sonuçlarını hemen göreceğiz.
Görüntü sınırının rengini editörde pembe olarak değiştirin. Yakın gelecekte herhangi bir CSS penceresine yerleştirmeyeceğiz, ancak bu iki basit örnekten, şimdi Editör penceresinin içeriği üzerinde tam kontrole sahip olduğumuz açıktır. Pembe sınır, tesadüf, aşağıdaki CSS ile yapılmıştır:
Midoriberlin/401D8AD946526594732’nin çekirdeğini içerir
Şu andan itibaren, bu, mevcut CSS’ye göz atmak ve editörünüzü kullanım durumunuz için en makul bir şekilde eşleştirdiğinden emin olmak için bir sorudur. Mevcut ön uç stil sayfanızı temel olarak kullanarak, burada yaptığımız gibi çalışmak için mevcut bir stil sayfası düzenleyiciniz yoksa, stil sayfası ön ucunu temel olarak kullanacak şekilde içe aktarabilirsiniz. Nasıl yapılacağına bakalım. Mevcut ön uç stil sayfasını içe aktarmak için, Custom-editor-style.css içeriğini aşağıdakilerle değiştirmeniz yeterlidir: Midoriberlin/C513EB54BECA3727F6FF’nin çekirdeğinin yüklenmesi
Bunu yaptığınızda işler ilk başta biraz hasarlı görünebilir, ancak sorunlardan ve çalışmak için güçlü temel bilgilerden iyi bir ayrımınız olur. Atılması gereken bir sonraki adımın ilerlemesi, ön uç ekranı editörle eşleştirme açısından ne kadar adım atmak istediğinize bağlı olacaktır. CSS stratejinizi eşlemek için bir başlangıç noktası olarak yirmi on beşe dahil olan Stylessheet Editor-Style.css’ye çok dikkat etmenizi öneririz. Ayrıca, gönderi türüne dayalı özel stil eklemek gibi daha sofistike özelliklerle bu yaklaşımı nasıl daha da ileriye taşıyacağınıza dair talimatlar için WordPress belgelerine danışın. Bitirmeden önce, keşfetmek isteyebileceğiniz başka Tinymce ayarlamalarından da bahsetmeliyiz: Tinymce’deki düğmenin görüntüsünü kontrol edin: Raelene Wilson’dan iyi inceleme. Tinymce Advanced: Düğme olarak özel bir stil eklemek için eklenti.
Sonuçlar WordPress’teki Editör penceresinin görünümünün kontrolünü ele geçirir. Bir yazar olarak zamanınızı kazandıracak ve temanıza profesyonel bir katman ekleyecektir. Kuvvetin nasıl uygulandığını anlayarak, durum için çok fazla veya birkaç talebi ayarlayacak bir konumdasınız. Adımları özetleyelim:
Temanızın Styles sayfası editör-style.css ile gönderilip gönderilmediğini kontrol edin. Orada kendi özel stil sayfanızı ve doğrudan WordPress’inizi yapın.
Mevcut Editör Tarzı Sayfasını ana tema stilinizin temeli veya içe aktarın.
Stil alın.
Bu makalenin çalışma ortamınızı kontrol etmenize yardımcı olmasını umuyoruz.
Görüntü sınırının rengini editörde pembe olarak değiştirin.
Paylaşacak ilgili bir ipucunuz veya hileniz varsa, aşağıdaki yorumlarda bize anlatın! Etiketler:
Yönetici
CSS
WordPress Editor