Web de Gure Ametsa Bi Lagun en WordPress para Dokploy
- Docker Compose (WordPress + MariaDB) listo para Dokploy, con instalación automática por etapas: idiomas, páginas, menús y plugins recomendados. - Web bilingüe castellano / euskera con Polylang. - Tema propio «gure-ametsa»: diseño inspirado en Beargrass Animal Rescue, personalizable desde Apariencia → Personalizar (paletas, tipografías, secciones de portada ordenables) y patrones de bloques propios. - Plugin mu «gure-ametsa-core»: animales en adopción con ficha y filtros, carrusel y formulario de contacto/adopción. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
105
wp-content/themes/gure-ametsa/inc/dynamic-css.php
Normal file
105
wp-content/themes/gure-ametsa/inc/dynamic-css.php
Normal file
@@ -0,0 +1,105 @@
|
||||
<?php
|
||||
/**
|
||||
* CSS generado a partir del personalizador: colores, tipografías, tamaños.
|
||||
*/
|
||||
|
||||
defined( 'ABSPATH' ) || exit;
|
||||
|
||||
/** Luminancia relativa (WCAG) de un color hexadecimal. */
|
||||
function ga_luminance( $hex ) {
|
||||
$hex = ltrim( (string) $hex, '#' );
|
||||
if ( 3 === strlen( $hex ) ) {
|
||||
$hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
|
||||
}
|
||||
if ( 6 !== strlen( $hex ) ) {
|
||||
return 1;
|
||||
}
|
||||
$channels = array_map( function ( $c ) {
|
||||
$c = hexdec( $c ) / 255;
|
||||
return $c <= 0.03928 ? $c / 12.92 : ( ( $c + 0.055 ) / 1.055 ) ** 2.4;
|
||||
}, str_split( $hex, 2 ) );
|
||||
return 0.2126 * $channels[0] + 0.7152 * $channels[1] + 0.0722 * $channels[2];
|
||||
}
|
||||
|
||||
/** Texto legible (blanco o el color de texto) sobre un fondo dado. */
|
||||
function ga_readable_on( $background ) {
|
||||
$ink = ga_color( 'text' );
|
||||
$lum = ga_luminance( $background );
|
||||
$contrast_white = 1.05 / ( $lum + 0.05 );
|
||||
$contrast_ink = ( $lum + 0.05 ) / ( ga_luminance( $ink ) + 0.05 );
|
||||
return $contrast_white >= $contrast_ink ? '#ffffff' : $ink;
|
||||
}
|
||||
|
||||
function ga_dynamic_css() {
|
||||
$fonts = ga_fonts();
|
||||
$heading = $fonts[ ga_opt( 'typography', 'heading_font' ) ] ?? $fonts['fraunces'];
|
||||
$body = $fonts[ ga_opt( 'typography', 'body_font' ) ] ?? $fonts['karla'];
|
||||
|
||||
$css = '';
|
||||
foreach ( array_unique( array_filter( array( $heading['file'] ?? '', $body['file'] ?? '' ) ) ) as $file ) {
|
||||
$font = current( wp_list_filter( $fonts, array( 'file' => $file ) ) );
|
||||
$css .= sprintf(
|
||||
'@font-face{font-family:"%s";src:url("%s") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}',
|
||||
$font['family'],
|
||||
esc_url( get_theme_file_uri( "assets/fonts/$file.woff2" ) )
|
||||
);
|
||||
}
|
||||
|
||||
$accent = ga_color( 'accent' );
|
||||
$primary = ga_color( 'primary' );
|
||||
$vars = array(
|
||||
'--ga-green' => $primary,
|
||||
'--ga-red' => $accent,
|
||||
'--ga-cream' => ga_color( 'background' ),
|
||||
'--ga-sand' => ga_color( 'surface' ),
|
||||
'--ga-ink' => ga_color( 'text' ),
|
||||
'--ga-on-red' => ga_readable_on( $accent ),
|
||||
'--ga-on-primary' => ga_readable_on( $primary ),
|
||||
'--ga-serif' => $heading['stack'],
|
||||
'--ga-sans' => $body['stack'],
|
||||
'--ga-heading-weight' => (int) ga_opt( 'typography', 'heading_weight' ),
|
||||
'--ga-radius' => (int) ga_opt( 'typography', 'radius' ) . 'px',
|
||||
'--ga-size' => (int) ga_opt( 'typography', 'base_size' ) . 'px',
|
||||
);
|
||||
$css .= ':root{';
|
||||
foreach ( $vars as $name => $value ) {
|
||||
if ( '' !== $value && null !== $value ) {
|
||||
$css .= $name . ':' . wp_strip_all_tags( (string) $value ) . ';';
|
||||
}
|
||||
}
|
||||
$css .= '}';
|
||||
|
||||
return $css;
|
||||
}
|
||||
|
||||
add_action( 'wp_enqueue_scripts', function () {
|
||||
wp_add_inline_style( 'gure-ametsa', ga_dynamic_css() );
|
||||
}, 20 );
|
||||
|
||||
/* El editor de bloques usa los mismos colores y tipografías. */
|
||||
add_filter( 'block_editor_settings_all', function ( $settings ) {
|
||||
$settings['styles'][] = array( 'css' => ga_dynamic_css() );
|
||||
return $settings;
|
||||
} );
|
||||
|
||||
/* Paleta del editor = colores del tema. */
|
||||
add_action( 'after_setup_theme', function () {
|
||||
add_theme_support( 'editor-color-palette', array(
|
||||
array( 'name' => 'Principal', 'slug' => 'ga-green', 'color' => ga_color( 'primary' ) ),
|
||||
array( 'name' => 'Acento', 'slug' => 'ga-red', 'color' => ga_color( 'accent' ) ),
|
||||
array( 'name' => 'Secciones', 'slug' => 'ga-sand', 'color' => ga_color( 'surface' ) ),
|
||||
array( 'name' => 'Texto', 'slug' => 'ga-ink', 'color' => ga_color( 'text' ) ),
|
||||
array( 'name' => 'Blanco', 'slug' => 'white', 'color' => '#ffffff' ),
|
||||
) );
|
||||
}, 20 );
|
||||
|
||||
/* Clases en <body> según opciones de cabecera. */
|
||||
add_filter( 'body_class', function ( $classes ) {
|
||||
if ( ga_opt( 'header', 'sticky' ) ) {
|
||||
$classes[] = 'ga-sticky-header';
|
||||
}
|
||||
if ( ga_opt( 'header', 'highlight_first' ) ) {
|
||||
$classes[] = 'ga-nav-highlight';
|
||||
}
|
||||
return $classes;
|
||||
} );
|
||||
Reference in New Issue
Block a user