When we need to inserting Javascript blocks code programmatically into post, we know that WordPress autoescaping Javascript before write into tables. To make javascript inserting into post in WordPress, we can use shortcode. This feature meaning we define custom tag blocks in post and how to convert it tag. So, the tricks is we should define our javascript in shortcode and all needed content leave on block tags. It seem little confuse without any example right?
For instance, I want to inserting Scribd Javascript into WordPress post :
1 2 3 4 5 6 7 8 9 10 | <script type=’text/javascript’ src=’http://www.scribd.com/javascripts/scribd_api.js’></script> <div id=’get_documents’></div> <script type="text/javascript"> var scribd_doc = scribd.Document.getDoc(58965437, ‘key17fnch….’); scribd_doc.addParam( ‘jsapi_version’, 2 ); scribd_doc.addParam( ‘width’, 550); scribd_doc.addParam( ‘height’, 300); scribd_doc.addEventListener( ‘docReady’, onDocReady ); scribd_doc.write( ‘get_documents’ ); </script> |
Then, we know that custom variable located in
1 | scribd.Document.getDoc(58965437, ‘key17fnch….’); |
So basically, we need to create template like this :
1 2 3 4 5 6 7 8 9 10 | <script type=’text/javascript’ src=’http://www.scribd.com/javascripts/scribd_api.js’></script> <div id=’get_documents’></div> <script type="text/javascript"> var scribd_doc = scribd.Document.getDoc(<CONTENT_LOCATED_HERE>); scribd_doc.addParam( ‘jsapi_version’, 2 ); scribd_doc.addParam( ‘width’, 550); scribd_doc.addParam( ‘height’, 300); scribd_doc.addEventListener( ‘docReady’, onDocReady ); scribd_doc.write( ‘get_documents’ ); </script> |
So, let make some plugin which contain shortcode for this, eg :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function scribd_shortcode($atts = NULL, $content) { return "<script type=’text/javascript’ src=’http://www.scribd.com/javascripts/scribd_api.js’></script> <div id=’get_documents’></div>".'<script type="text/javascript">’. "var scribd_doc = scribd.Document.getDoc($content); var onDocReady = function(e){ // } scribd_doc.addParam( ‘jsapi_version’, 2 ); scribd_doc.addParam( ‘width’, 550); scribd_doc.addParam( ‘height’, 300); scribd_doc.addEventListener( ‘docReady’, onDocReady ); scribd_doc.write( ‘get_documents’ ); </script>"; } add_shortcode(‘scribd’, ‘scribd_shortcode’); |
Now, in your post, you just add :
1 | [scribd]contentID, key[scribd] |
Easy right ? 🙂
Another good reference for shortcode in WordPress :
http://wplifeguard.com/how-to-use-wordpress-shortcode/