wake-up-neo.net

Anzeige von Themenoptionen in CSS

Ich ziehe mir buchstäblich die Haare aus, um das herauszufinden. Ich bin jetzt fast 12 Stunden dabei.

Als Neuling in der PHP - und Theme-Entwicklung fällt es mir schwer zu verstehen, wie ich theme_options('value'); beim Einfügen eines PHP Stylesheets zum Anzeigen bringe.

Ich habe ein Beispiel aus einem Blog-Post genommen, den ich hier mit der parse_request-Methode gelesen habe.

code in header.php

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

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

Das ist alles, was es in der Post zu tun gibt, also bin ich jetzt verloren. Ich habe viele andere Lösungen ausprobiert, die auch nicht funktionierten. Jede Hilfe wird geschätzt!

phptheme-developmentcustomizationcsstheme-options
1
Scott Reinmuth

Obwohl @Jevuska mein Problem gelöst hat, habe ich eine viel einfachere Lösung für das Hinzufügen von dynamischem CSS über meine Theme-Optionsseite gefunden. Auf geht's!

Füge dies zu functions.php hinzu

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

Jetzt können Sie theme-styles.php wie ein normales CSS-Stylesheet behandeln

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

Erledigt! So einfach war das.

1
Scott Reinmuth

CSS anpassbar durch manipulieren parse_query

@Scott Reinmuth , ich denke, Sie irren sich über diese Tutorials, ja, Sie verwenden die Methode parse_request .

Wenn Sie folgen, ist dieser Code ein Hook mit Funktion und Sie müssen functions.php eingeben

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

Und in header.php mit diesem Code (ohne Datei /css/theme_styles.php) eine Anfrage mit Parameter my-custom-content und Wert css stellen. Deshalb brauchen wir einen Haken mit Funktion, damit es funktioniert.

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

wir haben hier gemacht.

ABER wenn Sie die Funktion css in out verwenden müssen, erstellen Sie custom-css.php. Und deine Funktion in functions.php wird so aussehen:

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

und in deiner custom-css.php

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

In header.php immer noch dasselbe wie oben.

Ähnlich verhält es sich mit validate

Mein ähnlicher Ansatz mit validieren Daten. Wir verwenden nur das Datei-functions.php-Design, um diesen Code hinzuzufügen.

/** 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 ist diese Methode nicht zu empfehlen, insbesondere bei Leistungsproblemen. Verwenden Sie einfach eine statische CSS-Datei, und finden Sie eine andere Möglichkeit, die CSS an Ihre Bedürfnisse anzupassen. Sehen Sie sich die folgenden Beispiele an: wp_add_inline_style (Beispiel verfügbar) und get_theme_mod .

0
Jevuska