Sitenizi rekabette öne çıkarmak zor olabilir. Bu yüzden ziyaretçileri çekecek ve onları kalmaya ikna edecek ilgi çekici bir özellik çok önemlidir. Ziyaretçi etkileşimi söz konusu olduğunda animasyon efektlerini çok az şey yenebilir. Bunun bir örneği, animasyonlu yazım metni efektidir. Bununla birlikte gerçek zamanlı olarak yazılmış gibi görünen metin bölümleri oluşturabilirsiniz. Yazı tipi metin efekti kendi başına duracak kadar zariftir, fakat farklı görünümler elde etmek için onu bazı statik metinlerle de birleştirebilirsiniz.
Bu yazıda, hareketli bir yazı tipi metin efektinin nasıl yapıldığına ve bunu WordPress web sitenize nasıl ekleyeceğinize bir göz atacağız.
Kod kullanarak özel bir yazım efekti nasıl oluşturulur?
WordPress’te özel bir yazım efekti eklemenin iki yolu vardır: uygun bir WordPress eklentisi kullanarak veya özel kod kullanarak. Bir eklenti kullanmak, yeni başlayanlar için daha kolay bir seçenektir, dolayısıyla yapmaya karar verdiğiniz şey buysa, sizi aynı ekip tarafından ödüllü WordPress temalarımızın arkasında oluşturulan Qi Addons for Elementor eklentisini denemeye davet ediyoruz. Qi Addons, WordPress web sitenizi kolaylıkla özelleştirmenizi sağlayan 60 esnek Elementor widget’ından, yani eklentilerden oluşan ücretsiz bir kitaplıktır. İş, infografik, sunum, yaratıcı, WooCommerce’den tipografi, SEO ve form stiline kadar çeşitli alanları kapsayan Elementor eklentileri içerir. Tipografi kategorisinde, web sitenize yazım efektleri eklemenin basit bir yolunu sunan Metin Yazım widget’ını bulacaksınız.
Fakat bu makaledeki odak noktamız, kodla özel bir yazım efektinin nasıl ekleneceği olacaktır. Bu yöntem, CSS ve/veya JS koduna aşinalık gerektirdiğinden orta ve ileri düzey WordPress kullanıcıları için daha uygundur. Bunu kullanmanın yararı, yazım efektinin tüm yönlerini tam olarak ihtiyaçlarınıza göre özelleştirebilmenizdir. Ayrıca daktilo efektinin arka planda nasıl çalıştığını merak ediyorsanız, size bu makale için özel olarak oluşturulmuş kodu kullanarak süreci göstereceğiz.
Bununla birlikte bu makalenin nasıl yapılır bölümüne geçmeden önce, önceden web sitenizin bir yedeğini almanızı öneririz. Bu sadece güvenliğini sağlamak için bir önlemdir. Bunu yaptıktan sonra, aşağıda gösterilen kodun ilk bölümüne ilerleyebilirsiniz.
function custom_typing_text( $atts ) {
$default_atts = array(
"text" => '',
"text_color" => 'black'
);
$params = shortcode_atts( $default_atts, $atts );
$text_styles = "";
if( ! empty( $params['text_color'] ) ) {
$text_styles .= "color: " . $params['text_color'] . ";";
}
return '<div class="text-holder"><span style="' . $text_styles . '">' . esc_html( $params['text'] ) . '</span></div>';
}
add_shortcode( 'custom-typing-text', 'custom_typing_text' );
Bu kod, custom-typing-text olarak adlandırdığımız çok basit bir özel kısa kodu temsil eder. Add_shortcode() işlevi ve bunun için oluşturduğumuz custom_typing_text() adlı bir geri arama işlevi kullanılarak kaydedildi. Kısa kod iki parametreyi kabul eder: text ve text_color. Çıktısı, eklediğiniz metindir ve ayarladığınız metin renginde renklendirilir.
Daha spesifik olarak, metin, satır içi CSS kullanılarak eklenen renkle birlikte bir etiketine sarılır. Ek olarak bir kullanıcı text_color özelliğini ayarlamayı unutursa varsayılan olarak siyah renk olur. ayrıca, metin tutucu adı verilen özel bir sınıfa sahip bir
Özetlemek gerekirse, yukarıdaki kısa kod bir metni yalnızca belirli bir renkte görüntülemek için oluşturulmuştur. Bu kodu kullanmak için, FTP kullanarak veya siteye özel bir eklenti içinde alt temanızın functions.php dosyasına eklemeniz gerekir.
Özel bir yazım efekti oluşturmak için önceden oluşturulmuş kısa kodu kullanmanın yanı sıra görüntülenen metni canlandırmak için ek kod eklemeniz gerekir. Genel olarak konuşursak, yazım efekti JS ve/veya CSS kodu kullanılarak oluşturulabilir. Bu yazıda, bunu yalnızca CSS kullanarak nasıl yapacağımızı açıklayacağız. Hazırladığımız örnek nispeten basit ama etkinin nasıl elde edildiğini göstermek için yeterli olmalı. Bu CSS’yi olduğu gibi kullanabilir veya ihtiyaçlarınıza uyacak şekilde değiştirebilirsiniz. Bununla birlikte oluşturduğumuz CSS kodunu aşağıda bulabilirsiniz.
.text-holder {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.text-holder span {
font-size: 25px;
letter-spacing: 0.2em;
border-right-width: 3px;
border-right-style: solid;
overflow: hidden;
white-space: nowrap;
-webkit-animation:
typing-animation 7s steps(30, end) infinite,
blink-animation .5s step-end infinite;
animation:
typing-animation 7s steps(30, end) infinite,
blink-animation .5s step-end infinite;
}
/* The typing effect */
@-webkit-keyframes typing-animation {
from, to { width: 0 }
50% { width: 100% }
}
@keyframes typing-animation {
from, to { width: 0 }
50% { width: 100% }
}
/* The blinking cursor effect */
@-webkit-keyframes blink-animation {
from, to { border-color: transparent }
50% { border-color: #000 }
}
@keyframes blink-animation {
from, to { border-color: transparent }
50% { border-color: #000 }
}
Bu kodu parçalayalım.
Öncelikle metni saran
.text-holder {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
CSS’nin ikinci kısmı, doğrudan eklenen metni tutan öğesine uygulanan kuralları içerir. Metnin yazı tipi boyutunu ve satır aralığını belirledik ve metnin sağına 3px kalınlığında bir çerçeve ekledik. Bu kenarlık, yazma animasyonuyla uyumlu yanıp sönen bir imleci taklit edecektir. Kenarlık rengi, öğesine oluşturup uyguladığımız iki özel animasyonu içeren bölümde belirtilir.
Animasyon kodu dışında değinmemiz gereken iki kod satırı daha var. Taşma: gizli; kuralı, animasyonlar başlamadan önce metnin gizlendiğinden emin olur. Ve boşluk: nowrap; kuralı metnini tek bir satırda tutar.
Tüm bunlar, kodun aşağıda görebileceğiniz kısmı tarafından kapsanmaktadır:
.text-holder span {
font-size: 25px;
letter-spacing: 0.2em;
border-right-width: 3px;
border-right-style: solid;
overflow: hidden;
white-space: nowrap;
}
Şimdi animasyon kodunun olduğu kısma geliyoruz. Bu makale için, @keyframes CSS kuralını kullanarak yazma animasyonu ve yanıp sönme animasyonu adı verilen iki basit özel animasyon oluşturduk. Yazma animasyonu ilk yarısında metni içeren aralığın genişliğini %0’dan %100’e kadar kademeli olarak artırır. Animasyonun ikinci yarısında ulaşılan genişlik kademeli olarak %0’a kadar küçülür. Bu durum animasyonun metnin yazımını ve müteakip silinmesini taklit etmesini sağlar. Göz kırpma animasyonu, imleç olarak kullandığımız sağ kenarlığın yanıp sönmesini taklit eder. Yanıp sönme efekti, kenarlık renginin şeffaftan siyaha ve tekrar geriye kademeli olarak değiştirilmesiyle oluşturulur.
Bu durum kodun aşağıda görebileceğiniz kısmı kapsamındadır:
/* The typing effect */
@-webkit-keyframes typing-animation {
from, to { width: 0 }
50% { width: 100% }
}
@keyframes typing-animation {
from, to { width: 0 }
50% { width: 100% }
}
/* The blinking cursor effect */
@-webkit-keyframes blink-animation {
from, to { border-color: transparent }
50% { border-color: #000 }
}
@keyframes blink-animation {
from, to { border-color: transparent }
50% { border-color: #000 }
}
Animasyon kısayol CSS özelliğini kullanarak bu animasyonların her ikisini de öğemize uyguladık. Animasyon kısaltmasının birkaç özelliği vardır, fakat biz yalnızca birkaçını kullandık. İlk olarak, 7 saniye süreli type-animation özelliğini çağırdık ve Animation-timing-function özelliğini step(30, end) olarak ayarladık, bu da yazma efektinin 30 adıma bölündüğü ve son adımın sonla eşleştiği anlamına gelir. animasyonun.
Animation-iteration-count özelliğinin sonsuz olarak ayarlanması, metnin sürekli olarak “yazılmasına” ve “silinmesine” neden olur. Blink-animasyonda ise süresi 0,5 saniye, Animation-timing fonksiyonu step-end ve Animation-iteration-count özelliği de sonsuz olarak ayarlandığı için sonsuz tekrar ediyor. Step-end,step(1,end)’e eşit olduğu için, sağ kenarlığın rengindeki değişimin normalde olacağından çok daha az kademeli olduğu anlamına gelir. Bu durum “imleç”in yanıp sönmek yerine yanıp söndüğü izlenimini yaratır.
Tüm bunlar, kodun aşağıda görebileceğiniz kısmı tarafından kapsanmaktadır:
.text-holder span {
-webkit-animation:
typing-animation 7s steps(30, end) infinite,
blink-animation .5s step-end infinite;
animation:
typing-animation 7s steps(30, end) infinite,
blink-animation .5s step-end infinite;
}
Bu durum oluşturduğumuz CSS koduna ilişkin açıklamamızı sonlandırıyor. Şimdi soru kalır – onu nereye eklersiniz?
Yukarıdaki veya buna benzer bir CSS koduyla çalışırken, bunu her zaman Görünüm > Özelleştir > Ek CSS altında ekleyebilirsiniz. Bu durum web sitesiyle ilgili CSS’yi eklemek için varsayılan konumdur ve WordPress kullanıcıları, CSS kodlarını buraya yerleştirmelidir. Bununla birlikte daha gelişmiş WordPress kullanıcıları, CSS’lerini ayrı bir dosyaya koymayı ve wp_enqueue_style() işlevini kullanarak sıkıştırmayı seçebilirler. Bu konu hakkında daha fazla bilgi edinmek isterseniz, komut dosyalarını ve stil sayfalarını kuyruğa alma hakkındaki makalemize göz atabilirsiniz.
Şimdi bu özel tip metin kısa kodunun nasıl kullanıldığını inceleyelim.
Özel kısa kodlar, kısa kodun desteklediği gerekli parametrelerle uygun kısa kod çağrısı kullanılarak sayfalara ve gönderilere eklenebilir. Özel kısa kodumuz custom-typing-text adına sahip olduğundan ve iki parametreyi desteklediğinden (text ve text_color), uygun bir kısa kod çağrısı örneği aşağıdaki gibidir:
[custom-typing-text text="your-text-here" text_color="your-text-color-here"]
Kısa kod çağrısını kullanmadan önce hem metin hem de metin rengi için boş özellikleri değiştirmeyi unutmayın. Bunu yaptıktan sonra, kısa kodun bir sayfada görüntülenmesi için, çağrıyı sayfa oluşturucu eklentinizin uygun bir kısa kod oluşturma öğesine eklemeniz gerekir. Örneğin WPBakery eklentisini kullanıyorsanız bu Metin Bloğu kısa kodu olabilir. Fakat Elementor kullanıyorsanız, Metin Düzenleyici widget’ına ihtiyacınız olacaktır. Ve Gutenberg kullanıcıları için Kısa Kod bloğu uygun öğedir.
Özel kısa kodunuzu nasıl kullanacağınız ve ekleyeceğiniz konusunda daha fazla yardıma ihtiyacınız varsa, özel kısa kodlar oluşturma hakkındaki makalemize göz atabilirsiniz. Orada ihtiyaç duyabileceğiniz her şeyin kapsamlı kapsamını bulacaksınız. Kısa olması adına, aşağıda yalnızca Gutenberg editörü ile özel bir kısa kodun kullanımını göstereceğiz.
Bu kısa kodu Gutenberg editörüyle kullanmak için, yeni bir blok eklemek için “+” simgesine tıklayın ve ardından Kısa kod bloğunu bulun. Daha sonra eklemek için Kısa Kod bloğuna tıklayın ve (önceden özelleştirilmiş) kısa kod çağrınızı içine ekleyin. Bundan sonra sayfayı güncelleyebilir ve sonuçları inceleyebilirsiniz. Bu noktada sayfaya ek içerik de ekleyebilirsiniz. Aşağıdaki ekran görüntüsünden de görebileceğiniz gibi, kısa kod çağrısının üzerine küçük bir paragraf ekledik.
Bu bize şu sonucu verdi.
Son olarak oluşturduğumuz örneğin, kod kullanılarak bir yazım efektinin nasıl uygulanabileceğinin birçok yolundan sadece biri olduğunu unutmamalısınız. CSS kullanan yöntemi gösterdik ve efekti oluşturmak için kullandığımız kodu paylaştık. Fakat bu örnek…