Beiträge von noobie

noobie

Dankeschön! Ich wünsche dir eine hervorragende Woche!!!!!

noobie

Vielen Dank! Muss ich mir natürlich erstmal in Ruhe anschauen, was ich da jetzt gemacht habe, damits für die Hintergrundfarben der cd_customizer_setting() auch funktioniert.

Ich bedanke mich jedenfalls herzlich! Vielleicht kannst du mir ja ein gutes Tutorial für das entwickeln von wordpress-themes empfehlen? Ich würde das gern lernen, aber hauptsächlich stolper ich hier noch rum. Bei den Tuts die ich bisher gefunden habe, scheint in der Regel irgendwas wichtiges zu fehlen, Oder wichtige Sachen werden halt nicht näher erläutert. Die Basics zur Funktionsweise von Wordpress wären ja wahrscheinlich erstmal total interessant.
Nur aus den Wordpress-Referenzen werd ich leider nicht schlau.

noobie

Eigentlich hätte laut dem Tutorial von T3N schon mit folgendem die Textfarbe im Header geändert werden (können) sollen:

function cptest_add_theme_support() {
add_theme_support( 'custom-header' );

}

Ich bekam im Customizer dadurch zwar ein Auswahl-Sektion "Farben" mit einm Color-Picker, aber der hat weder in der Vorschau noch sonst wo Wirkung gezeigt.

Das Tauschen des Header-Bildes und des Custom-Logos funktioniert dadurch aber anscheinend.

noobie

Hm, zumindest konnte ich den Codeblock nicht mit strg-f im Quellcode des Frontends finden.

Dass ich die

add_action( 'wp_head', 'cptest_customize_colors' ); bzw. auch die
add_action( 'wp_head', 'cd_customizer_css');

nicht einfach unter die schließende Klammer von

function cd_customizer_settings( $wp_customize ) {
...
}

setzen kann, hab ich auch schon rausgefunden. allerdings befinden sich hier auch alle add_action - Aufrufe, die mir im Tutorial über den Weg gelaufen sind, direkt über der zugehörigen Funktion. Deswegen bin ich hier auch etwas ratlos jetzt.

noobie

Hallo!

Ich habe nach einem Tutorial Optionen für Farbschemen in den Customizer meines ersten eigenen Themes eingebaut. Im Customizer funktioniert erstmal alles wie gewünscht, auch mit der Vorschau.

Wenn ich allerdings die dort eingestellten Farben mit "veröffentlichen" speichern will, werden die Einstellungen nicht übernommen. Es bleibt alles so, wie es in der styles.css vorgegeben ist.

Kann mir jemand auf die Sprünge helfen, woran das liegt?

PHP

/* customizer.php */


<?php
add_action( 'customize_register', 'cd_customizer_settings' );
    function cd_customizer_settings( $wp_customize ) {


        $wp_customize->add_section( 'cd_hintergrundfarbe' , array(
            'title'      => 'Hintergrundfarbe',
            'priority'   => 30,
        ) ); 


        $wp_customize->add_setting( 'background_color' , array(
            'default'     => '#43C6E4',
            'transport'   => 'refresh',
        ) );


        $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array(
            'label'        => 'Background Color',
            'section'    => 'cd_hintergrundfarbe',
            'settings'   => 'background_color',
        ) ) );


        add_action( 'wp_head', 'cd_customizer_css');
        function cd_customizer_css()
        {
            ?>
                 <style type="text/css">
                     body { background: #<?php echo get_theme_mod('background_color', '#43C6E4'); ?>; }
                 </style>
            <?php
        }


        add_action( 'customize_preview_init', 'cd_customizer' );
        function cd_customizer() {
        wp_enqueue_script(
          'cd_customizer',
          get_template_directory_uri() . '/customizer.js',
          array( 'jquery','customize-preview' ),
          '',
          true
            );
        }


        $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
        $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';




        /******** textfarben **************************/




        $wp_customize->add_section( 'textcolors' , array(
            'title' =>  'Color Scheme',
        ) );


        // main color ( site title, h1, h2, h4. h6, widget headings, nav links, footer headings )
        $txtcolors[] = array(
            'slug'=>'color_scheme_1',
            'default' => '#000',
            'label' => 'Main Color'
        );
 
        // secondary color ( site description, sidebar headings, h3, h5, nav links on hover )
        $txtcolors[] = array(
        'slug'=>'color_scheme_2',
        'default' => '#666',
        'label' => 'Secondary Color'
        );
 
        // link color
        $txtcolors[] = array(
        'slug'=>'link_color',
        'default' => '#008AB7',
        'label' => 'Link Color'
        );
 
        // link color ( hover, active )
        $txtcolors[] = array(
        'slug'=>'hover_link_color',
        'default' => '#9e4059',
        'label' => 'Link Color (on hover)'
        );


        // add the settings and controls for each color
        foreach( $txtcolors as $txtcolor ) {
 
        // SETTINGS
        $wp_customize->add_setting(
            $txtcolor['slug'], array(
                'default' => $txtcolor['default'],
                'type' => 'option',
                'capability' =>  'edit_theme_options'
            )
        );


        // CONTROLS
        $wp_customize->add_control(
            new WP_Customize_Color_Control(
                $wp_customize,
                $txtcolor['slug'],
                    array('label' => $txtcolor['label'],
                    'section' => 'textcolors',
                    'settings' => $txtcolor['slug'])
            )
        );


    
        }


        


        function cptest_customize_colors() {
            /**********************
            text colors
            **********************/
            // main color
            $color_scheme_1 = get_option( 'color_scheme_1' );
 
            // secondary color
            $color_scheme_2 = get_option( 'color_scheme_2' );
 
            // link color
            $link_color = get_option( 'link_color' );
 
            // hover or active link color
            $hover_link_color = get_option( 'hover_link_color' );


            /****************************************
            styling
            ****************************************/
            ?>
                <style>
 
 
                /* color scheme */
 
                /* main color */
                #site-title a, h1, h2, h2.page-title, h2.post-title, h2 a:link, h2 a:visited, .menu.main a:link, .menu.main a:visited, footer h3 {
                color:  <?php echo $color_scheme_1; ?>;
                }
 
                /* secondary color */
                #site-description, .sidebar h3, h3, h5, .menu.main a:active, .menu.main a:hover {
                color:  <?php echo $color_scheme_2; ?>;
                }
                .menu.main,
                .fatfooter {
                border-top: 1px solid <?php echo $color_scheme_2; ?>;
                }
                .menu.main {
                border-bottom: 1px solid <?php echo $color_scheme_2; ?>; 
                }
                .fatfooter {
                border-bottom: 1px solid <?php echo $color_scheme_2; ?>;
                }
 
                /* links color */
                a:link, a:visited {
                color:  <?php echo $link_color; ?>;
                }
 
                /* hover links color */
                a:hover, a:active {
                color:  <?php echo $hover_link_color; ?>;
                }
 
                </style>
    
            <?php




 
        }
        add_action( 'wp_head', 'cptest_customize_colors' );




        


    }

