Vraagje van Lidy

Misschien ook wel interessant voor anderen :
Hoe krijg ik een popup tekst in WordPress ?
Er zijn vast hele mooie plugins voor, maar het kan ook met alleen maar HTML code.
De wordpress editor heeft 2 standen : WYSIWYG en text.
In die text stand kun je de onderliggende HTML code editen.

Eerst maken we een nieuw document met een plaatje er in dat we willen gebruiken om de tekst tevoorschijn te laten springen, als je er met je cursor overheen gaat :

Zo ziet het plaatje er uit in de HTML editor :

<img src="http://www.kblog.nl/wp-content/uploads/2015/02/220px-Picasso.triggerfish.arp_.jpg" alt="220px-Picasso.triggerfish.arp" width="220" height="173" />

Het is een image-tag met een aantal attributen. Het toe te voegen attribuut “title” is wat we willen gebruiken voor onze popup.

<img src="http://www.kblog.nl/wp-content/uploads/2015/02/220px-Picasso.triggerfish.arp_.jpg" title="Triggerfishes are about 40 species of often brightly colored fishes of the family Balistidae. Often marked by lines and spots, they inhabit tropical and subtropical oceans throughout the world, with the greatest species richness in the Indo-Pacific. Most are found in relatively shallow, coastal habitats, especially at coral reefs, but a few, such as the aptly named oceanic triggerfish (Canthidermis maculata), are pelagic. While several species from this family are popular in the marine aquarium trade, they are often notoriously ill-tempered." alt="220px-Picasso.triggerfish.arp" width="220" height="173" />

Nu nog even met de cursor over het plaatje in de preview, om te kijken of het werkt :

popup

 

Dezelfde truuk kun je ook toepassen op een plaatje in een tekstwidget.

Na dit verhaal komen er gegarandeerd weer vragen van mensen bij wie het “echt niet werkt !”
Dat komt door het knippen en plakken.
Er bestaan meerdere soorten aanhalingstekens. In HTML code zijn alleen die rechte geldig, en die maak je met je toetsenbord. Lui knippen en plakken levert je een avond hoofdpijn op.
De tekst tussen de aanhalingstekens mag zelf geen aanhalingstekens bevatten !!!

X

Op speciaal verzoek heb ik geprobeerd of het ook werkt met een paragraph, in plaats van een image. De X hierboven is gemaakt met de HTML-code hieronder. Het werkt. Probeer maar.

<p title="test">X</p>

De onclick-popup plugin zit vol met bugs en de makers doen er niks aan en hebben ook de reactiemogelijkheid op hun wordpress site uitgeschakeld. Geen aanrader.

Volgende poging, de plugin [simple_tooltip content=’This is the content for the tooltip bubble’]simple tooltip[/simple_tooltip]

Read Offline:
This entry was posted in Wordpress. Bookmark the permalink.

2 Responses to Vraagje van Lidy

  1. Lidy says:

    Maar nu wil ik geen pop up bij een plaatje maar een pop up bij een stukje tekst, zoals je ook een link maakt. Hoe doe je dat dan?

  2. beheerder says:

    Een plaatje hoeft niet groot te zijn en het kan ook gewoon in de flow van de tekst staan. De gebruiker moet toch ergens aan kunnen zien dat er informatie onder te vinden is.

Leave a Reply

Your email address will not be published.