WordPress SMTP Ayarları – Contact Form

Yakın zamanda yaptığımız bir websitesinde iletişim ve diğer formlar için Contact Form eklentisini kullanmamız istendi. Ancak bu eklentiyi kullanırken “Failed to send your message. Please try again later or contact the administrator with another method.” (İletinizi gönderme başarısız oldu. Lütfen daha sonra tekrar deneyin ya da yönetici ile başka bir yöntemle iletişime geçin.) şeklinde bir hata ile karşılaştık. Biraz araştırma yaptıktan sonra sorunun WordPress‘in SMTP ayarlarından kaynaklandığının farkına vardık. Bu da hosting firmamızın mail fonksiyonlarını kapatmasından kaynaklanıyor. Kapatılmadığı taktirde ciddi bir spam mail tehlikesi ile karşı karşı kaldığımız için otomatik olarak kapalı olarak geliyor ve biz bu ayarları yapılandırarak artık özel olarak kullanabilir hale geliyoruz.

SMTP açılım olarak Simple Mail Transfer Protocol (Basit Posta Aktarım Protokolü) demektir. Yani sizin gönderdiğiniz bir mailin karşı tarafa iletilmesi geçmesi gerek prosedürlerinde büyük bir rolü olan yapıdır. Bazı sunucularda SMTP ayarlanmamış olarak gelebiliyor. Bizim bunu kullanabilmemiz için ayarlarını yapmamız lazım.

Bu ayarları yapmak için ben basit bir eklenti kullanarak duruma müdahele ettim. Eklentimizin adı “WP Mail SMTP“. Eklentiyi kurduktan sonra Ayarlar sekmesi altında bulunan eklenti kontrol panelini açıp ayar yapmaya başlayabiliriz.

Öncelikle “From Email” ve “From Name” kısımlarını doldurup, daha sonra kendi sunucumuza üzerinden iletişim sağlayacağımız için “Mailer” kısmının altında yer alan “Other SMTP” seçeneğini işaretliyoruz. Bu işaretlemeyi yaptıktan sonra bize aşağıda bir alan açılıyor. O alanda yer alan bilgileri doldurmamız gerekiyor. Kendi sunucumuzun bize vermiş olduğu SMTP host ve port numaralarını girdikten sonra şifreleme yöntemimizi seçmemizi istiyor. O kısmında altında yazdığı gibi TLS önerilen şifreleme yöntemi olarak geliyor. Ama eğer size SSL sertifikasına sahipseniz ve korumanızı daha da kuvvetlendirmek istiyorsanız bu seçeneği seçerek ilerleyebilirsiniz. Biz TLS şifreleme yöntemini seçerek devam edeceğiz.

TLS seçildikten sonra alt kısmında yer alan “Authentication” alanı otomatik olarak kapalı olarak geliyor. Kullandığımız sunucularda uzaktan bağlantı yapabilmek için kullanıcı adı ve şifrelerini biliyor ve sisteme tanıtıyor olmamız lazım. Bu yüzden bu ayarı etkinleştirerek açılan alan içerisine kullanıcı adımızı ve şifremizi yazıyoruz. Ardından yine eklentinin bizi bilgilendirmek için verdiği kodu wp-config.php dosyamıza yapıştırıyoruz ve “your_password” alanını kendi şifremiz ile değiştiriyoruz.

define( 'WPMS_ON', true );
define( 'WPMS_SMTP_PASS', 'your_password' );

Ayarları kaydettikten sonra artık sunucumuz mail gönderme işlemlerine hazır hale geliyor.

Google Pagespeed için Google Fonts Sorununun Çözümü

Yakın zamanda yaptığım siteyi hızlandırma ve optimizasyon çalışmalarının faydasını görmeye başladım. Yaptığım çalışmalar neticesinde – sunucu süresi dışında – olabilecek maksimum hıza ulaştığımı söyleyebilirim. Bir kaç yazıda bana sıkıntı çıkartan hız problemlerinin önüne nasıl geçtiğimi anlatacağım. Bu yazımızın konusu ise Pagespeed değerimizi oldukça olumsuz etkileyen <link> olarak çağırdığımız Google Fonts sorununu nasıl çözebiliriz?

