Een drijvende voettekstbalk maken in WordPress

6 min


103

Laat, E.W.M. de (Erwin)

all rights reserved

DELaatbusiness

Een “sticky” drijvende voettekstbalk maken in WordPress

Wilt u een sticky floating footer-balk maken in WordPress? We gebruiken de drijvende voettekstbalk op onze website al vele jaren omdat dit ons helpt het bouncepercentage te verminderen en pagina’s te vergroten die door gebruikers worden bekeken. Velen van jullie hebben ons gevraagd hoe je een vergelijkbare zwevende balk kunt maken, dus hier is het. In dit artikel laten we je zien hoe je een sticky floating footer-balk kunt maken in WordPress.

Drijvende Voettekst Bar

Wat is een drijvende voettekstbalk?

Met een kleverige zwevende voettekstbalk kunt u uw belangrijke inhoud op een prominente manier aan gebruikers laten zien. Deze balk is te allen tijde zichtbaar voor gebruikers, zodat ze er eerder op klikken en meer bruikbare inhoud ontdekken.

WPBeginner Footer Bar

U kunt de drijvende voettekstbalk gebruiken om:

  • Genereer meer klikken naar andere blogposts
  • Bouw uw e-maillijst
  • Breng speciale aanbiedingen / uitverkoop onder de aandacht

In dit artikel laten we u twee methoden zien om een ​​kleverige zwevende voettekstbalk toe te voegen aan uw WordPress-site. De ene gebruikt een plug-in terwijl de andere een codemethode is die we gebruiken op WPBeginner. U kunt degene kiezen die u gemakkelijker kunt gebruiken.

Methode 1: Handmatig Sticky Floating Footer Bar maken in WordPress

Voor deze methode moet u code toevoegen aan uw WordPress-bestanden. Als u nog niet bekend bent met het toevoegen van code, neem dan eens een kijkje in onze gids over hoe u fragmenten van internet in WordPress kunt plakken .

Allereerst moet u verbinding maken met uw WordPress-site met behulp van een FTP-client of bestandsbeheerder in cPanel.

In je FTP-client moet je het footer.phpbestand in je WordPress themamap vinden en het naar je bureaublad downloaden. Het zou zich op een pad als dit bevinden:

/wp-content/themes/your-theme-folder/

Vervolgens moet u het footer.php-bestand openen in een gewone teksteditor zoals Kladblok en de volgende code net vóór de </body>tag toevoegen.

1

2

3

4

5

6

7

8

9

10

<div class=”fixedbar”>

<div class=”boxfloat”>

 

<ul id=”tips”>

<li><a href=”https://www.wpbeginner.com/”>WPBeginner Link is the First Item</a></li>

<li><a href=”http://www.wordpress.org/”>WordPress.org is the Second Item</a></li>

</ul>

 

</div>

</div>

U kunt zoveel lijstitems toevoegen als u wilt. We laten je zien hoe je ze willekeurig roteert bij elke laad van een pagina.

De volgende stap is het toevoegen van de CSS- stijlen.

U kunt CSS toevoegen aan het WordPress-themabestand style.cssof de Simple Custom CSS- plug-in gebruiken.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

/*WPBeginner Footer Bar*/

 

.fixedbar {

background: #000;

bottom: 0px;

color:#fff;

font-family: Arial, Helvetica, sans-serif;

left:0;

padding: 0px 0;

position:fixed;

font-size:16px;

width:100%;

z-index:99999;

float:left;

vertical-align:middle;

margin: 0px 0 0;

opacity: 0.95;

font-weight: bold;

}

.boxfloat {

text-align:center;

width:920px;

margin:0 auto;

}

 

#tips, #tips li {

margin:0;

padding:0;

list-style:none

}

#tips {

width:920px;

font-size:20px;

line-height:120%;

}

#tips li {

padding: 15px 0;

display:none;

}

#tips li a{

color: #fff;

}

#tips li a:hover {

text-decoration: none;

}

Na het toevoegen van de CSS, kunt u de wijzigingen op uw website mogelijk niet zien. Dit komt omdat we de weergave van items in onze lijst hebben ingesteld op none.

Vervolgens gebruiken we jQuery om willekeurig één item uit onze lijst weer te geven bij elke pagina.

U moet een gewone teksteditor zoals Notepad op uw computer openen en deze code aan een leeg bestand toevoegen:

1

2

3

4

5

6

7

8

9

10

11

