Wordpress

ショートコード作成はWordPressの醍醐味!SNSボタンのショートコード作成【ソース付き】

functions.phpにソースを追加することで、ショートコードを自作することができます。

functions.phpをいじるのは子テーマで。
かつ、このファイルの更新に失敗するとサイトが表示されなくなるので扱いには気をつけること!

以前、吹き出し用のショートコードを作成しています。
【ソースあり】吹き出しのタグをショートコードを自作したよ

今回はSNSボタンの作成方法についてソースとともに紹介します。

SNSボタンの作成

functions.phpに追加

// ---------------------------------------------------------------------------
// 公式アカウント(Twitter) スクリプト
// ---------------------------------------------------------------------------
function sc_twitter($value){
	if(!empty($value['user']))
	{
		$url = 'https://twitter.com/'.$value['user'];
		return '<a class="btn-social-square btn-social-square--twitter" href="'.$url.'" ><i class="fa fa-twitter">';
	}
}
add_shortcode('btn_twitter', 'sc_twitter');

// ---------------------------------------------------------------------------
// 公式アカウント(Instagram) スクリプト
// ---------------------------------------------------------------------------
function sc_instagram($value){
	if(!empty($value['user']))
	{
		$url = 'https://www.instagram.com/'.$value['user'];
		return '<a class="btn-social-square btn-social-square--instagram" href="'.$url.'" ><i class="fa fa-instagram">';
	}
}
add_shortcode('btn_instagram', 'sc_instagram');

テーマの追加CSSに追記

CSSについて、サルワカさんの記事を参考にしました。勉強になるのでおすすめですよ!

/*--------------------------------------
  公式SNSのボタン
--------------------------------------*/
.btn-social-square {
  display: inline-block !important;
  text-decoration: none;
  width: 50px;
  margin:2px;
  height: 50px;
  line-height: 50px;
  font-size: 23px;
  color:white;
  border-radius: 12px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  transition: .3s;
}
.btn-social-square i {
  line-height:50px;
}
.btn-social-square:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
.btn-social-square--twitter {
  background: #22b8ff;
}
.btn-social-square--facebook {
  background: #6680d8;
}

.btn-social-square--instagram {
  color: #FFF;
  border-radius: 14px;
  position: relative;
  display: block;
  height: 50px;
  width: 50px;
  text-align: center;
  box-sizing: border-box;
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden;
  text-decoration:none;
}
.btn-social-square--instagram:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.btn-social-square--instagram .fa-instagram {
    font-size: 25px;
    position: relative;
    display:inline-block;
    transition: .5s
}

実際の使用

ショートコード入力例

ショートコード
ショートコード

ショートコードのお陰で本文はすっきりします!

SNSボタン表示

SNSボタンの表示
SNSボタンの表示

ボタンのサイズなどは使用状況に応じて変えればOK

何度も使用するものをショートコードに

お店の紹介で使う表、いままではHTMLコードを「quick add」で毎回呼び出していましたが、これもショートコードで呼び出すように対応。

ソースはすっきりするし、色などを変更するときは一括で変更可能になって楽ちんです。

WordPressでブログを書いている人は、PHPについて勉強しながら、ショートコードを自作してみてはいかがでしょうか。

楽しいですよ~~~~

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です