Nedir bu? WYSIWYG (Ne Görürsen Onu Alırsın)

WYSIWYG, What You See Is What You Get’in kısaltmasıdır. İçeriği gerçek zamanlı olarak oluşturduğunuz/düzenlediğiniz ve çalışırken canlı bir önizleme gördüğünüz araçlar için kullanılır.

Bu editörler, özellikle web siteleri için içerik oluştururken çevrimiçi olarak inanılmaz derecede kullanışlıdır. İster bir blog yazısı yazın, ister bir e-posta hazırlayın veya bir web sayfası tasarlayın, bir WYSIWYG editörü işi daha kolay ve verimli hale getirir.

Neden WYSIWYG Editör Kullanılmalı?

WYSIWYG editörleri içerik oluşturma sürecinizi geliştiren birçok özelliğe sahiptir. WordPress web siteniz olsa da farklı bir içerik yönetim sistemi (CMS) kullansanız da işlevsellik ve görünüm genellikle aynıdır.

Çoğunlukla, hepsinin aşağıdaki özelliklere sahip olduğunu göreceksiniz:

Metin Biçimlendirme: Bu düzenleyiciler, tıpkı bir kelime işlemcide olduğu gibi metninizi kalın, italik, altı çizili ve üstü çizili hale getirmenize olanak tanır. Aslında, bunlara genellikle zengin metin düzenleyicileri denir çünkü içeriği Microsoft Word’de olduğu gibi tanıdık bir şekilde düzenlemenize izin verirler.
Bağlantılar: Araç çubuğundaki bir düğmeye tıklayıp URL’yi yapıştırarak içeriğinize kolayca bağlantı ekleyebilirsiniz. İçeriğinizi oluşturmak için HTML kodu eklemeniz veya düzenlemeniz gerekmez.
Görüntüler: Görüntü eklemek çok kolay. Bunları doğrudan cihazınızdan yükleyebilir veya çevrimiçi bir kaynaktan ekleyebilirsiniz. Birçok WYSIWYG editörü bir görseli doğrudan satır içine yapıştırmanıza bile izin verir.
Tablo Oluşturma: Verileri düzgün bir şekilde sunmanız mı gerekiyor? WYSIWYG editörleri, Google E-Tablolar gibi diğer web uygulamalarıyla uğraşmadan veya özel yerleştirmelere ihtiyaç duymadan içeriğinizde tablolar oluşturmanıza olanak tanır.

Ama hepsi bu kadar değil. WYSIWYG editörleri ayrıca yazım denetimi, kaynak kodu görünümü ve daha fazlası gibi özellikler de sunar. Tüm bu özellikler PHP, CSS veya web tasarımı öğrenme konusunda endişelenmeden kaliteli içerik oluşturmaya odaklanmanızı kolaylaştırır.

WYSIWYG Editörlerinin Ek İşlevselliği

Yukarıdakilere ek olarak, WYSIWYG editörleri içerik oluşturma sürecinizi basitleştirmek ve geliştirmek için tasarlanmış bir dizi özelliğe sahip olma eğilimindedir.

Çoğu WYSIWYG editöründe yerleşik yazım denetimi vardır. Bu yerleşik araç oldukça kullanışlıdır, yanlış yazılan kelimelerin altını otomatik olarak çizerek içeriğinizdeki utanç verici yazım hatalarını önlemenize yardımcı olur.

WYSIWYG’nin bir diğer son derece hayati parçası da HTML kod görünümüdür. Bu, görsel tasarım ve biçimlendirme görünümleri arasında sorunsuz bir şekilde geçiş yapmanızı sağlar.

HTML koduna bakmak, sorun gidermeniz gereken durumlar için mükemmeldir.

Bunlar resimlerle ilgili sorunlar veya kopyala/yapıştır nedeniyle yanlış metin biçimlendirmesi gibi şeyler olabilir.

Birçok WYSIWYG editörünün sağlam bir tasarım araçları setiyle birlikte geldiğinden bahsetmeye gerek bile yok. Örneğin, WordPress için Gutenberg editörü, gözünüzün önünde hayal edebileceğiniz her şeyi oluşturmak için içerik yazmanıza ve şablonları kullanmanıza olanak tanıyan etkileşimli, sürükle ve bırak bir tasarım aracıdır.

Arayüz her zaman kullanıcı dostudur, bu nedenle bir teknoloji uzmanı olmasanız bile, içeriğinizin sadece birkaç tıklama ile profesyonel ve gösterişli görünmesini sağlayabilirsiniz.

WordPress Blok Düzenleyici

Gutenberg Editor 2018’de tanıtıldı ve WordPress ile içerik oluşturmaya yönelik kullanıcı arayüzünü değiştirdi.

Özünde Gutenberg, sitenizin ön ucunda veya arka ucunda kullanabileceğiniz blok tabanlı bir düzenleyicidir.

TinyMCE gibi bir zengin metin editöründe olduğu gibi büyük bir metin alanında yazmak ve tasarlamak yerine, içeriğinizi ayrı bloklar kullanarak oluşturursunuz. TinyMCE, şu anda klasik editör olarak adlandırılan önceki WordPress içerik editörünün temeli olarak kullanılan açık kaynaklı bir WYSIWYG editörüdür.

Bunlar paragraflar ve başlıklardan resimlere, videolara, alıntılara ve hatta tablolar veya özel HTML işaretlemesi gibi daha karmaşık öğelere kadar her şey olabilir.

Her bir Gutenberg bloğu ayrı ayrı özelleştirilebilir ve hareket ettirilebilir, böylece içeriğinizin düzeni ve tasarımı üzerinde benzeri görülmemiş bir kontrol elde edersiniz. Blok düzenleyicinin içinde çalışabileceğiniz bir şablona sahip olmak için Patterns adı verilen önceden hazırlanmış tasarımları bile kullanabilirsiniz.

