Diyet, Spor ve Mental Sağlık

Diyet, Spor ve Mental Sağlık Hakkında Kaynaklar

Bu yazıda "Diyet & Spor, Mental Sağlık" konularında takip edebileceğiniz alanında uzman kişileri, faydalı uygulama ve araçları paylaşacağım. Paylaştığım kişiler genellikle üniversite hocalarıdır, yani anlattıklarını bilimsel araştırmalara dayandıran ve bizzat bunları uygulayan uzmanlardır.


DİYET ve SPOR:

Dr. Mike Israetel'e ait kanalda doğru ve sürdürülebilir diyet ve spor konularında oldukça faydalı bilgiler bulabilirsiniz.

https://www.youtube.com/@RenaissancePeriodization

Kanaldaki bu playlist'i sağlıklı diyet konusunda izlemenizi öneririm. Özellikle 3. videoda adım adım kalori hesabınıza göre bir yöntem verilmektedir.

https://www.youtube.com/playlist?list=PLyqKj7LwU2RulAjHczohbx5OyJQ8TaFM0

Listedeki 3. videoyu izlediğinizde günlük makro kalorinizi hesaplamanız gerektiğini anlayacaksınız. Bu hesabı aşağıdaki formdan yapabilirsiniz:


MENTAL SAĞLIK:

Stanford Tıp Fakültesi'nde nörobilimci ve nörobiyoloji ve oftalmoloji profesörü olan Dr. Andrew Huberman'a ait olan kanalda; beynimizin ve vücudumuzun organlarıyla olan bağlantılarının algılarımızı, davranışlarımızı ve sağlığımızı nasıl kontrol ettiği, sinir sistemimizin nasıl çalıştığı ve nöroloji alanıyla ilgili faydalı bilgileri bulabilirsiniz.

https://www.youtube.com/@hubermanlab

...

Wordpress - Popup Maker Eklentisi

 

Wordpress - Popup Maker Eklentisi (AB Çerez Uyarısı)

"Popup Maker" web sitenizde popup oluşturmak, e-posta aboneliği vb açılır pencere işlemleri için kullanabileceğiniz bir eklentidir. Ben genelde "Çerezleri Kullanıyoruz" uyarısı için kullanıyorum. Fakat Covid uyarısı, e-ticaret duyuruları vb. farklı açılır pencere ihtiyaçlarınız için kullanabilirsiniz. Şimdi aşağıdaki gibi AB çerez uyarısı popup uyarısının nasıl eklenebileceğini anlatmaya çalışayım.


1. "Popup Maker" ismi ile aratarak eklentiyi kurun. Üreticisi "Popup Maker".
2. Popup Maker menüsünden Create Popup seçeneği ile yeni bir popup penceresi oluşturun.
3. Üstteki popup başlık kutularının her ikisine de "Çerezleri Kullanıyoruz" gibi bir başlık yazın.
4. Alttaki metin alanına ise "Web sitemizi kullanarak çerezlere izin vermektesiniz." gibi bir içerik girebilirsiniz. Çerezler kısmına çerez politikası veya gizlilik politikası gibi ilgili sayfaya link verebilirsiniz.
5. Popup settings bölümünde Triggers ayarlarındaki "Add New Trigger" butonuna tıklayın. "Time Delay / Auto Open" seçeneğini seçip alttaki cookie ile alakalı kutudan "On Popup Close" seçin. Add butonuna tıklayın, ikinci ekranda triggerin ne zaman tetikleneceğini seçin. 500ms olarak kalabilir. Böylece Çerez Popup Uyarısı site yüklendikten 500ms sonra açılacak ve ziyaretçi popup penceresini kapatınca 1 ay süreyle tekrar görünmeyecektir.




