WordPress siteme kodla basit bir anket eklemenin en kolay yolu nedir?

WordPress, dünya genelinde milyonlarca web sitesinin altyapısını oluşturan esnek ve güçlü bir içerik yönetim sistemidir. Kullanıcılarınızla etkileşime geçmek, onların görüşlerini almak veya basit bir geri bildirim toplamak için anketler harika bir araçtır. Çoğu zaman aklımıza ilk olarak bir eklenti yüklemek gelse de, sitemizin WordPress sitesi performansı ve AdSense politikalarına uygunluğu açısından, kodla basit bir anket oluşturmak çok daha avantajlı bir yaklaşım olabilir. Bu makalede, WordPress sitenize eklentilere bağımlı kalmadan, temel web teknolojileri (HTML, CSS, JavaScript) kullanarak nasıl basit bir anket ekleyebileceğinizin en kolay yolunu adım adım ve kavramsal olarak açıklayacağız.

Neden Eklenti Değil de Kod Kullanmalı?

WordPress ekosistemi, her türlü ihtiyaca yönelik binlerce eklenti sunar. Anket eklentileri de bu kategorinin popüler üyelerindendir. Ancak, her eklenti beraberinde ek yük getirir: daha fazla HTTP isteği, veritabanı sorgusu, potansiyel güvenlik açıkları ve sitenizin genel hızında yavaşlamalar. Bir SEO editörü olarak, Google AdSense politikalarıyla uyumlu, hızlı ve kullanıcı deneyimi odaklı bir web sitesinin önemini biliyorum. Ağır eklentiler, sayfa yükleme sürelerini uzatarak hem kullanıcıları rahatsız edebilir hem de AdSense reklamlarının optimal performansını etkileyebilir.
Kodla oluşturulan basit bir anket ise:
* Hafiftir: Yalnızca ihtiyacınız olan kodu kullanırsınız, gereksiz özelliklerin yükünü taşımazsınız.
* Hızlıdır: Daha az JavaScript ve CSS dosyası yüklenir, bu da sayfa hızınızı doğrudan artırır.
* Güvenlidir: Kendi kodunuzu kontrol edersiniz, üçüncü taraf eklentilerinden kaynaklanan potansiyel güvenlik açıklarını minimize edersiniz.
* Özelleştirilebilirdir: Anketin her detayını (görünüm, işlevsellik, veri işleme) tamamen kendi ihtiyaçlarınıza göre şekillendirebilirsiniz. Bu, markanızın estetiğine mükemmel uyum sağlayan bir deneyim yaratmanızı sağlar.
* AdSense Dostudur: Daha hızlı yüklenen sayfalar ve daha temiz bir kullanıcı arayüzü, AdSense reklamlarının daha etkili bir şekilde sunulmasına yardımcı olur ve reklam politikalarıyla uyumlu kalmanızı kolaylaştırır.
Basit bir anketten kastımız, çok karmaşık mantıklar içermeyen, birkaç sorulu ve genellikle tek seçenekli, çok seçenekli veya kısa metin girişli anketlerdir. Bu tür anketler için ağır bir eklenti kullanmak, tabiri caizse bir serçeyi vurmak için top kullanmaya benzer.

Basit Bir Anketin Temel Bileşenleri

Bir JavaScript anketi oluşturmak için üç temel web teknolojisine ihtiyacımız var:
1. HTML (HyperText Markup Language): Anketin yapısını, yani soruları, cevap seçeneklerini ve gönder düğmesini tanımlar.
2. CSS (Cascading Style Sheets): Anketin görünümünü, renklerini, yazı tiplerini, düzenini belirler. Kullanıcıların gözüne hoş gelecek ve sitenizin genel estetiğine uyum sağlayacak şekilde tasarlanır.
3. JavaScript: Anketin etkileşimini, yani kullanıcının cevaplarını yakalama, geçerliliğini kontrol etme ve verileri bir sunucuya gönderme mantığını sağlar.

HTML Yapısı: Anketin İskeleti

