Yorum Ekle

Bu formun görüntülenmesi addcomments.tpl dosyasında yapılandırılır. Bu bölümde, kullanıcılar veritabanına yorum eklerken kullanılan şablonlar özelleştirilir. HTML bilgisi olmadan bu bölümü düzenlemek önerilmez, çünkü form aracılığıyla komut dosyasına aktarılan alan adları kullanılır. Başka bir deyişle, metni istediğiniz gibi düzenleyebilirsiniz, ancak alanların adlarını değiştirmeyin, bu son derece önemlidir. Aşağıdaki etiketleri kullanabilirsiniz:

Temel Form Etiketleri

Etiket	Açıklama
`{title}`	Bu formun yorum eklemek mi yoksa düzenlemek için mi olduğunu açıklayan başlık.
`{editor}`	Yorumu eklemek için ayarlara bağlı olarak BBCODE veya WYSIWYG editörünü görüntüler.
`{image-upload}`	Kullanıcının görüntüleri yüklemek için sürükleyip bırakabileceği veya bilgisayardan seçebileceği özel bir alan görüntüler.
`{guest-name}`	Kayıtsız kullanıcının önceki yorum ekleme sırasında girdiği kullanıcı adını görüntüler.
`{guest-mail}`	Kayıtsız kullanıcının önceki yorum ekleme sırasında girdiği E-Posta adresini görüntüler.

Kullanıcı Kimlik Doğrulama Etiketleri

Etiket	Açıklama
`[not-logged]` ve `[/not-logged]`	Kullanıcı kayıtlı değilse, kapsanan kodu görüntüler. Örneğin, bu etiketlerle giriş ve e-posta alanlarını kapsayabilirsiniz. Bu alanlar doldurulmamışsa ve kullanıcı giriş yapmışsa, bu veriler otomatik olarak profilinden alınacaktır.
`[vk]` ve `[/vk]`	VK ağını kullanarak yetkilendirme etkinleştirilmişse, kapsanan metni görüntüler.
`{vk_url}`	VK'da oturum açmak için URL bağlantısını görüntüler.
`[odnoklassniki]` ve `[/odnoklassniki]`	Odnoklassniki ağını kullanarak yetkilendirme etkinleştirilmişse, kapsanan metni görüntüler.
`{odnoklassniki_url}`	Odnoklassniki'de oturum açmak için URL bağlantısını görüntüler.
`[facebook]` ve `[/facebook]`	Facebook kullanarak yetkilendirme etkinleştirilmişse, kapsanan metni görüntüler.
`{facebook_url}`	Facebook'ta oturum açmak için URL bağlantısını görüntüler.
`[google]` ve `[/google]`	Google kullanarak yetkilendirme etkinleştirilmişse, kapsanan metni görüntüler.
`{google_url}`	Google'da oturum açmak için URL bağlantısını görüntüler.
`[mailru]` ve `[/mailru]`	Mail.ru kullanarak yetkilendirme etkinleştirilmişse, kapsanan metni görüntüler.
`{mailru_url}`	Mail.ru'da oturum açmak için URL bağlantısını görüntüler.
`[yandex]` ve `[/yandex]`	Yandex kullanarak yetkilendirme etkinleştirilmişse, kapsanan metni görüntüler.
`{yandex_url}`	Yandex'te oturum açmak için URL bağlantısını görüntüler.

Güvenlik ve Doğrulama Etiketleri

Etiket	Açıklama
`[sec_code]` ve `[/sec_code]`	Yorum eklerken CAPTCHA kullanılacak şekilde ayarlandıysa, kapsanan metni görüntüler.
`{sec_code}`	CAPTCHA kodunu görüntüler.
`[recaptcha]` ve `[/recaptcha]`	Ayarlarda reCAPTCHA türü etkinleştirildiyse, kapsanan metni görüntüler.
`{recaptcha}`	Ayarlarda etkinleştirildiyse reCAPTCHA widget'ını görüntüler.
`[question]` ve `[/question]`	Soru/cevap sistemi etkinleştirildiyse, kapsanan metni görüntüler.
`{question}`	Daha önce ayarlanan sorular listesinden soruyu görüntüler.

Abonelik ve Kategori Etiketleri

