Personalizador de temas - Archivo PHP dinámico de CSS

2

Recientemente cambié de usar una clase personalizada para habilitar un panel de opciones de tema al Personalizador de temas integrado en Wordpress.

Todo va bastante bien. Tengo una vista previa en vivo funcionando pero estoy un poco atascado al usar 'get_theme_mod ()' para recuperar los valores en un archivo PHP dedicado.

Usando mi antigua clase, podría poner en cola 'dynamic.css.php' donde incluiría 'wp-load.php' para que pueda usar varias funciones para obtener opciones, etc. CSS dentro de una función personalizada en el tema wp_head. Realmente no quiero hacerlo de esta manera a menos que sea necesario.

Por lo tanto, actualmente estoy enviando mi archivo 'dynamic.css.php' y se ve así:

<?php

header("Content-type: text/css; charset: UTF-8");

define( 'WP_USE_THEMES', false );
include('../../../../../wp-load.php'); ?>

@media all and (max-width: <?php echo get_theme_mod('nav-primary-breakpoint'); ?>) {

    .drawer {
        margin-top: 42px;
        padding-top: 42px;
        top: -42px;
    }

}

Así es como lo hice anteriormente, así que intenté básicamente lo mismo, pero get_theme_mod () no funciona en absoluto.

También desconfío de incluir wp-load.php otra vez. Esperaba usar una metodología similar a la de antes sin tener que incluirla realmente.

Así que mis objetivos son:

  • evita tener que cargar wp-load.php
  • tener mi css en un archivo separado
  • evita que css genere el encabezado de mis temas

También intenté eliminar la importación de wp-load.php e incluir el archivo en el encabezado de mi tema, pero esto coloca la salida en la etiqueta del cuerpo.

¿Alguna sugerencia para alcanzar mis objetivos aquí?

    
pregunta 0Neji 02.05.2014 - 17:22

2 respuestas

8

@s_ha_dum tiene razón, la api del complemento ajax es el camino a seguir. Me encontré con este problema con un archivo js dinámico que estaba generando hace poco.

Básicamente, pondrías en cola tu estilo de la siguiente manera:

wp_enqueue_style('dynamic-css',
             admin_url('admin-ajax.php').'?action=dynamic_css',
             $deps,
             $ver,
             $media);

Luego crea una función para cargar tu archivo css dinámico:

function dynaminc_css() {
       require(get_template_directory().'/css/dynamic.css.php');
       exit;
}

Y agrega las acciones ajax:

add_action('wp_ajax_dynamic_css', 'dynaminc_css');
add_action('wp_ajax_nopriv_dynamic_css', 'dynaminc_css');

donde wp_ajax_* activará la función nombrada y tendrá acceso a todas las funciones wp fundamentales Para el frente; end wp_ajax_nopriv_* ejecuta visitantes que no han iniciado sesión

Tenga en cuenta que he encontrado que add_action('wp_ajax_custom_function', 'custom_function') , si está en un complemento, debe estar en el archivo de activación base del complemento, de lo contrario, se ignorará. Hay una breve nota al respecto en el documento de referencia de acción . EDIT: Acabo de probar esto de nuevo, y no puedo repetirlo. Aparentemente no existe tal restricción.

Esta explicación es una versión ampliada de esta publicación del foro de códice: enlace

    
respondido por el orionrush 17.08.2014 - 13:46
-1

He creado una biblioteca llamada wp-dynamic-css que te permite generar CSS desde contenido dinámico .

Viola su objetivo de no imprimir el CSS en el encabezado del documento, pero la ventaja de este enfoque es que los cambios realizados en el Personalizador se actualizan inmediatamente para mostrar que los cambios surten efecto en tiempo real. 1

La biblioteca le permite usar una sintaxis especial para representar variables dentro de su archivo CSS.

Así es como se puede usar:

// 1. Load the library
require_once 'wp-dynamic-css/bootstrap.php';

// 2. Enqueue the stylesheet (using an absolute path, not URL)
wp_dynamic_css_enqueue( 'my-dynamic-style', 'path/to/my-style.css' );

// 3. Set the callback function (used to convert variables to actual values)
function my_dynamic_css_callback( $var_name )
{
   return get_theme_mod($var_name);
}
wp_dynamic_css_set_callback( 'my-dynamic-style', 'my_dynamic_css_callback' );

Ahora digamos que tiene un archivo llamado my-style.css con este código:

body {
   background-color: $body_bg_color;
}

Si, por ejemplo, llamar a get_theme_mod('body_bg_color') devuelve el valor #fff , entonces my-style.css se compilará para:

body {
   background-color: #fff;
}

[1] A partir de la versión 1.0.1, esta biblioteca admite tanto la impresión del CSS compilado en el encabezado del documento como la carga como una hoja de estilo externa.

    
respondido por el Yoav Kadosh 20.03.2016 - 06:50

Lea otras preguntas en las etiquetas