はいどーもー

エンジニアのひろたつです。

今回は、このブログで使用しているXeoryというテーマの改良です。

ソーシャルボタンが重すぎるので、修正して軽量化してみました。

はじめに

わたくし、ひろたつはブログを運営しています。

その中でちょっとしたことなのですが、悩みが、、

いかんせん、ソーシャルボタンの表示がおそい!

本当に遅い!!

調べると、画像を取得するのに時間がかかっているのだとか、、、

そんなのしなくていいよ〜〜〜

と、いうわけで、画像を読み込まないソーシャルボタンを自分で作って、それに変更しちゃいます。

これができたら、一瞬で表示されるブログが完成するぞ〜〜〜

いぇ〜〜い!

sns.phpの作成

まずは、sns.phpというファイルを作成します!

僕はCUIで操作しているので、、

touch sns.php

これで新しいファイルを作成します。

そして、そのファイルを修正します。

vi sns.php

こんな感じです。

5行目あたりで勝手に、マージンを入れています。気になる方は、各自で修正してください。

margin-top: -30px;は上に余白がありすぎたので、入れました。

margin-bottom: 20px;は下に余白が全く無かったので入れました。

single.phpの修正

sns.phpが完成したら、それを読み込まなくてはいけません。

というわけで、single.phpを修正していきます。

vi single.php

と、いっても簡単です。

1.まずは、、、

上記の部分を見つけて削除します。(64行目あたりにあります。)

  1. 次に、、、

    削除したところに以下を追記します。

以上です。

これで先程作成したsns.phpが読み込まれて、表示されると思います。

ソーシャルボタンがいい感じになったのではないでしょうか〜

おわりに

簡単でしたよね〜

Xeoryテーマはシンプルで使いやすいですよね。

そして、なんか違うなって思う部分はどんどん修正して、自分色に染めていきましょう〜

以上、ひろたつでした。

ばいなら〜

参考

https://soricity.com/social-button-change/

https://sekkakudakara.com/share-buttons/