Jetpackをカスタマイズする

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 8 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

共有と関連記事
 WordPressの便利なプラグインであるJetpackを視覚的部分についてカスタマイズします。設定して使うだけでも便利なのですが、ちょっと不満の残るところもあるのでカスタマイズしてみました。
 

 目 次 

共有ボタンを追加する

Jetpackでは、記事をシェアしてもらうためのボタンが簡単に追加できる機能があるのですが、基本的に外国のプラグインなので日本人ならではの共有アイコンがなかったりします。ただ、なくても追加できる機能あるのでご安心を・・・
実は、Jetpack以外にも 設定 → 共有 で下記の画面になってソーシャルブックマークをカスタマイズできるのです。
共有ボタン

LINEボタンを追加する

LINEに送る LINEのボタンを追加することが可能です。
サービスの追加

LINE Social Plugins
LINEに送るボタンを設置するためのサイト

リンクやアイコンなどは、上記で確認します。ボタンは、ダウンロードして圧縮されているので解凍してメディアにアップロードしておきます。
LINEに送るを追加
LINRリンクフォーマット
① https://social-plugins.line.me/lineit/share?url={URL}
{URL} → %post_url%
①https://social-plugins.line.me/lineit/share?url=%post_url%
上記のリンクを①に挿入します。
②は、アップロードしたLINEアイコンのアドレスを入れます。
LINE追加
LINEボタンが増えたのでドラッグして追加して保存したら完了です。

はてなブックマークボタンを追加する

はてなブックマーク追加
共有URL:
http://b.hatena.ne.jp/bookmarklet?url=%post_url%&btitle=%post_title%
アイコンURL:
http://hatenacorp.jp/images/hatenaportal/company/resource/hatena-bookmark-logo-s.png
はてなブックマーク追加
はてなブックマークボタンが増えたのでドラッグして追加して保存したら完了です。

Feedlyボタンを追加する

feedly追加
共有URL:
https://feedly.com/i/subscription/feed/%post_url%
アイコンURL:
http://s3.feedly.com/img/follows/feedly-follow-square-volume_2x.png
Feedly追加
Feedlyボタンが増えたのでドラッグして追加して保存したら完了です。
これでプラグインを追加することなくソーシャルブックマークボタンを3つ追加できました。

共有ボタンのタイトルを変更

共有ボタン
表示される部分には、共有というタイトルで表示されますが、何ともお世辞にもいいとは言えないですね。
編集
赤枠の部分を設定しましょう。
くまはちLABでは、下記のように設定しています。
共有ソーシャルブックマークボタンの表示
アイコンタイプは、アイコン+テキストにしておくのがベストです。
アイコンだけとか公式アイコンなどの場合は、高さを調整するのに手をやきそうです。

関連記事タイトルの変更と装飾

関連記事の表示
ただ普通に設定しただけではこんな表示です。タイトルもちゃんと表示できていませんでした。
このままでは、カッコ悪いのでちょっと変更します。
Jetpack関連記事設定
しかし、設定する場所ではタイトルも何も変更できませんね

関連記事タイトルの変更

関連記事のタイトルの変更は、functions.phpで変更します。
テーマの編集から変更するよりもファイルを編集してFTPソフトでのアップロードが無難です。
やり方を間違うとWordPressが真っ白になることもあるのでご注意ください。
 

PHP
function jetpackme_related_posts_headline( $headline ) {
$headline = sprintf(
<h2 class=”jp-relatedposts-headline”>%s</h2>‘,
esc_html( ‘注 目 の 記 事‘ )
);
return $headline;
}
add_filter( ‘jetpack_relatedposts_filter_headline’, ‘jetpackme_related_posts_headline’ );

赤字の部分を変更しています。
初期設定では、h3タグなのですがh2に変更してemタグを削除しています。
この方法は、Jetpack公式ページでも紹介されています。

関連記事タイトルの装飾

共有と関連記事
タイトルの装飾には、スタイルシートを使います。
jp-relatedposts-headlineのクラスでスタイルシートを自サイトのデザインに合わせるとOKですね。
下記のサイトが参考になります。

 

関連記事表示数を変更する

Jetpackでの関連記事は、カスタマイザーと連動していてJetpackで表示をONにする設定をしたらカスタマイザーで関連記事の設定ができるようになります。
カスタマイザー関連記事
こちらで設定できる部分もあるのですが、表示数の変更は設定するところがありません。
これもタイトルの変更と同じようにfunctions.phpで編集します。
注意点は、同じです。

PHP
function jetpackme_more_related_posts( $options ) {
$options[‘size’] = 6;
return $options;
}
add_filter( ‘jetpack_relatedposts_filter_options’, ‘jetpackme_more_related_posts’ );

グリッドレイアウトなので初期設定では、3記事の表示です。
この設定では、パソコンのブラウザ表示で2段6記事にするための設定変更にしてみました。
この方法は、Jetpack公式ページでも紹介されています。

 

その他

今回は、関連記事の表示とソーシャルブックマークについて詳しくやりましたが、Jetpackの機能はこれだけでなく多岐多様にあります。例えばサイドバーやフッターなどに表示できるウィジェットなどもそうです。
また、カスタム投稿タイプで推薦文やポートフォーリオなどの追加が簡単にできます。これらの機能についてはまた詳しく書く記事を設定する予定です。
 


 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!