Ondersteuning » Thema en CSS/opmaak » Verschillende headers per pagina in twenty twelve

  • Hallo, zoals meerdere mensen heb ik problemen om per pagina een aparte header image te gebruiken. Uitgelichte afbeelding werkt niet en en extra veld met customerheader ook niet. Iemand een tip wat ik verkeerd doe? Alvast bedankt.

15 reacties aan het bekijken - 1 tot 15 (van in totaal 16)
  • Met deze beperkte info kan ik niet zeggen wat je verkeerd zou doen.

    Zo maak ik een aanpasbare header-image / banner:

    1. Plaats code in header.php, boven de navigatie, maar onder </head>.
      <!-- toevoeging variabele afbeelding -->
      <img src='<?php echo get_post_meta($post->ID, 'banner', true); ?>' />
      <!-- EINDE toevoeging variabele afbeelding -->
    2. In de edit-pagina veschijnt een extra veld-optie;
      voeg veld toe: banner
      waarde: pad naar afbeelding [Zorg dat het pad KLOPT!]
    3. Vervolgens geef ik voor elke pagina apart op welke banner ik wil tonen.

      Werkt al jaren.

    Thread starter rob.poortvliet

    (@robpoortvliet)

    bedankt voor je input w.p. Het is in zoverre gelukt dat ik de afbeelding toegevoegd heb maar dat hij daadwerkelijk als extra beeld (banjer) boven de originele header image komt te staan. Hierbij even de link zodat je ziet wat ik bedoel. Ik wil dus graag de originele header image kunnen aanpassen. Zodat je per pagina een ander header image kunt instellen.
    Alvast bedankt weer voor je terugkoppeling!

    Rob,
    Maak eerst een backup van je site en database.
    Maak de wijzigingen in de header.php van je childtheme.

    Zo te zien gebruik je de ’twenty twelve theme’. Als dat klopt…

    1. Open header.php van je childtheme [of kopieer eerst header.php van het originele theme naar de childtheme-map
    2. zoek
      <?php $header_image = get_header_image();
      		if ( ! empty( $header_image ) ) : ?>
      			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
      		<?php endif; ?>
    3. blokkeer deze code door <-- ervoor te plaatsen en –> er direct achter te zetten.
    4. Plaats er onder [maar VOOR </header>] de volgende code:
      [zie boven]

      <!-- toevoeging variabele afbeelding -->
      <img src='<?php echo get_post_meta($post->ID, 'banner', true); ?>' />
      <!-- EINDE toevoeging variabele afbeelding -->
    5. sla alle wijzigingen op en upload naar je site
    Thread starter rob.poortvliet

    (@robpoortvliet)

    Sorry voor de late reactie van mijn kant. Nu is het zo dat ik niet thuis ben in codering. Nu gebruik ik twenty twelve, in ieder geval dat is de planning. Maar is het misschien in twenty eleven of twenty ten standaard mogelijk om verschillende headers te gebruiken?

    Nee, helaas.
    Je zal echt de code moeten aanpassen.

    Maak eerst een back-up van je site.

    Het is een beetje als het oplossen van een puzzel.

    Werk langzaam en NAUWKEURIG!!
    Werk stap-voor-stap.
    Maak elke stap eerst af, controleer het resultaat. Ga daarna pas door naar de volgende stap.

    Thread starter rob.poortvliet

    (@robpoortvliet)

    Ok dan, dan ga ik aan de slag. Ik zal ongetwijfeld nog met een vraag terugkomen 😉
    Bedankt weer

    Thread starter rob.poortvliet

    (@robpoortvliet)

    klopt het dat in de parent directory van de child theme map de header.php hetzelfde is als in de child theme map? Ik heb dus nu op deze locaties hetzelfde bestand staan.

    Als dit verder correct is uitgevoerd, hoe kan ik dan die verschillende afbeeldingen/headers per pagina aangeven? als je nu kijkt zie je <—-> op de plaats van de header staan.

    Het lijkt er op dat je ergens een typefoutje hebt gemaakt; <—-> hoort hier niet.
    Onderstaande was en is de bedoeling. Controleer of het bij jou goed is gegaan:

    1. kopieer header.php van het originele theme, naar de map van het childtheme
    2. zoek in de header.php van het childtheme naar de volgende tekst:
      <?php $header_image = get_header_image();
      if ( ! empty( $header_image ) ) : ?>
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
      <?php endif; ?>
    3. Pas deze code aan als volgt:
      <!-- <?php $header_image = get_header_image();
      if ( ! empty( $header_image ) ) : ?>
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
      <?php endif; ?> -->

      DUS: plaats <!-- aan het begin [let op de ‘!’]
      en plaats --> aan het einde van het genoemde code-blok. [zonder !]

    4. Plaats er onder [maar VOOR </header>] de volgende code:
      <!-- toevoeging variabele afbeelding -->
      <img src='<?php echo get_post_meta($post->ID, 'banner', true); ?>' />
      <!-- EINDE toevoeging variabele afbeelding -->

      Dit lijkt bij jou goed te zijn gegaan!

    5. == == ==
      Om nu een variabele afbeelding in te stellen:

    6. Dashboard > open een bericht of pagina
    7. klik rechtsboven in de tab scherminstellingen
    8. vink extra velden AAN
    9. in de editor: scroll naar beneden naar het blok ‘Extra Velden’
    10. voeg veld toe: banner
    11. geef waarde in, dwz pad naar afbeelding [Zorg dat het pad KLOPT!] bijv:
      wp-content/uploads/eigenbanner1.png
    12. sla instelling op [onder veld]
    13. sla wijziging pagina / bericht op [rechter-zijbalk]
    Thread starter rob.poortvliet

    (@robpoortvliet)

    Dit is gelukt, mooi! Bedankt. Nu alleen het beeldmateriaal met de juiste resolutie uploaden omdat hij hem nu in zijn originele size meeneemt.

    Thread starter rob.poortvliet

    (@robpoortvliet)

    Nog een laatste vraag. Kan ik dan ook nog wel eventueel een logo boven de banner plaatsen?

    Gefeliciteerd! Goed gedaan.

    Hetzelfde logo op elke pagina, of variabel?

    Als je een variabele oplossing wilt:

    Kopieer de eerder geplaatste code en plak hem nogmaals en vervang ‘banner’ door bv ‘logo’. !!NB!! Plak de code boven de ‘banner -versie’
    ==
    In de editor geef als veldnaam: logo met als waarde het pad naar het bestand, op dezelfde wijze als boven.

    <!-- toevoeging [variabele] logo  Ik heb een div toegevoegd om grootte en plaatsing te kunnen instellen via css.-->
    <div id="varLogo">
    <img src='<?php echo get_post_meta($post->ID, 'logo', true); ?>' />
    </div>
    <!-- EINDE toevoeging variabele logo-->

    Neem nu waarden op voor varLogo' op in jestyle.css` van het childtheme, bijv. voor grootte, plaats, text etc.

    bijvoorbeeld [allen aanpassen en toevoegen / verwijderen naar behoefte]

    .varLogo{
         height:80px;
         float:left;
         margin-top:35px;
    }

    Thread starter rob.poortvliet

    (@robpoortvliet)

    Bedankt! Zo leer je nog eens wat ;-).

    Het gaat om een zelfde logo op elke pagina. Daarnaast heb ik waarschijnlijk iets fout gedaan door eerst te zorgen dat de codering voor de headers goed werkt, wat we hierbojven hebben gedaan. En daarna de permalinks aangepast. Ik heb het .htaccess file angepast zoals vermeld werd en nu ben werken de plaatjes van de headers niet meer.

    Zet de permalinks maar effe uit en ga terug naar de basisinstellingen.
    Als de boel [weer] werkt, kan je kijken hoe je de permalinks weer aan de praat krijgt. Dat is nl. nogals ‘storingsgevoeling’ [understatement van vandaag 😉 ]

    Thread starter rob.poortvliet

    (@robpoortvliet)

    Als ik de permalinks nar de basisinstelling zet gaat het weer goed. Als ik het weer aanpas i het gebeurd. Wat kan ik daar nog aan doen?

    Thread starter rob.poortvliet

    (@robpoortvliet)

    Wat mij overigens ook opvalt is dat na het aanpassen van de codes voor de header, de site op een mobiel er ‘niet meer uitziet’. Kijk maar even als je wilt op http://www.woudina-coaching.nl

15 reacties aan het bekijken - 1 tot 15 (van in totaal 16)
  • Het onderwerp ‘Verschillende headers per pagina in twenty twelve’ is gesloten voor nieuwe reacties.