使用短代码将内容添加到wordpress帖子

Question

I am looking to add something like this http://jsfiddle.net/theimaginative/gA63t/ to a wordpress post. I have been trying to create a shortcode to insert this into a post but have been struggling with it. I can get a basic short code to work to add text just using a basic function but after searching google for hours I can't figure out how to have html and javascript as a part of the short code content.

Any help would be much appreciated. Thanks!

<div id="sliderone">
<div id="nav">
    <div id="navone" style="text-align: center;">This is a clickable title</div>
</div>
<div id="title"></div>
</div>

 <script type="text/javascript">

$('#navone').click(function () {
$('#title').html("<img src='http://placehold.it/350x350' alt='' />");
$('#sliderone').animate({
height: '450'
});
});

</script>

Answer 1

You can assign multi-line strings to a variable using PHP's HEREDOC syntax.

It would look something like this.

function addClickableTile(){

$content = <<<HEREDOC

<div id="sliderone">
<div id="nav">
    <div id="navone" style="text-align: center;">This is a clickable title</div>
</div>
<div id="title"></div>
</div>

 <script type="text/javascript">

$('#navone').click(function () {
$('#title').html("<img src='http://placehold.it/350x350' alt='' />");
$('#sliderone').animate({
height: '450'
});
});

</script>

HEREDOC;

return $content;

}

add_shortcode('addClickableTile','addClickableTile');