web-dev-qa-db-fra.com

Affichage des options de thème en css

Je me tire littéralement les cheveux pour essayer de comprendre cela. J'y travaille depuis presque 12 heures maintenant.

Étant nouveau pour PHP et pour le développement de thèmes, j'ai du mal à comprendre comment afficher theme_options('value'); lors de l'insertion d'une feuille de style PHP.

J'ai pris un exemple d'un article de blog que j'ai lu ici en utilisant la méthode parse_request.

code dans header.php

<link rel='stylesheet' type='text/css' href="<?php echo get_template_directory() ?>/css/theme_styles.php?my-custom-content=css" />

et en theme-styles.php

<?php
    add_action( 'parse_request', 'my_custom_wp_request' );
    function my_custom_wp_request( $wp ) {
        if ( !empty( $_GET['my-custom-content'] ) && $_GET['my-custom-content'] == 'css' ) {
            # get theme options
            header( 'Content-Type: text/css' );
?>
        a { color: <?php echo get_option('some_other_option') ?> !important; }
<?php
        exit;
        }
    }
?>

C'est tout ce que cela dit de faire dans le poste alors maintenant je suis perdu. J'ai essayé beaucoup d'autres solutions qui ne fonctionnaient pas non plus. Toute aide est appréciée!

phptheme-developmentcustomizationcsstheme-options
1
Scott Reinmuth

Bien que @Jevuska ait résolu mon problème, j'ai trouvé une solution beaucoup plus simple pour ajouter du CSS dynamique à partir de la page des options de thème. Et c'est parti!

Ajoutez ceci à functions.php 

add_action('wp_head', 'my_custom_css');
function my_custom_css(){
require_once( get_template_directory() . '/css/theme-styles.php' );
}

Vous pouvez maintenant traiter theme-styles.php comme une feuille de style CSS normale

<style type="text/css">
a {
    color: <?php echo get_option('some_other_option');?> !important;
}
</style>

Terminé! C'était aussi simple que ça.

1
Scott Reinmuth

CSS personnalisable en manipulant parse_query

@Scott Reinmuth , je pense que vous avez mal dirigé ces tutoriels, oui, vous utilisez la méthode parse_request .

Si vous suivez, ce code est un crochet avec une fonction et vous devez mettre functions.php

<?php
    add_action( 'parse_request', 'my_custom_wp_request' );
    function my_custom_wp_request( $wp ) {
        if ( !empty( $_GET['my-custom-content'] ) && $_GET['my-custom-content'] == 'css' ) {
        # get theme options
        header( 'Content-Type: text/css' );
?>
a {color: <?php echo get_option('some_other_option'); ?> !important;}
<?php
        exit; 
        }
    }
?>

Et dans header.php avec ce code (sans le fichier /css/theme_styles.php) pour effectuer une requête avec le paramètre my-custom-content et la valeur css. C’est pourquoi nous avons besoin d’un crochet fonctionnel pour le faire fonctionner.

<link rel='stylesheet' type='text/css' href="<?php bloginfo( 'url' ); ?>/?my-custom-content=css" />

nous avons fait ici.

MAIS si vous avez besoin d’utiliser css in out side, vous créez alors custom-css.php. Et votre fonction dans functions.php sera comme ceci:

add_action( 'parse_request', 'my_custom_wp_request' );
function my_custom_wp_request( $wp ) {
    if ( !empty( $_GET['my-custom-content'] ) && $_GET['my-custom-content'] == 'css' ) {
    # get theme options
       header( 'Content-Type: text/css' );
       require dirname( __FILE__ ) . '/css/custom-css.php';
       exit;
    }
}

et dans votre custom-css.php

a {
  color: <?php echo get_option('some_other_option'); ?> !important;
}

Dans header.php toujours identique ci-dessus.

Approche similaire avec valider

Mon approche similaire avec valider les données. Nous utilisons simplement le fichier functions.php theme pour ajouter ce code.

/** Enqueue style for custom css
 *  we use parameter wpse_css and ( int ) 1 as value
 *
 */
add_action( 'wp_enqueue_scripts', 'wpse221867_enqueue_style', 99 );
function wpse221867_enqueue_style()
{
    /** check url ssl */
    $url = ( is_ssl() ) ?
            home_url( '/', 'https' ) : home_url( '/' );

    /** Register and enqueue wpse_style_php
     *  Build query with wpse_css as parameter, 1 as number to validation
     *
     */
    wp_register_style( 'wpse_style_php',
        add_query_arg( array(
            'wpse_css' => ( int ) 1
        ), $url ),
        array(), //your style handled
        null, //remove wp version
        'all' //media
    );
    wp_enqueue_style( 'wpse_style_php' );
}

/** Fire parse_request with function wpse221867_print_css
 *  Generate css in PHP
 *
 *  @return string CSS Content
 */
add_action( 'parse_request', 'wpse221867_print_css' );
function wpse221867_print_css()
{
    /** validate query on input */
    $css = filter_input( INPUT_GET, 'wpse_css', FILTER_VALIDATE_INT );

    if ( ! $css || ( int ) 1 != $css )
        return;

    ob_start();
    header( 'Content-type: text/css' );

    /** wpse_option_settings contain css in an array i.e
     *  array( 'wpse_css_content' => 'a{color:#ececec}' )
     *
     */
    $options = get_option( 'wpse_option_settings' );
    $raw_css = ( isset( $options['wpse_css_content'] ) )
                ? $options['wpse_css_content'] : '';

    /** sanitize for output */
    $content = wp_kses( $raw_css,
        array( '\'', '\"' )
    );
    $content = str_replace( '&gt;', '>', $content );
    echo $content; // output
    die();
}

IMHO, cette méthode n'est pas recommandée, en particulier pour des problèmes de performances. Utilisez simplement un fichier css statique, trouvez un autre moyen de le personnaliser, cochez wp_add_inline_style (exemple disponible) et get_theme_mod .

0
Jevuska