Google Fonts‘a girerek bir font seçtiğiniz zaman onu sizden <link> şeklinde eklemenizi tavsiye ediyor, aynen şu şekilde:

<link href=”https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900&amp;subset=latin-ext” rel=”stylesheet”>

Ama siz bu şekilde bir ekleme yaptığınız zaman Pagespeed size aşağıdaki uyarıyı veriyor ve hızınızı %10 civarında etkileyen bir azalış gösteriyor.

Google Pagespeed Google Fonts Sorunu

Peki bu sorunu nasıl çözebiliriz?

Bazı linklerimizi alıp footer’a taşısak bile Google Fonts sorunu o şekilde çözülemiyor malesef. Bunun için küçük bir javascript kodu yazmamız lazım. Bu yazacağımız javascript kodu alt tarafta çalışacağı için sizin siteniz yüklenirken bariz bir olumsuzluk oluşturmadan açılış hızınızın artmasına yardım edecektir. İşte kodumuz:

https://gist.github.com/0ca8e3b25b812affee6b4fd8b37e8c45

Kullanacağınız fonta bağlı olarak Webconfig kısmı içerisini değiştirmeniz yeterli olacaktır.

Hız sizinle olsun 🙂

herenkeskin.com Pagespeed herenkeskin.com Pagespeed

WordPress Javascript Dosyalarını Footer’a Taşıma

WordPress alt yapılı bir siteniz varsa geliştirirken takıldığınız noktalardan birisinin de <head> etiketleri arasında yer alan javascript dosyalarının otomatik olarak footer’a taşınmamasıdır. Malesef bunu elinizle yapmanız gerekiyor.

Bu noktada devreye WordPress tarafından geliştirilmiş ve çok güzel şekilde çalışan bir fonksiyon giriyor. wp_enqueue_scripts() fonksiyonu içerisine girdiğiniz dosyaları otomatik olarak footer’a taşıma işlemini yapıyor. Ben bunu kendi kullandığım yöntem ile anlatacağım. Öncelikle bir fonksiyon oluşturarak içerisine bazı veriler girmem gerekiyor. Bu veriler ilk olarak daha önceden tanımlı bir dosya için geçerliyse onu iptal etmek ve yeniden footer’da gösterilmek üzere tanıtmak oluyor. Functions.php dosyamızı açarak aşağıdaki gibi kodlarımızı giriyoruz.

https://gist.github.com/316c7c74623c458df3338bcb7def4d88

Bu kodu kullanarak WordPress tarafından default olarak gelen ve eklentilerden kaynaklanan javascript dosyalarınızı footer’a taşıyabilirsiniz. Burda kullandığımız wp_register_script() fonksiyonu içerisine 5 parametre alır. Bunlar sırayla, (‘dosya-ismi’, ‘dosya-yolu’, ‘dizisi – default olarak array() alır – ‘, ‘versiyonu’, ‘footera taşınsın mı?’) şeklinde olmalıdır. Biz kodumuzda dosya adı ve dosya yolunu girdikten sonra 3. ve 4. parametrelerimizi boş bırakarak default değerlerini almasını sağladık ama 5. parametremize true değerini vererek kodlarımızı footer’a gönderdik.

wp_register_script() fonksiyonunun Codex’te yer alan sayfasına göz atarsanız WordPress’in içerisinde otomatik olarak tanımlı olan javascript dosyalarının isimlerini görebilirsiniz.

Bunun dışında bu kod nerede işimize yarar diye soracak olursanız, benim oldukça fazla kullandığım yapılar arasında yer alır. Bu kod sayesinde istediğimiz javascript kodunu istediğimiz sayfa veya yazıda aktif edebiliriz. Mesela ben eğer Jetpack eklentisini ve ya Contact Form eklentisini anasayfa içerisinde hiçbir yer kullanmıyor, sadece bir sayfada veya yazı içerisinde kullanıyorsam, bunların anasayfa için yüklenmesi benim sitemi yavaşlatacaktır ki bu hiç istemediğimiz bir durum. Bunun önüne geçmek için aşağıdaki gibi bir yapı kullanabiliriz.