6. Popup settings bölümünde Display ayarlarından; Appearance sekmesinden "Light Box" seçeneğini, Size sekmesinden "Micro - 20%" seçeneğini ve Max-width değerini 60%, Position sekmesinden "Bottom Left" 10px 10px ve "Fixed Position" seçeneğini, Advanced sekmesinden "Disable Overlay" ve "Stackable" seçeneklerini seçerek ilerleyebilirsiniz.
7. Popup settings bölümünde Close ayarlarındaki close text kutusuna "✕" bu karakteri kopyala/yapıştır yapabilirsiniz. Bu normal X karakterinden farklıdır ve kapat butonuna daha iyi durmaktadır.
8. Yayınla butonuna tıklayarak popup'ı aktif edebilirsiniz.
9. Aşağıdaki css kodlarını ekleyerek kutu, link ve kapat butonu gibi popup unsurlarının görünümü üzerinde değişiklikler yapabilirsiniz.
/*cerez popup maker()*/
.pum-theme-lightbox .pum-container {
    border: 3px solid #000 !important;
}
.pum-theme-lightbox .pum-container a {
    color: #000;
    font-weight: 300;
}
.pum-content + .pum-close, .pum-theme-lightbox .pum-content + .pum-close {
    font-size: 13px !important;
    font-weight: 900 !important;
}
/*cerez popup maker*/
10. Aşağıdaki gibi tek satırlık farklı bir görüntü elde etmek için önce Popup settings / Display / Size sekmesine gelin ve "Auto" seçeneğini belirleyin. Daha sonra aşağıdaki css kodlarını ekleyin.


/*cerez popup maker()*/
.pum-theme-lightbox .pum-container {
    border: 0 !important;
    box-shadow: 0px 0px 10px 0px rgba(2, 2, 2, .3) !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    padding: 12px 17px !important;
}
.pum-theme-lightbox .pum-content * {
    color: #fff;
    font-weight: 200;
}
.pum-theme-lightbox .pum-container a {
    font-weight: 300;
}
.pum-content + .pum-close, .pum-theme-lightbox .pum-content + .pum-close {
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: 0px 0px 6px 1px rgba(2, 2, 2, .3) !important;
    border: 2px solid rgba(0, 0, 0, 0.9) !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: #000 !important;
}
.pum-title {
    display: none;
}
@media (max-width: 767px) {
    .pum-theme-lightbox .pum-container {
        width: 56%;
        right: 18px;
        left: auto !important;
        padding: 8px 12px !important;
    }
    .pum-theme-lightbox .pum-content * {
        font-size: 15.2px;
    }
}
/*cerez popup maker*/


Wordpress - GTranslate Google Çeviri Eklentisi

 

Wordpress - GTranslate by Translate AI Multilingual Solutions

"GTranslate" eklentisi Translate AI Multilingual Solutions tarafından geliştirilen, wordpress dil çeviri eklentisidir. Ücretsiz sürümü dahi birçok özellik içermektedir. İngilizce veya başka dilleri sitenize eklemek istiyorsanız bulut çevirme özelliği ile direk tarayıcı üzerinden sitenizin dilini değiştirebilen bir eklentidir. Böylece sayfa içeriklerinizi tek tek çevirmek gibi zahmetli bir işten kurtulursunuz. Bazı projelerde bu şekilde olan translate işlemleri kolay olduğu için tercih sebebidir. Aşağıda kurulum ve ayarlarına değinmeye çalıştım.

1. "GTranslate" ismi ile aratarak eklentiyi kurun. Üreticisi "Translate AI Multilingual Solutions".
2. Ayarlar menüsü altındaki GTranslate'e tıklayarak ayar sayfasını açın. Ben aşağıdaki görseldeki gibi bir ayar yaptım fakat widget görünümü, ülkelerin isimleri, hangi ülkelerin görüneceği gibi istediğiniz kısımları değiştirip size uygun hale getirebilirsiniz.



