Home / WordPress / Buttons toevoegen zonder shortcode in WordPress

Buttons toevoegen zonder shortcode in WordPress

Er zijn genoeg WordPress plugins te vinden die het mogelijk maken om zonder kennis van HTML en CSS een button te maken en te plaatsen in een artikel.

Deze plugins maken echter meestal gebruik van shortcodes en dit kan soms wat overbodige kleine problemen veroorzaken. Shortcodes zijn namelijk niet altijd even makkelijk te configureren en je ziet niet direct het resultaat van de shortcode.

In het artikel van vandaag behandel ik een plugin waarmee je buttons kunt toevoegen zonder een shortcode te gebruiken en het resultaat direct kunt bekijken.

Forget About Shortcode Buttons

De WordPress plugin waar ik het over heb heet heel toepasselijk “Forget About Shortcode Buttons”. Het is een vrij nieuwe plugin van een maand oud en het vereist minimaal WordPress 3.9, de nieuwste WordPress versie.

In plaats van een shortcode toe te voegen, kun je met deze plugin direct een echte button maken en toevoegen.

Zodra je de plugin hebt geïnstalleerd en geactiveerd komt er een nieuw icoontje te staan in de visuele editor bij berichten en pagina’s.

Insert Button

Om een button te maken moet je uiteraard op dit nieuwe icoontje (Insert Button) in de visuele editor klikken. Wanneer je erop geklikt hebt krijg je een popup te zien waar je een button kunt maken en direct het design kunt zien. Het ziet er als volgt uit:

Button Maken

Zoals je ziet kun je zelf de tekst en URL bepalen, de kleuren van de tekst en button, wat voor type button het moet worden, de grootte van de button en of de link moet openen in een nieuw tabblad. Je kunt tevens live zien hoe de button er in het echt uit gaat zien.

Tot slot kun je er ook nog voor kiezen om een icoontje toe te voegen aan de button. Het icoontje komt altijd voor de tekst te staan.

Iconen button maken

Eenmaal helemaal tevreden over je button hoef je alleen nog maar op “Insert” te klikken en je button is aangemaakt.

Je kunt nu ook direct de button zien in de visuele editor en niet alleen een shortcode zoals bij andere plugins het geval is.

Button visuele editor

Forget About Shortcode Buttons in actie

Wil je de plugin in actie zien en alle mogelijkheden bekijken? Dit kan in onderstaande video:

Lijkt dit je een handige plugin?

Lijkt dit je een handige plugin en een verbetering ten opzichte van alle andere plugins waarmee je buttons kunt maken? Laat het gerust weten in de reacties hieronder.


WordPress Hulp Nodig? Join Het WP Lab

Het WordPress Lab Mockup

Heb je vragen aan de hand van dit artikel of wil je verder op weg geholpen worden met je website?

Sluit je aan bij Het WordPress lab, een community voor WordPress-liefhebbers waarin ik antwoord geef op jouw WordPress vragen en je toegang krijgt tot al mijn WordPress cursussen.