Alles anzeigen

Code

/* customizer.js */


( function( $ ) {


    wp.customize( 'background_color', function( value ) {
          value.bind( function( newval ) {
              $( 'body' ).css( 'background-color', newval );
          } );
      } );
      
      wp.customize( 'blogname', function( value ) {
        value.bind( function( newval ) {
          $( '#intro h1' ).html( newval );
        } );
      } );
      
      wp.customize( 'blogdescription', function( value ) {
        value.bind( function( newval ) {
          $( '#intro h2' ).html( newval );
        } );
      } );
 
 
 
 
 
    } )( jQuery );

Alles anzeigen

noobie

Oh mann. Vielen vielen Dank. Es lag natürlich an den Leerzeichen....

Dann muss ich ja den Customizer nur noch dazu kriegen dass er mir einen Zuschnitt anbietet. Und dann das gleiche nochmal mit dem Logo schaffen. :)

Ich bedanke mich ganz herzlich!

noobie

Hallo,

ich schreibe gerade mein erstes eigenes them (bzw. versuche es.) Bin nach einer Anleitung vorgegangen: https://t3n.de/news/grosse-guide-wordpress-theme-555618/

Ich kann nun im Customizer zwar ein HeaderImage einstellen, und es es sieht so aus, als wenn es auch integriert wird. Zumindest wird es im Firefox-Inspektor mit koreekter URL an der richtigen Stelle angezeigt. Aber es wird trotzdem nicht dargestellt, der Bereich bleibt schlicht leer.

Der Code-Ausschnitt der header.php:

HTML

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">  <!-- class:  css-fallback angaben, falls js nicht aktiviert -->
  <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <?php if ( is_singular() && pings_open() ) { ?>
    
    <?php }
    wp_head(); ?>  <!-- !!!!!!!!!!!!! wp bindet zB title-element, canonical-tag, jquery ein. wird für styles und script von plugins genutzt -->
    
    <!--
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    
    <script src="dom-helper.js" defer="defer"></script>
    <script src="menu-button-mobile.js" defer="defer"></script>
    -->
  </head>


<body <?php body_class(); ?>>  <!-- fügt abhängig von dargestellter seite unterschiedliche klassen ein, zB home-klasse auf start-seite -->


<!--- sichtbarer header --->
<header id="header-wrap" class="masthead" role="banner" style="background-image: url('


<?php if ( get_header_image() ) {  /* prüfen, ob header-image vorhanden */
 echo esc_url( get_header_image() );  /* wird hier ein alt-attribut durch wordpress gesetzt, bzw. lässt es sich in wirdpress nachtragen? */
 } ?>


    ') ">
    <div id="title-container" class="show">


      <div id="title-image-container"style="background: url(


        <?php
        $custom_logo_id = get_theme_mod( 'custom_logo' );
        $image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
        echo $image[0];
        ?>


      ) no-repeat; background-size: contain;">
      
      </div>

Alles anzeigen

Screenshot vom Firefox-Inspektor ist im Anhang!

Hat vielleicht jemand eine Idee woran es liegt?

Vielen Dank!

noobie

