Help | Het opmaken van een pagina

Een webpagina zit vol met (verborgen) opmaakcodes waardoor de vormgeving van de tekst beïnvloed wordt. Bijvoorbeeld bold, en italic, maar ook tabellen en meerdere kolommen naast elkaar. Hier lees je hoe:

Soorten van opmaakcodes

HTML opmaak codes, voorbeelden

De opmaak instructies voor HTML staan altijd beschreven tussen “<” en “>”. Enkele eenvoudige voorbeelden zijn:

  • <b>vet</b> wordt afgedrukt als vet
  • <i>cursief</i> wordt afgedrukt als cursief

Wanneer je een pagina opmaakt via de WordPress editor in de “Text”modus, kun je die instructies zo rechtstreeks invoeren, maar in de “Visueel” modes kun je het ook (laten) aanmaken met muis en de menubalk. Schakel je daarna weer naar de “Text” modus, dan kun je zien welke codes er volautomatisch voor je zijn aangemaakt.

Met html-opmaakcodes kun je ook de meest ingewikkelde layouts van pagina’s maken, zoals tabellen of tekst die zich om een plaatje heen vormt of een hyperlink naar een andere pagina. Op het internet vind je deze goede handleiding, maar er zijn er veel meer.
Het rechtstreeks werken in html-code wordt al snel heel cryptisch en onleesbaar, maar soms heb je geen andere keuze indien je iets speciaals wilt. Als je geluk hebt bestaat er een shortcode voor.

De WordPress editor helpt je met een eenvoudige opmaak, zonder je lastig te vallen met de onderliggende html opmaakcodes. Maar dankzij shortcodes kunnen wat meer ingewikkelde opmaak instructies aangemaakt worden op een wat meer gebruiksvriendelijke wijze.

 

Shortcodes, voorbeelden

Met een “shortcode” wordt een WordPress programmaatje aangeroepen die tekst op de webpagina anders weergeeft dan je hebt ingetypt. WordPress herkent ze doordat er blokhaken “[” en “]” omheen staan. Een eenvoudig voorbeeld is:

  • [ccn_lid naam="Rob van den Brink"] maakt volautomatisch een hyperlink aan naar een persoon in de ledenlijst,
    zoals Rob van den Brink.

Je tiept gewoon bovenstaande instructie in, terwijl je een pagina aan het schrijven bent. Er lijkt vervolgens niets te gebeuren, maar zodra je kijkt naar de opgemaakte pagina (via knop “Wijzigingen bekijken”) blijkt het te werken. En als de shortcode niet herkend wordt, komt de (foute) code gewoon onbewerkt op de webpagina.

Als een shortcode door WordPress herkent wordt, roept het een bijpassend programmaatje aan die de gewenste HTML opmaakcodes genereert. De shortcodes die beginnen met [ccn_….. ] zijn speciaal gemaakt voor deze CCN website. Andere handige shortcodes komen soms mee met een specifieke plugin, zoals de plugin waarmee evenementen aangekondigd kunnen worden.

Eenvoudige shortcodes, zoals [ccn_lid] kunnen al uitgevoerd worden na het lezen van de instructies tussen [ … ] . Maar meer complexe shortcodes hebben een combinatie nodig van een open en een sluit instructie, en gebruiken alles wat daartussen staat. Bijvoorbeeld [ccn_table] … [/ccn_table] om een tabel te maken.

 

 


Shortcodes, speciaal gemaakt voor CCN

Alle shortcodes die beginnen met “ccn” zijn specifiek voor deze website gemaakt (staan in “functions.php”), waaronder:

 

shortcodekorte omschrijving
[ccn_lid]Voor links naar een persoon in de ledenlijst
[ccn_kolommen] .. [/ccn_kolommen]Om snel tekst en plaatjes in kolommen op het scherm te zetten
[ccn_table] .. [/ccn_table]Om snel een tabel te maken, zoals in Teachers
[ccn_ledenlijst]Om de pagina met de ledenlijst af te drukken
[ccn_date]Voor de datum van vandaag
[ccn_files]Om een aanklikbare lijst met bestanden uit het archief weer te geven.

 

“ccn_lid” – Links naar de CCN ledenlijst