3. Burada ben popup görünümü daha hoş durduğu için onu tercih ettim. Ayrıca tıklayınca ülke isimleri ayrı bir popup'da açılması daha az karmaşıklığa neden oluyor diye düşündüm. Fakat 2-3 gibi az dil seçeneği gösterecekseniz açılır kutu şeklindeki görünümler daha iyi olabilir. Popup görünümünde sadece bayrak görünmesini tercih ettim. Popup görünümü için eklediğim özel css kodları aşağıdadır.
.gtranslate_wrapper * {
    font-size: 14px !important;
}
.gtranslate_wrapper a.gt_switcher-popup > span {
    display: none;
}
.gtranslate_wrapper a.glink.nturl.gt-current-lang > span {
    font-weight: 800;
}
@media (max-width: 767px) {
    .gtranslate_wrapper a.gt_switcher-popup > img {
        height: 26px;
        width: 26px;
    }
}
4. Eğer çeviri sırasında "Hakkımızda -> about us" gibi büyük küçük harf sıkıntıları çıkıyorsa; bu durumun oluştuğu element'e "text-transform: capitalize;" veya "text-transform: uppercase;" gibi css kodu ekleyebilirsiniz.
5. Örneğin adresler gibi bazı alanların çevrilmesini istemezsiniz "Okul Sokak -> School Street" gibi. Bu durumda bu adres metninin yazıldığı kutulara "notranslate" css sınıfını ekleyin. Böylece bu sınıfa sahip html elementleri çevrilmeyecektir.

Wordpress Child Theme (Çocuk Tema) Nedir & Nasıl Oluşturulur?

 

Wordpress Child Theme (Çocuk Tema) Nedir & Nasıl Oluşturulur?

Child Theme Hakkında Sorular


>> Child theme (çocuk tema) nedir?

WordPress üzerinde kurulu ana temaya bağlı çalışan alt temalardır. Temanız üzerinde özelleştirmeler yapmak istiyorsanız çocuk tema (child theme) oluşturarak kök yani ebeveyn tema (parent theme) dosyaları üzerinde bir değişiklik yapmadan bunu gerçekleştirebilirsiniz.
>> Neden child tema kullanmalıyım?
Kısa cevabı tema üzerinde özelleştirmeler yapmaktır. Child tema kullanmanın artısı; Parent temayı güncelleseniz bile özelleştirmelerinizin korunmasıdır. Eğer parent temayı tamamen özelleştirmeyecekseniz child tema kullanmak en iyi yöntem diyebilirim. Fakat yapacağınız özelleştirmeler çok fazla ise (parent temanın birçok yerine dokunacaksanız) bu durumda tema kök dosyaları üzerinde değişiklik yapmak daha mantıklı olacaktır.
>> Child tema üzerinde örneğin header.php dosyası eklersek Parent temadaki header.php geçersiz mi kalır? Hayır ise hangisi önce çalıştırılır? Style.css dosyası için de aynısı geçerli mi?
Hayır geçersiz kalmaz, her iki dosya da yürütülür. İlk olarak child tema header.php dosyası çalıştırılır daha sonra parent temanın header.php dosyası çalıştırılır. 
Fakat style.css için aynı durum geçerli değil, parent temanın style.css dosyası geçersiz hale gelir. Bu durumda parent temanın style.css dosyasını child temada içe aktarmak gereklidir (nasıl yapılacağını aşağıdaki 5. maddede inceleyebilirsiniz).

Adım Adım Child Theme Oluşturma


1. Child Tema Klasörünü Oluşturun: 
WordPress sitenizin kök dizinine bir Child Tema klasörü oluşturun. Klasör adını belirleyin ve parent temanızın adını içerdiğinden emin olun. Örneğin, eğer "Royal Elementor Kit" temasını kullanıyorsanız, Child Tema klasörünü "royal-elementor-kit-child" gibi adlandırabilirsiniz. Yani parent tema klasör adının aynısını yazıp, sonuna "-child" ekleyin.




2. Child Tema Klasöründe style.css Dosyasını Oluşturun: 
Child tema klasörünün içine bir style.css dosyası oluşturun. İçerisine aşağıdaki kodları ekleyerek tema adınıza göre düzenleyin. Bu dosya Child temanızı tanımlayacak ve Parent temayı belirtecektir. Örneğin:
/*
Theme Name: Royal Elementor Kit Child
Template: royal-elementor-kit  // Parent temanın klasör adı
*/
Tema adını parent tema adının sonuna Child gelecek şekilde yazabilirsiniz (mucburi değildir, isterseniz farklı bir isim de yazabilirsiniz). 
Template kısmına ise parent temanın klasör adı nasıl geçiyorsa aynısını yazmanız gerekiyor.

