Hoe u een WordPress-widget toevoegt aan uw websitekop - DeLaatbusiness

Hoe u een WordPress-widget toevoegt aan uw websitekop

3 min


110
Dummy image 6 gratis internet marketing ebooks, klik hier voor download

Wil je een WordPress-widget toevoegen aan het headergedeelte van je website? Met widgets kunt u eenvoudig inhoudsblokken toevoegen aan specifieke secties van uw thema. In dit artikel laten we u zien hoe u eenvoudig een WordPress-widget aan de kop van uw site toevoegt.

Voeg een WordPress-widget toe aan de header van uw site

Opmerking: dit is een tutorial op middelbaar niveau. U moet code aan uw WordPress-themabestanden toevoegen en CSS schrijven .

Waarom en wanneer heeft u een header-widget op uw site nodig?

Met widgets kunt u eenvoudig inhoudsblokken toevoegen aan een bepaald gebied in uw WordPress-thema. Deze aangewezen gebieden worden sidebars of widget-ready gebieden genoemd.

Een widgetklare zone in de koptekst of voordat inhoud kan worden gebruikt om advertenties, recente artikelen of wat dan ook te tonen.

Dit specifieke gebied heet ‘Below the fold’ en alle populaire sites gebruiken het om echt belangrijke dingen te laten zien.

Het kopgedeelte op de populaire List25-website

Normaal gesproken voegen WordPress-thema’s zijbalken toe naast de inhoud of in het voettekstgebied. Niet veel WordPress-thema’s voegen gebieden toe die widget-klaar zijn boven de inhoud of in de kop.

Daarom bespreken we in dit artikel hoe u een widgetgebied toevoegt aan de header van uw WordPress-website.

Stap 1. Een koptekst Widget-gebied maken

Eerst moeten we een aangepast widgetgebied maken. Met deze stap kunt u uw aangepaste widget zien op de pagina Uiterlijk »Widgets in uw WordPress-dashboard.

U moet deze code toevoegen aan het functie.php- bestand van uw thema .

1
2
3
4
5
6
7
8
9
10
11
12
13
function wpb_widgets_init() {
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );

Deze code registreert een nieuw zijbalkgebied of een widgetgereed gebied voor uw thema.

U kunt nu naar de pagina Weergave »Widgets gaan en een nieuw widgetgebied met de naam ‘Aangepaste header Widget Area’ zien.

Aangepast header widget gebied

Ga door en voeg een tekstwidget toe aan dit nieuw gemaakte widgetgebied en sla het op. Raadpleeg onze handleiding over het toevoegen en gebruiken van widgets in WordPress voor gedetailleerde instructies over het toevoegen van widgets.

Stap 2: toon uw widget voor aangepaste koptekst

Als u nu uw website bezoekt, kunt u de tekstwidget die u net aan uw zojuist gemaakte kopwidget-widget hebt toegevoegd, niet zien.

Dat komt omdat we WordPress nog niet hebben verteld waar dit widget-gebied moet worden weergegeven.

Laten we dat in deze stap doen.

U moet het header.php-bestand in uw thema bewerken en deze code toevoegen waar u uw aangepast widgetgebied wilt weergeven.

1
2
3
4
5
6
7
8
<?php
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
    
<?php endif; ?>

Vergeet niet om uw wijzigingen op te slaan.

U kunt nu uw website bezoeken en u ziet uw header widget-gebied.

Ongecompileerde header-widget

U zult merken dat het er een beetje ongepolijst uitziet. Dat is waar je CSS nodig hebt om het er beter uit te laten zien.

Stap 3: Style Your Header Widget Area met behulp van CSS

Afhankelijk van je thema, moet je CSS toevoegen om te bepalen hoe het header-widgetgebied en elke widget erin wordt weergegeven.

De gemakkelijkere manier om dit te doen is door de CSS Hero plug-in te gebruiken. Hiermee kunt u een intuïtieve gebruikersinterface gebruiken om CSS van een WordPress-thema te wijzigen. Zie onze CSS Hero-recensie voor meer informatie .

Als u geen plug-in wilt gebruiken, kunt u aangepaste CSS aan uw thema toevoegen door naar Uiterlijk » Pagina aanpassen te gaan .

Hiermee wordt de WordPress-interface voor themaaanpassing gestart. U moet op het tabblad ‘Aanvullende CSS’ klikken.

Aangepaste CSS toevoegen aan een WordPress-thema

Met het extra tabblad CSS in de thema-aanpasser kunt u uw aangepaste CSS toevoegen terwijl u de wijzigingen in de livevoorvertoning bekijkt.

In het belang van deze zelfstudie gaan we ervan uit dat u dit gebied alleen gebruikt om een ​​enkele widget toe te voegen om banneradvertenties weer te geven, of een aangepaste menuwidget.

Hier is een voorbeeld van een voorbeeld-CSS om u op weg te helpen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
}  
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

Dit is hoe ons aangepaste header widget-gebied keek naar het standaard Twenty Seventeen-thema.

Voorbeeld van header-widget

U moet mogelijk de CSS aanpassen aan uw thema. Bekijk onze handleiding over het toevoegen van aangepaste stijlen aan WordPress-widgets .

We hopen dat dit artikel u heeft geholpen een WordPress-widget aan de kop van uw site toe te voegen. 


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format