Het Genesis Framework is een populair WordPress-thema dat is gebruikt om enkele van de mooiste en meest creatieve websites op internet te maken. Het is een van onze favorieten hier bij Blogging for Entrepreneurs omdat het zo veelzijdig, gebruiksvriendelijk en aanpasbaar is.
Een ding dat veel mensen moeilijk vinden aan Genesis-thema's, is het toevoegen van een headerafbeeldingslogo. Gelukkig kun je met slechts een paar klikken je eigen aangepaste logo op zijn plaats hebben.
Dit is handig als u wilt dat uw site een specifieke branding heeft die bij uw bedrijf past. Het toevoegen hiervan duurt minder dan 10 minuten en vereist het gebruik van slechts één plug-in, die door WPSquare Custom Logo Uploader wordt genoemd.
Het kan in slechts enkele seconden worden geïnstalleerd met één klik in het WordPress-beheerpaneel.
Hier zijn de stappen:
1) Installeer de plug-in
2) Voeg gewenste afbeeldingen toe
3) Configureer instellingen
4) Sla wijzigingen 5-10 minuten later op, ga terug naar Genesis Child Theme Settings > Header Image
6) Selecteer een aangepast logo
7) Voer de gewenste URL in
8 ) Wijzigingen opslaan.
Hoe Header Image Logo toe te voegen voor Genesis Child Theme-
STAP 1: Logo instellen in Dashboard
Aangezien ik gebruik "TwentyTen Child-thema", het enige wat ik hoef te doen is naar Dashboard >> Uiterlijk >> Aanpassen >> Koptekst te gaan en een logo toe te voegen dat ik wil gebruiken. U kunt uw eigen aangepaste afbeeldingen toevoegen of kiezen uit de afbeeldingen die beschikbaar zijn in WordPress, die u kunt vinden onder het gedeelte "Nieuwe toevoegen".
In mijn geval ga ik een afbeelding toevoegen vanuit de Dashboard Media-map door op het bestand met de naam "header-logo.png" te klikken.
STAP 2: Voeg aangepaste code toe aan de Genesis Child Theme-functie.
php Open het php-functiebestand van het Genesis Child-thema, dat zich gewoonlijk in de hoofdmap van het thema bevindt, genaamd functions.php . U kunt dit bestand openen met elke FTP- of SFTP-client zoals Filezilla.
En als u dit bestand niet kunt vinden, kunt u er een maken. Ik heb een bericht geschreven om te laten zien hoe je het functie php-bestand van het Genesis-kinderthema kunt maken.
Hier is de code die ik heb toegevoegd aan het einde van mijn functions.php-bestand, maar voordat ik de PHP-tag sluit?>
// BP Header-logo
add_custom_image_header( 'bp-logo');
Dit vertelt Genesis om een afbeelding met de naam "bp-logo" te gebruiken als het koplogo voor mijn website. U kunt deze naam wijzigen, maar vergeet niet deze ook in de volgende stap te wijzigen. Maak nu een nieuwe map aan met de naam bp-logo .
Het moet in de hoofdmap van uw thema worden gemaakt. Voor meer info, check mijn post over hoe je een map aanmaakt in je Genesis child-thema.
STAP 3: Maak een logo-afbeelding voor een thema van derden
Het probleem is dat onze logo-afbeelding niet wordt weergegeven in het customizer-gedeelte van het WordPress-dashboard, maar het wordt nog steeds in de frontend weergegeven zodra de website online is gepubliceerd.
Het betekent dat we deze afbeelding moeten toevoegen aan de header.php van ons thema. Gelukkig kunnen we dit doen door onze thema rechtstreeks vanuit het WordPress-beheergebied.
Wat je nodig hebt, is je thema-zipbestand en FTP- of SFTP-client zoals FileZilla . U kunt gebruik maken van phpMyAdmin ook als je weet hoe je het moet gebruiken.
Open het zip-archief met uw favoriete programma en ga naar /wp-content/themes/YOUR THEME NAME/header.php . Kopieer de code die u in dit bestand ziet, maar vóór de PHP-afsluittag ?> .
Hier is een voorbeeld van mijn header.php-bestand met toegevoegde aangepaste code:
” titel=" ” rel=”thuis”> ”alt=" ” titel=" ”/>
STAP 4: Voeg aangepaste code toe aan de header van Genesis Child Theme.
php Open nu het header.php-bestand van uw thema (dat zich bevindt in /wp-content/themes/YOUR THEME NAME/ ) en voeg deze code toe voordat u de PHP-tag sluit (die zich aan het einde van het bestand bevindt):
STAP 2: Klaar Als u nu uw website bezoekt, verschijnt het logo op de frontend.
Maar er is een probleem met deze code. Het maakt een afbeeldingsbestand op uw server aan en als u veel afbeeldingen uploadt, neemt het onnodig serverruimte in beslag.
Dus om dit probleem op te lossen, heb ik mijn plug-in genaamd "Genesis Simple Hooks" gebruikt. En hier is de bijgewerkte aangepaste code die ik heb toegevoegd in het bestand Functions.php: add_action( 'genesis_before_header', 'bp_add_header_logo');
functie bp_add_header_logo() { if (!is_page() || isnull( get_post_meta(get_the_ID(), 'bp-logo', true )) ): ?> ” titel=" ” rel=”thuis”> ”alt=" ” titel=" ”/>
WordPress-plug-in gebruiken (Genesis Simple Headers)
WordPress is een geweldig CMS (Content Management System) en kan worden gebruikt voor het maken van verschillende soorten websites. Het heeft een uitgebreide verzameling plug-ins beschikbaar waardoor het nog krachtiger is.
Met de plug-in Genesis Simple Headers kunt u aangepaste headers toevoegen aan uw WordPress-website. U kunt uw eigen headerafbeelding uploaden of kiezen uit de standaardopties die beschikbaar zijn in de plug-in, zoals afbeeldingen die worden geleverd door het WordPress-thema.
Als de koptekst van je blog niet correct wordt weergegeven op je blog, verhelp dan eerst dat probleem met behulp van deze stappen:
Controleer of je de afbeelding naar de juiste map hebt geüpload (kies uit /wp-content/uploads/yourimage.jpg). Als je het daar niet kunt vinden, controleer dan nogmaals of je afbeelding de juiste afmetingen heeft. Vervolgens kunt u het uploaden naar de juiste map met behulp van FTP-software.
Controleer of je afbeelding niet beschadigd is (probeer hem te openen in een beeldbewerkingsprogramma). Zo ja, verwijder dat bestand en upload een nieuw om te zien of dit probleem zich blijft voordoen.
U kunt proberen een andere kopafbeelding te maken, gewoon door naar Uiterlijk - Genesis Simple Headers - Nieuwe afbeelding toevoegen te gaan.
U kunt ook proberen de standaardafbeelding te gebruiken die bij uw WordPress-thema wordt geleverd door naar Uiterlijk - Bewerk Genesis eenvoudige kopafbeeldingen te gaan en er vervolgens een te kiezen of gewoon een afbeelding van internet te uploaden.
Als dit nog steeds niet werkt, neem dan contact op met [e-mail beveiligd] voor meer hulp.
Als je wilt leren hoe je deze plug-in kunt gebruiken, lees dan verder...
Dit artikel is alleen bedoeld voor beginners en zal hen helpen de basisprincipes van het gebruik van deze WordPress-plug-in te begrijpen. Het gaat ervan uit dat de gebruiker de Genesis Simple Headers-plug-in al op zijn website heeft geïnstalleerd en de basis kent van het gebruik van WordPress Dashboard.
Basisstappen om aangepaste headers toe te voegen voor WordPress Blog
1) Ga naar het Dashboard van je WordPress-blog en plaats de muisaanwijzer op Uiterlijk. Selecteer daar Menu's.
2) Klik op Header #1 onder Genesis Simple Headers drop-down menu. Er wordt een nieuwe pagina geopend met veel opties erop. U kunt alle opties die daar worden aangeboden wijzigen.
3) De eerste optie is Header Image. Klik op de bladerknop en selecteer een afbeelding op uw computer of gebruik een van de standaardafbeeldingen die in deze sectie beschikbaar zijn.
Zorg ervoor dat je toestemming hebt om die afbeelding te gebruiken, want deze wordt weergegeven als onderdeel van je blog inhoud en wordt ook weergegeven in zoekresultaten. U kunt desgewenst dezelfde afbeelding gebruiken voor alle drie de koptekstafbeeldingen. U kunt ook de tekst die in dat gedeelte wordt weergegeven, wijzigen.
4) Het tweede vervolgkeuzemenu is Kopteksttype. Deze plug-in biedt 5 typen en u kunt er een kiezen. Als u het type echter in H1 verandert, kunt u het verder stylen als een H1-header.
5) Het derde vervolgkeuzemenu is Positionering en u kunt het gebruiken om de positionering van uw koptekst te wijzigen afbeelding op je blog (links, midden of rechts).
6) Met het vierde vervolgkeuzemenu kun je kiezen welk gedeelte van de berichten in die kop moet worden weergegeven. Je hebt 3 secties: Genesis Featured Image, Intro Text en Post Title. Als u iets anders wilt weergeven, kunt u die HTML-code invoeren in het daarvoor bestemde gedeelte en het zal daar verschijnen.
7) Klik op Menu Opslaan nadat u al uw wijzigingen heeft aangebracht.
8) De nieuwe kopafbeelding wordt onmiddellijk op uw blog weergegeven en wanneer een bezoeker een van uw blogberichten opent, verschijnt deze kopafbeelding bovenaan. U kunt de positie echter naar rechts of links wijzigen door naar Uiterlijk - Aanpassen - Zijnavigatie te gaan en vervolgens rechts of links te selecteren.
Style.css-bestand van Genesis Child-thema bewerken-
Ik kwam een Genesis-kindthema tegen met de naam [i]Element[/i] in de officiële WordPress Theme Directory en ik wilde het gebruiken in mijn lokale ontwikkelomgeving.
De eerste en tweede post op deze site geven aanwijzingen over het opzetten van een nieuw genesis child-thema voor ontwikkelingsdoeleinden. Dus ga ze eens bekijken als je dat nog niet hebt gedaan.
Nadat ik probeerde het installatiescript uit de eerste post uit te voeren, realiseerde ik me dat het een child-theme-stylesheet in een map met de naam "_s" installeerde, wat correct is voor alle WordPress-thema's die er zijn, behalve Genesis.
Ik bewerk dan mijn child-themabestand style.css en wijzigde paden van "Element Child Theme/style.css" naar "Element Child Theme/*/style.css".
En het werkt echt!
Links
- Waarom een logo belangrijk is voor uw bedrijf
- Essentiële elementen van blog die u als beginner niet mag missen
- Ontdek het nu, hoe u uw social media-marketing een boost kunt geven?
- Mijn favoriete verzameling WordPress-thema's aller tijden
Conclusie- Hoe een headerafbeeldingslogo toe te voegen voor Genesis Child Theme 2024
Het Genesis Framework is een van de meest populaire WordPress-thema's die beschikbaar zijn. Het is eenvoudig aan te passen en wordt geleverd met tal van functies waarmee u uw bedrijf van de grond kunt krijgen.
Een manier om uw website te personaliseren, is door een headerafbeeldingslogo toe te voegen voor Genesis Child Theme, dat zal verschijnen in plaats van de standaard "Genesis Framework" -tekst bovenaan elke pagina.
Blogs zijn een geweldige manier om uw kennis te delen, uw product of dienst te promoten en een publiek op te bouwen. Maar hoe ga je ze ontwerpen?
Er zijn veel verschillende blogthema's die beweren de beste te zijn voor het maken van prachtige websites, maar welke is geschikt voor u? We hebben enkele van de meest populaire Genesis Child Theme-sjablonen gebruikt die vandaag beschikbaar zijn en hun ontwerpkwaliteit gerangschikt van 1-5 sterren op basis van onze eigen persoonlijke voorkeuren.
