<?php
if ( ! defined( 'ABSPATH' ) ) exit;
// ─────────────────────────────────────────────
// [cet_comments]
// Affiche les commentaires + formulaire
// Paramètres :
// title_list : titre au-dessus des commentaires (défaut "Commentaires")
// title_form : titre au-dessus du formulaire (défaut "Laisser un commentaire")
// order : ASC | DESC (défaut ASC)
// ─────────────────────────────────────────────
function cet_comments_shortcode( $atts ) {
$atts = shortcode_atts( array(
'title_list' => 'Commentaires',
'title_form' => 'Laisser un commentaire',
'order' => 'ASC',
), $atts, 'cet_comments' );
$post_id = get_the_ID();
if ( ! $post_id ) return '';
if ( ! comments_open( $post_id ) && get_comments_number( $post_id ) === 0 ) return '';
$comments = get_comments( array(
'post_id' => $post_id,
'status' => 'approve',
'order' => in_array( strtoupper( $atts['order'] ), array( 'ASC', 'DESC' ), true )
? strtoupper( $atts['order'] ) : 'ASC',
) );
// Récupère les styles configurés
$styles = (array) get_option( 'cet_comments_styles', array() );
$s = wp_parse_args( $styles, cet_comments_style_defaults() );
ob_start();
cet_comments_output_css( $s );
?>
<div class="cet-comments-wrap">
<?php if ( ! empty( $comments ) ) : ?>
<div class="cet-comments-list-wrap">
<?php if ( $atts['title_list'] ) : ?>
<h3 class="cet-comments-title">
<?php echo esc_html( $atts['title_list'] ); ?>
<span class="cet-comments-count">(<?php echo count( $comments ); ?>)</span>
</h3>
<?php endif; ?>
<ol class="cet-comments-list">
<?php foreach ( $comments as $comment ) : ?>
<li id="comment-<?php echo (int) $comment->comment_ID; ?>" class="cet-comment">
<div class="cet-comment-meta">
<?php echo get_avatar( $comment, 40, '', '', array( 'class' => 'cet-comment-avatar' ) ); ?>
<div class="cet-comment-author-wrap">
<span class="cet-comment-author"><?php echo esc_html( $comment->comment_author ); ?></span>
<time class="cet-comment-date" datetime="<?php echo esc_attr( $comment->comment_date ); ?>">
<?php echo esc_html( date_i18n( get_option( 'date_format' ), strtotime( $comment->comment_date ) ) ); ?>
</time>
</div>
</div>
<div class="cet-comment-body">
<?php echo wp_kses_post( $comment->comment_content ); ?>
</div>
</li>
<?php endforeach; ?>
</ol>
</div>
<?php endif; ?>
<?php if ( comments_open( $post_id ) ) : ?>
<div class="cet-comment-form-wrap">
<?php if ( $atts['title_form'] ) : ?>
<h3 class="cet-comments-title cet-form-title"><?php echo esc_html( $atts['title_form'] ); ?></h3>
<?php endif; ?>
<?php
comment_form( array(
'title_reply' => '',
'title_reply_before' => '',
'title_reply_after' => '',
'class_form' => 'cet-comment-form',
'class_submit' => 'cet-comment-submit',
'label_submit' => 'Publier le commentaire',
'comment_field' =>
'<div class="cet-form-field cet-form-field--full">'
. '<label for="comment">Votre commentaire <span class="required">*</span></label>'
. '<textarea id="comment" name="comment" rows="5" required></textarea>'
. '</div>',
'fields' => array(
'author' =>
'<div class="cet-form-row">'
. '<div class="cet-form-field">'
. '<label for="author">Nom <span class="required">*</span></label>'
. '<input type="text" id="author" name="author" required></div>',
'email' =>
'<div class="cet-form-field">'
. '<label for="email">E-mail <span class="required">*</span></label>'
. '<input type="email" id="email" name="email" required></div>'
. '</div>',
'url' => '',
'cookies' => '',
),
), $post_id );
?>
</div>
<?php elseif ( ! comments_open( $post_id ) && get_comments_number( $post_id ) > 0 ) : ?>
<p class="cet-comments-closed">Les commentaires sont fermés.</p>
<?php endif; ?>
</div>
<?php
return ob_get_clean();
}
add_shortcode( 'cet_comments', 'cet_comments_shortcode' );
// ─────────────────────────────────────────────
// Valeurs par défaut des styles
// ─────────────────────────────────────────────
function cet_comments_style_defaults() {
return array(
'font_size' => '14px',
'font_family' => 'inherit',
'color_text' => '#333333',
'color_title' => '#111111',
'color_meta' => '#888888',
'color_border' => '#eeeeee',
'color_bg_comment' => '#ffffff',
'color_bg_form' => '#f9f9f9',
'color_btn_bg' => '#2271b1',
'color_btn_text' => '#ffffff',
'color_btn_hover' => '#135e96',
'color_input_border' => '#dddddd',
'color_input_focus' => '#2271b1',
'border_radius' => '6px',
'gap' => '1.5rem',
'avatar_size' => '40px',
'padding_comment' => '1rem',
'padding_form' => '1.5rem',
);
}
// ─────────────────────────────────────────────
// CSS commentaires
// ─────────────────────────────────────────────
function cet_comments_output_css( $s ) {
static $printed = false;
if ( $printed ) return;
$printed = true;
?>
<style id="cet-comments-css">
.cet-comments-wrap { margin-top: 2rem; }
.cet-comments-title { font-size: 1.1em; font-weight: 600; color: <?php echo esc_attr( $s['color_title'] ); ?>; margin: 0 0 1rem; }
.cet-comments-count { font-size: .85em; font-weight: 400; color: <?php echo esc_attr( $s['color_meta'] ); ?>; }
.cet-comments-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: <?php echo esc_attr( $s['gap'] ); ?>; }
.cet-comment {
background: <?php echo esc_attr( $s['color_bg_comment'] ); ?>;
border: 1px solid <?php echo esc_attr( $s['color_border'] ); ?>;
border-radius: <?php echo esc_attr( $s['border_radius'] ); ?>;
padding: <?php echo esc_attr( $s['padding_comment'] ); ?>;
font-size: <?php echo esc_attr( $s['font_size'] ); ?>;
font-family: <?php echo esc_attr( $s['font_family'] ); ?>;
color: <?php echo esc_attr( $s['color_text'] ); ?>;
}
.cet-comment-meta { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.cet-comment-avatar { border-radius: 50%; width: <?php echo esc_attr( $s['avatar_size'] ); ?>; height: <?php echo esc_attr( $s['avatar_size'] ); ?>; flex-shrink: 0; }
.cet-comment-author-wrap { display: flex; flex-direction: column; gap: 2px; }
.cet-comment-author { font-weight: 600; font-size: .9em; color: <?php echo esc_attr( $s['color_title'] ); ?>; }
.cet-comment-date { font-size: .78em; color: <?php echo esc_attr( $s['color_meta'] ); ?>; }
.cet-comment-body { line-height: 1.65; }
.cet-comment-body p { margin: 0 0 .5em; }
/* Formulaire */
.cet-comment-form-wrap { margin-top: 2rem; background: <?php echo esc_attr( $s['color_bg_form'] ); ?>; border-radius: <?php echo esc_attr( $s['border_radius'] ); ?>; padding: <?php echo esc_attr( $s['padding_form'] ); ?>; }
.cet-form-title { margin-bottom: 1.25rem !important; }
.cet-comment-form { display: flex; flex-direction: column; gap: .85rem; }
.cet-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.cet-form-field { display: flex; flex-direction: column; gap: 4px; }
.cet-form-field--full { grid-column: 1 / -1; }
.cet-form-field label { font-size: .82em; font-weight: 600; color: <?php echo esc_attr( $s['color_meta'] ); ?>; }
.cet-form-field .required { color: #c00; }
.cet-comment-form input[type=text],
.cet-comment-form input[type=email],
.cet-comment-form textarea {
border: 1px solid <?php echo esc_attr( $s['color_input_border'] ); ?>;
border-radius: <?php echo esc_attr( $s['border_radius'] ); ?>;
padding: 8px 10px;
font-size: <?php echo esc_attr( $s['font_size'] ); ?>;
font-family: inherit;
color: <?php echo esc_attr( $s['color_text'] ); ?>;
width: 100%;
box-sizing: border-box;
transition: border-color .15s;
}
.cet-comment-form input:focus,
.cet-comment-form textarea:focus { border-color: <?php echo esc_attr( $s['color_input_focus'] ); ?>; outline: none; box-shadow: 0 0 0 2px <?php echo esc_attr( $s['color_input_focus'] ); ?>22; }
.cet-comment-form textarea { resize: vertical; min-height: 100px; }
.cet-comment-submit {
background: <?php echo esc_attr( $s['color_btn_bg'] ); ?>;
color: <?php echo esc_attr( $s['color_btn_text'] ); ?>;
border: none;
border-radius: <?php echo esc_attr( $s['border_radius'] ); ?>;
padding: 10px 22px;
font-size: .9em;
font-weight: 600;
cursor: pointer;
transition: background .15s;
align-self: flex-start;
}
.cet-comment-submit:hover { background: <?php echo esc_attr( $s['color_btn_hover'] ); ?>; }
.cet-comments-closed { color: <?php echo esc_attr( $s['color_meta'] ); ?>; font-size: .9em; }
@media (max-width: 540px) {
.cet-form-row { grid-template-columns: 1fr; }
}
</style>
<?php
}
// ─────────────────────────────────────────────
// Sous-menu : Styles des commentaires
// ─────────────────────────────────────────────
function cet_render_comments_style_form() {
// called from settings tab — outputs form only
cet_render_comments_style_inner();
}
function cet_render_comments_style_page() {
echo '<div class="wrap" style="max-width:820px;"><h1>Styles commentaires</h1>';
cet_render_comments_style_inner();
echo '</div>';
}
function cet_render_comments_style_inner() {
if ( isset( $_POST['cet_comments_style_nonce'] ) &&
wp_verify_nonce( $_POST['cet_comments_style_nonce'], 'cet_save_comments_style' ) &&
current_user_can( 'manage_options' ) ) {
$defaults = cet_comments_style_defaults();
$saved = array();
foreach ( array_keys( $defaults ) as $key ) {
$val = isset( $_POST[ 'cet_cs_' . $key ] ) ? sanitize_text_field( $_POST[ 'cet_cs_' . $key ] ) : $defaults[ $key ];
$saved[ $key ] = $val;
}
update_option( 'cet_comments_styles', $saved );
echo '<div class="notice notice-success is-dismissible"><p>Styles des commentaires enregistrés.</p></div>';
}
$defaults = cet_comments_style_defaults();
$s = wp_parse_args( (array) get_option( 'cet_comments_styles', array() ), $defaults );
?>
<div class="wrap" style="max-width:820px;">
<h1>Commentaires — Styles</h1>
<p>Personnalisez l\'apparence du widget <code>[cet_comments]</code>.</p>
<style>
.cet-cs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px 20px; margin-bottom:16px; }
.cet-cs-field { display:flex; flex-direction:column; gap:4px; }
.cet-cs-field label { font-size:12px; font-weight:600; color:#555; }
.cet-cs-field input[type=text] { border:1px solid #ddd; border-radius:4px; padding:5px 8px; font-size:13px; font-family:monospace; }
.cet-cs-field input[type=color] { width:100%; height:34px; padding:2px 3px; cursor:pointer; border:1px solid #ddd; border-radius:4px; }
.cet-cs-section-title { font-size:11px; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.04em; margin:16px 0 8px; border-top:1px solid #f0f0f0; padding-top:12px; }
</style>
<form method="post">
<?php wp_nonce_field( 'cet_save_comments_style', 'cet_comments_style_nonce' ); ?>
<div style="background:#fff;border:1px solid #ddd;border-radius:6px;padding:20px;margin-bottom:20px;">
<div class="cet-cs-section-title">Typographie</div>
<div class="cet-cs-grid">
<?php cet_cs_field_text( 'font_size', 'Taille de police', $s['font_size'], 'ex: 14px' ); ?>
<?php cet_cs_field_text( 'font_family', 'Famille de police', $s['font_family'], 'ex: inherit, Georgia' ); ?>
</div>
<div class="cet-cs-section-title">Couleurs — Textes</div>
<div class="cet-cs-grid">
<?php cet_cs_field_color( 'color_text', 'Texte principal', $s['color_text'] ); ?>
<?php cet_cs_field_color( 'color_title', 'Titres', $s['color_title'] ); ?>
<?php cet_cs_field_color( 'color_meta', 'Méta (date, labels)', $s['color_meta'] ); ?>
</div>
<div class="cet-cs-section-title">Couleurs — Fond & Bordures</div>
<div class="cet-cs-grid">
<?php cet_cs_field_color( 'color_bg_comment', 'Fond commentaire', $s['color_bg_comment'] ); ?>
<?php cet_cs_field_color( 'color_bg_form', 'Fond formulaire', $s['color_bg_form'] ); ?>
<?php cet_cs_field_color( 'color_border', 'Bordure commentaire',$s['color_border'] ); ?>
</div>
<div class="cet-cs-section-title">Couleurs — Formulaire</div>
<div class="cet-cs-grid">
<?php cet_cs_field_color( 'color_input_border', 'Bordure champ', $s['color_input_border'] ); ?>
<?php cet_cs_field_color( 'color_input_focus', 'Focus champ', $s['color_input_focus'] ); ?>
<?php cet_cs_field_color( 'color_btn_bg', 'Bouton fond', $s['color_btn_bg'] ); ?>
<?php cet_cs_field_color( 'color_btn_text', 'Bouton texte', $s['color_btn_text'] ); ?>
<?php cet_cs_field_color( 'color_btn_hover', 'Bouton survol', $s['color_btn_hover'] ); ?>
</div>
<div class="cet-cs-section-title">Espacements & Formes</div>
<div class="cet-cs-grid">
<?php cet_cs_field_text( 'border_radius', 'Rayon des coins', $s['border_radius'], 'ex: 6px' ); ?>
<?php cet_cs_field_text( 'gap', 'Espacement commentaires', $s['gap'], 'ex: 1.5rem' ); ?>
<?php cet_cs_field_text( 'avatar_size', 'Taille avatar', $s['avatar_size'], 'ex: 40px' ); ?>
<?php cet_cs_field_text( 'padding_comment', 'Padding commentaire', $s['padding_comment'], 'ex: 1rem' ); ?>
<?php cet_cs_field_text( 'padding_form', 'Padding formulaire', $s['padding_form'], 'ex: 1.5rem' ); ?>
</div>
</div>
<?php submit_button( 'Enregistrer les styles' ); ?>
</form>
</div>
<?php
}
function cet_cs_field_text( $key, $label, $value, $placeholder = '' ) {
?>
<div class="cet-cs-field">
<label><?php echo wp_kses_post( $label ); ?></label>
<input type="text" name="cet_cs_<?php echo esc_attr( $key ); ?>"
value="<?php echo esc_attr( $value ); ?>"
placeholder="<?php echo esc_attr( $placeholder ); ?>">
</div>
<?php
}
function cet_cs_field_color( $key, $label, $value ) {
?>
<div class="cet-cs-field">
<label><?php echo wp_kses_post( $label ); ?></label>
<input type="color" name="cet_cs_<?php echo esc_attr( $key ); ?>"
value="<?php echo esc_attr( $value ); ?>">
</div>
<?php
}