24. Leesniveau
Taalniveau B1:
• duidelijke titel en tussenkoppen;
• actieve schrijfstijl met voorbeelden;
• eenvoudige woorden die iedereen kent;
• korte en duidelijke zinnen.
32. Tip 2: een stylesheet voor de editor
add_action('init', 'my_theme_add_editor_styles');
function my_theme_add_editor_styles () {
add_editor_style( 'css/editor-style.css' );
}
34. Tip 3: weg met H1
function admin_set_tinymce_options(
$settings ) {
$settings['theme_advanced_blockformats
'] = 'p,h2,h3,h4,h5,h6,q,hr';
[...]
}
35. Tip 4: weg met onnodige opties
function admin_set_tinymce_options(
$settings ) {
[...]
$settings['theme_advanced_disable'] =
'underline,forecolor,justifyfull';
[...]
}
36. Tip 5: slechts 1 optiebalk
function admin_set_tinymce_options(
$settings ) {
[...]
$settings['toolbar1'] =
'italic,|,bullist,numlist,blockquote,|,lin
k,unlink,|,spellchecker,|,formatselect,sty
leselect,paste,removeformat,cleanup,|,undo
,redo,hr,fullscreen'; [...] }
37. Tip 5: slechts 1 optiebalk
function admin_set_tinymce_options(
$settings ) {
[...]
$settings['toolbar2'] = '';
[...]
}
38. Tip 6: pas de editor aan:
beschrijvingen
function admin_set_tinymce_options(
$settings ) {
[...]
$settings[block_formats'] = ’Header H2
=h2;Header H3=h3;Header
H4=h4;Paragraph=p;Quote=q';
[...]
}
39. Tip 7: extra opmaakmogelijkheden
function admin_set_tinymce_options(
$settings ) {
$settings[style_formats'] = '[
{title: "Streamer", block: "aside",
classes: "pullquote"},
{title: "Infoblok", block: "div", classes:
"infoblock"}]';
[...]
}
43. Bij tip 2: waarschuwing in de CSS
span[style="color: #800080;"],
span[style="color: #880080"] {
&, a {
color: red !important;
background: black;
}
&:before {
content: 'Achtung baby!!! You are doing it wrong. ';
[...]
}
}
Hallo, ik ben Paul van Buuren. Ik heb een paar kleine tips en trucs voor het trainen van de gebruikers van je WordPress-site.
Voor techneuten. Voor content editors. Voor iedereen die websites maakt.
Wie is een developer?
Wie blogt minstens elke maand?
Wie traint gebruikers?
Want we weten allemaal dat WordPress makkelijk te gebruiken is.
waardoor er mensen zijn die het wellicht onderschatten...
Heeft iemand dit filmpje misschien NIET gezien?
Handig zijn met make-up is misschien het begin van een carriere als website-maker.
Maar een redelijke website is al niet zo makkelijk
En een goede website is echt
VERDOMD
MOEILIJK
Sorry
Met gebruikers bedoel ik vandaag dus niet: bezoekers van je website.
Ik bedoel de lui die uiteindelijk zitten te frutten in de admin-kant van je WordPress-site.
De nieuweling.
Amper ervaring met het maken van sites.
Aan de hand meenemen.
Te veel knoppen of te veel informatie werkt voor hen afschrikwekkend.
Dit soort gebruikers is bang om dingen stuk te maken.
Het is jouw taak om ze op hun gemak te stellen
De gevorderde gebruiker.
Dit is een fijne groep om voor t werken. Ze snappen dingen. Ze hebben al ervaring met het maken van websites
Hun hoef je vaak maar 1x iets te laten zien in WordPress.
You only have to show them once where everything is in WordPress.
These users are not afraid to experiment.
Een derde groep is wat ik de make-up artists noem.
Ook een fijne groep want ze willen mooie websites maken. Maar aan de andere kant, deze gebruikers richt zich soms op de verkeerde dingen
Dagen speuren op Theme forest, maar vergeten de teksten te schrijven.
Verliezen zich graag in fontjes, kleurtjes en foto’tjes
Mijn minst favoriete gebruiker is de betweter. Vaak wat ouder, vaak met een hoop IT-ervaring. Heeft erg de neiging om het maken van een site te onderschatten.
Praten vaak in een eigen taal. Hebben vaak ervaring met niet-WordPress sites. Daarom hebben ze het idee dat ze precies weten hoe alles werkt en dat het systeem zich aan hen zal aanpassen, net als het obscure CMS dat ze 10 jaar geleden al gebruikten.
Misschien zijn er andere soorten gebruikers?
Wat elke gebruiker moet weten.
Schrijven voor het web is niet hetzelfde als schrijven in Word. Een website is NIET hetzelfde als het schrijven van een roman. Lezen op het web is anders.
Verwacht niet dat je gebruikers alles lezen op je website. Dat doen ze namelijk niet. Bijvoorbeeld: 20% of your visitor actually read the whole text on your page. The others just scan. Judging a page is done in milliseconds. Often this decision is made unconsiously. This decision has to do with a great number of factors. This does not mean that your user can get away with using just Lorem Ipsum text.
Let’s talk about what methods we have for training WordPress users.
Keep it as simple as possible
IRL training session(s)
Repeat and repeat
Repeat again
Stick to the basics: pages, media, posts
User role: author
For more experienced users I often use instruction videos.
Instruction videos don’t work for novices.
Experienced users could use a playground site, to experiment
User role: at least editor, maybe administrator
Very focused on editing options.
Constrain these options. If you want a future proof website disable all coloring options.
You need to constantly remind them that they need a good website structure first. That they do not want to experiment with 41 shades of blue or 50 shades of grey.
For these kind of user a very handy word you can use a very handy word:
NO
Start the conversation about a website with: ‘All I want is a simple website’. They think they know exactly what they want, because they read about it. Or because a collegue of theirs has a site.
This type of user needs to be confined by structure. He needs to know what the site can and cannot do.
Definitely needs a playground site
User role: editor. Only administrator if properly instructed not to break the site.
They think that making a website is easy. But actually…
…simple is not that easy..
And that, the universality of the web, brings us to accessibilty.
Waarneembaar: denk aan kleur
Bedienbaar: bruikbaar zonder muis, met alleen een toetsenbord?
Begrijpelijk: zie leesniveau
Robuust: screenreaders, hover-functionaliteit op mobieltjes afwezig
What’s wrong with this text. Apart from the lorem ipsum?
What’s wrong with this text. Apart from the lorem ipsum?
People who use screanreaders cannot understand the structure of your document
This is the proper structure of the document
If you only want to change the font for the editor, append a style tag to the header
If you only want to change the font for the editor, append a style tag to the header
If you only want to change the font for the editor, append a style tag to the header
This allows only for
Paragraph
Header level 2 to 6, quote tag and a horizontal rule
This was the code for older Wordpress versions.
Disallow underline (this should be reserved for links, color and full width text justify
Contents of the first toolbar
Empty the second toolbar. Most users seem to be unable to open this toolbar
Expliciting naming of tags
Special formatting
Special formatting
This allows only for
Paragraph
Header level 2 to 6, quote tag and a horizontal rule
Special formatting
Here is some CSS / LESS code
Mark the span. This has a color that does not match with the theme.
Looks ok. But has unwanted inline styling.
Ghehehehe.
Remember the bold semi-headers? Same thing.
Instruct your users to provide meaningful descriptions
You don’t need alt-text for decorative images