Etiket	Açıklama
`[comments-subscribe]` ve `[/comments-subscribe]`	Aralarındaki metin makale yorumlarına abonelik için bağlantı olarak görüntülenir.
`{comments-subscribe}`	Yorum ekleme formunda yorumlara abone olmak için bir onay kutusu görüntüler.
`[allow-comments-subscribe]` ve `[/allow-comments-subscribe]`	Kullanıcının yorumlara abone olmasına izin veriliyorsa, aralarındaki metni gösterir. Böylece, ihtiyaç duyduğunuz blokta yorumlara abone olmak için bir bağlantı yapabilir ve abonelik yasaklanmışsa gizleyebilirsiniz.
`[comments-unsubscribe]` ve `[/comments-unsubscribe]`	Aralarındaki metni bu yayının yorumlarından aboneliği kaldırmak için bir bağlantı olarak gösterir. Böylece kullanıcılar sadece bir belirli haberden aboneliği iptal edebilirler, daha önce tüm yayınlardan aboneliği iptal etmek zorunda kalıyorlardı.
`[catlist=1,2....]` ve `[/catlist]`	Makale belirtilen kategorilere aitse, kapsanan metni görüntüler.
`[not-catlist=1,2....]` ve `[/not-catlist]`	Makale belirtilen kategorilere ait değilse, kapsanan metni görüntüler.

Örnek Kullanımlar

Temel Yorum Ekleme Formu

<div class="add-comment-form">
    <h3>{title}</h3>
    
    <div class="editor-area">
        {editor}
    </div>
    
    [not-logged]
        <div class="guest-fields">
            <div class="form-group">
                <label for="name">Adınız:</label>
                <input type="text" name="name" id="name" value="{guest-name}">
            </div>
            <div class="form-group">
                <label for="mail">E-Mail:</label>
                <input type="email" name="mail" id="mail" value="{guest-mail}">
            </div>
        </div>
    [/not-logged]
    
    <div class="image-upload-area">
        {image-upload}
    </div>
    
    [sec_code]
        <div class="captcha-area">
            <label>Güvenlik Kodu:</label>
            {sec_code}
            <input type="text" name="sec_code" placeholder="Güvenlik kodunu girin">
        </div>
    [/sec_code]
    
    [recaptcha]
        <div class="recaptcha-area">
            {recaptcha}
        </div>
    [/recaptcha]
    
    [question]
        <div class="question-area">
            <label>Güvenlik Sorusu: {question}</label>
            <input type="text" name="question_answer" placeholder="Cevabı girin">
        </div>
    [/question]
    
    [allow-comments-subscribe]
        <div class="subscribe-area">
            {comments-subscribe} <label for="comments-subscribe">Bu yayına yapılan yorumlardan haberdar et</label>
        </div>
    [/allow-comments-subscribe]
    
    <div class="form-submit">
        <button type="submit" name="submit" class="btn btn-primary">Yorumu Gönder</button>
    </div>
</div>

Sosyal Medya Girişli Yorum Formu

