使用簡碼將內容添加到wordpress文章

Question

我正在尋找像這樣的http://jsfiddle.net/theimaginative/gA63t/添加到WordPress的文章。我一直在試圖創建一個短代碼插入到帖子中，但一直在努力。我可以得到一個基本的簡短代碼，只需使用基本功能即可添加文本，但在Google搜索幾個小時後，我無法弄清楚如何將html和javascript作爲短代碼內容的一部分。

任何幫助將不勝感激。謝謝！

<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

您可以使用PHP的HEREDOC syntax分配多行字符串變量。

它看起來像這樣。

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');