32 reacties op “Buttons toevoegen zonder shortcode in WordPress”

  1. peter avatar
    peter

    Hoi Maikel,

    Is deze plugin ook geschikt om buttons te maken die je direct doorsturen naar een contactformulier? (Dus niet naar de contactpagina met daarop een formulier of emailadres). Of is daar een andere plugin beter voor geschikt?

    1. Maikel van de Weerd avatar

      Ik snap niet helemaal wat je wilt, aangezien een formulier over het algemeen altijd op een pagina zal staan? Je kunt echter met iedere knop altijd linken waar je naartoe zou willen linken.

  2. Rense Sjoers avatar

    Hallo,
    Mooi en eenvoudige plug in dit! Top.
    Nu val ik ondertussen onder dino’s voor wat betreft web pagina’s maken. Vroeger veel gedaan met het HTML maar ik verdrink in de nieuwe mogelijkheden die er tegenwoordig allemaal zijn. CSS etc zijn echt niet mijn ding en zou niet weten hoe ik dit in mijn WP site zou moeten doen.

    Ik wil namelijk heel graag onder aan een pagina links en rechts van de pagina een button hebben met resp. Previous en Next waarmee men naar de volgende of de vorige pagina kan gaan. (bijv mijn gallerie pagina’s)
    Hoe krijg ik die op dezelfde regel …. en dan links en rechts uitgelijnd?

    Dit is een beetje offtopic misschien maar ik hoop dat je me verder kan helpen.

    1. Maikel van de Weerd avatar

      Vaak bieden thema’s hier standaard de oplossing voor. Wanneer je het echt aan de zijkanten van je scherm wilt hebben, ontkom je er niet aan dat je CSS moet gebruiken. Daarnaast ook nog wat PHP om de juiste URL’s op te vragen. Wellicht dat er een plugin is die dit allemaal voor je kan regelen, maar ik ben er niet bekend mee.

  3. Chrisja avatar
    Chrisja

    super button, is het mogelijk deze button als je er twee maak even breed te maken?

    1. Maikel van de Weerd avatar

      Hij pakt de breedte bij deze plugin volgens mij gebaseerd op de woorden. Wanneer je het met verschillende teksten hetzelfde wilt hebben, zal je CSS moeten gebruiken.

  4. Nanda avatar

    Oh, hoe vaak ik niet antwoorden op mijn vragen vind bij jou! Bedankt voor al je duidelijke uitleg.

  5. Marieke de Bruijn avatar

    Hoi Maikel
    Ik gebruik het Panorama thema van Wordpress. Ik heb deze plug in geïnstalleerd en geactiveerd maar er verschijnt bij mij geen icoontje in de balk.
    Voor het installeren geeft hij wel aan dat deze plug in niet getest is met mijn huidige thema. Doe ik iets verkeerd of is dit gewoon niet de juiste plug in voor mijn thema? Heb je eventueel nog een andere suggestie?

    1. Maikel van de Weerd avatar

      Het zou ook een conflict kunnen zijn met een andere plugin. Ik durf er weinig over te zeggen vanaf hier. De plugin werkt echter nog wel als ik het zelf test.

  6. Lieneke avatar
    Lieneke

    Hallo Maikel,
    Dankjwel voor de zoveelste tip waar ik echt iets aan heb.

    Groet, Lieneke

    1. Maikel van de Weerd avatar

      Leuk om te horen dat je er iets aan hebt. 🙂

  7. Madelon avatar

    Dag,

    Ontzettend fijne button! Alleen een vraag. Wanneer ik link naar een mailadres toevoeg, doet deze het wel op de telefoon bij aanklikken button (dus wordt doorgestuurd naar de mail), maar linkt die niet door als ik op de computer zit en op de button druk?

    1. Maikel van de Weerd avatar

      Als er op je computer geen programma staat waarmee je mailt, dan zal er niks geopend worden. Vermoedelijk zal dit het zijn.

  8. Maikel van de Weerd avatar

    Nee hoor, wanneer je een mail link wilt toevoegen op de button, dan kun je dit doen door “mailto:naam@emailadres.nl” (zonder aanhalingstekens) in te voeren.

  9. Gerry avatar

    Lijkt me een geweldig button, maar hij werkt niet als je wilt dat er een email gestuurd wordt.

  10. Fred avatar

    Dag Maikel, de plugin wordt niet meer bijgewerkt? Ik heb met interesse gelezen maar als hij eruit gaat heb ik er niets aan. Ik zoek een button-maker. Kun je. als deze out of date is, iets anders adviseren?

    1. Maikel van de Weerd avatar

      Zo te zien heeft de maker tot nu toe altijd nog gereageerd op het forum en is er ook al een tijdje een beta aan de gang voor versie 2 van de plugin. Ik denk dus niet dat hier niets meer aan gedaan wordt.

  11. Hennie avatar
    Hennie

    Ik ken de plugin ,maar probeer hem nu op mijn localhost.
    Hier zie ik het icoontje niet terug.

    Enig idee hoe dit kan?

    1. Maikel van de Weerd avatar

      Dat zou je de pluginmaker kunnen vragen. Wellicht dat er een bepaalde connectie niet gemaakt kan worden vanaf localhost.

  12. Eileen Gordijn avatar

    Wat een super plug-in, eindelijk makkelijke nette buttons.
    Dank je wel!! Ik ben blij.

    1. Maikel van de Weerd avatar

      Goed om te horen dat je er wat aan hebt. 🙂

  13. Geert avatar

    Hoi Maikel,

    weet jij een manier om de breedte van de buttons gelijk te krijgen als je er bijvoorbeeld 2 onder elkaar plaatst? Nu past de breedte zich aan op het aantal letters.

    Dank en groeten

    Geert

    1. Maikel van de Weerd avatar

      Hier is geen normale instelling voor, dus je zal dit alleen kunnen bereiken door CSS te gebruiken.

  14. Ross M avatar

    Thanks for featuring our plugin, glad you like 🙂

    1. Maikel van de Weerd avatar

      No problem, keep making great plugins 🙂

  15. Ina avatar
    Ina

    Hoi Maikel,
    Is het ook mogelijk o het lettertype aan te passen?

    Groet Ina

    1. Maikel van de Weerd avatar

      Nee, het is helaas niet mogelijk om het lettertype aan te passen. Hiervoor zal je toch met CSS aan de slag moeten.

  16. Karin avatar

    Klinkt handig. Kun je met deze plugin ook buttons maken die je in je sidebar kunt gebruiken?

    1. Karin avatar

      Even zelf zitten knutselen en ja hoor… Het stukje code dat je met deze plugin maakt kun je ook heel gemakkelijk in een widget plakken!

      1. Maikel van de Weerd avatar

        Klopt, wanneer je naar de HTML editor gaat kun je de code van de button bekijken en eventueel kopiëren als je het ergens anders op de website wilt gebruiken.

  17. Ronald avatar

    Goede tip! Deze ga ik zeker proberen!

    1. Maikel van de Weerd avatar

      Top, laat gerust weten hoe je de plugin ervaart.