Jetpackをカスタマイズする
この記事を読むのに必要な時間は約 8 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
WordPressの便利なプラグインであるJetpackを視覚的部分についてカスタマイズします。設定して使うだけでも便利なのですが、ちょっと不満の残るところもあるのでカスタマイズしてみました。
共有ボタンを追加する
Jetpackでは、記事をシェアしてもらうためのボタンが簡単に追加できる機能があるのですが、基本的に外国のプラグインなので日本人ならではの共有アイコンがなかったりします。ただ、なくても追加できる機能あるのでご安心を・・・
実は、Jetpack以外にも 設定 → 共有 で下記の画面になってソーシャルブックマークをカスタマイズできるのです。
LINEボタンを追加する
LINEのボタンを追加することが可能です。
LINE Social Pluginsリンクやアイコンなどは、上記で確認します。ボタンは、ダウンロードして圧縮されているので解凍してメディアにアップロードしておきます。
① https://social-plugins.line.me/lineit/share?url={URL}
{URL} → %post_url%
①https://social-plugins.line.me/lineit/share?url=%post_url%
上記のリンクを①に挿入します。
②は、アップロードした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ボタンを追加する
共有URL:
https://feedly.com/i/subscription/feed/%post_url%
アイコンURL:
http://s3.feedly.com/img/follows/feedly-follow-square-volume_2x.png
Feedlyボタンが増えたのでドラッグして追加して保存したら完了です。
これでプラグインを追加することなくソーシャルブックマークボタンを３つ追加できました。
feedly. your news. delivered.共有ボタンのタイトルを変更
表示される部分には、共有というタイトルで表示されますが、何ともお世辞にもいいとは言えないですね。
赤枠の部分を設定しましょう。
くまはちLABでは、下記のように設定しています。
アイコンタイプは、アイコン＋テキストにしておくのがベストです。
アイコンだけとか公式アイコンなどの場合は、高さを調整するのに手をやきそうです。
関連記事タイトルの変更と装飾
ただ普通に設定しただけではこんな表示です。タイトルもちゃんと表示できていませんでした。
このままでは、カッコ悪いのでちょっと変更します。
しかし、設定する場所ではタイトルも何も変更できませんね
関連記事タイトルの変更
関連記事のタイトルの変更は、functions.phpで変更します。
テーマの編集から変更するよりもファイルを編集してFTPソフトでのアップロードが無難です。
やり方を間違うとWordPressが真っ白になることもあるのでご注意ください。
$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ですね。
下記のサイトが参考になります。
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
関連記事表示数を変更する
Jetpackでの関連記事は、カスタマイザーと連動していてJetpackで表示をONにする設定をしたらカスタマイザーで関連記事の設定ができるようになります。
こちらで設定できる部分もあるのですが、表示数の変更は設定するところがありません。
これもタイトルの変更と同じようにfunctions.phpで編集します。
注意点は、同じです。
$options[‘size’] = 6;
return $options;
}
add_filter( ‘jetpack_relatedposts_filter_options’, ‘jetpackme_more_related_posts’ );
グリッドレイアウトなので初期設定では、３記事の表示です。
この設定では、パソコンのブラウザ表示で２段６記事にするための設定変更にしてみました。
この方法は、Jetpack公式ページでも紹介されています。
その他
今回は、関連記事の表示とソーシャルブックマークについて詳しくやりましたが、Jetpackの機能はこれだけでなく多岐多様にあります。例えばサイドバーやフッターなどに表示できるウィジェットなどもそうです。
また、カスタム投稿タイプで推薦文やポートフォーリオなどの追加が簡単にできます。これらの機能についてはまた詳しく書く記事を設定する予定です。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存