2.1. Child Tema style.css Dosyasını Versiyonlama:
style.css içerisine yazacağınız farklı tema tanıtım bilgileri mevcuttur. Bunlar mecburi değildir. Aşağıdaki örnekte bazı ek bilgileri görebilirsiniz. Burada version kısmı önemlidir. Çünkü style.css içinde değişiklik yaptığınızda versiyonu değiştirmezseniz tarayıcı cache bellekteki dosyayı okur ve bu durumda değişiklikleri göremezsiniz. Her zaman olmasada css değişiklikleriniz çoğalınca bu versiyonu arttırmanız iyi olur. Versiyon numarasını 3 haneli yazmak bu anlamda iyi olabilir.
/*
Theme Name: Royal Elementor Kit Child
Theme URI: http://www.ayhankesicioglu.com
Template: royal-elementor-kit
Description: Royal Elementor Kit Child Theme
Author: Ayhan Kesicioglu
Author URI: http://www.ayhankesicioglu.com
Version: 1.0.1
*/

3. Child Temaya Ait Bir Görsel Yükleyin (Opsiyonel):
WP yönetim panelinden Görünüm/Temalar menüsüne girdiğinizde, yüklenen temaların bir görseli olduğunu görebilirsiniz. Bu görsel yüklenmezse boş olarak görünür. Child tema için screenshot.png (veya screenshot.jpg) isimli 1200x900 px bir resim oluşturup child tema klasörüne yükleyebilirsiniz. Böylece child temanızı temsil eden bir görseli olacaktır.

4. Child Tema Klasöründe functions.php Dosyası Oluşturun (Opsiyonel):
Bu dosya çeşitli özelleştirme kodlarını ekleyeceğiniz kısımdır ve önemlidir. Fakat bu dosya olmadan da sadece style.css ile Child temayı etkinleştirmek mümkündür.

-------
Devam etmeden önce aşağıda bazı kodlarda geçecek olan sistem metodlarını tanımak faydalı olacaktır.

get_template_directory() --> Parent temanın klasör yolu:
/home/public_html/wp-content/themes/royal-elementor-kit
get_template_directory_uri() --> Parent temanın url'si:
https://example.com/wp-content/themes/royal-elementor-kit
get_stylesheet_directory() --> Child temanın klasör yolu:
/home/public_html/wp-content/themes/royal-elementor-kit-child
get_stylesheet_directory_uri() --> Child temanın url'si:
https://example.com/wp-content/themes/royal-elementor-kit-child
-------

5. Parent Temanın style.css Dosyası Child Tema İçine Nasıl Aktarılır (Opsiyonel):
Child temada style.css dosyası eklediğimizde, Parent temanın style.css  dosyası geçersiz hale gelir. Eğer parent temanın style.css dosyasını geçerli kılıp onun üzerine bazı değişiklikler eklemek niyetindeyseniz; bu durumda Parent temanın style.css dosyasını içe aktarmanız gereklidir. Bu çok basittir. Child temanın functions.php dosyası (yoksa oluşturun) içerisine aşağıdaki kodları ekleyerek içeri aktarmış olursunuz:
<?php
function enqueue_parent_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
?>

6. Child Temaya Özel Javascript (custom.js) Nasıl Eklenir (Opsiyonel):
Bu işlemi dilerseniz Simple Custom CSS and JS (by SilkyPress) eklentisi veya benzeri bir eklenti ile yapabilirsiniz. Veya child tema için daha uygun bir yöntem olarak bir custom.js dosyası oluşturup, bunu child tema içine aktarırsınız. Ben burada ikinci yöntem ile devam edeceğim. Öncelikle tema klasörünüzün içinde js isimli bir klasör ve içine de custom.js isimli bir dosya oluşturun. 
Örnek olarak aşağıdaki kodları ekleyerek custom.js dosyanızı oluşturabilirsiniz:
jQuery(document).ready(function($) {
    // Add custom JavaScript code here
    // $('p').css('color', 'red');
});
Sonra 5.adımdakine benzer şekilde aşağıdaki kodu functions.php dosyanızın içine ekleyin:
function custom_js_enqueue() {
    wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'custom_js_enqueue');