De shortcode [ccn_lid naam="Rob van den Brink"] genereert Rob van den Brink, waarmee er volautomatisch een hyperlink aangemaakt wordt naar een persoon in de ledenlijst. De naam moet wel letterlijk zo bekend zijn in de ledenlijst, anders wordt er niets gevonden.

Deze methode is veilig t.a.v de privacy. De hyperlink werkt alleen bij gebruikers die ingelogd zijn (leden en aspirant leden).

 


“ccn_kolommen” – Opmaak van teksten/plaatjes naast elkaar

Je kunt als volgt tekstblokken naast elkaar verschijnen:

   [ccn_kolommen w1=20% w2=30% w3=50%]
   (/) De eerste kolom waar heel veel nuttige bla bla staat.
   (/) De tweede smalle kolom waar heel veel nuttige bla bla staat.
   (/) De derde brede kolom waar nog veel meer heel veel nuttige bla bla staat.
   [/ccn_kolommen]

En dan krijg je (na aanvulling van wat potjes latijn)  het volgende te zien:

 

De eerste kolom waar heel veel nuttige bla bla staat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
De tweede smalle kolom waar heel veel nuttige bla bla staat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
De derde brede kolom waar nog veel meer heel veel nuttige bla bla staat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

Het werkt als volgt:

  • Wat er afgedrukt moet worden staat tussen de codes [ccn_kolommen] en [/ccn_kolommen].
    Bijvoorbeeld [ccn_kolommen w1="auto" w2="80%" ] (/)eerste kolom (/)Tweede kolom [/ccn_kolommen]
  • Het begin van een nieuwe kolom wordt herkent met het symbool (/). Als er maar twee van die symbolen gevonden worden ontstaan er ook maar twee kolommen.
  • De breedte van iedere kolom moet tussen de eerste blokhaken gespecificeerd worden in procenten.
    • Specificatie w1=30% wil zeggen dat de eerste kolom een breedte (“width”) heeft van 30% van de pagina.
    • Specificatie w2=20% wil zeggen dat de tweede kolom een breedte heeft van 20% van de pagina.
    • Specificatie w1=”auto” wil zeggen dat WordPress zelf een verstandige breedte moet kiezen voor de 1e kolom (en dat gaat niet altijd naar wens)

    Alles tezamen moet natuurlijk niet groter zijn dan 100%, anders past het niet.

  • Een kolom mag van alles bevatten, dus ook plaatjes.

ccn_table – Opmaak van een opvallende tabel

Je kunt als volgt een tabel laten maken met labels voor iedere kolom en een achtergrond kleur:

  [ccn_table class="ccn-lines center"]
     wie|weet|waar
     aap|noot|mies
     zus|jet|hek
  [/ccn_table]
En dat geeft:
wieweetwaar
aapnootmies
zusjethek

Het werkt als volgt:

  • Wat er afgedrukt moet worden staat tussen de codes [ccn_table] en [/ccn_table].
  • Wat op dezelfde regel staat verschijn op dezelfde rij in de tabel
  • De kolommen worden herkend via de “|” symbolen
  • De specificatie class=”ccn-lines center veroorzaakt dat de tabel een voorgedefinieerde vormgeving krijgt, met een achtergrond kleur en lijntjes tussen de rijen en kolommen.
  • De specificatie class=”ccn-lines center” veroorzaakt dat de teksten in iedere kolom gecentreerd worden.

 

Shortcodes, meegeleverd bij wordpress en plugins

shortcodekorte omschrijving
Standaard wordpresszie WordPress
[display_post]Om een lijst van berichten weer te geven van een bepaalde categorie. Zie deze link voor de vele opties
[vsel]Om een lijst van evenementen weer te geven van een bepaalde categorie. Zie deze link voor de vele opties
[alo-easymail]Om je te laten abonneren op de nieuwsbrief. Zie deze link voor de vele opties

 

Bijvoorbeeld:

  • Standaard wordpress shortcodes (de meeste zijn niet erg zinvol) shortcode
  • [ccn_….] shortcodes, die speciaal gemaakt zijn voor deze ccn website (zie volgende paragraaf)
  • [vsel …] shortcodes, waarmee lijsten met evenementen getoond kunne worden (VSEL plugin)
  • [ALO..] shortcodes, om lijsten van (oude) nieuwsbrieven te tonen (ALO-EasyMail plugin)
  • etc

Nog verder uitwerken