当ブログでも使用している、人気WordPressテーマのWING - AFFINGER5。
使い勝手はかなり良く便利に利用していたのですが、デザイン的な部分で不満点が１つありました。
その不満点とは、下記のAFFINGER5の「カスタムボタン」のデザインについてです。
画像出典元：WING
初期状態のAFFINGER5カスタムボタンは、上記のように若干のグラデーションが掛かっていて、リッチデザイン寄りに作られています。
２, ３年前であればリッチデザインの方が流行っていたので不満感を抱かなかったかもしれませんが、リッチデザインよりもフラットデザインの方が主流となっている2020年現在、このようなデザインは少々古めかしく見えてしまいます。
そこでカスタムボタンのデザインを、今風のフラットデザイン寄りのものに変更することにしました。
当記事では、AFFINGER5のカスタムボタンを好きなデザインにカスタマイズして、繰り返し使えるようにする方法について解説します。
AFFINGER5カスタムボタンのカスタマイズ方法
前提としてAFFINGER5のカスタムボタンやテキストパーツは、殆どがショートコードというもので利用することができるので、コードを弄らなくてもデザインを変更することが可能です。
AFFINGER5のショートコード例
しかし記事投稿の度に、毎回ショートコードの値を変更するのは少々面倒ですよね。
この面倒臭さを解消するために、コードを弄って永久的に繰り返し利用できるようにしちゃおう！という訳です。
カスタマイズ後のボタンデザインはコチラです。
カスタマイズした内容は下記の通り。
- グラデーションを無くす
- 色合いを変更
- 右側のアイコンを変更
マテリアルデザインによく利用される色を使い、今風に仕上げました。
それでは、カスタマイズ方法について実際に解説していきます。
1. テーマエディターからWING - AFFINGER5を選択
まずはWordPress管理画面の「外観」から、「テーマエディター」ページへ飛びます。
その後、テーマエディター内右上から「WING-AFFINGER5」テーマを選択して下さい。
テーマエディターからWING-AFFINGER5を選択
2. テーマファイル「tinymce-st-plugin.js」を選択
テーマエディター右側から「js」フォルダの中の「tinymce-st-plugin.js」を選択して下さい。
テーマエディターから「js」>「tinymce-st-plugin.js」を選択
3. テーマエディター内で文字列検索を行う
エディターをクリック後、Macであれば「command ＋ F」、Windowsであれば「Ctrl ＋ F」キーを入力し、文字列検索用の入力エリアを出します。
その後、入力エリアに「カスタムボタン」と入力しエンターキーを押すと、カスタムボタンのコードが記載された箇所まで飛ぶことができます。
エディターで文字列検索を行う
4. カスタマイズしたボタンのコードを変更する
ここまで来たら、あとはカスタマイズしたいボタンのコードを変更するだけでOKです。
エディター内の「text :」の後ろに続く文字を見れば、各コードがどのカスタムボタンと紐付いているかが分かります。
エディター内の「text: 」の箇所を見ることでカスタムボタンの判別ができる
変更するコードは、「callback:setAsText」の後に続くショートコードの部分です。
この部分を変更することで、記事執筆の度にショートコードを書き換えなくても、ココに記載したコードを繰り返し利用することが可能になります。
赤枠部分を変更することでコードの繰り返し利用ができるようになる
【コピペOK！】カスタマイズ用コードはコチラ
最後に僕がカスタマイズした、カスタムボタンのショートコードを載せておきます。
デザインを考えるのが面倒な方は、ご自由にコピペして利用して下さい。
<!-- 詳しくはコチラ(レッド) -->
st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#e74c3c" bordercolor="#e74c3c" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="#a13327" ref="on" beacon=""
<!-- 詳しくはコチラ(グリーン) -->
st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#1abc9c" bordercolor="#1abc9c" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="#13856e" ref="on" beacon=""
<!-- 詳しくはコチラ(ブルー) -->
st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#34a3ed" bordercolor="#34a3ed" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="#256fa1" ref="on" beacon=""