Buradaki array('jquery') ifadesi ile eklediğiniz custom.js dosyasının jquery den sonra çalışmasını istediğinizi belirtmiş olursunuz. 1.0 ile de custom.js dosyasını versiyonlamış olursunuz, böylece tarayıcı bellekteki eski dosyayı kullanıcıya sunmaz.

7. Child Temayı Aktif Hale Getirin:
WP yönetim panelinden Görünüm/Temalar menüsüne girin. Burada eklediğiniz Child tema üzerine gelip Etkinleştir butonuna tıklayın.

Artık Child temanız oluştu ve aktif hale getirildi. Bundan sonra child tema dosyalarınız üzerinde istediğiniz özelleştirmeleri eklemeye başlayabilirsiniz. Diyelim footer.php dosyası üzerinde değişiklik yapmak istiyorsunuz. Bu durumda child temada (parent temada neredeyse oraya) footer.php dosyasını oluşturun ve içine özelleştirme kodlarınızı ekleyin. Bu şekilde tüm özelleştireceğiniz dosyaları child tema içine ekleyebilirsiniz. Unutmayın sistem önce child temanın dosyasını sonra parent temanın dosyasını çalıştırır (style.css hariç, ayrıntılı bilgi yukarıdaki sorular kısmındadır).

BONUS:
5. ve 6. maddelerde bahsettiğim dosyaları sürekli olarak manuel versiyonlama yapmak uğraştırıcı bir iş. Bu dosyaları üzerinde her değişiklik yaptığımızda versiyonu değişecek şekilde ayarlamak işimizi çok daha kolaylaştıracaktır. Böylece versiyon otomatik değişecek ve bizim manuel olarak ilerletmemize gerek kalmayacaktır. 
Bunun için önce child tema içine /css/custom.css dosyasını oluşturun ve child temanın style.css dosyasına eklediklerinizi bu dosyaya taşıyın. 
Bu şekilde otomatik versiyonlanmanın ayarlandığı şekliyle child temaya ait tüm dosyaların son hali aşağıdaki şekilde olacaktır:

style.css
/*
Theme Name: Royal Elementor Kit Child
Theme URI: http://www.ayhankesicioglu.com
Template: royal-elementor-kit
Description: Royal Elementor Kit Child Theme
Author: Ayhan Kesicioglu
Author URI: http://www.ayhankesicioglu.com
Version: 1.0.1
*/

/css/custom.css
/*your custom css*/
body {
    font-size: 12px;
}

/js/custom.js
jQuery(document).ready(function($) {
    // Add custom JavaScript code here
    // $('p').css('color', 'red');
});

functions.php
<?php

// dosyanin degistirilme tarihini 10 basamakli sayi olarak dondurur: 1234567890 gibi
function get_file_version($file) {
    $mtime = filemtime($file);
    if ($mtime === false) {
        return '';
    } else {
        return $mtime;
    }
}

// css dosyalarini ice aktar
function enqueue_parent_styles() {
    // parent tema css dosyasini ice aktar
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    // child tema custom.css dosyasini ice aktar (otomatik versiyonlama)
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '/css/custom.css', array(), get_file_version(get_stylesheet_directory() . '/css/custom.css') );
}
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');

// js dosyalarini ice aktar
function custom_js_enqueue() {
    // child tema custom.js dosyasini ice aktar (otomatik versiyonlama)
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), get_file_version(get_stylesheet_directory() . '/js/custom.js'), true );
}
add_action('wp_enqueue_scripts', 'custom_js_enqueue');

?>

Wordpress & OpenCart Kaynak Dosyalarını Koruyarak Üzerinde Değişiklik Yapmak

 

OpenCart ve WordPress kaynak dosyalarını değiştirmeden kodlar üzerinde değişiklik yapmak?

