<?php
if ( ! defined( 'ABSPATH' ) ) exit;
// ─────────────────────────────────────────────
// Sous-menu : Mise en page
// ─────────────────────────────────────────────
// ─────────────────────────────────────────────
// Valeurs par défaut globales
// ─────────────────────────────────────────────
function cet_layout_defaults() {
return array(
'max_width' => '1200px',
'width' => '100%',
'margin_top' => '0',
'margin_bottom'=> '0',
'margin_left' => 'auto',
'margin_right' => 'auto',
'padding_top' => '2rem',
'padding_bottom'=> '2rem',
'padding_left' => '1.5rem',
'padding_right'=> '1.5rem',
'gap' => '2rem',
'sidebar_width'=> '300px',
);
}
// ─────────────────────────────────────────────
// Page de réglages Mise en page
// ─────────────────────────────────────────────
function cet_render_layout_settings_form() {
cet_render_layout_settings_page_inner();
}
function cet_render_layout_settings_page() {
echo '<div class="wrap" style="max-width:820px;"><h1>Mise en page</h1>';
cet_render_layout_settings_page_inner();
echo '</div>';
}
function cet_render_layout_settings_page_inner() {
if ( isset( $_POST['cet_layout_nonce'] ) &&
wp_verify_nonce( $_POST['cet_layout_nonce'], 'cet_save_layout' ) &&
current_user_can( 'manage_options' ) ) {
$fields = array_keys( cet_layout_defaults() );
$global = array();
foreach ( $fields as $key ) {
$val = isset( $_POST[ 'cet_layout_' . $key ] )
? sanitize_text_field( $_POST[ 'cet_layout_' . $key ] )
: '';
$global[ $key ] = $val;
}
update_option( 'cet_layout_global', $global );
echo '<div class="notice notice-success is-dismissible"><p>Réglages de mise en page enregistrés.</p></div>';
}
$defaults = cet_layout_defaults();
$global = wp_parse_args( (array) get_option( 'cet_layout_global', array() ), $defaults );
// Récupère tous les gabarits de type wrapper pour les surcharges
$wrappers = get_posts( array(
'post_type' => 'cet_template',
'posts_per_page' => -1,
'post_status' => 'publish',
'meta_query' => array(
array( 'key' => '_cet_template_type', 'value' => 'wrapper' ),
),
) );
?>
<div class="wrap" style="max-width:820px;">
<h1>Mise en page</h1>
<p>Définissez les espacements globaux appliqués à tous les gabarits, puis surchargez par gabarit si nécessaire. Les valeurs acceptent toutes les unités CSS : <code>px</code>, <code>em</code>, <code>rem</code>, <code>%</code>, <code>auto</code>.</p>
<style>
.cet-lp-section { background:#fff; border:1px solid #ddd; border-radius:6px; margin-bottom:20px; }
.cet-lp-head { padding:12px 18px; background:#f9f9f9; border-bottom:1px solid #eee; font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.cet-lp-head:hover { background:#f0f0f0; }
.cet-lp-body { padding:18px 20px; }
.cet-lp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px 20px; margin-bottom:16px; }
.cet-lp-field { display:flex; flex-direction:column; gap:4px; }
.cet-lp-field label { font-size:12px; font-weight:600; color:#555; }
.cet-lp-field input { border:1px solid #ddd; border-radius:4px; padding:5px 8px; font-size:13px; font-family:monospace; }
.cet-lp-field input:focus { border-color:#2271b1; outline:none; box-shadow:0 0 0 1px #2271b1; }
.cet-lp-group-title { font-size:11px; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.04em; margin:14px 0 8px; border-top:1px solid #f0f0f0; padding-top:12px; }
.cet-lp-preview { background:#f6f6f6; border:1px dashed #ccc; border-radius:4px; padding:10px 14px; font-size:12px; color:#666; margin-top:8px; font-family:monospace; }
</style>
<form method="post">
<?php wp_nonce_field( 'cet_save_layout', 'cet_layout_nonce' ); ?>
<!-- Réglages globaux -->
<div class="cet-lp-section">
<div class="cet-lp-head" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display===\'none\'?\'block\':\'none\'">
<span>🌐 Réglages globaux <small style="font-weight:400;color:#888;">— s\'appliquent à tous les gabarits</small></span>
<span>▼</span>
</div>
<div class="cet-lp-body">
<div class="cet-lp-group-title">Dimensions</div>
<div class="cet-lp-grid">
<?php cet_lp_field( 'cet_layout_width', 'Largeur', $global['width'], 'ex: 100%, 960px' ); ?>
<?php cet_lp_field( 'cet_layout_max_width', 'Largeur maximale', $global['max_width'], 'ex: 1200px, 90rem' ); ?>
<?php cet_lp_field( 'cet_layout_gap', 'Gouttiere (gap)', $global['gap'], 'ex: 2rem, 30px' ); ?>
<?php cet_lp_field( 'cet_layout_sidebar_width', 'Largeur sidebar', $global['sidebar_width'], 'ex: 300px, 25%' ); ?>
</div>
<div class="cet-lp-group-title">Marges externes (margin)</div>
<div class="cet-lp-grid">
<?php cet_lp_field( 'cet_layout_margin_top', 'Haut', $global['margin_top'], 'ex: 0, 2rem' ); ?>
<?php cet_lp_field( 'cet_layout_margin_bottom', 'Bas', $global['margin_bottom'], 'ex: 0, 2rem' ); ?>
<?php cet_lp_field( 'cet_layout_margin_left', 'Gauche', $global['margin_left'], 'ex: auto, 0' ); ?>
<?php cet_lp_field( 'cet_layout_margin_right', 'Droite', $global['margin_right'], 'ex: auto, 0' ); ?>
</div>
<div class="cet-lp-group-title">Espacement interne (padding)</div>
<div class="cet-lp-grid">
<?php cet_lp_field( 'cet_layout_padding_top', 'Haut', $global['padding_top'], 'ex: 2rem, 40px' ); ?>
<?php cet_lp_field( 'cet_layout_padding_bottom', 'Bas', $global['padding_bottom'], 'ex: 2rem, 40px' ); ?>
<?php cet_lp_field( 'cet_layout_padding_left', 'Gauche', $global['padding_left'], 'ex: 1.5rem, 20px' ); ?>
<?php cet_lp_field( 'cet_layout_padding_right', 'Droite', $global['padding_right'], 'ex: 1.5rem, 20px' ); ?>
</div>
<div class="cet-lp-preview" id="cet-global-preview"></div>
</div>
</div>
<?php submit_button( 'Enregistrer la mise en page' ); ?>
</form>
<!-- Surcharges par gabarit -->
<?php if ( ! empty( $wrappers ) ) : ?>
<h2 style="font-size:15px;margin:28px 0 12px;">Surcharges par gabarit</h2>
<p style="color:#666;font-size:13px;margin-bottom:16px;">Laissez un champ vide pour utiliser la valeur globale.</p>
<form method="post">
<?php wp_nonce_field( 'cet_save_layout', 'cet_layout_nonce' ); ?>
<?php foreach ( $wrappers as $wrapper ) :
$overrides = (array) get_post_meta( $wrapper->ID, '_cet_layout_overrides', true );
$vals = wp_parse_args( $overrides, array_fill_keys( array_keys( $defaults ), '' ) );
?>
<div class="cet-lp-section">
<div class="cet-lp-head" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display===\'none\'?\'block\':\'none\'">
<span>⬜ <?php echo esc_html( $wrapper->post_title ); ?> <small style="font-weight:400;color:#888;">#<?php echo $wrapper->ID; ?></small></span>
<span>▼</span>
</div>
<div class="cet-lp-body" style="display:none;">
<div class="cet-lp-group-title">Dimensions</div>
<div class="cet-lp-grid">
<?php cet_lp_override_field( $wrapper->ID, 'width', 'Largeur', $vals['width'], 'ex: 100%' ); ?>
<?php cet_lp_override_field( $wrapper->ID, 'max_width', 'Largeur maximale', $vals['max_width'], 'ex: 1200px' ); ?>
<?php cet_lp_override_field( $wrapper->ID, 'gap', 'Gouttiere', $vals['gap'], 'ex: 2rem' ); ?>
<?php cet_lp_override_field( $wrapper->ID, 'sidebar_width', 'Largeur sidebar', $vals['sidebar_width'], 'ex: 300px' ); ?>
</div>
<div class="cet-lp-group-title">Marges externes</div>
<div class="cet-lp-grid">
<?php cet_lp_override_field( $wrapper->ID, 'margin_top', 'Haut', $vals['margin_top'], '' ); ?>
<?php cet_lp_override_field( $wrapper->ID, 'margin_bottom', 'Bas', $vals['margin_bottom'], '' ); ?>
<?php cet_lp_override_field( $wrapper->ID, 'margin_left', 'Gauche', $vals['margin_left'], '' ); ?>
<?php cet_lp_override_field( $wrapper->ID, 'margin_right', 'Droite', $vals['margin_right'], '' ); ?>
</div>
<div class="cet-lp-group-title">Espacement interne</div>
<div class="cet-lp-grid">
<?php cet_lp_override_field( $wrapper->ID, 'padding_top', 'Haut', $vals['padding_top'], '' ); ?>
<?php cet_lp_override_field( $wrapper->ID, 'padding_bottom', 'Bas', $vals['padding_bottom'], '' ); ?>
<?php cet_lp_override_field( $wrapper->ID, 'padding_left', 'Gauche', $vals['padding_left'], '' ); ?>
<?php cet_lp_override_field( $wrapper->ID, 'padding_right', 'Droite', $vals['padding_right'], '' ); ?>
</div>
<p style="margin-top:12px;">
<button type="submit" name="cet_save_override" value="<?php echo $wrapper->ID; ?>" class="button button-primary">
Enregistrer pour ce gabarit
</button>
<button type="submit" name="cet_reset_override" value="<?php echo $wrapper->ID; ?>" class="button" style="margin-left:8px;">
Revenir aux valeurs globales
</button>
</p>
</div>
</div>
<?php endforeach; ?>
</form>
<?php endif; ?>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
function updatePreview() {
var fields = ['width','max_width','margin_top','margin_bottom','margin_left','margin_right',
'padding_top','padding_bottom','padding_left','padding_right','gap','sidebar_width'];
var parts = [];
fields.forEach(function(k) {
var el = document.querySelector('[name="cet_layout_' + k + '"]');
if (el && el.value) parts.push(k.replace(/_/g,'-') + ': ' + el.value);
});
var p = document.getElementById('cet-global-preview');
if (p) p.textContent = '.cet-wrapper-layout {\n ' + parts.join(';\n ') + ';\n}';
}
document.querySelectorAll('[name^="cet_layout_"]').forEach(function(el) {
el.addEventListener('input', updatePreview);
});
updatePreview();
});
</script>
<?php
}
// Sauvegarde des surcharges par gabarit
function cet_save_layout_overrides() {
if ( ! isset( $_POST['cet_layout_nonce'] ) ||
! wp_verify_nonce( $_POST['cet_layout_nonce'], 'cet_save_layout' ) ||
! current_user_can( 'manage_options' ) ) return;
// Reset
if ( isset( $_POST['cet_reset_override'] ) ) {
$wrapper_id = absint( $_POST['cet_reset_override'] );
delete_post_meta( $wrapper_id, '_cet_layout_overrides' );
return;
}
// Save
if ( isset( $_POST['cet_save_override'] ) ) {
$wrapper_id = absint( $_POST['cet_save_override'] );
$keys = array_keys( cet_layout_defaults() );
$overrides = array();
foreach ( $keys as $key ) {
$val = isset( $_POST[ 'cet_override_' . $wrapper_id . '_' . $key ] )
? sanitize_text_field( $_POST[ 'cet_override_' . $wrapper_id . '_' . $key ] )
: '';
if ( $val !== '' ) $overrides[ $key ] = $val;
}
update_post_meta( $wrapper_id, '_cet_layout_overrides', $overrides );
}
}
add_action( 'admin_init', 'cet_save_layout_overrides' );
// ─────────────────────────────────────────────
// Helpers champs admin
// ─────────────────────────────────────────────
function cet_lp_field( $name, $label, $value, $placeholder = '' ) {
?>
<div class="cet-lp-field">
<label><?php echo esc_html( $label ); ?></label>
<input type="text" name="<?php echo esc_attr( $name ); ?>"
value="<?php echo esc_attr( $value ); ?>"
placeholder="<?php echo esc_attr( $placeholder ); ?>">
</div>
<?php
}
function cet_lp_override_field( $wrapper_id, $key, $label, $value, $placeholder = '' ) {
$name = 'cet_override_' . $wrapper_id . '_' . $key;
?>
<div class="cet-lp-field">
<label><?php echo esc_html( $label ); ?></label>
<input type="text" name="<?php echo esc_attr( $name ); ?>"
value="<?php echo esc_attr( $value ); ?>"
placeholder="<?php echo esc_attr( $placeholder ?: '(global)' ); ?>">
</div>
<?php
}
// ─────────────────────────────────────────────
// Résolution des valeurs CSS pour un wrapper donné
// Priorité : surcharge gabarit > global > défaut
// ─────────────────────────────────────────────
function cet_get_layout_css( $wrapper_id = 0 ) {
$defaults = cet_layout_defaults();
$global = wp_parse_args( (array) get_option( 'cet_layout_global', array() ), $defaults );
$overrides = $wrapper_id ? (array) get_post_meta( $wrapper_id, '_cet_layout_overrides', true ) : array();
$resolved = array();
foreach ( $defaults as $key => $default ) {
if ( isset( $overrides[ $key ] ) && $overrides[ $key ] !== '' ) {
$resolved[ $key ] = $overrides[ $key ];
} elseif ( isset( $global[ $key ] ) && $global[ $key ] !== '' ) {
$resolved[ $key ] = $global[ $key ];
} else {
$resolved[ $key ] = $default;
}
}
return $resolved;
}
// ─────────────────────────────────────────────
// Injection du CSS wrapper dans le <head>
// Remplace les valeurs en dur de hooks.php
// ─────────────────────────────────────────────
function cet_inject_layout_css() {
if ( ! is_singular() && ! is_archive() && ! is_home() ) return;
// Détermine le wrapper actif
$wrapper_id = 0;
if ( is_singular() ) {
$wrappers = (array) get_option( 'cet_wrappers', array() );
$cfg = $wrappers[ get_post_type() ] ?? array();
$default = is_array( $cfg ) ? (int) ( $cfg['default'] ?? 0 ) : (int) $cfg;
$overrides = is_array( $cfg ) ? (array) ( $cfg['overrides'] ?? array() ) : array();
$post_id = get_the_ID();
$wrapper_id = array_key_exists( $post_id, $overrides ) ? (int) $overrides[ $post_id ] : $default;
} elseif ( is_home() || is_category() || is_tag() || is_tax() ) {
$tax_wrappers = (array) get_option( 'cet_tax_wrappers', array() );
$key = is_home() ? '__blog__' : ( get_queried_object()->taxonomy ?? '' );
$cfg = $tax_wrappers[ $key ] ?? array();
$wrapper_id = is_array( $cfg ) ? (int) ( $cfg['default'] ?? 0 ) : (int) $cfg;
}
if ( ! $wrapper_id ) return;
$v = cet_get_layout_css( $wrapper_id );
?>
<style id="cet-wrapper-layout">
.cet-wrapper-layout {
display: grid;
width: <?php echo esc_attr( $v['width'] ); ?>;
max-width: <?php echo esc_attr( $v['max_width'] ); ?>;
margin: <?php echo esc_attr( $v['margin_top'] ); ?> <?php echo esc_attr( $v['margin_right'] ); ?> <?php echo esc_attr( $v['margin_bottom'] ); ?> <?php echo esc_attr( $v['margin_left'] ); ?>;
padding: <?php echo esc_attr( $v['padding_top'] ); ?> <?php echo esc_attr( $v['padding_right'] ); ?> <?php echo esc_attr( $v['padding_bottom'] ); ?> <?php echo esc_attr( $v['padding_left'] ); ?>;
gap: <?php echo esc_attr( $v['gap'] ); ?>;
align-items: start;
}
.cet-layout-right { grid-template-columns: 1fr <?php echo esc_attr( $v['sidebar_width'] ); ?>; grid-template-areas: "main sidebar"; }
.cet-layout-left { grid-template-columns: <?php echo esc_attr( $v['sidebar_width'] ); ?> 1fr; grid-template-areas: "sidebar main"; }
.cet-layout-full { grid-template-columns: 1fr; grid-template-areas: "main"; }
.cet-main-content { grid-area: main; min-width: 0; }
.cet-sidebar { grid-area: sidebar; min-width: 0; }
@media (max-width: 768px) {
.cet-wrapper-layout {
grid-template-columns: 1fr !important;
grid-template-areas: "main" "sidebar" !important;
padding-left: 1rem;
padding-right: 1rem;
}
}
</style>
<?php
}
add_action( 'wp_head', 'cet_inject_layout_css', 25 );