Heb je een link naar je website?
Zou je even de code uit je header.php hier willen plaatsen? dan kan ik even kijken 🙂
Ik denk dat het dit is wat je bedoelt (sorry, maar ik ben een absolute leek wat dat betreft…):
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id=”content”>
*
* @package Ravenna
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”profile” href=”http://gmpg.org/xfn/11″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class=”preloader”>
<div class=”preloader-inner”>
<?php $preloader = get_theme_mod(‘preloader_text’, ‘LOADING…’); ?>
<?php echo esc_html($preloader); ?>
</div>
</div>
<div id=”page” class=”hfeed site”>
<?php esc_html_e( ‘Skip to content’, ‘ravenna’ ); ?>
<header id=”masthead” class=”site-header clearfix” role=”banner”>
<div class=”site-branding col-md-4 col-sm-6″>
<?php ravenna_branding(); ?>
</div><!– .site-branding –>
<nav id=”site-navigation” class=”main-navigation col-md-8″ role=”navigation”>
<?php wp_nav_menu( array( ’theme_location’ => ‘primary’, ‘menu_id’ => ‘primary-menu’ ) ); ?>
</nav><!– #site-navigation –>
<nav class=”mobile-nav col-md-8 col-sm-6″></nav>
</header><!– #masthead –>
<?php if ( get_header_image() && ( get_theme_mod(‘front_header_type’ ,’image’) == ‘image’ && is_front_page() || get_theme_mod(‘site_header_type’, ‘image’) == ‘image’ && !is_front_page() ) ) : ?>
<div class=”header-image parallax”>
<div class=”header-info <?php echo ravenna_mobile_boxes(); ?>”>
<div class=”container”>
<?php ravenna_header_boxes(); ?>
</div>
</div>
</div>
<?php endif; ?>
<div id=”content” class=”site-content”>
<?php if ( !is_page_template(‘page-templates/page_widgetized.php’) ) : ?>
<div class=”container”>
<?php endif; ?>
Zo te zien is het de functie Ravenna_header_boxes();
Hier valt niet zomaar 3 verschillende linken van te maken zonder een paar grotere aanpassingen
Zou je dit kunnen?
Laten we kijken of het me lukt… Inmiddels begin ik WordPress beter te begrijpen en heb ik ook een child theme aangemaakt voor de site, dus ik krijg er steeds meer handigheid in. Als je het me kunt uitleggen, graag! Dan ga ik het gewoon proberen. Bedankt!
Ik zou dan even willen weten hoe jij in de back – end die 3 blokken vult met content?
Welke stappen neem je ?
Eehm… Wat bedoel je met “in de back-end”?
Ik vul de header boxes via de customizer > header area (of via het dashboard > weergave > header, maar dat komt op hetzelfde neer)
Johanna,
Backend ===> admin-view van je site
Frontend ===> publieke view van je site
Ik heb even in de functions.php gekeken van Ravenna. De regels 198 tot 230 definiëren de functie van de headerboxes. Deze functie kun je ombouwen naar je eigen functie.
Stap 1
Maak in je childtheme een bestand header.php met dezelfde code als in de header.php van je parenttheme. Vervang op regel 44
<?php ravenna_header_boxes(); ?>
door
<?php johanna_header_boxes(); ?>
Stap 2
Maak in je childtheme een bestand genaamd functions.php aan met inhoud
<?php
/**
* Ravenna childtheme functions and definitions
*
*
*/
/**
* Header boxes, aangepast 11 december door johanna
*/
if ( ! function_exists( 'johanna_header_boxes' ) ) :
function johanna_header_boxes() {
$box_icon_1 = get_theme_mod('box_icon_1', 'fa-building-o');
$box_icon_2 = get_theme_mod('box_icon_2', 'fa-heart-o');
$box_icon_3 = get_theme_mod('box_icon_3', 'fa-tablet');
echo '<div class="header-block"><a href="/vertalingen" target="_self">';
if ($box_icon_1) {
echo '<span class="header-icon"><i class="fa ' . esc_html($box_icon_1) . '"></i></span>';
}
echo '<h3 class="header-title">' . esc_html(get_theme_mod('box_title_1', 'Solid construction')) . '</h3>';
echo '<div class="header-text">' . wp_kses_post(get_theme_mod('box_text_1', 'Try it and see for yourself. You will be amazed.')) . '</div>';
echo '</a></div>';
echo '<div class="header-block"><a href="/tolkdiensten" target="_self">';
if ($box_icon_2) {
echo '<span class="header-icon"><i class="fa ' . esc_html($box_icon_2) . '"></i></span>';
}
echo '<h3 class="header-title">' . esc_html(get_theme_mod('box_title_2', 'Built with love')) . '</h3>';
echo '<div class="header-text">' . wp_kses_post(get_theme_mod('box_text_2', 'Countless hours of work and passion went into this.')) . '</div>';
echo '</a></div>';
echo '<div class="header-block"><a href="/overig" target="_self">';
if ($box_icon_3) {
echo '<span class="header-icon"><i class="fa ' . esc_html($box_icon_3) . '"></i></span>';
}
echo '<h3 class="header-title">' . esc_html(get_theme_mod('box_title_3', 'Responsive design')) . '</h3>';
echo '<div class="header-text">' . wp_kses_post(get_theme_mod('box_text_3', 'Looks great on any device, no matter the size.')) . '</div>';
echo '</a></div>';
}
endif;
Omdat in php een mistype kan leiden tot een wit scherm zowel in de frontend als de backend, zou ik je willen aanbevelen om dit uitsluitend en alleen te doen als je FTP-toegang hebt. Je werkt dan niet in de backend van je site, en kan bij een mistype snel de bestanden weer verwijderen.
Krijg je een wit scherm, meld het dan hier, dan lopen we de code nogmaals langs.
Het is een beetje een quick & dirty-manier waarbij de linkjes op de boxes ‘hard’ zijn gecodeerd. Het kan nog anders, maar dit lijkt me een controleerbare aanpak.
succes & groet,
Lianne
Ik had het niet beter en mooier kunnen uitleggen (Y)
Dank je voor het compliment, maar ik bedacht dat ik een element heb gemist, namelijk dat in customizer wel de gewenste tekstwijzigngen moeten kunnen worden gedaan. Daarvoor moet je je nog bestand in je childtheme op nemen, namelijk in een map inc, customizer.php. Daar zou je alle vermeldingen ravenna_header_boxes moeten wijzigen in jolanda_header_boxes.
Dit wordt al te ingewikkeld, te foutgevoelig en zou ik zelf voor de zekerheid ook willen testen. Dus ik stel een andere werkwijze voor. Begin niet aan de bovenstaande instructie van mij. Je hoeft eigenlijk maar 1 stap te maken
Maak in je childtheme een nieuw bestand header.php met de code uit de header.php van Ravenna. Vervang op regel 44
<?php ravenna_header_boxes(); ?>
door:
<div class="header-block"><a href="/vertalingen" target="_self"><span class="header-icon"><i class="fa fa-pencil"></i></span><h3 class="header-title">Vertalingen</h3><div class="header-text">Voor al uw vertalingen vanuit het Italiaans naar het Nederlands en vice versa.</div></a></div>
<div class="header-block"><a href="/tolkdiensten" target="_self"><span class="header-icon"><i class="fa fa-comments"></i></span><h3 class="header-title">Tolkdiensten</h3><div class="header-text">Uw hulp bij ontmoetingen tussen Nederlanders en Italianen.</div></a></div>
<div class="header-block"><a href="/overig" target="_self"><span class="header-icon"><i class="fa fa-asterisk"></i></span><h3 class="header-title">Overig</h3><div class="header-text">Revisie, correctie, lezingen, cursussen.</div></a></div>
Dit is een nog quicker and dirtier manier, en heeft als nadeel dat je voortaan de tekst die je frontend wil tonen in je header.php in het childtheme moet aanpassen, in plaats van in de customizer.
Maar ik heb het idee dat je bij dit type site niet vaak deze tekst zult veranderen, er zal best wel mee te leven zijn.
Succes!
Lianne
Beste Lianne en Arjen, heel erg bedankt voor jullie hulp, super! Ik ga er aan werken!
You’re welcome & succes, Johanna.
Trouwens: ik kan me voorstellen dat je deze header alleen op home wilt (hij neemt wel heel veel ruimte in beslag, met name op mobiel twijfelachtig. als je op mobiel navigeert, moet je op iedere pagina eerst al die blokken (weer) wegscrollen.
Met deze opgave kunnen we je desgewenst ook helpen, maak desgewenst hiervoor een nieuw topic.
groet,
Lianne
Nou, inderdaad, dat zou mijn volgende vraag worden, want dat viel me ook al op. Ik dacht in eerste instantie, toen ik het thema koos, dat die headers alleen op de homepage zouden blijven. Nadat het bovenstaande gelukt is, ga ik een nieuw topic openen. Nogmaals dank voor de hulp en het meedenken.