OpenCart ve WordPress gibi açık kaynaklı platformlarda, kaynak dosyalarını değiştirmeden kodlar üzerinde değişiklik yapmak için çeşitli yöntemler bulunmaktadır. İşte her iki platform için bu amaçla kullanabileceğiniz yöntemler.


OpenCart için:


1. vQmod kullanmak: vQmod, OpenCart için popüler bir eklentidir ve kaynak dosyalarını değiştirmeden kodları değiştirmenizi sağlar. vQmod ile, özel değişikliklerinizi XML dosyaları aracılığıyla uygulayabilirsiniz. Bu XML dosyaları, mevcut OpenCart dosyalarının belirli kısımlarını hedefleyerek değişikliklerinizi yapar. vQmod eklentisini OpenCart'a kurup kullanmayı öğrenmelisiniz.

2. Özel Temalar ve Eklentiler: OpenCart, özel temalar ve eklentiler oluşturmanıza izin verir. Kaynak dosyalarını değiştirmeden, bu temaları ve eklentileri kullanarak özel kodlarınızı ekleyebilirsiniz. Bu, OpenCart'ın güncellemelerini uygularken değişikliklerinizin korunmasına yardımcı olur.


WordPress için:


1. Child Temalar kullanmak: WordPress'te, ana temayı değiştirmeden özel değişiklikler yapmanıza olanak tanıyan "Child Theme" (Çocuk Tema) kullanabilirsiniz. Child Theme, ana temanın bir alt temasıdır ve ana temadan miras alır. Child Theme'i kullanarak, temanın stil dosyalarını, şablonlarını ve işlevlerini değiştirebilirsiniz. Bu, ana temanın güncellenmesi durumunda değişikliklerinizi korumanıza yardımcı olur.

2. Filtreler ve Hooks kullanmak: WordPress, kod üzerinde değişiklik yapmadan temanızın işlevselliğini özelleştirmenizi sağlayan birçok filtre ve hook sunar. Bu filtreler ve hook'ları kullanarak, mevcut işlevleri ve şablonları değiştirmeden özel işlevselliği ekleyebilir veya değiştirebilirsiniz.

3. Özel Eklentiler kullanmak: İhtiyacınıza göre özel eklentiler oluşturabilirsiniz. Bu eklentiler, WordPress'in işlevselliğini genişletebilir ve mevcut tema veya eklentileri etkilemeden özel kodlarınızı uygulamanıza yardımcı olabilir.


Bu yöntemler kaynak dosyaları değiştirmediği için, güncellemeler ve bakım işlemleri sırasında özelliştirmek için eklediğiniz kodlarınızın korunmasını sağlayacaktır.

Wordpress - Fluent SMTP Ayarları (Gmail Workspace, Yerel Mail Server, ...)

 

Wordpress - Fluent SMTP Kurulumu & Ayarları (Gmail Gsuite Workspace, Yerel Mail Server, ...)

Wordpress sitenizin sağlıklı bir şekilde mail gönderebilmesi için smtp yöntemini öneririm. SMTP yöntemi ile mail gönderebilmek için de "Fluent SMTP" eklentisi bence gayet başarılı (test ettim). Bu eklenti "FluentSMTP & WPManageNinja Team" tarafından geliştirilmiştir. 

Eklentiyi kurun ve ayarlarına girin. İlk ekranda sizden mail sağlayıcınızı seçmenizi isteyecektir. Seçtikten sonra gerekli ayarları yapıp kurulumu tamamlamış olacaksınız. Ben aşağıda deneyimlediğim yöntemleri ekliyorum:

Other SMTP (Kendi Web Sitenize Ait Yerel Mail Hesabınız İçin)

