【WordPress】UX向上!便利なブログカスタマイズ[どのテーマでも使える]

wordpress-customize

以前、作成したブログカスタマイズをまとめてみました。

どのテーマでも使えるので、気になったら導入してみてください。

目次

目次に戻るボタン

各見出し(h2)の終わりに「↑目次へ戻る」ボタンが一時期流行しましたので、それぞれの目次用に作成したものです。

やり方はfunction.phpへ下記のコードを挿入するだけです。

cssも入れてあげると見た目が調整できます。

目次下ウィジェットの追加するカスタマイズ[プロフィール]

目次下に自分のプロフィールを追加すると著者のことがわかりやすいので作成しました。

やり方はfunctions.phpに下記のコードを入れると、ウィジェットで目次下という項目が追加されます。

目次の表示方法によって、コードを一部変更する必要があります。

ショートコードで特定のカテゴリーリストを表示するカスタマイズ

STEP

functions.phpにコードを挿入

下記のコードをfunctions.phpに挿入します。

STEP

cssにコードを挿入

下記のコードをcssに挿入します。

STEP

ショートコードの挿入

カテゴリーリストを入れたい場所にショートコードを挿入します。

※最後の数字はカテゴリーIDを入れてください。
カテゴリーの編集画面からIDは確認できます。

Note風シェアボタンのカスタマイズ

Noteのシェアボタンって、使いやすくて良いですよね?

WordPressでも似たようなことをしてみました。

STEP

記事下のウィジェットにHTMLの追加

記事下のウィジェットにカスタムHTMLにて下記のコードを貼り付けます。

※一箇所<TwitterID>と書いてある場所は手動でご自身のTwitterIDを入力してください。

STEP

CSSの追加

CSSも追加します。

STEP

functions.phpの追加

functions.phpに下記のコードを追加すると追従するようになります。

STEP

シェアボタンの高さの調整

スマホでシェアボタンを確認します。

フッターメニューがある場合は高さを変えるCSSを入れて調整します。

.share a {
  position: fixed;
  bottom: 26px;
}

Note風いいねボタンを導入するカスタマイズ

さらにいいねボタンも追加してみます。

STEP

プラグイン「WP ULike」のインストール

いいねの計測プラグインをインストールします。

STEP

HTMLの追加

記事下ウィジェットにカスタムHTMLを追加します。

<div class="like-button-mobile">[wp_ulike]</div>

STEP

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】画像パスをまとめて変して差し替える方法

目次
閉じる