Nedir: WYSIWYG (Gördüğün Şey Elde Ettiğin Şeydir)

WYSIWYG, What You See Is What You Get (Gördüğün Şey Aldığın Şeydir) ifadesinin 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 düzenleyiciler çevrimiçi olarak inanılmaz derecede kullanışlıdır, özellikle web siteleri için içerik oluştururken. Bir blog yazısı yazıyor, bir e-posta hazırlıyor veya bir web sayfası tasarlıyor olun, WYSIWYG düzenleyici işi daha kolay ve daha verimli hale getirir.

Neden WYSIWYG Düzenleyici Kullanılır?

WYSIWYG düzenleyiciler, içerik oluşturma sürecinizi geliştiren birçok özellikle birlikte gelir. İşlevsellik ve görünüm, bir WordPress web siteniz olsa da olmasa da veya farklı bir içerik yönetim sistemi (CMS) kullansanız da genellikle aynıdır.

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

Metin Biçimlendirme: Bu düzenleyiciler, metninizi bir kelime işlemcide olduğu gibi kalın, italik, altı çizili ve üstü çizili yapmanıza olanak tanır. Aslında, bunlar genellikle zengin metin düzenleyicileri olarak adlandırılır çünkü içerikleri Microsoft Word'deki gibi tanıdık bir şekilde düzenlemenize olanak tanır.
Bağlantılar: Bir araç çubuğundaki bir düğmeye tıklayıp URL'yi yapıştırarak içeriğinize kolayca bağlantılar ekleyebilirsiniz. İçeriğinizi oluşturmak için HTML kodu eklemeniz veya düzenlemeniz gerekmeyecek.
Resimler: Resim eklemek çok kolaydır. Doğrudan cihazınızdan yükleyebilir veya çevrimiçi bir kaynaktan ekleyebilirsiniz. Birçok WYSIWYG düzenleyici, bir resmi doğrudan satır içi yapıştırmanıza bile izin verir.
Tablo Oluşturma: Verileri düzgün bir şekilde sunmanız mı gerekiyor? WYSIWYG düzenleyiciler, Google Sheets gibi diğer web uygulamalarıyla uğraşmak veya özel gömme kodlarına ihtiyaç duymak zorunda kalmadan içeriğinizde tablolar oluşturmanıza olanak tanır.

Ama hepsi bu kadar değil. WYSIWYG düzenleyiciler 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 endişesi olmadan kaliteli içerik oluşturmaya odaklanmanızı kolaylaştırır.

WYSIWYG Düzenleyicilerinin Ek İşlevselliği

Yukarıdakilere ek olarak, WYSIWYG düzenleyiciler, 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 düzenleyicisinde yerleşik yazım denetimi bulunur. Bu yerleşik araç oldukça kullanışlıdır, yanlış yazılmış kelimeleri otomatik olarak altını çizerek içeriğinizdeki utanç verici yazım hatalarından kaçınmanıza yardımcı olur.

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

HTML koduna bakmak, sorun gidermeniz gereken durumlarda mükemmeldir.

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

Söylemeye gerek yok, birçok WYSIWYG düzenleyici sağlam bir tasarım araçları setine sahiptir. Örneğin, WordPress için Gutenberg düzenleyicisi, içeriği yazmanıza ve hayal edebileceğiniz her şeyi doğrudan gözlerinizin önünde oluşturmak için şablonları kullanmanıza olanak tanıyan etkileşimli, sürükle ve bırak tasarım aracıdır.

Arayüz her zaman kullanıcı dostudur, bu nedenle teknoloji dehası olmasanız bile, yalnızca birkaç tıklamayla içeriğinizin profesyonel ve cilalı görünmesini sağlayabileceksiniz.

WordPress Blok Düzenleyici

Gutenberg Düzenleyici 2018'de tanıtıldı ve WordPress ile içerik oluşturma kullanıcı arayüzünü değiştirdi.

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

TinyMCE gibi bir zengin metin düzenleyicisinde olduğu gibi, büyük bir metin alanında yazmak ve tasarlamak yerine, içeriğinizi bireysel bloklar kullanarak oluşturursunuz. TinyMCE, önceki WordPress içerik düzenleyicisinin temeli olarak kullanılan açık kaynaklı bir WYSIWYG düzenleyicisidir ve şimdi klasik düzenleyici olarak adlandırılır.