info@firmaniz.com gibi (gmail veya yandex gibi bir yere bağlı olmayan) kendi domain adresinizle biten mail hesabınızı kullanmak istiyorsanız bu aşamaları uygulayın.

  1. Fluent SMTP ilk ekranından "Other SMTP" seçeneğini seçerek başlayın.
  2. "From Email" kutusuna eklemek istediğiniz hesabın mail adresini yazın: info@firmaniz.com
  3. "From Name" kutusuna mail gönderen adı olarak görünmesini istediğiniz adı girin: Firma Adı
  4. Önerilen kutucuklar işaretlenmiştir öyle kalsın, diğer kutucukları işaretlemeyin.
  5. "SMTP Host" kutusuna mail ayarlarınızdan aldığınız Giden Sunucu bilgisini yazın: mail.firmaniz.com
  6. "SMTP Port" kutusuna mail ayarlarınızdan aldığınız Giden Sunucu Port bilgisini yazın: 465
  7. "Encryption" kısmından port olarak 465 girmişseniz SSL'i seçin. Diğer portlar için TLS'yi seçin.
  8. "SMTP Username" kutusuna mail adresinizi yazın: info@firmaniz.com
  9. "SMTP Password" kutusuna mail adresinizin şifresini yazın: ***
  10. "Save Connection Settings" butonuna tıklayarak işlemi bitirin.


Gmail (Google Workspace)

firmaniz@gmail.com veya google workspace'e kayıtlı info@firmaniz.com gibi bir mail adresiniz varsa smtp ayarlarını aşağıdaki şekilde uygulayın.

  1. Fluent SMTP ilk ekranından "Gmail - Google Workspace" seçeneğini seçerek başlayın.
  2. "From Email" kutusuna eklemek istediğiniz hesabın mail adresini yazın: info@firmaniz.com
  3. "From Name" kutusuna mail gönderen adı olarak görünmesini istediğiniz adı girin: Web Sitem
  4. Önerilen kutucuklar işaretlenmiştir öyle kalsın, diğer kutucukları işaretlemeyin.
  5. "Application Client ID" ve "Application Client Secret" bilgilerini Google Workspace panelinizden temin edeceksiniz. Google Workspace panelinizden yeni bir proje ve gmail api'si oluşturarak bunu yapıyorsunuz. Fluent SMTP kendi sitesinde bu konuyu resimli olarak güzelce anlatmış. Bu sayfadaki işlemleri sırasıyla uygulayarak ID ve Secret bilgilerini alabilirsiniz.
  6. ID ve Secret bilgilerini girdikten sonra “Authenticate with Google & Get Access Token” butonuna tıklayın. Çıkan pencereden gmail hesabınızı seçip devam edin ve gelen token'ı kopyalayın.
  7. Bu token'ı Fluent SMTP ekranında altta çıkan "Access Token" kutusuna girin. "Save Connection Settings" butonuna tıklayarak işlemi bitirin.
SMTP ayarlarını başarıyla tamamladıysanız artık web sitenizin iletişim formu üzerinden deneme yapabilirsiniz. Başka bir işleme gerek yoktur. Artık web sitenizden maillerin gitmesi beklenir.

Wordpress - Contact Form 7 Kurulumu

 

Wordpress - Contact Form 7 Kurulumu

Contact Form 7, wordpress için en çok kullanılan ve kullanımı basit bir iletişim formu eklentisidir. Aşağıdaki şekilde ayarlarını yaparak iletişim formunuzu oluşturabilirsiniz. Bu formun kısa kodunu da iletişim formunuz hangi sayfaya eklenecek ise o kısma eklemeniz yeterli olacaktır.

Öncelikle forma kısa bir ad verin: CF7 gibi.

Form Sekmesi:

<label> Adınız
    [text* your-name autocomplete:name] </label>

<label> E-posta adresiniz
    [email* your-email autocomplete:email] </label>

<label> Konu
    [text* your-subject] </label>

<label> İletiniz (tercihe bağlı)
    [textarea your-message] </label>

[submit "Gönder"]

Posta Sekmesi:

Posta
Kime:
info@websiteniz.com
Kimden:
info@websiteniz.com
Konu:
Web Site Adınız - İletişim Formu - [your-name]
Ek başlıklar:
Reply-To: [your-email]
İleti gövdesi:
Kimden: [your-name]
E-Posta: [your-email]

Mesaj:
[your-message]

-- 
Bu e-posta websiteniz.com iletişim formu doldurularak gönderildi.

