Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/28/d561488865/htdocs/bejisanweb-wp2015/wp-includes/post-template.php on line 284

Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/28/d561488865/htdocs/bejisanweb-wp2015/wp-includes/post-template.php on line 284

Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/28/d561488865/htdocs/bejisanweb-wp2015/wp-includes/post-template.php on line 284

Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/28/d561488865/htdocs/bejisanweb-wp2015/wp-includes/post-template.php on line 284

Quelques scripts javascripts .js pour accessibilité dans wordpress

fluidtextresizer.js

Tuto

Script

Header.php


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/includes/fluidtextresizer.js">
/***********************************************
* Fluid Text Resizer- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
var mytextsizer=new fluidtextresizer({
controlsdiv: "sizecontroldiv", //id of special div containing your resize controls. Enter "" if not defined
targets: ["p", "body a", "#page-container h2", "#page-container h3", "#page-container span", "#page-container li", "#header-left a", "#path a", "#page-container td", "ul.outils li", "ul.outils li a", "label", "th", "select", "input"], //target elements to resize text within: ["selector1", "selector2", etc]
levels: 3, //number of levels users can magnify (or shrink) text
persist: "session", //enter "session" or "none"
animate: 200 //animation duration of text resize. Enter 0 to disable
});
</script>

Boutons de contrôle.

<div id="sizecontroldiv" class="controlstyle">
<p>TEXTE</p>
<a href="#bigger"><img src="http://sd-67292.dedibox.fr/~b.droge/econologisme/wp-content/uploads/2015/03/agrandissement.png" class="agrandissement"/></a>
<a href="#smaller"><img src="http://sd-67292.dedibox.fr/~b.droge/econologisme/wp-content/uploads/2015/03/diminution.png" class="diminution"/></a>
</div>

styleswitcher.js

Tuto

functions.php

add_action( 'wp_enqueue_scripts', 'child_add_scripts' );
/**
* Register and enqueue a script that does not depend on a JavaScript library.
*/
function child_add_scripts() {
wp_register_script(
'styleswitcher',
get_stylesheet_directory_uri() . '/js/styleswitcher.js',
false,
'1.0',
true
);
wp_enqueue_script( 'styleswitcher' );
}

Boutons de contrôle


<div class="contraste">
<a href="javascript:;" onclick="setActiveStyleSheet('black');
return false;">
<img src="http://sd-67292.dedibox.fr/~b.droge/econologisme/wp-content/uploads/2015/03/A4.png" class="bgblack-fwhite"/></a>
<a href="javascript:;" onclick="setActiveStyleSheet('white');
return false;">
<img src="http://sd-67292.dedibox.fr/~b.droge/econologisme/wp-content/uploads/2015/03/A1.png" class="bgwhite-fblack"/></a>
<a href="javascript:;" onclick="setActiveStyleSheet('yellow');
return false;">

<img src="http://sd-67292.dedibox.fr/~b.droge/econologisme/wp-content/uploads/2015/03/A2.png" class="bgyellow-fblack"/></a>
<a href="javascript:;" onclick="setActiveStyleSheet('red');
return false;">
<img src="http://sd-67292.dedibox.fr/~b.droge/econologisme/wp-content/uploads/2015/03/A3.png" class="bgred-fwhite"/></a>
<a href="javascript:;" onclick="setActiveStyleSheet('blue');
return false;">
<img src="http://sd-67292.dedibox.fr/~b.droge/econologisme/wp-content/uploads/2015/03/A5.png" class="bgblue-fwhite"/></a>
<a href="javascript:;" onclick="setActiveStyleSheet('main');
return false;">
Réinitialiser la police et le fond</a>
</div>

Réinitialiser la police et le fond

Créer des feuilles de styles pour chaque bouton avec @import vers la feuille de style du thème enfant

@import url("style.css");
#page-container, #top-header, #main-header, #header-left, #et-main-area, #content-area, .container, #main-content, .menu-item, #top-menu a, .et_color_scheme_red a, h1, h2, h3, h4, h5, h6, .et-social-icon a, #footer-info { background-color: black !important; color: white !important; }
.et_color_scheme_red a:hover, #top-menu a:hover, .et-social-icon a:hover { color: white !important; text-decoration: underline overline !important}