【WordPress】UX向上！便利なブログカスタマイズ［どのテーマでも使える］
以前､作成したブログカスタマイズをまとめてみました｡
どのテーマでも使えるので､気になったら導入してみてください｡
目次に戻るボタン
各見出し（h2）の終わりに「↑目次へ戻る」ボタンが一時期流行しましたので､それぞれの目次用に作成したものです｡
やり方はfunction.phpへ下記のコードを挿入するだけです｡
cssも入れてあげると見た目が調整できます｡
目次下ウィジェットの追加するカスタマイズ［プロフィール］
目次下に自分のプロフィールを追加すると著者のことがわかりやすいので作成しました｡
やり方はfunctions.phpに下記のコードを入れると､ウィジェットで目次下という項目が追加されます｡
目次の表示方法によって､コードを一部変更する必要があります｡
ショートコードで特定のカテゴリーリストを表示するカスタマイズ
functions.phpにコードを挿入
下記のコードをfunctions.phpに挿入します｡
cssにコードを挿入
下記のコードをcssに挿入します｡
Note風シェアボタンのカスタマイズ
Noteのシェアボタンって､使いやすくて良いですよね？
WordPressでも似たようなことをしてみました｡
記事下のウィジェットにHTMLの追加
記事下のウィジェットにカスタムHTMLにて下記のコードを貼り付けます｡
※一箇所＜TwitterID＞と書いてある場所は手動でご自身のTwitterIDを入力してください。
CSSの追加
CSSも追加します｡
functions.phpの追加
functions.phpに下記のコードを追加すると追従するようになります｡
シェアボタンの高さの調整
スマホでシェアボタンを確認します｡
フッターメニューがある場合は高さを変えるCSSを入れて調整します｡
.share a {
position: fixed;
bottom: 26px;
}Note風いいねボタンを導入するカスタマイズ
さらにいいねボタンも追加してみます｡
プラグイン「WP ULike」のインストール
いいねの計測プラグインをインストールします｡
HTMLの追加
記事下ウィジェットにカスタムHTMLを追加します｡
<div class="like-button-mobile">[wp_ulike]</div>
CSSの追加
Noteの見た目に近づけるためにCSSを追加します｡
以上です｡
年齢の計算
年齢の表示を動的に変更する方法です｡やり方は下記のコードをfunctions.phpに挿入｡
function calcAge($attr) {
$now = date("Ymd");
$birth = $attr[0];
return floor(($now-$birth)/10000);
}
add_shortcode('my_age', 'calcAge');あとは27歳といった感じショートコードを入れるだけです｡
27歳
（現在の年月日-生年月日）/10000で計算して少数点以下を切る捨てると年齢になります｡
便利なブログカスタマイズまとめ
本記事では【WordPress】UX向上！便利なブログカスタマイズ［どのテーマでも使える］について書きました！
是非お試しください｡
functions.phpまとめ
すいみんプラグイン無しでカスタマイズできます。
⇨ 【WordPress】プラグイン無しで機能拡張！「functions.php」のおすすめコード
画像を差し替える方法
すいみん最適化した画像に差し替える時の参考になります。
⇨ 【WordPress】画像パスをまとめて変して差し替える方法