Eğer iletişim formunu dolduran ziyaretçiye de aynı mailin gitmesini istiyorsanız "Posta (2) kullan" seçeneğini işaretleyip aşağıdaki ayarları uygulayın.

Posta (2)*

* Uyarı: Posta 2 kısmı ziyaretçinin yazdığı e-mail adresine mesaj göndereceği için [your-email] siteniz üzerinden spam mail göndermek isteyen kişilere bir açık nokta vermiş olursunuz. Eğer posta (2) yi açacaksanız Akismet reCAPTCHA veya benzeri spam koruması kullanmanızı öneririm!

Kime:
[your-email]
Kimden:
info@websiteniz.com
Konu:
Web Site Adınız - İletişim Formu - [your-name]
Ek başlıklar:
Reply-To: [_site_admin_email]
İleti gövdesi:
Kimden: [your-name]
E-Posta: [your-email]

Mesaj:
[your-message]

-- 
Bu e-posta websiteniz.com iletişim formu doldurularak gönderildi.

"HTML içerik türünü kullan" kutucuklarını her ikisini de işaretleyin.

Mesajlar Sekmesi:

Aşağıdaki mesajları sırayla girebilirsiniz.
Mesajınız gönderildi. Ekibimiz en kısa sürede size dönüş yapacaktır. Teşekkür ederiz.
Mesajınız gönderilirken bir hata oluştu. Lütfen daha sonra tekrar deneyin.
Bir veya daha fazla alanda hata bulundu. Lütfen kontrol edin ve tekrar deneyin.
Mesajınız gönderilirken bir hata oluştu. Lütfen daha sonra tekrar deneyin.
Mesajınızı göndermeden önce şartları ve koşulları kabul etmeniz gerekmektedir.
Boş bırakılamaz!
Çok uzun!
Çok kısa!
Dosya yüklenirken bilinmeyen bir hata oluştu.
Bu dosya türünü yükleme iznine sahip değilsiniz.
Dosya çok büyük.
Dosya yüklenirken hata meydana geldi.
Tarih formatı yanlış.
Tarih, izin verilen en erken tarihten önce olamaz.
Tarih, izin verilen son tarihi geçemez.
Sayı biçimi geçersiz.
İzin verilen minimum sayıdan daha küçük.
İzin verilen maksimum sayıdan daha büyük.
Cevap doğru değil.
E-posta adresi geçersiz.
URL geçersiz.
Telefon numarası geçersiz.

Bu ayarlar yeterlidir. Formu kaydedebilirsiniz. Üstte mavi bur kutu içinde bu formun kısa kodu yer almaktadır. Bu kodu kopyalayıp iletişim formunuz hangi sayfaya eklenecek ise o kısma eklemeniz yeterli olacaktır.

Eğer Elementor editörünü kullanıyorsanız:
  • Formu ekleyeceğiniz sayfayı Elementor ile açın.
  • Bileşenlerden Form Styler bileşenini sayfada formun görünmesini istediğiniz yere ekleyin.
  • Form Styler bileşeninin ayarlarında bulunan Form Source kutusundan Contact Form 7'yi seçin.
  • Select Template kutusundan da hangi formu ekleyecekseniz onun ismini seçin. Formunuz ekranda belirecektir. Artık varsa biçimsel ayarlarınızı yapıp yayınlayabilirsiniz.
* Formun biçim ayarlarını elementor veya css üzerinden değiştirebilirsiniz.
* Formu ekledik ve sıra geldi SMTP ayarlarını yani mail gönderimi yapılacak hesabın web sitesine eklenmesi ve mail ayarlarının yapılması işlemine. Bu iş için "Fluent SMTP" eklentisini öneririm. Geliştiricisi; "FluentSMTP & WPManageNinja Team" olan bu eklenti ile mail gönderim işlemlerinizi yapabilirsiniz. Bu ayarları yapmadan form eklentisi bir işe yaramayacaktır, çünkü mail bildirimi olmayacak. Fluent SMTP ayarlarını nasıl yapacağınızı bu yazımdan okuyabilirsiniz.