3
4

More than 5 years have passed since last update.

WordPress Jetpack の Share 及び Like ボタン群を任意の場所に移動(ざっくり翻訳)

Last updated at Posted at 2016-06-28

原文

There are actually two ways to move the Sharing buttons and one for the Like button.

まぁ、移動には2つの方法があるでってお話。

Share(共有)及び Like(いいね)ボタンの移動

Jetpack, by default, just attaches this tag to two filters — the_content() and the_excerpt() — so that the Sharing icons get displayed. By editing your theme files, you can move the tag wherever you’d like — we default to attaching it to the filters so that, when the Sharing and Likes modules are activated, the buttons are displayed with no extra work. You’re free to move it around to put the Sharing icons where you’d like; here’s how:

(意訳)
Jetpack はデフォルトでこのタグ(HTMLタグすなわちボタン群)を2つのフィルター - the_content()the_excerpt() - にフックして表示している。あなたのテーマのファイルを編集(カスタマイズ)する場合、このタグを任意の場所移動できる - デフォルトで「共有」と「いいね」モジュールが有効化された時、このボタン群はこのフィルターで動作する。自由に好きな位置に共有ボタンを置くことができる方法は以下を見て。

1. テーマの functions.php に次のコードを書く

(補足)共有ボタンといいねボタンとで関数とフィルターフックが違うのでこんな感じになってる。

functions.php
function jptweak_remove_share() {
    remove_filter( 'the_content', 'sharing_display',19 );
    remove_filter( 'the_excerpt', 'sharing_display',19 );
    if ( class_exists( 'Jetpack_Likes' ) ) {
        remove_filter( 'the_content', array( Jetpack_Likes::init(), 'post_likes' ), 30, 1 );
    }
}

add_action( 'loop_start', 'jptweak_remove_share' );

2. 共有ボタンといいねボタンを表示させたい位置に次のコードを書く。

single.php
if ( function_exists( 'sharing_display' ) ) {
    sharing_display( '', true );
}

if ( class_exists( 'Jetpack_Likes' ) ) {
    $custom_likes = new Jetpack_Likes;
    echo $custom_likes->post_likes( '' );
}

Note that you do not need to display these together; you can put sharing_display() in a separate place from the Likes display codeblock.

(意訳)
補足 : この2つのコードを一緒に書く(表示する)必要はない。sharing_display()(共有ボタン)をいいねボタンのコードブロックからを離して設置することもできる。

(補足)
iemoto の場合はタイトル部分や本文部分の前後など事前にフックできるポイント( do_action() )を多数埋め込んでいるので、上記コードを関数化してアクションフックで実行するよう実装したほうが楽。

Share(共有)及び Like(いいね)ボタンを jQuery で移動する

my-theme.js
jQuery( document ).ready( function( $ ) {
    // Relocate Jetpack sharing buttons down into the comments form
    jQuery( '#sharing' ).html( jQuery( '.sharedaddy' ).detach() );
} );

The #sharing selector is just the DOM location where I want to move the buttons to, and the .sharedaddy one is the container that Jetpack places its buttons in normally. We just detach it from the normal position and then dump it into the new location exactly as it was.

(意訳)
表示させたい位置に #sharing の DOM をおいておけば .sharedaddy クラスの中身=共有ボタンとLikeボタンをデタッチして移動します。

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4