Jquery selectorunde yer alan .entry-content kısmını kendinize göre düzenlemeniz gerekiyor.
Sitenize eklemek için aşağıdaki kodları kullanabilirsiniz. Demo için aşağıdaki adrese gözatabilirsiniz.
http://jsbin.com/qogicicadi/1/edit?html,output
<div class="entry-voice">
<span>Sesli okuma özelliği ile bu yazıyı sesli olarak dinleyebilrisiniz.</span>
<a href="javascript:sesli_oku()">SESLİ OKU</a>
<a href="javascript:sesli_durdur()">SESLİ OKUMA DURDUR</a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
<script>
function sesli_oku() {
var text = $('.entry-content').text();
responsiveVoice.speak("" + text +"","Turkish Female");
}
function sesli_durdur() {
responsiveVoice.cancel();
}
</script>
<style type="text/css" id="wp-custom-css">
.entry-voice {width:100%; float:left; margin:15px 0; background:#333333; color:#fff; font-size:13px; box-sizing:border-box; padding:15px; box-sizing:border-box; text-align:center;}
.entry-voice span {float:left; font-size:13px; text-align:center; width:100%; margin-bottom:10px;}
.entry-voice a {color:#fff; text-decoration:none; padding:10px 15px; border:1px solid #fff; margin-right:10px; border-radius:3px; transition:all 0.5s; display:inline-block;}
.entry-voice a:hover {background:#fff; color:#000;}
</style> 
)
