Seit einiger Zeit nerven mich die user notifications, die ständig in meiner Mailbox landen. Zumal es sich dabei um Spam handelt. Heute – endlich – habe ich das Problem gelöst. Es ist ganz einfach:
1. Link anklicken: https://wordpress.org/plugins/disable-new-user-notifications/installation/
2. Source downloaden3. Als Plugin installieren und aktivieren.
Es funktioniert perfekt!
I love jsfiddle, it is a great tool to share and quickly try a code snippet. However, it is a separate page and we wanted something we could directly include in a WordPress blog post.
You need two textarea input fields in a form for the html and css code, respectively:
<form>
<textarea class="textarea_text" id="htmlcode1" oninput="update(1);">
<div>Example text.</div>
</textarea>
<textarea class="textarea_text" id="csscode1" oninput="update(1);">
div {background-color: #bdd}
</textarea>
</form>
You can already enter some code which will appear as default. To show the result, an iframe is used:
<iframe id="output1" class="textarea_output" src="data:text/css;base64,UGxlYXNlIGVuYWJsZSBqYXZhc2NyaXB0Lg=="></iframe>
Instead of the iframe, a div could also be used. However, in that case the css from your blog would mix with the additional rules from the text input, which is normally not what we want.
To directly include the following javascript code in your blog entry, you can install the Inline Javascript Plugin. Now you can insert this code at the end of your blog entry:
[inline]
[script type="text/javascript"]
var myframe = [];
var mycsslink = [];
var PREV_NUM = 1; // number of preview iframes
// init
window.onload = function() {
for (var num=1; num<=PREV_NUM; num++) {
myframe[num] = document.getElementById('output'+num);
mycsslink[num] = document.createElement("link");
mycsslink[num].rel = "stylesheet";
mycsslink[num].type = "text/css";
update(num);
myframe[num].contentDocument.documentElement.appendChild(mycsslink[num]);
}
}
// update output when input has changed
function update(num) {
myframe[num].contentDocument.documentElement.innerHTML = "<head><link rel=\"stylesheet\" href=\"data:text/css;base64," + btoa(document.getElementById("csscode"+num).value) + "\"></head><body>";
myframe[num].contentDocument.documentElement.innerHTML += document.getElementById("htmlcode"+num).value;
myframe[num].contentDocument.documentElement.innerHTML += "</body></html>";
}
[/script]
[/inline]
If you would like to include multiple preview iframes, you can increase the numbers of the ids htmlcode1, csscode1 and output1, the number in the update call and finally adjust the constant PREV_NUM in the javascript code. Beware to not show multiple blog entries with the same numbers on a single page.
The updating of the iframe content code is a bit special. An external content is used via a data URI with base64 encoding. This is done because with normal inclusion of css the styles seemed to keep existing even when the css was removed. If you find an easier solution, please let me know! The src attribute contains a message to tell the user to enable javascript, you can easily replace it e.g. using an online base64 converter such as this one.
Currently, this does not seem to work on iOS (tested on an iPad). I have no experience debugging on that platform, if you do, please let us know!