WordPress Sitenize Nasıl EmojiOne Desteği Eklenir?

0 5.489

Yeni EmojiOne projesine aşina değilseniz, bu aralar popüler olan emoji yani ifadeleri denemelisiniz. Temel olarak Emoji’nin ilk WordPress kullanımları biraz sıkıntılıydı. Şuan bir çok site ve sosyal paylaşım sitesi bolca Emoji kullanmakta. Bugün WordPress sitenize EmojiOne desteğini nasıl ekleyeceğinizi anlatacağız.

Yazı İndeksi

Emoji

Geçmişte, özellikle performansa gelince, Emoji kullanmaktan kaçınmıştım. Ve genellikle emojileri tamamen devre dışı bırakıyorum. Ancak bunları doğru eklerseniz, görsel formatı SVG olarak kullanarak site performansa etki etmemekte. 1 KB boyutunda! Ve tabii ki, WordPress yayınlarınıza biraz eğlence katıyorlar. Sitenize eklemek için aşağıdaki adımları izleyin.

Adım 1

İlk yapacağınız şey emojione desteği kullanmak için eklenti oluşturmaktır. Aslında ücretsiz Emoji One eklentisi veri havuzunda bulunmaktadır fakat yaklaşık 2 yıldır güncellenmemiş halde ve zamanı geçmiş durumdadır. Bu yüzden, bu başlıkta kendi eklentimizi oluşturacağız. Bunu yapmak için, ‘’wp-content/plugins’’ klasörünüzü bulmanız ve yeni bir adres defteri oluşturmanız gerekir. Bizim örneğimizde, klasörümüz ‘’emojione’’ olarak isimlendirilmiştir.

emojione-plugin-folder

Adım 2

Yeni oluşturduğunuz klasörün içerisine, klasörün adıyla aynı olmak üzere bir PHP dosyası oluşturun. İlk adımda klasörümüze vermiş olduğumuz ‘’emojione’’ ismi, aynı zamanda PHP dosyamızın ismi de klasörümüzün ismiyle aynı olacak. Yani bizimki ‘’emojione.php.’’

 Adım 3

PHP dosyanızın içine eklenti bilgisi, başlık, yazar gibi şeyleri ekleyin. WordPress içeriğinize EmojiOne ekleyecek olan işlev filtresini de ayrıca eklemeniz gerekir. Aşağıdaki kodların hepsini alabilirsiniz. Tabi ki bu eklenti bilgisini bu doğrultuda güncellemeniz gerekir.

<?php
 /*
 Plugin Name: EmojiOne
 Plugin URI: https://woorkup.com/
 Description: This plugin adds EmojiOne support to WordPress content.
 Version: 1.0
 Author: Brett Jackson
 Author URI: https://woorkup.com/
 License: GPL2
 */

//add emojis to content
 function emojione_content_filter($content) {
include plugin_dir_path(__FILE__) . 'emojione-loader.php';
 $content = $client->toImage($content);
 return $content;
 }
 add_filter('the_content', 'emojione_content_filter', 1);

 Adım 4

Yukarıdaki kodda ‘’emojione-loader.php.’’ içeren başka bir dosya göreceksiniz. Eklenti klasörünüz içine bunu oluşturun ve aşağıda yer alan kodu ekleyin. Bu, EmojiOne kütüphanesini yükleyecektir.

<?php
 namespace Emojione;
//include the PHP library (if not autoloaded)
 require('inc/lib/php/autoload.php');
$client = new Client(new Ruleset());
$client->imageType = 'svg';
//ignore ASCII smileys like :)
 $client->ascii = true;
//default svg path
 $client->imagePathSVG = 'https://yourdomain.com/wp-content/plugins/emojione/inc/assets/svg/';


Adım 5

Artık eklentimiz oluşturuldu, EmojiOne PHP kütüphanesini ve niteliklerini alıp eklentiye dahil edin. İlk olarak, eklenti klasörünün içerisine ‘’inc’’ klasörü açarak başlayın. Bu, bütün EmojiOne şeylerini depolamak için kullanılacak. Aşağıda, kaybolmuş olmanıza karşın klasör yapısı mevcut:

emojione-plugin-contents

 Adım 6

https://github.com/Ranks/emojione – Buraya girip dosyaları indirin. Bu ders için iki dizinin içeriğine ihtiyacınız vardır ve üst dizinleri de aynı yerde tutmaya dikkat edin.

Adım 7

‘’lib/php’’ ve içerisindeki diğer bütün dosyaları alıp eklenti klasörünüzdeki ‘’inc’’ klasörüne kopyalayın. ‘’emojione/inc/lib/php/’’ ile karşılaşacaksınız ve bütün kütüphane içerikleri burada olacak.

Adım 8

Daha sonra ‘’assets/svg’’ ve içerisindeki diğer bütün dosyaları alıp eklenti klasörünüzdeki ‘’inc’’ klasörüne kopyalayın. ‘’emojione/inc/assets/svg/’’ ile karşılaşacaksınız ve bütün dosyalar bunun içerisinde olacak.

emojione-svg-contents

Adım 9

Daha sonra, WordPress admin içerisindeki eklenti sayfanıza gidin, burada eklenti listenizi göreceksiniz. Devam edin ve aktifleştirin.

emojione-plugin-in-wordpress

 Adım 10

Son olarak emojilerinizi düzgün ölçeklendirmek için biraz CSS eklemeniz gerek. Eğer WordPress tema panelinizin özel bir CSS kutusu varsa buraya ekleyebilirsiniz, ya da https://wordpress.org/plugins/wp-add-custom-css/ bunun gibi ücretsiz eklenti kullanabilirsiniz.

.emojione {
 max-height: 1.5em;
 max-width: 1.5em;
 display: inline;
 vertical-align: sub;
}

Yukarıdaki numaraları, emojileri isteğinize göre büyük veya küçük olarak kullanmak isterseniz, değiştirebilirsiniz. Her şeyi doğru yaptığınızı varsayarsak, WordPress mesaj ve içerikleriniz EmojiOne destekliyor demektir.

Son Olarak

Emojiler sitenize farklılık katabilir ancak unutulmaması gereken nokta kullanacağınız görsellerin sitenizin hızına ters etki etmemesi. WordPress kendi içerisinde bazı emojilere destek verse de kullanıp kullanmamak sizin tercihiniz olmalı. Yazımızı hazırlarken kullandığımız kaynaklara göz atmak isterseniz. Yazımızın altından ulaşabilir fikir edine bilirsiniz. Ayrıca tüm soru ve görüşlerinizi yorum olarak bize iletebilirsiniz.

Cevap Gönder

E-posta adresiniz yorumunuzda yayınlanmayacaktır.

 

Sitemizi en iyi şekilde kullanabilmeniz için çerezler kullanılmaktadır. Sitemize giriş yaparak çerez kullanımını kabul etmiş sayılmaktasınız. Tamam Detaylı bilgi için tıklayınız.