https://gist.github.com/53599dc86815b427e17290af83bd0cc3

WordPress Tarafından Eklenen Javascript’ler

Son olarak, sitemizde yer alan eklentiler veya WordPress tarafından otomatik olarak eklenen javascript dosyalarının neler olduğunu veya adını bilmiyorsanız görünmesini istediğiniz yere

<?php global $wp_scripts; var_dump($wp_scripts); ?>

yazarak sitenizde bulunan bütün javascript dosyalarını ayrıntılı olarak görebilirsiniz. Sizin kullandığınız dosyalar ise en alt taraflarda bulunan dosyalar olacaktır. Buradan dosyanıza tanımlı kısa isimi öğrenip onu önce o ismi kullanarak tanımsız hale getirip daha sonra istediğiniz şekilde aktif edebilirsiniz. Eklentilerden kaynak dosyaları tekrar aynı isimle aktif ederseniz eklenti ile ilgili problemlerin önüne geçmiş olursunuz.

Önümüzdeki yazılarımda <head> etiketleri arasında yer alan gereksiz CSS dosyalarını kaldırmayı ve yeni dosyalar eklemeyi anlatacağım.

WordPress the_content() Yerine İstediğiniz Sayıda Parağraf Gösterme

WordPress ile çalışırken karşılaşılan sorunlardan birisi the_excerpt() fonksiyonunda sadece yazı olan içerikleri alması ile birlikte içerik içerisindeki tüm yazısal özellikleri (kalın, eğik yazı vs.) kaldırıp düz yazı haline gelmesi ve the_content() fonksiyonunda ise tüm içeriği ekrana bastırmasıdır. Bunun için çeşitli çözümler mevcut. Mesela the_excerpt() fonksiyonunu istediğiniz kelime veya harf kadar kısaltarak ekrana bastırabiliyorsunuz.

Ama eğer istediğiniz şey bu değil de the_content() fonksiyonu ile görseller dahil tüm içerikleri çekip ekrana düzenli bir şekilde bastırmak ise bunun için kullandığım kodu kullanabilirsiniz. Kod tam olarak sizin içeriğinizi </p> taglarına bölüyor ve ondan önceki içeriği alıyor ve sizin kullanımınız için bunu bir diziye atıyor. Siz de istediğiniz yerde istediğiniz şekilde kullanbiliyorsunuz.

https://gist.github.com/4bf54b3d146671dab7a5b41da86685a1

the_content() fonksiyonu yerine icerik_paragraflama() fonksiyonunu kullanırsanız artık sadece içeriğinizdeki ilk paragraf ekrana yansıyacaktır. Ayrıca paragrafımızın tüm yazısal özellikleri de içerisine dahil olarak gelecektir. Eğer siz birden fazla paragraf göstermek istiyorsanız sadece echo kısmını aşağıdaki gibi değiştirmelisiniz. (Yukardaki kodun alt tarafından ulaşabilirsiniz.)

Yukarıdaki kodumuzda yazımıza ait ilk 3 paragrafı ekrana bastırdık. Bu paragraf parçalama kodunun bir diğer faydası da eğer içeriğimizin 1. ve 5. paragraflarını göstermek istiyorsak fonksiyon dosyasında bir değişiklik ile bunu yapabilirsiniz. Hatta isterseniz kodu biraz daha komplike bir şekilde, parametre alabilen bir fonksiyon haline getirerek içerisine girdiğiniz sayı parametreleri kadar paragrafı ekrana bastırabilir hale getirebilirsiniz. Ben bana yettiği şekilde kullandım, ileri işlerimde ihtiyacım olursa o şekilde de yazıp paylaşırım tabiki. Eğer bu şekilde yapan olur ve benimle paylaşırsa ben de paylaşarak ona destek olmaya çalışırım.

