<?php
if ( ! defined( 'ABSPATH' ) ) exit;
function cet_render_help_page() {
$accent = '#2271b1';
?>
<div class="wrap" style="max-width:900px;">
<h1 style="margin-bottom:6px;">Aide & Référence</h1>
<p style="color:#666;margin-bottom:28px;">Tous les shortcodes et hooks disponibles dans le plugin Custom Elementor Templates.</p>
<style>
.cet-help-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:20px; margin-bottom:32px; }
.cet-help-card { background:#fff; border:1px solid #ddd; border-radius:8px; overflow:hidden; }
.cet-help-card-head { padding:14px 18px 12px; border-bottom:1px solid #eee; display:flex; align-items:center; gap:10px; }
.cet-help-card-head h2 { font-size:14px; font-weight:600; margin:0; }
.cet-help-card-tag { font-size:11px; font-weight:500; padding:2px 8px; border-radius:10px; }
.cet-help-card-body { padding:14px 18px; }
.cet-help-card-desc { font-size:13px; color:#555; margin:0 0 12px; line-height:1.6; }
.cet-help-code { background:#f6f8fa; border:1px solid #e1e4e8; border-radius:5px; padding:10px 14px; font-family:monospace; font-size:12.5px; line-height:1.7; margin-bottom:10px; white-space:pre-wrap; word-break:break-all; }
.cet-help-params { width:100%; border-collapse:collapse; font-size:12px; margin-top:6px; }
.cet-help-params th { text-align:left; padding:5px 8px; background:#f9f9f9; border-bottom:1px solid #eee; color:#444; font-weight:600; }
.cet-help-params td { padding:5px 8px; border-bottom:1px solid #f0f0f0; vertical-align:top; }
.cet-help-params tr:last-child td { border-bottom:none; }
.cet-help-params .param-name { font-family:monospace; color:#0550ae; font-size:12px; }
.cet-help-params .param-default { color:#888; font-family:monospace; font-size:11px; }
.cet-copy-btn { float:right; font-size:11px; padding:2px 8px; cursor:pointer; border:1px solid #ddd; border-radius:4px; background:#fff; color:#555; margin-top:-2px; }
.cet-copy-btn:hover { background:#f0f0f0; }
.cet-section-title { font-size:13px; font-weight:600; color:#444; text-transform:uppercase; letter-spacing:.04em; margin:0 0 12px; padding-bottom:6px; border-bottom:2px solid #e0e0e0; }
</style>
<?php
$sections = array(
'Shortcodes' => array(
array(
'title' => '[cet_template]',
'tag' => 'Shortcode',
'color' => '#0550ae',
'bg' => '#e8f0fb',
'desc' => 'Affiche n\'importe quel template (header, footer, sidebar, wrapper) par ID ou par type.',
'codes' => array(
'[cet_template id="12"]',
'[cet_template type="header"]',
'[cet_template type="sidebar"]',
),
'params' => array(
array( 'id', 'ID du template', '—' ),
array( 'type', 'header | footer | sidebar | wrapper', '—' ),
),
),
array(
'title' => '[cet_breadcrumb]',
'tag' => 'Shortcode',
'color' => '#0550ae',
'bg' => '#e8f0fb',
'desc' => 'Affiche le fil d\'Ariane avec les réglages configurés dans Templates → Fil d\'Ariane. À placer librement dans un widget Elementor.',
'codes' => array(
'[cet_breadcrumb]',
),
'params' => array(),
),
array(
'title' => '[cet_archive]',
'tag' => 'Shortcode',
'color' => '#0550ae',
'bg' => '#e8f0fb',
'desc' => 'Affiche une boucle d\'articles avec le layout et le mode de contenu choisis. Utilisable sur n\'importe quelle page ou dans un template Elementor.',
'codes' => array(
'[cet_archive layout="grid-3" mode="essential"]',
'[cet_archive layout="list" mode="full" number="5"]',
'[cet_archive layout="grid-2" mode="compact" tax="category" term="actus" number="6" orderby="date" order="DESC"]',
),
'params' => array(
array( 'layout', 'list | grid-2 | grid-3 | grid-4 | grid-5 | grid-6', 'grid-3' ),
array( 'mode', 'full | essential | compact | gallery', 'essential' ),
array( 'tax', 'category | post_tag | slug taxonomie', 'category' ),
array( 'term', 'Slug du terme (filtre par catégorie)', '—' ),
array( 'number', 'Nombre d\'articles', '10' ),
array( 'orderby', 'date | title | rand', 'date' ),
array( 'order', 'DESC | ASC', 'DESC' ),
),
),
array(
'title' => '[cet_recent_posts]',
'tag' => 'Shortcode',
'color' => '#0550ae',
'bg' => '#e8f0fb',
'desc' => 'Affiche la liste des derniers articles publiés. Respecte automatiquement les catégories filtrées dans <em>Gabarits d\'archives → Page des articles</em>. À placer dans un widget Shortcode d\'Elementor dans la sidebar.',
'codes' => array(
'[cet_recent_posts]',
'[cet_recent_posts number="5" title="Derniers articles"]',
'[cet_recent_posts number="8" orderby="rand"]',
),
'params' => array(
array( 'number', 'Nombre d\'articles à afficher', '5' ),
array( 'title', 'Titre affiché au-dessus de la liste', '—' ),
array( 'orderby', 'date | title | rand', 'date' ),
),
),
array(
'title' => '[cet_dynamic_content]',
'tag' => 'Shortcode',
'color' => '#0550ae',
'bg' => '#e8f0fb',
'desc' => 'Réservé aux gabarits de type <strong>Wrapper</strong>. À placer dans Elementor à l\'endroit où doit s\'insérer le contenu propre à chaque fiche (article, page, CPT).',
'codes' => array(
'[cet_dynamic_content]',
),
'params' => array(),
),
),
'Types de templates' => array(
array(
'title' => 'Header',
'tag' => 'Type',
'color' => '#6f4e9c',
'bg' => '#f3edfb',
'desc' => 'Injecté automatiquement juste après l\'ouverture du <body> via le hook <code>wp_body_open</code>. Le template par défaut est configurable dans <em>Templates → Réglages</em>.',
'codes' => array(
'// Hook PHP utilisé',
'add_action( \'wp_body_open\', \'cet_display_header\', 10 );',
),
'params' => array(),
),
array(
'title' => 'Footer',
'tag' => 'Type',
'color' => '#6f4e9c',
'bg' => '#f3edfb',
'desc' => 'Injecté automatiquement dans le bas de page via <code>wp_footer</code>. Le template par défaut est configurable dans <em>Templates → Réglages</em>.',
'codes' => array(
'// Hook PHP utilisé',
'add_action( \'wp_footer\', \'cet_display_footer\', 5 );',
),
'params' => array(),
),
array(
'title' => 'Sidebar',
'tag' => 'Type',
'color' => '#6f4e9c',
'bg' => '#f3edfb',
'desc' => 'Affichable via shortcode ou assigné à un gabarit wrapper. Configurable dans <em>Templates → Réglages</em>.',
'codes' => array(
'[cet_template type="sidebar"]',
),
'params' => array(),
),
array(
'title' => 'Gabarit de page (Wrapper)',
'tag' => 'Type',
'color' => '#6f4e9c',
'bg' => '#f3edfb',
'desc' => 'Entoure le contenu d\'un type de contenu (CPT, articles, pages) avec une mise en page commune. Placer <code>[cet_dynamic_content]</code> dans Elementor là où le contenu de chaque fiche doit apparaître. Assigner dans <em>Templates → Gabarits de page</em>.',
'codes' => array(
'// Dans Elementor, dans le widget Shortcode :',
'[cet_dynamic_content]',
),
'params' => array(),
),
),
'Commentaires' => array(
array(
'title' => '[cet_comments]',
'tag' => 'Shortcode',
'color' => '#0550ae',
'bg' => '#e8f0fb',
'desc' => 'Affiche la liste des commentaires approuvés + le formulaire de dépôt. A placer dans un widget Shortcode Elementor, idéalement en fin de colonne principale. Styles configurables dans <em>Templates → Commentaires</em>.',
'codes' => array(
'[cet_comments]',
'[cet_comments title_list="Avis" title_form="Votre avis" order="DESC"]',
),
'params' => array(
array( 'title_list', 'Titre au-dessus de la liste', 'Commentaires' ),
array( 'title_form', 'Titre au-dessus du formulaire', 'Laisser un commentaire' ),
array( 'order', 'ASC | DESC', 'ASC' ),
),
),
),
'Mise en page' => array(
array(
'title' => 'Espacements globaux',
'tag' => 'Reglage',
'color' => '#276749',
'bg' => '#e6f4ed',
'desc' => 'Largeur, max-width, marges et paddings s\'appliquant à tous les gabarits. Configurables dans <em>Templates → Mise en page</em>. Surchargeable gabarit par gabarit.',
'codes' => array(
'/* Variables CSS disponibles pour surcharge dans votre theme */',
'.cet-wrapper-layout { max-width: 1200px; padding: 2rem 1.5rem; }',
),
'params' => array(
array( 'width', 'Largeur du conteneur', '100%' ),
array( 'max-width', 'Largeur maximale', '1200px' ),
array( 'margin', 'Marges externes (4 valeurs)', '0 auto' ),
array( 'padding', 'Espacement interne', '2rem 1.5rem' ),
array( 'gap', 'Espace entre main et sidebar', '2rem' ),
array( 'sidebar-width', 'Largeur de la sidebar', '300px' ),
),
),
),
'Hooks PHP' => array(
array(
'title' => 'Modifier le rendu du fil d\'Ariane',
'tag' => 'Filter',
'color' => '#276749',
'bg' => '#e6f4ed',
'desc' => 'Permet de modifier ou remplacer le HTML généré par le fil d\'Ariane depuis le fichier <code>functions.php</code> du thème.',
'codes' => array(
"add_filter( 'cet_breadcrumb_html', function( \$html ) {\n // Modifier \$html ici\n return \$html;\n} );",
),
'params' => array(
array( '$html', 'HTML complet du fil d\'Ariane', '—' ),
),
),
array(
'title' => 'Modifier les maillons du fil d\'Ariane',
'tag' => 'Filter',
'color' => '#276749',
'bg' => '#e6f4ed',
'desc' => 'Permet d\'ajouter, supprimer ou réordonner les maillons avant le rendu HTML.',
'codes' => array(
"add_filter( 'cet_breadcrumb_crumbs', function( \$crumbs ) {\n // \$crumbs = array( array('label'=>'', 'url'=>''), ... )\n return \$crumbs;\n} );",
),
'params' => array(
array( '$crumbs', 'Tableau de maillons [ label, url ]', '—' ),
),
),
),
);
foreach ( $sections as $section_title => $cards ) :
?>
<p class="cet-section-title"><?php echo esc_html( $section_title ); ?></p>
<div class="cet-help-grid">
<?php foreach ( $cards as $card ) : ?>
<div class="cet-help-card">
<div class="cet-help-card-head">
<span class="cet-help-card-tag" style="background:<?php echo esc_attr( $card['bg'] ); ?>;color:<?php echo esc_attr( $card['color'] ); ?>;"><?php echo esc_html( $card['tag'] ); ?></span>
<h2><?php echo esc_html( $card['title'] ); ?></h2>
</div>
<div class="cet-help-card-body">
<p class="cet-help-card-desc"><?php echo wp_kses_post( $card['desc'] ); ?></p>
<?php foreach ( $card['codes'] as $code ) : ?>
<div style="position:relative;">
<button class="cet-copy-btn" onclick="cetCopy(this)" data-code="<?php echo esc_attr( html_entity_decode( $code ) ); ?>">Copier</button>
<div class="cet-help-code"><?php echo esc_html( html_entity_decode( $code ) ); ?></div>
</div>
<?php endforeach; ?>
<?php if ( ! empty( $card['params'] ) ) : ?>
<table class="cet-help-params">
<thead>
<tr>
<th>Paramètre</th>
<th>Valeurs</th>
<th>Défaut</th>
</tr>
</thead>
<tbody>
<?php foreach ( $card['params'] as $param ) : ?>
<tr>
<td class="param-name"><?php echo esc_html( $param[0] ); ?></td>
<td><?php echo wp_kses_post( $param[1] ); ?></td>
<td class="param-default"><?php echo esc_html( $param[2] ); ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
<script>
function cetCopy(btn) {
var code = btn.getAttribute('data-code');
navigator.clipboard.writeText(code).then(function() {
var orig = btn.textContent;
btn.textContent = 'Copie !';
btn.style.color = '#276749';
setTimeout(function() { btn.textContent = orig; btn.style.color = ''; }, 1500);
});
}
</script>
<?php
}