(function($) {

this.randomtip = function(){

    var length = $(“#tips li”).length;

    var ran = Math.floor(Math.random()*length) + 1;

    $(“#tips li:nth-child(” + ran + “)”).show();

};

 

$(document).ready(function(){  

    randomtip();

});

})( jQuery );

Als je klaar bent, moet je dit bestand opslaan als floatingbar.js op je bureaublad.

Open nu uw FTP-client en maak verbinding met uw webserver. Ga naar je themamap en zoek de map js. Het zou op een pad als dit zijn:

/wp-content/themes/your-theme-folder/js

Als er geen js-map in uw themamap staat, moet u er een maken.

Nu moet u het bestand floatingbar.js dat u eerder hebt gemaakt uploaden naar de map js die u zojuist hebt gemaakt.

De volgende stap is het inladen en laden van het JavaScript-bestand in uw WordPress-thema.

Plak deze code in het functie.php- bestand van uw thema of een sitespecifieke plug-in .

1

2

3

4

function wpb_floating_bar() {

    wp_enqueue_script( ‘wpb-footerbar’, get_stylesheet_directory_uri() . ‘/js/floatingbar.js’, array( ‘jquery’ ) );

}

add_action( ‘wp_enqueue_scripts’, ‘wpb_floating_bar’ );

Dat is alles, u kunt nu uw website bezoeken om de zwevende voettekstbalk in actie te zien. Laad de pagina een paar keer opnieuw om de voettekstbalk te zien die willekeurig verschillende items uit je lijst weergeeft.

Het voordeel van het gebruik van deze methode is dat u willekeurig meerdere links in de zwevende voettekstbalk kunt draaien zoals we aan het doen zijn.

De moeilijkheid is echter dat je code moet toevoegen. Verder kun je deze zwevende balk niet gebruiken voor andere dingen zonder al te veel CSS-aanpassingen te doen.

Methode 2: OptinMontser gebruiken om een ​​variabele voettekstbalk toe te voegen in WordPress

OptinMonster is een populaire lead generation-plug-in die op alle websites werkt. Het helpt u websitebezoekers om te zetten in abonnees en klanten.

Een van de functies die OptinMonster heeft, is een zwevende kop- en voettekstbalk die u kunt gebruiken om een ​​e-mailoptin-formulier weer te geven en om enkele links / aanbiedingen te promoten.

Het voordeel van het gebruik van deze methode is:

  • Eenvoudig in te stellen (geen code)
  • U kunt aangepaste zwevende balken weergeven op verschillende pagina’s / categorieën van uw website.
  • Je kunt het gebruiken om je e-maillijst samen te stellen en aanbiedingen te promoten.

Het enige nadeel is dat OptinMonster een betaalde service is. Maar u kunt onze OptinMonster-coupon : WPB10 gebruiken om 10% korting te krijgen op elk OptinMonster-abonnement.

Nadat u OptinMonster (Plus- of Pro-abonnement) hebt aangeschaft , kunt u de plug-in OptinMonster WordPress API op uw site gebruiken. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie .

Deze plug-ins fungeren alleen als een connector tussen uw WordPress-site en OptinMonster.

Na activering zal de plug-in een nieuw menu-item met de naam OptinMonster toevoegen aan uw WordPress-beheerbalk. Als u erop klikt, gaat u naar de instellingenpagina van de plug-in.

Verbind uw WordPress-site met OptinMonster

U wordt gevraagd om uw OptinMonster API-gebruikersnaam en -sleutel in te voeren. U kunt deze sleutels krijgen van uw OptinMonster-account.

OptinMonster API-sleutels

Kopieer en plak de sleutels in de plugin-instellingen en klik op de knop ‘Verbinden met OptinMonster’. De plug-in verbindt nu uw WordPress-site met uw OptinMonster-account.

Vervolgens moet u klikken op de knop ‘Nieuwe optie maken’.

Maak een nieuwe optin

Dit brengt je naar de ‘Create New Optin’ pagina op de OptinMonster-website.

Eerst moet u een titel voor uw Optin-campagne opgeven en een website selecteren waarop u deze opt-in gebruikt. Als uw site niet wordt vermeld, klikt u op de link ‘Een nieuwe website toevoegen’.

Optin-instellingen

Vervolgens kunt u op de zwevende balk klikken onder ‘Selecteer uw optin-type’ om sjablonen te gebruiken die beschikbaar zijn om als zwevende balk te gebruiken.

U kunt al deze sjablonen naar eigen inzicht aanpassen. Selecteer degene die het dichtst in de buurt komt van wat u in gedachten heeft.

Zodra u een sjabloon selecteert, start OptinMonster hun ontwerpaanpassingsprogramma. Het is een point-and-click-builder waarmee u uiterlijk en instellingen voor uw optin kunt configureren.

Aangepaste aanpasser

Wanneer u klaar bent met het configureren van het uiterlijk van uw optin, klikt u op de knop Opslaan.

Hoewel dit optins worden genoemd, hoeft dit niet altijd zo te zijn. U kunt de functie Ja / Nee gebruiken om de knop toe te voegen om een ​​blogbericht te bekijken of om een ​​speciale korting te claimen.

Wanneer u uw zwevende balk voor het eerst maakt, is deze standaard onderbroken.

Als je klaar bent met het configureren, ga je naar de statusbalk in het hoofdmenu en kies je Start campagne.

Uw zwevende balk is nu klaar om te worden toegevoegd aan uw WordPress-site.

Keer terug naar het admin-gedeelte van uw WordPress-site en bezoek OptinMonster »Optins . U ziet uw optin hier vermeld. Als je het niet ziet, klik je op de knop Vernieuwen Optins en de plug-in zal het weergeven.

Klik op de link ‘Uitvoerinstellingen bewerken’ om verder te gaan.

Kies uitvoerinstellingen

Vink op de volgende pagina het selectievakje aan naast ‘Optin inschakelen bij site’ en klik vervolgens op de instellingen voor opslaan.

U kunt ook de optie Geavanceerd gebruiken om de zwevende balk alleen weer te geven op specifieke berichten, pagina’s, categorieën en andere gebieden.

Dat is alles, zwevende voettekstoptie staat nu live op uw WordPress-site.

Drijvende balk toegevoegd met OptinMonster

We hopen dat dit artikel u heeft geholpen om een ​​zwevende voettekstbalk toe te voegen aan uw WordPress-site. Wellicht wilt u ook deze bruikbare tips bekijken om verkeer naar uw WordPress-site te leiden .


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