WordPress ile the_content() ve the_excerpt fonksiyonları yerine kullanabileceğimiz bir fonksyion oluşturarak daha güzel bir yazı tecrübesi imkanı yakaladık. Diğer yazılarda görüşmek üzere.

Yeni tema, yeni başlangıç

Merhaba, yine yaklaşık 20 günlük bir aranın sonunda yazıyorum. Farketmişsinizdir, bu yazımı farklı bir tema üzerinden okuyorsunuz şu an. Uzun zamandır severek kullandığım “Independent Publisher” temasını kaldırarak yerine kendi kodladığım, daha minimal ve hoş görünümlü olduğunu düşündüğüm temamı aktif ettim.

Tasarımlar olarak hugogiraudel.com sitesinin tasarımını kullandım. Tasarım çok hoşuma gitti ve WordPress temasını aradım ama bulamadım. Ben de bu yüzden sıfırdan ve kendimce istediğim yerinde oynayabileceğim bir tema çıkartmak istedim ve ortaya bu tema çıktı.

Temayı yaparken sade olmasını istedim ve ne kadar fazlalık varsa kaldırdım. Yazıyı ve kategolerimi ön plana çıkartmaya çalıştım. Görsel olarak ortaya bu şekilde bir şey çıktı – ama geliştirmeye devam ediyorum –

Arkaplanda ise daha önce hiç yapmadığım kullanımlar yaptım ve siteyi hem hız yönünden hem de SEO yönünden geliştirmeye çalıştım. Şu an hala geliştirmeye devam ettiğim için maksimum verimle çalışmıyor ama geliştirme bittiği zaman tam performans alacağım.

Şu an bulunduğum sunucu bazen 12-13 saniyeye yakın yanıt verme sürelerine ulaşıyor. Bu yüzden yakın zamanda sunucumu da değiştirerek tamamen yeni bir başlangıç yapmak istiyorum.

Bu temayı yakın zamanda Github üzerinden paylaşacağım. Beğenen, kullanmak isteyen herkes istediği gibi kullanabilir, düzenleyebilir ve paylaşabilir.

Yeni temayla birlikte artık yazılarımı da bir düzene sokup hem kodsal hem de kendi yaşantımla ilgili daha fazla yazmaya çalışacağım. Önümüzdeki yazılarda görüşmek üzere.

WordPress Tüm Kategorilerin İlk Gönderisi Gösterme

Yaptığım bir iş için lazım oldu ve ben de bu soruna bir çözüm bulma arayışına girdim. Bir resim galerisi sistemi yapıyorduk ve bunun için tüm kategorileri anasayfada gösterip, o kategorilerde yer alan ilk gönderinin resmini de bu kategori için göstermemiz gerekiyordu.

Aslında mantığımız basit. Tüm kategorileri çekip bunları bir döngü içerisine alıyoruz ve gönderileri ekrana bastırıyoruz. Kodumuz şu şekilde:

https://gist.github.com/54aa8eab5fa6f32cca6c58203ade806b

Bu kategoriler arasından gösterilmesini istemediğiniz kategorileri kaldırmak için kodu aşağıdaki şekilde düzenlemeniz yeterli olacaktır. (Yukardaki kodun alt tarafından ulaşabilirsiniz.)
İşlem bu kadar. Bu kodları döngünüz içerisine eklediğiniz zaman sitenizde yer alan tüm kategorileri, ilk gönderinin görseliyle birlikte ekrana bastıracaktır.

Herhangi bir sorun olursa yorum olarak belirtin, yardımcı olmaya çalışacağım. Umarım yardımcı olmuştur.

WordPress Resim Boyutlandırma – Image Resize

WordPress‘te resmi kırparak boyutlandırma işlemini yapabilmek için çok uğraştım, araştırdım, denedim ve sonunda buldum. Bu yazıyı yazarak aynı sorunu yaşayanların acılarını dindirmek istiyorum.

Timthumb, Vt_resize, AQ Resize gibi eklenti olmayan ama benim pek randıman alamadığım kütüphaneleri de kullanabilirsiniz ancak WordPress’in kendi özelliğini kullanmak yerine bunları tercih edeceğinizi düşünmüyorum.