Blokları gerçek zamanlı olarak hareket ettirebilir ve blog gönderinizin veya açılış sayfanızın daha yayınlamadan önce nasıl görüneceğini tam olarak görebilirsiniz.

Gutenberg web tasarımı için tek WYSIWYG editörü değil. Squarespace gibi WordPress dışı web sitesi kurucuları WYSIWYG düzenleme sunuyor ve SeedProd ve Divi gibi diğer WordPress temaları ve eklentileri de bunu yapıyor.

SeedProd’un WSYIWYG arayüzü, ister metni ister tüm mizanpajınızı düzenliyor olun, basit ve sezgiseldir.

Bu araçların birçoğu Gutenberg’den daha gelişmiş işlevselliğe ve daha iyi kullanıcı deneyimine sahiptir, bu nedenle birçok profesyonel kullanıcı web geliştirme becerilerini geliştirmeye devam ederken bunları kullanmaya başlar.

WYSIWYG Düzenlemede Sık Karşılaşılan Sorunlar

WYSIWYG editörlerini daha sık kullanmaya başladığınızda, bazı sorunlar veya engellerle karşılaşmanız kaçınılmazdır. Ama endişelenmeyin! Bu yaygın sorunların çoğunun basit çözümleri vardır. Şimdi bunlardan bazılarına bir göz atalım.

Biçimlendirme Sorunları

Karşılaşabileceğiniz yaygın sorunlardan biri biçimlendirmedir. Örneğin, metniniz doğru hizalanmayabilir veya yazı tipi boyutu istediğiniz gibi ayarlanmayabilir. Bu genellikle kopyalanan metnin ek HTML, CSS ve hatta JavaScript getirmesinden kaynaklanır.

Bunu düzeltmek için, metninizi önce Notepad++ gibi bir düz metin düzenleyicisine yapıştırmayı deneyin. Ardından, oradan WYSIWYG düzenleyicisine kopyalayın. Bu genellikle tüm ek kodları çıkararak WYSIWYG düzenleyicinin metni daha iyi biçimlendirmesini sağlar.

Bunu yaptığınızda bağlantılar ve resimler de silinecektir, bu nedenle bunları zengin metin düzenleyicisi veya HTML kodu görünümünü kullanarak yeniden eklemeniz gerekecektir.

Görüntüler Görüntülenmiyor

Bir başka yaygın sorun da resimlerin düzgün görüntülenmemesi veya hiç görüntülenmemesidir. Bunun nedeni resim URL’sinin yanlış olması veya resim dosyasının desteklenmemesi olabilir. URL’nizin doğru olup olmadığını her zaman iki kez kontrol edin. Görüntü yüklüyorsanız, .jpg, .png veya .gif gibi web dostu bir formatta olduklarından emin olun.

Örneğin, .svg gibi bir format kullanıyorsanız, WordPress’in doğru çalışması için ekstra bir ayarlama yapması gerekir. Daha fazla bilgi için SVG dosyalarının WordPress ile nasıl güvenli bir şekilde çalışacağına ilişkin kılavuzumuza göz atabilirsiniz.

Beklenmedik Kod Değişiklikleri

Bazen kaydettikten sonra kodun beklenmedik şekilde değiştiğini görebilirsiniz. WYSIWYG editörleri mükemmel değildir ve amaçlamadığınız ek HTML veya CSS ekleyebilir. Bu, içeriğinizin görünümünü ve hissini değiştirebilir.

Bunu düzeltmek için HTML kodu görünümüne geçebilir ve istenmeyen kodları manuel olarak kaldırabilirsiniz. Ancak bunu güvenli bir şekilde yapmak için HTML biçimlendirmesini temel düzeyde anlamanız gerektiğinden dikkatli olun.

Tarayıcı Uyumluluk Sorunları

Son olarak, içeriğinizi farklı tarayıcılarda görüntülerken sorunlarla karşılaşabilirsiniz. Tüm tarayıcılar HTML ve CSS’yi aynı şekilde yorumlamaz ve JavaScript sistem ayarlarınıza bağlı olarak farklı davranabilir.

Tüm bunlar içeriğinizin görüntülenme biçiminde tutarsızlıklara yol açabilir. İçeriğinizin nerede görüntülenirse görüntülensin iyi göründüğünden emin olmak için sitenizi her zaman Chrome, Firefox, Safari ve Microsoft Edge gibi birden fazla tarayıcıda test edin.

WYSIWYG Editörleri Üzerine Son Düşünceler

WordPress Gutenberg Blok Düzenleyici veya hatta eski, açık kaynaklı TinyMCE klasik düzenleyici gibi WYSIWYG düzenleyiciler, içerik oluşturma sürecinizi önemli ölçüde basitleştirebilecek hayati araçlardır.

Sürükle-bırak gerçek zamanlı düzenleme, HTML kodu görünümü ve şablonlar gibi özellikleriyle bu web tasarım araçları, kodlama yerine içeriğinizin kalitesine daha fazla odaklanmanızı sağlar.

Umarız bu yazı size WYSIWYG editörleri ve web tasarım becerilerinizi geliştirmenize nasıl yardımcı olabilecekleri hakkında bilgi vermiştir. WordPress için en iyi sürükle ve bırak sayfa oluşturuculara ilişkin uzman seçimlerimize ve siteniz için en iyi web tasarım yazılımını nasıl seçeceğinize ilişkin kılavuzumuza da göz atabilirsiniz.

Ek Kaynaklar

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Nedir: WYSIWYG (Ne Görürsen Onu Alırsın)