<form class="comment-form" method="post" id="addcommentform" name="dle-comments-form">
    <div class="comment-form-header">
        <h4>{title}</h4>
    </div>
    
    [not-logged]
        <div class="form-row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="name"><i class="fas fa-user"></i> Adınız:</label>
                    <input type="text" name="name" id="name" class="form-control" value="{guest-name}" required>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="mail"><i class="fas fa-envelope"></i> E-Mail:</label>
                    <input type="email" name="mail" id="mail" class="form-control" value="{guest-mail}">
                </div>
            </div>
        </div>
        
        <div class="social-login">
            <div class="social-header">
                <span class="or-divider">Veya Sosyal Medya ile giriş yapın</span>
            </div>
            
            <div class="social-buttons">
                [vk]<a href="{vk_url}" class="social-btn vk-btn"><i class="fab fa-vk"></i> VK ile Giriş</a>[/vk]
                [facebook]<a href="{facebook_url}" class="social-btn fb-btn"><i class="fab fa-facebook-f"></i> Facebook ile Giriş</a>[/facebook]
                [google]<a href="{google_url}" class="social-btn google-btn"><i class="fab fa-google"></i> Google ile Giriş</a>[/google]
                [yandex]<a href="{yandex_url}" class="social-btn yandex-btn"><i class="fab fa-yandex"></i> Yandex ile Giriş</a>[/yandex]
                [mailru]<a href="{mailru_url}" class="social-btn mailru-btn"><i class="fas fa-at"></i> Mail.ru ile Giriş</a>[/mailru]
                [odnoklassniki]<a href="{odnoklassniki_url}" class="social-btn ok-btn"><i class="fab fa-odnoklassniki"></i> OK ile Giriş</a>[/odnoklassniki]
            </div>
        </div>
    [/not-logged]
    
    <div class="form-group editor-container">
        <label for="comments"><i class="fas fa-comment"></i> Yorumunuz:</label>
        {editor}
    </div>
    
    <div class="form-group image-upload-container">
        <div class="upload-header"><i class="fas fa-image"></i> Görsel Ekle:</div>
        {image-upload}
    </div>
    
    [sec_code]
        <div class="form-group captcha-container">
            <label><i class="fas fa-shield-alt"></i> Güvenlik Kodu:</label>
            <div class="captcha-image">{sec_code}</div>
            <input type="text" name="sec_code" class="form-control captcha-input" placeholder="Güvenlik kodunu girin" required>
        </div>
    [/sec_code]
    
    [recaptcha]
        <div class="form-group recaptcha-container">
            {recaptcha}
        </div>
    [/recaptcha]
    
    [question]
        <div class="form-group question-container">
            <label><i class="fas fa-question-circle"></i> Soru: {question}</label>
            <input type="text" name="question_answer" class="form-control" placeholder="Yanıtınızı girin" required>
        </div>
    [/question]
    
    <div class="form-options">
        [allow-comments-subscribe]
            <div class="custom-control custom-checkbox">
                {comments-subscribe} <label for="comments-subscribe" class="custom-control-label">Bu yorumlara abone ol</label>
            </div>
        [/allow-comments-subscribe]
    </div>
    
    <div class="form-submit-area">
        <button type="submit" name="submit" class="btn btn-primary"><i class="fas fa-paper-plane"></i> Yorumu Gönder</button>
        <a href="#" class="btn btn-secondary" onclick="history.go(-1); return false;"><i class="fas fa-times"></i> İptal</a>
    </div>
</form>