Website optimizasyonu için resimler oldukça önemli yer kaplıyor. Google Pagespeed üzerinden sitenizin hız kontrolünü yaptığınız zaman resim sıkıştırma ve boyutlandırma için çok büyük yüzdelik kısım ayrılıyor. Üzerinde çalıştığım bir proje için ihtiyaç duyduğum resim boyutlandırma işleminin nasıl olduğunu size açıklamaya çalışacağım.

Kodun temelinde WordPress’in 3.5.0 sürümünde eklenen WP_Image_Editor sınıfı yer alıyor. Bu sınıf yardımıyla oluşturacağımız kod ile öne çıkarılan görselimizi alıp, tekrar boyutlandırma işleminin ardından – istersek farklı bir isimle bile olabilecek şekilde – yeniden kayıt ederek o resmi kullanacağız.

Ekleyeceğim kod içerisindeki yorum satırları sayesinde tüm satırların anlamını açıklamış olacağım.

https://gist.github.com/4b6492f908801c75c6fa9b0f42da7836

Bu kodu (Yukardaki kodda 1. kısım alanı) while döngüsü içerisinde bir yere yazdıktan sonra boyutlandırılmış öne çıkarılan görselinizi göstermek için

<img src="<?php echo $yeniResimAdres; ?>" width="YENİ GENİŞLİK" height="YENİ YÜKSEKLİK" />

kodunu kullanmanız gerekmektedir.

Hepimiz biliyoruz ki bu kodu sadece bir yerde kullanmayacağız, farklı farklı yerlerde kullanmamız gerekecek ve her döngünün içerisine bu kodu yazmamız döngünün şişmesini, sunucunun CPU’sunun zorlanmasına sebep olacak. O yüzden bunu her döngüde ayrı ayrı kullanmak yerine direk olarak functions.php üzerinden bir fonksiyon oluşturarak kısa bir şekilde yapmak daha mantıklı, hızlı ve kullanışlı bir çözüm olacaktır. Onun için gerekli kodlarımız (Yukardaki kodda 2. kısım alanı)

Resimin ekleneceği while döngüsü içerisine
(Yukardaki kodda 3. kısım alanı)
kodunu ekleyerek boyutlandırılmış resminizi gösterebilirsiniz.

Kodlar içerisinde açıklamalarda belirttiğim kısımları düzenleyebilirsiniz. Mesela ben yeni kayıt edilecek resimlerimde ön ek bulunmasını istemediğim için “onek_” kodunu silerek işlem yaptım. Bunun dışında bu kodu geliştirmek isterseniz WordPress Codex sayfasında yer alan WP_Image_Editor sınıfını ve wp_get_image_editor fonksiyonunu inceleyebilirsiniz.

Eksikleri, yanlışları veya sorunlarınızı yorum kısmından belirtirseniz yardımcı olmaya çalışırım.

Google Fonts Türkçe Karakter Sorunu Çözümü

Geliştirmekte olduğunuz projelerde dış görünüş için font en önemli etkenlerden biridir. Eğer Türkçe içerik barındıracak bir proje geliştiriyorsanız kullanacağınız fontun Türkçe karakterleri desteklemesi önemlidir.

Tema kodlarken kullandığım fontları genelde Google Fonts üzerinden çekiyorum ve bu bazı Türkçe karakter sorunlarına yol açıyor. Bu sorunu ortadan kaldırmak çok kolay ama öncelikle ekleyeceğiniz fontun içerisinde Türkçe karakter desteği olması lazım. Aksi taktirde, doğal olarak desteklemeyecektir. Evet çözüme gelelim.

Fontu seçtikten sonra “Choose the character sets you want” seçeneğinin içerisinde yer alan Latin Extended (latin-ext) checkbox’ını seçili hale getirdikten sonra kodunuzu sayfaya dahil etmeniz gerekiyor. Bu kadardı.

Çok basit bir işlem ve hayat kurtatıyor.