Download to read offline
![Filter
add_filter('tiny_mce_before_init',
'admin_set_tinymce_options');
[…]
https://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init](https://image.slidesharecdn.com/hit-any-user-to-continue-nld2-160621065510/75/Hit-any-user-to-continue-nld-33-2048.jpg)
![Tip 3: weg met H1
function admin_set_tinymce_options(
$settings ) {
$settings['theme_advanced_blockformats
'] = 'p,h2,h3,h4,h5,h6,q,hr';
[...]
}](https://image.slidesharecdn.com/hit-any-user-to-continue-nld2-160621065510/75/Hit-any-user-to-continue-nld-34-2048.jpg)
![Tip 4: weg met onnodige opties
function admin_set_tinymce_options(
$settings ) {
[...]
$settings['theme_advanced_disable'] =
'underline,forecolor,justifyfull';
[...]
}](https://image.slidesharecdn.com/hit-any-user-to-continue-nld2-160621065510/75/Hit-any-user-to-continue-nld-35-2048.jpg)
![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'; [...] }](https://image.slidesharecdn.com/hit-any-user-to-continue-nld2-160621065510/75/Hit-any-user-to-continue-nld-36-2048.jpg)
![Tip 5: slechts 1 optiebalk
function admin_set_tinymce_options(
$settings ) {
[...]
$settings['toolbar2'] = '';
[...]
}](https://image.slidesharecdn.com/hit-any-user-to-continue-nld2-160621065510/75/Hit-any-user-to-continue-nld-37-2048.jpg)
![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';
[...]
}](https://image.slidesharecdn.com/hit-any-user-to-continue-nld2-160621065510/75/Hit-any-user-to-continue-nld-38-2048.jpg)
![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"}]';
[...]
}](https://image.slidesharecdn.com/hit-any-user-to-continue-nld2-160621065510/75/Hit-any-user-to-continue-nld-39-2048.jpg)
![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. ';
[...]
}
}](https://image.slidesharecdn.com/hit-any-user-to-continue-nld2-160621065510/75/Hit-any-user-to-continue-nld-43-2048.jpg)
Hit any user to continue (nld)
- 1. Tips voor toegankelijke WordPress-sites (Paul vanBuuren – Rotterdam, 20 juni 2016)
- 2. Paul van Buuren •@paulvanbuuren • 1998 • 2007 • Accessibility • Interactie ontwerp • Freelance
- 3.
- 4.
- 6.
- 7. Soorten gebruikers (1) •Beginnelingen
- 8. Soorten gebruikers (2) •Gevorderde gebruikers
- 9. Soorten gebruikers (3) •De make-up artists
- 10. Soorten gebruikers (3) •Betweters
- 11.
- 12.
- 13. Voor beginnelingen • Debasics • IRL • WP-rol: author • Herhalen • Herhalen • En nog eens herhalen
- 14. Voor gevorderde gebruikers •Video • Ruimte voor experiment • WP-rol: editor / administrator
- 15. Voor make-up artists •Gek op vormgeving • Foto’s • Structuur en beperking • Heel nuttig woord voor hen:
- 16. Voor betweters • “Ietsheel simpels” • Structuur • Speeltuin • WP-rol: editor / administrator
- 18. Toegankelijkheid • Waarneembaar • Bedienbaar •Begrijpelijk • Robuust See: Introduction to Understanding WCAG 2.0
- 19.
- 20. Content creators: Check ook: "An Alphabetof Accessibility Issues"
- 21. En betweters.. Voor jouzeker: "An Alphabet of Accessibility Issues"
- 22. Aandachtspunten en tips Leesniveau, structuur,links, images, animaties,
- 23.
- 24. Leesniveau Taalniveau B1: • duidelijketitel en tussenkoppen; • actieve schrijfstijl met voorbeelden; • eenvoudige woorden die iedereen kent; • korte en duidelijke zinnen.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. Tip 1: herkenbarefonts add_action('admin_head', 'my_custom_fonts'); function my_custom_fonts() { echo '<style> body, td, textarea, input, select { font-family: "Lucida Grande"; font-size: 12px; } </style>'; }
- 32. Tip 2: eenstylesheet voor de editor add_action('init', 'my_theme_add_editor_styles'); function my_theme_add_editor_styles () { add_editor_style( 'css/editor-style.css' ); }
- 33.
- 34. Tip 3: wegmet H1 function admin_set_tinymce_options( $settings ) { $settings['theme_advanced_blockformats '] = 'p,h2,h3,h4,h5,h6,q,hr'; [...] }
- 35. Tip 4: wegmet onnodige opties function admin_set_tinymce_options( $settings ) { [...] $settings['theme_advanced_disable'] = 'underline,forecolor,justifyfull'; [...] }
- 36. Tip 5: slechts1 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: slechts1 optiebalk function admin_set_tinymce_options( $settings ) { [...] $settings['toolbar2'] = ''; [...] }
- 38. Tip 6: pasde 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: extraopmaakmogelijkheden function admin_set_tinymce_options( $settings ) { $settings[style_formats'] = '[ {title: "Streamer", block: "aside", classes: "pullquote"}, {title: "Infoblok", block: "div", classes: "infoblock"}]'; [...] }
- 40.
- 41.
- 42.
- 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. '; [...] } }
- 44. Bij tip 2:waarschuwing in de CSS
- 45. Bij tip 2:waarschuwing in de CSS
- 46. Bij tip 2:waarschuwing in de CSS
- 47. Links • Ehm, clickhere? • Hreflang attribuut • :focus :active :hover • outline
- 48. Plaatjes • Illustratief • Nietalleen uitleggen met plaatjes • Alt-attribuut
- 49.
- 50. Plaatjes Redesign van internet.nl (HTML previewat: internet.nerdnerd.nl)
- 51.
- 52.
- 53.
- 54. Animaties • See gistfor code (or: wbvb.nl/animation) • Live: https://www.ibewustzijnoverheid.nl
- 55. Kort & goed: •Gebruikers • Beginnelingen / gevorderde gebruikers / make-up artists / betweters • Toegankelijkheid • Waarneembaar, bedienbaar, begrijpelijk, robuust • Hack de editor • CSS, minder = meer • Leesniveau, paginastructuur, links, images, animaties
- 59. Even iets anders •Chantal: 1900 kilometer fietsen voor KWF • Doel: 1900 euro • STEUN acties.kwf.nl/bebravebeepicfightcancer
- 60.
- 61. /contact • Site: wbvb.nl •Twitter: @paulvanbuuren • Mail: paul@wbvb.nl tegelizr.nl
Editor's Notes
- #2 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.
- #4 Wie is een developer? Wie blogt minstens elke maand? Wie traint gebruikers?
- #5 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?
- #6 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
- #7 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.
- #8 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
- #9 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.
- #10 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
- #11 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.
- #12 Misschien zijn er andere soorten gebruikers?
- #13 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.
- #14 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
- #15 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
- #16 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
- #17 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…
- #18 …simple is not that easy..
- #19 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
- #26 What’s wrong with this text. Apart from the lorem ipsum?
- #27 What’s wrong with this text. Apart from the lorem ipsum?
- #28 People who use screanreaders cannot understand the structure of your document
- #29 This is the proper structure of the document
- #32 If you only want to change the font for the editor, append a style tag to the header
- #33 If you only want to change the font for the editor, append a style tag to the header
- #34 If you only want to change the font for the editor, append a style tag to the header
- #35 This allows only for Paragraph Header level 2 to 6, quote tag and a horizontal rule This was the code for older Wordpress versions.
- #36 Disallow underline (this should be reserved for links, color and full width text justify
- #37 Contents of the first toolbar
- #38 Empty the second toolbar. Most users seem to be unable to open this toolbar
- #39 Expliciting naming of tags
- #40 Special formatting
- #41 Special formatting
- #42 This allows only for Paragraph Header level 2 to 6, quote tag and a horizontal rule
- #43 Special formatting
- #44 Here is some CSS / LESS code
- #45 Mark the span. This has a color that does not match with the theme.
- #46 Looks ok. But has unwanted inline styling.
- #47 Ghehehehe. Remember the bold semi-headers? Same thing.
- #50 Instruct your users to provide meaningful descriptions You don’t need alt-text for decorative images