Bunlar, paragraflar ve başlıklar, resimler, videolar, alıntılar veya tablolar veya özel HTML işaretlemesi gibi daha karmaşık öğeler olabilir.

Her Gutenberg bloğu ayrı ayrı özelleştirilebilir ve etrafta hareket ettirilebilir, bu da içeriğinizin düzeni ve tasarımı üzerinde benzeri görülmemiş bir kontrol sağlar. Blok düzenleyicinin içinde bir şablona sahip olmak için Desenler adı verilen hazır tasarımları bile kullanabilirsiniz.

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

Ancak Gutenberg, web tasarımı için tek WYSIWYG düzenleyici değildir. Squarespace gibi WordPress dışı web sitesi oluşturucuları WYSIWYG düzenleme sunar ve SeedProd ve Divi gibi diğer WordPress temaları ve eklentileri de sunar.

SeedProd'un WSYIWYG arayüzü, ister metin ister tüm düzeninizi 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 ettikçe bunları kullanmaya başlar.

WYSIWYG Düzenlemede Yaygın Sorunlar

WYSIWYG düzenleyicileri daha sık kullanmaya başladıkça, bazı sorunlarla veya engellerle karşılaşmanız kaçınılmaz olacaktır. Ama endişelenmeyin! Bu yaygın sorunların çoğu basit çözümlere sahiptir. Bunlardan bazılarına bir göz atalım.

Biçimlendirme Sorunları

Karşılaşabileceğiniz yaygın bir sorun biçimlendirmedir. Örneğin, metniniz doğru şekilde hizalanmayabilir veya yazı tipi boyutu istediğiniz gibi ayarlanmayabilir. Bu genellikle ek HTML, CSS veya hatta JavaScript getiren kopyalanmış metinden kaynaklanır.

Bunu düzeltmek için, metninizi önce Not Defteri++ gibi düz bir metin düzenleyiciye yapıştırmayı deneyin. Ardından, oradan WYSIWYG düzenleyiciye kopyalayın. Bu genellikle ek kodu kaldırır ve WYSIWYG düzenleyicinin metni daha iyi biçimlendirmesini sağlar.

Bunu yapmak bağlantıları ve resimleri de kaldıracaktır, bu nedenle bunları zengin metin düzenleyicisini veya HTML kod görünümünü kullanarak yeniden eklemeniz gerekecektir.

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

Başka bir yaygın sorun, 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 olduğundan her zaman emin olun. Resim yüklüyorsanız, .jpg, .png veya .gif gibi web dostu bir biçimde olduklarından emin olun.

Örneğin, .svg gibi bir format kullanırsanız, WordPress'in doğru çalışması için ek bir ince ayar yapması gerekir. Daha fazla bilgi için, SVG dosyalarının WordPress ile güvenli bir şekilde nasıl çalıştırılacağına dair kılavuzumuza göz atabilirsiniz.

Beklenmeyen Kod Değişiklikleri

Bazen, kaydettikten sonra kodun beklenmedik bir şekilde değiştiğini fark edebilirsiniz. WYSIWYG düzenleyiciler mükemmel değildir ve istemediğiniz 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 kod görünümüne geçebilir ve istenmeyen kodu manuel olarak kaldırabilirsiniz. Ancak dikkatli olun, çünkü bunu güvenli bir şekilde yapmak için HTML işaretlemesi hakkında temel bir anlayışa ihtiyacınız vardır.

Tarayıcı Uyumluluğu 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ğiniz nerede görüntülenirse görüntülensin iyi göründüğünden emin olmak için Chrome, Firefox, Safari ve Microsoft Edge dahil olmak üzere sitenizi birden çok tarayıcıda test edin.

WYSIWYG Düzenleyiciler Hakkında Son Düşünceler

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

Sürükle ve bırak gerçek zamanlı düzenleme, HTML kod görünümü ve şablonlar gibi özelliklerle bu web tasarımı araçları, kodlamadan çok içeriğinizin kalitesine odaklanmanıza olanak tanır.

Umarız bu, WYSIWYG düzenleyiciler ve web tasarımı becerilerinizi geliştirmenize nasıl yardımcı olabilecekleri konusunda size bilgi vermiştir. Ayrıca WordPress için en iyi sürükle ve bırak sayfa oluşturucular hakkındaki uzman seçimlerimize ve siteniz için en iyi web tasarımı yazılımını nasıl seçeceğiniz hakkındaki kılavuzumuza da göz atabilirsiniz.

Ek Kaynaklar

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.