Hey, vielen Dank! Bin dabei mich damit zu beschäftigen. Natürlich weiß ich, dass das nicht unmittelbar etwas mit WP zu tun hat. Hatte gehofft, dass die Frage hier in der Design-Abteilung trotzdem okay wäre. Ich verstehe aber deinen Einwand und werde bei weiteren Fragen ein anderes Forum für dieses Thema suchen. Vielen Dank für deine Hilfe!!

noobie

Vielen Dank!

Da ich der Theme-Nutzung ja vorher nciht weiß, wie die verschachtelung später mal irgendwo aussieht, kann ich da natürlich im css keine so starren Muster hinterlegen, denk ich mal.

die doku zu der wp_nav_menu(9 schau ich mir in jedem Falle an! Aber es kommt ja aufs gleiche raus, wenn ich statt der Listen div-elemente verwende.

Ich muss mir wohl nen kopf machen, wie ich mit javascript die verschachtelung auslese und dann zB beim hovern eines Elements über das zuweisen von klassen mit entsprechender css-verknüpfung die nächste ebene sichtbar mache.

Korrier mich bitte, wenn es einen besseren Weg gibt. Naja. Bin halt Anfänger :)

Aber vielen Dank erstmal!!!

noobie

Okay, die Selektoren sind wohl von der Sache her richtig. Ich verstehe jetzt, dass die folgenden ebenen mit gefärbt werden, weil sie inhalt eines listen-elements der ersten ebene sind. ich habs korrigiert.

Mein Ziel ist übrigens ein dropdown-fähiges menu für ein eigenes wordpress theme.

Da das menu ja von wordpress erstellt und eingebunden wird, frag ich vielleicht an dieser stelle mal, was da der richtige ansatz ist? In den tutorials für Dropdown-menus finde ich hauptsächlich ansätze, die nur mit div-elemente, aber nicht mit Listen arbeiten, wie wordpress sie automtisch als menu erstellt.

bei der darstellung von listen über mehrere ebenen hab ich jetzt halt probleme. es soll in der desktop-ansicht erstmal ein container mit einer zeile (also erste menu-ebene mit display: inline) werden. Beim hover sollen dann entsprechend die unteren ebenen aufklappen.

noobie

Hallo,

ich versuche mich gerade daran ein menü auf basis einer liste zu erstellen und scheitere leider an den css selektoren. Nachfolgend der html-code, den ich zum testen nehme:

HTML

<html>
  <head>
    <title>test-menu</title>
    <meta content="">
    <link rel="stylesheet" type="text/css" href="test-menu.css" media="screen" />
    <script language="javascript" type="text/javascript" src="test-menu.js"></script>
    <style></style>
  </head>
  <body>
    <nav>
        <ul class="menu">
            <li>home</li>
            <li>kontakt</li>
            <li id="hover1">impressum


              <ul class="sub-menu">
                <li>imp1</li>
                <li id="hover2">imp1
                  <ul class="sub-menu">
                    <li>imp12</li>
                    <li id="hover3">imp12
                      <ul class="sub-menu">
                        <li>imp13</li>
                        <li>imp13</li>
                        <li id="hover4">imp13
                          <ul class="sub-menu">
                            <li>imp14</li>
                            <li>imp14</li>
                            <li>imp14</li>
                            <li>imp14</li>
                          </ul>
                        </li>
                        <li>imp13</li>
                      </ul>
                    </li>
                    <li>imp12</li>
                    <li>imp12</li>
                  </ul>
                </li>
                <li>imp1</li>
                <li>imp1</li>
                <li>imp1</li>
              </ul>
            </li>
            <li>datenschutz</li>
            <li>home</li>
            <li>kontakt</li>
            <li>impressum</li>
            <li>datenschutz</li>
            <li>home</li>
            <li>kontakt</li>
            <li>impressum</li>
            <li>datenschutz</li>
        </ul>
    </nav>

Alles anzeigen

Mein Problem: ich möchte per css die listen elemente der ersten ebene ansteuern, später sicher auch die nachfolgenden ebenen.

wie ich auf zB https://www.mediaevent.de/css/css-selekt…xtselektor.html gelesen habe, sollte

ul > li {
color: green;
}

die erste menü-ebene anwählen. also alle li-elemente, die direkt im ul-element mit der klasse ".menu" liegen. wählt aber leider alle li aus.

nav > ul.menu:first-child {
color: red;
}

oder

ul.menu:first-child {
color: red;
}

wählt auch alle li-elemente aus.

Ich freue mich, wenn mir jemand auf die Sprünge helfen kann, vielen Dank!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Beiträge von noobie

Übernahme der Customizer-Einstellung funktioniert nicht

Übernahme der Customizer-Einstellung funktioniert nicht

Übernahme der Customizer-Einstellung funktioniert nicht

Übernahme der Customizer-Einstellung funktioniert nicht

Übernahme der Customizer-Einstellung funktioniert nicht

HeaderImage wird bei eigenem Theme nicht angezeigt

HeaderImage wird bei eigenem Theme nicht angezeigt

CSS Kind-Selektoren

CSS Kind-Selektoren

CSS Kind-Selektoren

CSS Kind-Selektoren