<style>
    .social-login {
        margin: 20px 0;
        text-align: center;
    }
    
    .social-header {
        position: relative;
        margin-bottom: 15px;
    }
    
    .or-divider {
        background: #fff;
        padding: 0 10px;
        position: relative;
        z-index: 1;
    }
    
    .social-header:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        border-top: 1px solid #ddd;
        z-index: 0;
    }
    
    .social-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    
    .social-btn {
        padding: 8px 15px;
        border-radius: 4px;
        color: #fff;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        font-size: 14px;
    }
    
    .social-btn:hover {
        opacity: 0.9;
        color: #fff;
    }
    
    .social-btn i {
        margin-right: 5px;
    }
    
    .vk-btn { background-color: #4C75A3; }
    .fb-btn { background-color: #3b5998; }
    .google-btn { background-color: #dd4b39; }
    .yandex-btn { background-color: #fc0; color: #000; }
    .mailru-btn { background-color: #168de2; }
    .ok-btn { background-color: #ee8208; }
</style>

Mobil Uyumlu Yorum Formu

<div class="mobile-comment-form">
    <div class="mobile-form-header">
        <h4>{title}</h4>
    </div>
    
    [not-logged]
    <div class="mobile-guest-info">
        <div class="form-field">
            <label class="floating-label">
                <input type="text" name="name" value="{guest-name}" required>
                <span>Adınız</span>
            </label>
        </div>
        
        <div class="form-field">
            <label class="floating-label">
                <input type="email" name="mail" value="{guest-mail}">
                <span>E-mail (zorunlu değil)</span>
            </label>
        </div>
        
        <div class="social-login-tabs">
            <div class="tab-header">Sosyal medya ile giriş yap</div>
            <div class="tab-content">
                <div class="social-grid">
                    [vk]<a href="{vk_url}" class="social-item"><i class="fab fa-vk"></i></a>[/vk]
                    [facebook]<a href="{facebook_url}" class="social-item"><i class="fab fa-facebook-f"></i></a>[/facebook]
                    [google]<a href="{google_url}" class="social-item"><i class="fab fa-google"></i></a>[/google]
                    [yandex]<a href="{yandex_url}" class="social-item"><i class="fab fa-yandex"></i></a>[/yandex]
                    [mailru]<a href="{mailru_url}" class="social-item"><i class="fas fa-at"></i></a>[/mailru]
                    [odnoklassniki]<a href="{odnoklassniki_url}" class="social-item"><i class="fab fa-odnoklassniki"></i></a>[/odnoklassniki]
                </div>
            </div>
        </div>
    </div>
    [/not-logged]
    
    <div class="mobile-editor">
        {editor}
    </div>
    
    <div class="mobile-image-upload">
        <div class="upload-trigger" id="upload-trigger"><i class="fas fa-camera"></i> Fotoğraf Ekle</div>
        <div class="upload-container" id="upload-container" style="display: none;">
            {image-upload}
        </div>
    </div>
    
    [sec_code]
    <div class="mobile-captcha">
        <div class="captcha-image">{sec_code}</div>
        <div class="form-field">
            <label class="floating-label">
                <input type="text" name="sec_code" required>
                <span>Güvenlik kodunu girin</span>
            </label>
        </div>
    </div>
    [/sec_code]
    
    [recaptcha]
    <div class="mobile-recaptcha">
        {recaptcha}
    </div>
    [/recaptcha]
    
    [allow-comments-subscribe]
    <div class="mobile-subscribe">
        <label class="subscribe-label">
            {comments-subscribe} Yorumlara abone ol
        </label>
    </div>
    [/allow-comments-subscribe]
    
    <div class="mobile-form-actions">
        <button type="submit" name="submit" class="submit-btn">Yorumu Gönder</button>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Fotoğraf ekleme alanını gizle/göster
    const uploadTrigger = document.getElementById('upload-trigger');
    const uploadContainer = document.getElementById('upload-container');
    
    if (uploadTrigger && uploadContainer) {
        uploadTrigger.addEventListener('click', function() {
            if (uploadContainer.style.display === 'none') {
                uploadContainer.style.display = 'block';
                uploadTrigger.innerHTML = '<i class="fas fa-times"></i> İptal';
            } else {
                uploadContainer.style.display = 'none';
                uploadTrigger.innerHTML = '<i class="fas fa-camera"></i> Fotoğraf Ekle';
            }
        });
    }
});
</script>

<style>
.mobile-comment-form {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    max-width: 100%;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mobile-form-header {
    margin-bottom: 15px;
}

.mobile-form-header h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.form-field {
    margin-bottom: 15px;
    position: relative;
}

.floating-label {
    position: relative;
    display: block;
}

.floating-label input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
    transition: border 0.3s;
}

.floating-label span {
    position: absolute;
    top: 13px;
    left: 10px;
    color: #999;
    pointer-events: none;
    transition: 0.3s;
    font-size: 16px;
}

.floating-label input:focus,
.floating-label input:not(:placeholder-shown) {
    border-color: #4a90e2;
    padding-top: 20px;
    padding-bottom: 4px;
}

.floating-label input:focus + span,
.floating-label input:not(:placeholder-shown) + span {
    top: 4px;
    left: 10px;
    font-size: 12px;
    color: #4a90e2;
}

.social-login-tabs {
    margin: 15px 0;
}

.tab-header {
    background: #f5f5f5;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    color: #666;
    border-radius: 4px;
    cursor: pointer;
}

.tab-content {
    padding: 10px 0;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.social-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

.social-item:nth-child(1) { background-color: #4C75A3; } /* VK */
.social-item:nth-child(2) { background-color: #3b5998; } /* Facebook */
.social-item:nth-child(3) { background-color: #dd4b39; } /* Google */
.social-item:nth-child(4) { background-color: #fc0; color: #000; } /* Yandex */
.social-item:nth-child(5) { background-color: #168de2; } /* Mail.ru */
.social-item:nth-child(6) { background-color: #ee8208; } /* OK */

.mobile-editor {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.mobile-image-upload {
    margin-bottom: 15px;
}

.upload-trigger {
    display: inline-block;
    padding: 8px 15px;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
}

.upload-container {
    margin-top: 10px;
    border: 1px dashed #ddd;
    padding: 10px;
    border-radius: 4px;
}

.mobile-captcha {
    margin-bottom: 15px;
}

.captcha-image {
    margin-bottom: 10px;
    text-align: center;
}

.mobile-subscribe {
    margin: 15px 0;
}

.subscribe-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
}

.mobile-form-actions {
    margin-top: 20px;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}
</style>