Customizador de temas - Arquivo PHP CSS Dinâmico

2

Eu mudei recentemente de usar uma classe personalizada para habilitar um painel de opções de tema para o Customizador de tema integrado no Wordpress.

Tudo está indo muito bem - eu tenho visualização ao vivo funcionando, mas estou um pouco preso ao usar 'get_theme_mod ()' para recuperar os valores em um arquivo PHP dedicado.

Usando minha antiga classe, eu poderia enfileirar 'dynamic.css.php' onde eu incluiria 'wp-load.php' para permitir que eu usasse várias funções para obter opções, etc. Os documentos do Theme Customizer mostram apenas a saída da dinâmica CSS dentro de uma função personalizada no tema wp_head. Eu realmente não quero fazer assim, a menos que seja necessário.

Então, atualmente estou enunciando meu arquivo 'dynamic.css.php' e é assim:

<?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;
    }

}

Isto é como eu fiz anteriormente, então tentei basicamente a mesma coisa, mas get_theme_mod () não está funcionando.

Também tenho receio de incluir wp-load.php novamente - esperava usar uma metodologia semelhante à anterior sem precisar incluí-la.

Então, meus objetivos são:

  • evite ter que carregar o wp-load.php
  • tenho meu css em um arquivo separado
  • evite que o css imprima meu cabeçalho de temas

Eu também tentei remover a importação wp-load.php e incluir o arquivo na cabeça do meu tema, mas isso coloca a saída na tag body.

Alguma sugestão para alcançar meus objetivos aqui?

    
por 0Neji 02.05.2014 / 17:22

2 respostas

8

@s_ha_dum está certo, o plugin do ajax api é o caminho a percorrer. Eu me deparei com esse problema eu mesmo com um arquivo js dinâmico que eu estava gerando há pouco tempo.

Basicamente, você poderia enfileirar seu estilo da seguinte forma:

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

Em seguida, crie uma função para carregar seu arquivo css dinâmico:

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

E adicione as ações do ajax:

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

onde wp_ajax_* irá disparar a função nomeada e terá acesso a todas as funções wp fundamentais Para a frente; end wp_ajax_nopriv_* executa visitantes não autenticados

Note que eu encontrei o add_action('wp_ajax_custom_function', 'custom_function') , se em um plugin, deve estar no arquivo base de ativação do plugin, senão ele será ignorado. Há uma pequena nota sobre isso no documento de referência de ações . EDIT: Acabei de testar isso de novo, e não posso repetir. Aparentemente, não existe tal restrição.

Esta explicação é uma versão expandida deste post no fórum do códice: enlace

    
por orionrush 17.08.2014 / 13:46
-1

Eu criei uma biblioteca chamada wp-dynamic-css que permite gerar CSS a partir de conteúdo dinâmico .

Ele viola seu objetivo de não imprimir o CSS no cabeçalho do documento, mas o benefício dessa abordagem é que as alterações feitas no personalizador são atualizadas imediatamente para mostrar que as alterações entram em vigor em tempo real. 1

A biblioteca permite que você use uma sintaxe especial para representar variáveis dentro do seu arquivo CSS.

É assim que pode ser usado:

// 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' );

Agora, digamos que você tenha um arquivo chamado my-style.css com este código:

body {
   background-color: $body_bg_color;
}

Se, por exemplo, chamar get_theme_mod('body_bg_color') retornar o valor #fff , então my-style.css será compilado para:

body {
   background-color: #fff;
}

[1] A partir da versão 1.0.1, esta biblioteca suporta imprimir o CSS compilado no cabeçalho do documento ou carregá-lo como uma folha de estilo externa.

    
por Yoav Kadosh 20.03.2016 / 06:50