Ondersteuning » Thema en CSS/opmaak » Verschillende headers per pagina in twenty twelve
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.
-
Met deze beperkte info kan ik niet zeggen wat je verkeerd zou doen.
Zo maak ik een aanpasbare header-image / banner:
- 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 -->
- In de edit-pagina veschijnt een extra veld-optie;
voeg veld toe:banner
waarde: pad naar afbeelding [Zorg dat het pad KLOPT!]
Vervolgens geef ik voor elke pagina apart op welke banner ik wil tonen.
Werkt al jaren.
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…
- Open
header.php
van je childtheme [of kopieer eerst header.php van het originele theme naar de childtheme-map - 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; ?>
- blokkeer deze code door
<--
ervoor te plaatsen en –> er direct achter te zetten. - 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 -->
- sla alle wijzigingen op en upload naar je site
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.Ok dan, dan ga ik aan de slag. Ik zal ongetwijfeld nog met een vraag terugkomen 😉
Bedankt weerklopt 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:- kopieer header.php van het originele theme, naar de map van het childtheme
- 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; ?>
- 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 !] - 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!
- Dashboard > open een bericht of pagina
- klik rechtsboven in de tab
scherminstellingen
- vink
extra velden
AAN - in de editor: scroll naar beneden naar het blok ‘Extra Velden’
- voeg veld toe: banner
- geef waarde in, dwz pad naar afbeelding [Zorg dat het pad KLOPT!] bijv:
wp-content/uploads/eigenbanner1.png - sla instelling op [onder veld]
- sla wijziging pagina / bericht op [rechter-zijbalk]
== == ==
Om nu een variabele afbeelding in te stellen:Dit is gelukt, mooi! Bedankt. Nu alleen het beeldmateriaal met de juiste resolutie uploaden omdat hij hem nu in zijn originele size meeneemt.
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 je
style.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; }
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 😉 ]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?
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
- Plaats code in header.php, boven de navigatie, maar onder
- Het onderwerp ‘Verschillende headers per pagina in twenty twelve’ is gesloten voor nieuwe reacties.