利用 jQuery 移動 Jetpack 的分享按鈕與相關文章

廢話不多說,「Jetpack by WordPress.com」的「分享」(Sharing) 以及最近剛推出的「相關文章」 (Related Posts),預設顯示位置是在本文 the_content() 下方,如果有用分頁 wp_link_pages() 就欲哭無淚了。

令人慶幸的是,網路上有許多善心人士寫了教學「Moving Sharing Icons」,最常見的方式是在 functions.php 加入 filter 再於欲顯示的位置插入代碼,還有另一種是這邊比較能看懂的 jQuery 方式,因此如題、接下來要講的就是利用 jQuery 移動分享區塊。

首先在你的版面放 script 的位置插入下列代碼:

<script>
jQuery( document ).ready( function( $ ) {
    // Relocate Jetpack sharing buttons
    jQuery( '#sharing' ).html( jQuery( '.sharedaddy' ).detach() );
} );
</script>

稍微解釋一下,sharedaddy 是分享區塊的 class,我們要將這個區塊放在 id 為 sharing 的地方。接下來只要在想要顯示的地方插入區塊即可,例如這邊想讓分享按鈕在標籤 (tag) 區塊後方顯示,於是在標籤區塊下方插入一個 div 區塊

<div id="sharing"></div>

於是相關文章功能、class 是 jp-relatedposts,就可以如法炮製囉!再次感謝網路上的善心人士們(合掌)

分類:網站網誌