WordPress Gutenberg Öğreticisi: WordPress 5.0’da Yeni Blok Düzenleyicisi Nasıl Kullanılır
WordPress 5.0 ile WordPress, çok uzun zamandaki en büyük değişikliklerden birini yaşayacak. Yeni özellikler? Gutenberg.t lakaplı yeni varsayılan içerik düzenleyicisi, Gutenberg Block Editor, yıllardır kullandığınız önceki varsayılan Tinymce düzenleyicisinin yerini alacak. Böylece, WordPress sitenizde içerik oluşturma şekliniz gerçekten değişecektir. Geçişi olabildiğince kolay hale getirmek için, bu WordPress Gutenberg öğreticisini yaptık, böylece sitenizi WordPress 5.0 olarak güncelledikten hemen sonra aktif olabilir ve çalıştırabilirsiniz.
Gutenberg WordPress blok düzenleyicisi ile fark nedir? Tamam, ne hakkında konuştuğum hakkında biraz kafanız karışmışsa, bu Tinymce editörünün gösterimidir (size oldukça aşina olmalı!):
Her paragraf ayrı bir blok
Resim ayrı bir blok
Alıntı ayrı bir blok
Sabitlenmiş video ayrı bir blok
… Kaptın bu işi! Kullanabileceğiniz her şey bloğun kendisidir
Bir sonraki soru – blok neden yararlı? Durumu neden değiştirmelisiniz?
Gutenberg blok editörü, daha karmaşık bir düzen yapmayı ve daha çekici içerik türlerini kullanmayı çok daha kolay hale getiriyor. Buna ek olarak, bu da çok daha görseldir, çünkü her bloğun nasıl görüleceğini tam olarak görebilirsiniz. Örneğin, yayınınıza bir düğme eklemek istediğinizi varsayalım. Bir Tinymce düzenleyicisiyle, CSS sınıfını eklemek veya düğme eklentisinden kısa bir kod kullanmanız için Metin sekmesini kullanmanız gerekir. Gutenberg ile, bir düğme bloğu ekleyebilirsiniz ve editörde düğmeyi görebilirsiniz: Gutenberg ve Block’un yukarıda bahsettiğim kısa kodla ilgili diğer büyük avantajları. Kısa kod, içerik eklemenin çok sezgisel veya görsel bir yolu değildir. Gutenberg ile eklenti geliştiricileri, eklenti içeriği eklemeyi kolaylaştıran kısa kodlara güvenmek yerine kendi bloklarını yapabilirler. WordPress Gutenberg Öğreticisi: Yeni bir düzenleyici hakkında yeni bir editör kullanarak yeni editör hakkında birkaç temel arka planınız var, bu kılavuza “Yol” u girelim. Bu Gutenberg öğretici editörünü iki bölüme böleceğim. İlk olarak, bir Tinymce editörü ile yapabildiğiniz gibi aynı şeyi yapmak için Gutenberg’i nasıl kullanacağınızı göstereceğim. Bu ilk bölümün amacı, müdahale etmeden yaptığınız aynı tür içeriği oluşturmaya devam edebilmenizdir.
Bundan sonra, daha derin tartışacağım ve size gelişmiş verimlilik ipuçlarının yanı sıra Gutenberg’in size yapacağı bazı yeni şeyleri göstereceğim. Gutenberg ile Gutenberg’e sıradan metin ekleyerek bir gönderi veya temel blog sayfası nasıl yapılır basittir. Daha önce olduğu gibi, tıklayıp yazın. Tek fark, Enter’a her bastığınızda Gutenberg’in yeni bir paragraf bloğu oluşturmasıdır. Metninizi biçimlendirmek için (kalınlık, tesviye vb.), Yazmayı bıraktıktan sonra görünen yüzen bir araç göreceksiniz: birçok kişi “flanş araç çubuğu” yaklaşımını sevmez. Dolayısıyla, Tinymce düzenleyicisinden sabit araç çubuğu yaklaşımını tercih ediyorsanız, araç çubuğunu düzenleyicinin üstüne “düzeltmek” için sağ üst köşede bir açılır menü kullanabilirsiniz. Sadece üst araç bıçakları için seçeneği seçin:
Yalnızca yazdığınızda yeni bir blok nasıl girilir, yazarak otomatik olarak yeni bir blok oluşturabilirsiniz. Diğerleri için – görüntüler, videolar, başlıklar vb. – Yeni bir blok eklemelisiniz. Yeni bloklar eklemenin birkaç yolu vardır: Editörün altına yeni bir blok eklemek için, editörün sol üst köşesindeki artı simgesini tıklayabilirsiniz. Mevcut bloklar arasında yeni bir blok eklemek için, fareyi bir blok eklemek istediğiniz yere yönlendirebilir ve oradaki artı simgesini tıklayabilirsiniz.
Artı simgelerinden birini tıkladıktan sonra, mevcut tüm blokları listeleyen bir açılır pencere görünecektir.
Açılır pencerenin en üstünde, en sık kullandığınız blokların listesini alacaksınız: Ama aynı zamanda:
İsimlere dayalı blokları aramak için bir arama kutusu kullanın Bazı örnekleri görmek için bizim tarafımızdan sağlanan tüm blok kategorileri için Accordeon sekmesini görmek için aşağı kaydırın … Görüntü eklemek istiyorsanız … bir blok blok ekleyeceksiniz. Ardından, resmi nereden alacağınız seçeneği kullanabilirsiniz:
Bir YouTube videosu gömmek istiyorsanız … bir YouTube bloğu ekleyeceksiniz. Ardından, URL’yi videoya ekleyebilirsiniz ve önizlemeyi doğrudan göreceksiniz:
Başlık eklemek istiyorsanız (H2, H3, vb.) Başlık blokları ekleyebilir ve araç çubuğunun başlık seviyesini seçebilirsiniz: Veya mevcut paragraf bloğunu seçebilir ve başlık bloğuna (veya alıntılar gibi diğer blok türlerine) “değiştirmek” için araç çubuğunu kullanabilirsiniz: Kalın, eğik, seviyelendirme, vb. Gibi temel şeyler için blokları nasıl yapılandırır. Araç çubuğunu kullanacaksınız. Ancak, diğer engelleme ayarları için, sağ tarafın yan tarafındaki engelleme sekmesini kullanacaksınız. Örneğin, bir düğme bloğu eklerseniz, rengi değiştirmek için sağdaki yan çubuğu kullanabilirsiniz: Tinymce Düzenleyicisi’ndeki içeriği nasıl sıfırlayın, içeriği sıfırlamak istiyorsanız Cut ve Yapıştır kullanmalısınız. Gutenberg ile iki seçenek elde edersiniz: Işını bir noktaya kadar yukarı veya aşağı hareket ettiren üst/alt oklar Bloğu her yere sürüklemenizi sağlayan sürükleme ve gevşek işlevsellik Bu kontrolü etkinleştirmek için imleci hareket etmek istediğiniz bloğa yönlendirin.
Sürükle ve bırak işlevselliğini kullanmak istiyorsanız, fareyi oklar arasındaki altı noktaya yönlendirmeniz gerekir. Ardından, şöyle çekebilir ve serbest bırakabilirsiniz:
Temel Gönderi Bilgileri (Kategori, Slug, vb.) Nasıl yapılandırılır Yukarıdaki adımlar size bazı gönderme ve temel sayfalar yapmanız için ihtiyacınız olan her şeyi verecektir. Peki aşağıdakiler gibi bilgiler hakkında bilgi verecektir:
Url salyangoz Kategori Etiket
Vb.
Tüm bu bilgileri yapılandırmak için, Tinymce düzenleyicisindeki yan çubuğa çok benzer şekilde çalışan yan çubukta belge sekmesini kullanabilirsiniz:
Yoast SEO gibi eklentiler ne olacak? Her yayını yapılandırmanız gereken başka bir eklentiniz olabilir. Yaygın örnekler SEO eklentileri, sosyal medya eklentileri vb. Peki nasıl çalışır? Gutenberg’in desteğiyle bazı eklentiler – Yoast SEO gibi – inşa edildi. Yoast SEO ayarlarına veya bu desteğe sahip diğer eklentilere erişmek için sağ üst köşedeki simgeyi tıklayabilirsiniz. Ardından, eklentiyi yan bıçaklarda yapılandırabilirsiniz:
Diğer eklentiler için, daha önce olduğu gibi metin düzenleyicisinin altında görünen “Meta kutusunu” kullanabilirsiniz:
Yukarıdaki Gutenberg Block Editor Direktörü Öğretici Editör Gutenberg’i kullanmak için beş ipucu daha Tinymce Editor ile oluşturduğunuz aynı tür içeriği oluşturmaya devam etmenize yardımcı olacaktır. Şimdi, Gutenberg editöründen daha fazlasını elde etmek için bazı gelişmiş ipuçlarını tartışalım. 1. Daha iyi üretkenlik için klavye kısayolunu öğrenin, hepsi Gutenberg’de ayrı bloklar olduğundan, bir şeyi bitirmek için daha fazla “fare tıklamaları” vardır. Bu, özellikle başlangıçta işin daha yavaş olduğu anlamına gelir. Bu sorunu ortadan kaldırmanın en iyi yolu Gutenberg Klavye Editör kısayolunu incelemektir. Bu, gerektiğinde blokları hızlı bir şekilde eklemenize veya silmenize olanak tanır. Kısayolların eksiksiz bir listesini açmak için Shift + Alt + H: 2’yi kullanın. Her blok eklemek istediğinizde bir ek blok açılır pencere kullanmak yerine eğik bir blok ekleyin, boş bir blokta “/” yazmak ve adlara dayalı blokları aramaktır. İşte örnekler:
3. Görüntüleri masaüstünüzden Gutenberg’e sürüklemek için görüntülerin eklenmesini hızlandırmak için doğrudan masaüstünden editördeki belirli bir yere sürükleyebilirsiniz. Gutenberg otomatik olarak medya kütüphanenize yükleyecektir: 4. Daha karmaşık bir düzen için bir sütun bloğu kullanın daha karmaşık bir düzen yapmak istiyorsanız Gutenberg sütun bloğunu içerir. Sütun bloğunu ekledikten sonra, içine başka bir blok ekleyebilirsiniz: Düzenle daha esnek olmak için Kadence Blocks eklentisini yükleyebilirsiniz. Hakkında Konuşun … 5. Üçüncü bir Partisi Blok Eklentisinden yararlanın Gutenberg ile ilgili en güzel şeylerden biri, yeni bir blok eklemek için üçüncü bir Party eklentisini kullanabilmenizdir. Birçok geliştirici, Gutenberg işlevselliğini genişletmeye yardımcı olabilecek yeni içerik ve düzen blokları oluşturmak için çalışır. Başlamak için bazı iyi olanlar: Atom bloğu Gutenberg için Ultimate Addons İstiflenebilir Gutenberg ileri seviye Gutenberg bulut eklentisi, çeşitli geliştiricilerden belirli blokları yüklemenizi sağlayan ilginç bir projedir. Bunun ötesinde, kullandığınız bazı eklentiler kısa kodu değiştirmek için bir blok ekleyecektir. Örneğin, bir WooCommerce mağazanız varsa, WooCommerce ürünlerini yeni bir blok kullanarak içeriğinize girebilirsiniz. WordPress 5.0’ı güncelledikten sonra eski içeriğinize ne oldu? Zaten bir WordPress siteniz varsa, Tinymce editörleriyle oluşturduğunuz tüm içeriğe ne olacağını merak etmek doğaldır. Endişelenmeyin – çekirdek ekip eski içeriğinizi unutmaz. Bu nasıl çalışır. Diyelim ki şuna benzeyen bir Tinymce editörü kullanarak yapılmış bir gönderiniz var: WordPress 5.0 ve Gutenberg Block Editor’a taşındığınızda WordPress, tüm eski içeriği tek bir klasik bloğa girecektir. Klasik blok temelde bir Tinymce editörüdür … tam Gutenberg arayüzünde. Yani, her öğe yerine ayrı bir blok yerine, her şey sadece bir klasik blokta bulunur. Bu şuna benziyor:
İçeriği düzenlemeniz gerekiyorsa, Tinymce Editor’da yaptığınız gibi klasik bir blokta düzenleyebilirsiniz: veya Bloklara Dönüştür seçeneğini de seçebilirsiniz. Seçeneği seçtikten sonra, Gutenberg tüm eski içeriğinizi ayrı bloklara ayıracak ve Gutenberg ile baştan bir yazı hazırladığınız gibi onunla çalışabileceksiniz. Gutenberg editörü kullanmanız gerekiyor mu? Tinymce editörü kullanmaya devam edebilir misin? Yeni Gutenberg Blok Düzenleyicisi’ni kullanmak zorunda değilsiniz. WordPress 5.0’da varsayılan bir editör olmasına rağmen, zaten bildiğiniz orijinal Tinymce düzenleyicisini kullanmaya devam etmenizi sağlayan resmi bir klasik editör eklentisi de var. Buna ek olarak, WordPress Core ekibi en azından 2021’in sonuna kadar Tinymce Editor’u resmi olarak desteklemeye devam edecek. Tek yapmanız gereken WordPress.org’dan bir eklenti yüklemek. Etkinleştirdikten sonra, Gutenberg Blok Düzenleyicisini devre dışı bırakacak ve WordPress 5.0’dan önce yaptığınız içeriği tam olarak oluşturacaksınız. İstenirse, eklenti ayrıca hem Tinymce hem de Gutenberg editörü kullanmanıza ve bunlar arasında temel içerikte geçiş yapmanıza izin veren başka seçeneklere de sahiptir. Bu ayarları etkinleştirmek için ayarları aç → Varsayılan blok düzenleyiciyi kullanma seçeneğini yazın ve seçeneği seçin ve Klasik Düzenleyiciye isteğe bağlı bağlantılar ekleyin:
