“WordPress”ブランドカラーのボタンを作る!PHP&CSS

Amazon・楽天・Yahooなどのブランドイメージに合ったボタンの作り方。
”Cocoon”子テーマにコードをコピペするだけで下のボタンが作れます。

※ このボタンにはリンクが貼り付けてありまります。

ブランドのイメージカラー

最初に、物販サイトのロゴのブランド色の確認してみましょう。

Amazonのブランド色:#FF9900(オレンジ)

楽天のブランド色:#bf0000(クリムゾンレッド)

Yahooのブランド色:#780099(レッド)

”Cocoon”にボタンを追加します

”Cocoon”のスタイルに「オリジナルボタン」のコマンドを作ります。

Original_button

ボタンを追加するコード

ボタンを追加するには、”Cocoon”子テーマの「functions.php」に下のコードをコピぺします。

//スタイルに独自デザイン追加
add_filter( 'tinymce_style_formats', function( $style_formats ) {
$style_formats[] = array(
'title' => 'オリジナルボタン',
'items' => array(
array(
'title' => 'アマゾンカラー',
'block' => 'span',
'classes' => 'user_btn_orange'
),
array(
'title' => 'アマゾンカラー(S)',
'block' => 'span',
'classes' => 'user_btn_oranges'
),
array(
'title' => '楽天カラー',
'block' => 'span',
'classes' => 'user_btn_red'
),
array(
'title' => '楽天カラー(S)',
'block' => 'span',
'classes' => 'user_btn_reds'
),
array(
'title' => 'ヤフーカラー',
'block' => 'span',
'classes' => 'user_btn_vivid' 
),
array(
'title' => 'ヤフーカラー(S)',
'block' => 'span',
'classes' => 'user_btn_vivids'
)
)
);
return $style_formats;
});

次に、それぞれのボタンの大きさと色をCSSコードを使って作ります。
下記のコードを”Cocoon”子テーマの「style.css」にコピペしてください。

/*ボタン amazonカラー*/
.user_btn_orange {
width:300px;
display: inline-block;
margin-top:6px;
text-align: center;
;font-size: 16px;
line-height: 2;
text-decoration: none;
background: #fff;
border: solid 2px #ff9900;
color: #ff9900;
border-radius: 8px;
transition: .4s;
}
.user_btn_orange:hover {
background: #ff9900;
color: #fff;
}
/*ボタン amazonカラー(S)*/
.user_btn_oranges {
width:150px;
display: inline-block;
margin-top:6px;
text-align: center;
;font-size: 16px;
line-height: 2;
text-decoration: none;
background: #fff;
border: solid 2px #ff9900;
color: #ff9900;
border-radius: 8px;
transition: .4s;
}
.user_btn_oranges:hover {
background: #ff9900;
color: #fff;
}
/*ボタン 楽天カラー*/
.user_btn_red {
width:300px;
display: inline-block;
margin-top:6px;
text-align: center;
;font-size: 16px;
line-height: 2;
text-decoration: none;
background: #fff;
border: solid 2px #bf0000;
color: #bf0000;
border-radius: 8px;
transition: .4s;
}
.user_btn_red:hover {
background: #bf0000;
color: #fff;
}
/*ボタン 楽天カラー(S)*/
.user_btn_reds {
width:150px;
display: inline-block;
margin-top:6px;
text-align: center;
;font-size: 16px;
line-height: 2;
text-decoration: none;
background: #fff;
border: solid 2px #bf0000;
color: #bf0000;
border-radius: 8px;
transition: .4s;
}
.user_btn_reds:hover {
background: #bf0000;
color: #fff;
}
/*ボタン ヤフーカラー*/
.user_btn_vivid {
width:300px;
display: inline-block;
margin-top:6px;
text-align: center;
;font-size: 16px;
line-height: 2;
text-decoration: none;
background: #fff;
border: solid 2px #FF0027;
color: #bf0000;
border-radius: 8px;
transition: .4s;
}
.user_btn_vivid:hover {
background: #FF0027;
color: #fff;
}
/*ボタン ヤフーカラー(S)*/
.user_btn_vivids {
width:150px;
display: inline-block;
margin-top:6px;
text-align: center;
;font-size: 16px;
line-height: 2;
text-decoration: none;
background: #fff;
border: solid 2px #FF0027;
color: #bf0000;
border-radius: 8px;
transition: .4s;
}
.user_btn_vivids:hover {
background: #FF0027;
color: #fff;
}

以上でAmazon・楽天・Yahooの3種類(大小合わせて6種類)のブランドカラーのボタンが出来上がりました。

大きいボタン:300px
小さいボタン:150px
※ 大きさを変えたい場合はCSSコードの(width:300px;)の数字を変更してください。
※ 色の変更はカラーコード(#〇〇〇〇〇〇)を変更してください。
ボタンを増やしたい場合はPHPとCSSを同じように付け足せば、オリジナルのボタンが作れます。

ボタンの使い方(例)

こんな使い方もできます。

【ココに写真】

Amazon楽 天Yahoo!
ユニットの作り方(例)
1. スタイル ⇒ ボックス(白抜き) ⇒ 好みの色を選択。
2. ボックス内に2カラムを作る(2:1)
3. 左のカラム(大きい方)に写真を張り付ける。
4. 右のカラム(小さい方)にボタンを設置。
5. それぞれのボタンにリンクを貼り付ける。
標準の囲みボタン
タイトルとURLをコピーしました