Anketin iskeleti bir `

` etiketi içerisinde yer alacaktır. İçerisinde `` etiketleriyle soruları ve farklı input tipleriyle cevap seçeneklerini (örneğin ``, ``, ``) barındırırız. Son olarak, anketi göndermek için bir `<button type="submit">` veya `<input type="submit">` etiketi ekleriz.<br>Örnek bir yapılandırma şunları içerebilir:<br>* Bir başlık (`<h2>`)<br>* Her soru için bir `<div class="question-block">`<br>* Soruyu içeren bir `<p>` veya `<h3>`<br>* Cevap seçenekleri için `<input type="radio">` veya `<input type="checkbox">` etiketleri (veya kısa cevaplar için `<textarea>`)<br>* Cevap seçeneklerini açıklayan `<label>` etiketleri<br>* Bir gönder düğmesi<br>Bu yapı, kullanıcıların anketi kolayca anlamasını ve doldurmasını sağlar.<br><h3>CSS Stil Verilmesi: Ankete Görsel Kimlik Kazandırmak</h3><br>CSS, anketinizin sitenizin geri kalanıyla uyumlu görünmesini sağlar. Renkleri, yazı tiplerini, boşlukları, kenarlıkları ve hatta animasyonları tanımlayabilirsiniz. İyi bir CSS tasarımı, <strong>kullanıcı deneyimi</strong> için kritik öneme sahiptir. Anketin dikkat çekici ama rahatsız edici olmayan bir şekilde sayfada yer almasını sağlamalısınız. Ayrıca, anketin mobil cihazlarda da düzgün görünmesi için duyarlı (responsive) CSS kuralları eklemeyi unutmayın. Bu, farklı ekran boyutlarındaki kullanıcıların da anketi rahatça doldurabilmesini sağlar.<br><h3>JavaScript Mantığı: Anketi Canlandırmak</h3><br>JavaScript, anketin beynidir. Kullanıcı bir seçeneği işaretlediğinde veya bir metin girdiğinde bu eylemleri dinler. En temel düzeyde JavaScript şunları yapar:<br>1. <strong>Olay Dinleyicileri:</strong> "Gönder" düğmesine tıklandığında veya bir seçenek değiştiğinde gibi olayları yakalar.<br>2. <strong>Veri Toplama:</strong> Anket formundaki tüm seçili veya girilmiş değerleri toplar.<br>3. <strong>Doğrulama (Opsiyonel):</strong> Gerekirse, tüm zorunlu alanların doldurulup doldurulmadığını veya girilen verinin belirli bir formatta olup olmadığını kontrol eder.<br>4. <strong>Veri Gönderme:</strong> Toplanan verileri sunucuya (genellikle AJAX veya Fetch API kullanarak) asenkron bir şekilde gönderir. Bu, sayfanın yeniden yüklenmesine gerek kalmadan verilerin arka planda işlenmesini sağlar.<br>5. <strong>Geri Bildirim:</strong> Anket gönderildikten sonra kullanıcıya bir teşekkür mesajı veya sonuçları gösteren bir geri bildirim sağlar.<br>Bu <strong>veri toplama</strong> süreci, anketin amacına hizmet etmesi için hayati öneme sahiptir. JavaScript, dinamik ve etkileşimli bir deneyim sunarak anketin sadece bir form olmaktan çıkıp canlı bir iletişim aracına dönüşmesini sağlar.<br><h2>Verilerin İşlenmesi ve Depolanması</h2><br>Anket verilerini başarıyla topladık. Peki, bu veriler nereye gidecek? Bu noktada, sunucu tarafında çalışan bir script (genellikle PHP) ve bir <strong>veritabanı entegrasyonu</strong> devreye girer.<br>1. <strong>Sunucu Tarafı Script (Örn: PHP):</strong> JavaScript ile gönderilen anket verilerini alır. Bu script, gelen verileri güvende tutmak için temizlemeli (sanitize) ve doğrulamalıdır. SQL enjeksiyonu gibi güvenlik açıklarını önlemek için bu adım kritik öneme sahiptir.<br>2. <strong>Veritabanı:</strong> Temizlenmiş ve doğrulanmış veriler daha sonra bir veritabanına (örneğin MySQL) kaydedilir. Her anket gönderimi için bir satır oluşturulur ve cevaplar ilgili sütunlara kaydedilir. Bu, ileride anket sonuçlarını analiz etmenizi veya raporlamanızı sağlar.<br>Bu kısım, kodla anket oluşturmanın en teknik yönüdür ve basit bir anket oluşturucu için bile bir miktar sunucu tarafı bilgisi gerektirir. Eğer PHP veya veritabanı yönetimi konusunda temel bilgilere sahip değilseniz, bu kısım için bir uzmandan yardım almak iyi bir fikir olabilir. Daha fazla bilgi için '`/makale.php?sayfa=veritabani-yonetimi-ipucu`' makalemize göz atabilirsiniz.<br><h2>WordPress Entegrasyonu: Kodunuzu Sisteme Dahil Etmek</h2><br>Kendi özel anket kodunuzu WordPress sitenize dahil etmenin en iyi ve en güvenli yolu, bir <strong>çocuk tema</strong> kullanmaktır. Ana temanızın güncellemeleri sırasında değişikliklerinizin kaybolmaması için bu yöntem hayati önem taşır.<br><h3>Çocuk Tema Kullanımının Önemi</h3><br>Ana temaların güncellenmesi, tema dosyalarında yaptığınız doğrudan değişiklikleri siler. Bir çocuk tema kullanarak, ana temanın işlevselliğini ve stilini devralır, ancak kendi özel kodunuzu (`functions.php`, `style.css` vb.) ayrı dosyalarda tutarsınız. Bu şekilde, ana temanız güncellendiğinde bile özel anketiniz çalışmaya devam eder. '`/makale.php?sayfa=wordpress-cocuk-tema-rehberi`' sayfasında çocuk tema oluşturma hakkında detaylı bilgi bulabilirsiniz.<br><h3>Script ve Stil Dosyalarını Sıraya Almak (Enqueue)</h3><br>WordPress, güvenlik ve performans için script ve stil dosyalarını doğrudan `<head>` veya `<body>` etiketlerine yazmak yerine özel işlevler (`wp_enqueue_script`, `wp_enqueue_style`) kullanarak sıraya almanızı önerir.<br>1. <strong>JavaScript ve CSS Dosyalarını Oluşturun:</strong> Anketinizin HTML kodunu sitenizin içeriğine gömecek olsanız bile, JavaScript ve CSS kodunuzu ayrı `.js` ve `.css` dosyalarına yazın. Örneğin: `my-survey.js` ve `my-survey.css`. Bu dosyaları çocuk temanızın kök dizininde veya özel bir klasörde (örneğin `assets/js`, `assets/css`) saklayın.<br>2. <strong>`functions.php` Dosyasını Düzenleyin:</strong> Çocuk temanızın `functions.php` dosyasına aşağıdaki gibi bir işlev ekleyerek bu dosyaları sıraya alın:<br>```php<br><?php<br>function my_custom_survey_scripts() {<br>wp_enqueue_style( 'my-survey-style', get_stylesheet_directory_uri() . '/assets/css/my-survey.css' );<br>wp_enqueue_script( 'my-survey-script', get_stylesheet_directory_uri() . '/assets/js/my-survey.js', array('jquery'), null, true );<br>// AJAX URL'sini JavaScript'e iletmek için<br>wp_localize_script( 'my-survey-script', 'mySurveyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );<br>}<br>add_action( 'wp_enqueue_scripts', 'my_custom_survey_scripts' );<br>?><br>```<br>Bu kod parçası, anketinizin CSS dosyasını ve JavaScript dosyasını sitenizin `<head>` veya `<body>` (JavaScript için `true` değeriyle sayfa sonuna) bölümüne ekler. `admin_url( 'admin-ajax.php' )` kullanmak, AJAX isteklerinizi WordPress'in kendi AJAX işleyicisi üzerinden güvenli bir şekilde göndermenizi sağlar.<br>3. <strong>Anket HTML'ini Ekleme:</strong> Anketinizin HTML yapısını doğrudan bir sayfaya veya yazıya ekleyebilirsiniz. WordPress'in "Özel HTML" bloğunu kullanarak veya temanızın <strong>tema dosyaları</strong> içerisine özel bir sayfa şablonu oluşturarak bu işlemi yapabilirsiniz. Daha esnek bir yaklaşım için, anket HTML'ini döndüren kısa bir kod (shortcode) oluşturabilir ve bunu `functions.php` dosyanızda tanımlayabilirsiniz.<br>```php<br><?php<br>function my_custom_survey_shortcode() {<br>ob_start(); // Çıktı tamponlamayı başlat<br>?><br><div id="my-simple-survey"><br><h2>Hizmetlerimiz Hakkında Ne Düşünüyorsunuz?</h2><br><form id="survey-form"><br><div class="question-block"><br><p>Genel olarak hizmet kalitemizi nasıl değerlendirirsiniz?</p><br><label><input type="radio" name="quality" value="excellent" required> Mükemmel</label><br><br><label><input type="radio" name="quality" value="good"> İyi</label><br><br><label><input type="radio" name="quality" value="average"> Ortalama</label><br><br><label><input type="radio" name="quality" value="poor"> Kötü</label><br></div><br><div class="question-block"><br><p>Sitemizde neleri geliştirmeliyiz?</p><br><textarea name="suggestions" rows="4" placeholder="Önerilerinizi buraya yazın...">