Hallo Leute,
eine Lösung habe ich inzwischen gefunden, allerdings mit einem Script , welches leider in einem Wordpress Beitrag nicht läuft, ich habe das ganze schon mit dem leider veraltetem inline-script plugin versucht, was leider bei der aktuellen Version von WP nicht wirklich funktioniert, mir zerschießt es jedes mal die Formatierung.
Ist es möglich andere Javascripts in WP zum laufen zu bewegen?
dieses Script wird in mehreren Beiträgen zum Einsatz kommen.
Ich habe schon einiges gelesen mit Script in die Header.php des Themes einfügen, jedoch ist in meiner Header.php nicht von eingefügten Scripts zu sehen.
Ich verwende das Theme Tempera.
Hier mal die reine html der besagten Seite, welche außerhalb von WP wunderbar funktioniert.
Unter Verwendung von Cookies werden die Checkboxen beim User gespeichert.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Checkliste1</title>
<style>
button{
margin-top:8px;
}
</style>
</head>
<body>
<h2 style="text-align: left;">Einkaufsliste - Beruf Kochen 0-400</h2>
<p style="text-align: left;">Beim Kaufmann</p>
<p>
<input type="checkbox" id="1">
<img class="alignnone size-full wp-image-1869" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Beutel_Mehl_Icon.png" alt="20px-Beutel_Mehl_Icon" width="20" height="20" />150x Beutel Mehl</p>
<p>
<input type="checkbox" id="2"><img class="alignnone size-full wp-image-1924" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Krug_Wasser_Icon.png" alt="20px-Krug_Wasser_Icon" width="20" height="20" />125x Krug Wasser</p>
<p>
<input type="checkbox" id="3"><img class="alignnone size-full wp-image-1945" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Paket_Salz_Icon.png" alt="20px-Paket_Salz_Icon" width="20" height="20" />100x Paket Salz</p>
<p>
<input type="checkbox" id="4"><img class="alignnone size-full wp-image-1884" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Flasche_Essig_Icon.png" alt="20px-Flasche_Essig_Icon" width="20" height="20" />25x Flasche Essig</p>
<p>
<input type="checkbox" id="5"><img class="alignnone size-full wp-image-1923" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Krug_Pflanzenl_Icon.png" alt="20px-Krug_Pflanzenl_Icon" width="20" height="20" />25x Krug Pflanzenöl</p>
<p>
<input type="checkbox" id="6"><img class="alignnone size-full wp-image-1957" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Sack_Zucker_Icon.png" alt="20px-Sack_Zucker_Icon" width="20" height="20" />25x Sack Zucker</p>
<p>
<input type="checkbox" id="7"><img class="alignnone size-full wp-image-1890" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Glas_Buttermilch_Icon.png" alt="20px-Glas_Buttermilch_Icon" width="20" height="20" />25x Glas Buttermilch</p>
<p>
//............ Hier würde es weiter gehen//
</p>
<button>Markieren</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<script>
function handleButtonClick(button){
if ($(button).text().match("alle markieren")){
$(":checkbox").prop("checked", true)
} else {
$(":checkbox").prop("checked", false)
};
updateButtonStatus();
}
function updateButtonStatus(){
var allChecked = $(":checkbox").length === $(":checkbox:checked").length;
$("button").text(allChecked? "Markierung entfernen" : "alle markieren");
}
function updateCookie(){
var elementValues = {};
$(":checkbox").each(function(){
elementValues[this.id] = this.checked;
});
elementValues["buttonText"] = $("button").text();
$.cookie('elementValues', elementValues, { expires: 7, path: '/' })
}
function repopulateFormELements(){
var elementValues = $.cookie('elementValues');
if(elementValues){
Object.keys(elementValues).forEach(function(element) {
var checked = elementValues[element];
$("#" + element).prop('checked', checked);
});
$("button").text(elementValues["buttonText"])
}
}
$(":checkbox").on("change", function(){
updateButtonStatus();
updateCookie();
});
$("button").on("click", function() {
handleButtonClick(this);
updateCookie();
});
$.cookie.json = true;
repopulateFormELements();
</script>
</body>
</html>