プログラミングに関する情報を中心に、デザイン、ライフハックなどの記事を更新していくブログです。

ユウマのブログ

〜 無料体験可能なプログラミングスクールはコチラ 〜

WordPress

【AFFINGER5】カスタムボタンをカスタマイズする方法

AFFINGER5カスタムボタンをカスタマイズ

当ブログでも使用している、人気WordPressテーマのWING - AFFINGER5。

使い勝手はかなり良く便利に利用していたのですが、デザイン的な部分で不満点が１つありました。

その不満点とは、下記のAFFINGER5の「カスタムボタン」のデザインについてです。

AFFINGER5_カスタムボタン画像出典元：WING

初期状態のAFFINGER5カスタムボタンは、上記のように若干のグラデーションが掛かっていて、リッチデザイン寄りに作られています。

２, ３年前であればリッチデザインの方が流行っていたので不満感を抱かなかったかもしれませんが、リッチデザインよりもフラットデザインの方が主流となっている2020年現在、このようなデザインは少々古めかしく見えてしまいます。

そこでカスタムボタンのデザインを、今風のフラットデザイン寄りのものに変更することにしました。

当記事では、AFFINGER5のカスタムボタンを好きなデザインにカスタマイズして、繰り返し使えるようにする方法について解説します。

AFFINGER5カスタムボタンのカスタマイズ方法

前提としてAFFINGER5のカスタムボタンやテキストパーツは、殆どがショートコードというもので利用することができるので、コードを弄らなくてもデザインを変更することが可能です。

AFFINGER5ショートコードAFFINGER5のショートコード例

しかし記事投稿の度に、毎回ショートコードの値を変更するのは少々面倒ですよね。

この面倒臭さを解消するために、コードを弄って永久的に繰り返し利用できるようにしちゃおう！という訳です。

カスタマイズ後のボタンデザインはコチラです。

詳しくはコチラ

詳しくはコチラ

詳しくはコチラ

カスタマイズした内容は下記の通り。

  • グラデーションを無くす
  • 色合いを変更
  • 右側のアイコンを変更

マテリアルデザインによく利用される色を使い、今風に仕上げました。

それでは、カスタマイズ方法について実際に解説していきます。

1. テーマエディターからWING - AFFINGER5を選択

まずはWordPress管理画面の「外観」から、「テーマエディター」ページへ飛びます。

その後、テーマエディター内右上から「WING-AFFINGER5」テーマを選択して下さい。

テーマエディターからWING-AFFINGER5を選択テーマエディターからWING-AFFINGER5を選択

2. テーマファイル「tinymce-st-plugin.js」を選択

テーマエディター右側から「js」フォルダの中の「tinymce-st-plugin.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=""

-WordPress

© 2021 ユウマのブログ