wordpressにアプリ埋め込みを導入する方法!

アプリ埋め込み wordpress

  1. この記事では、下記のことができるようになります。

できるようになること

  • wordpressにアプリの埋め込みができます。
  • アプリの埋め込みをSANGO風にできます。
  • 親テーマを修正する方法がわかります。
  • ショートコードを追加する方法がわかります。

after

Native Camp
Native Camp
NativeCamp inc.
Google Play で手に入れよう
注意
この記事ではfunction.phpとstyle.cssを修正します。

特にfunction.phpの修正は失敗するとページが真っ白になる可能性があります。

必ずバックアップを取得するようにお願い致します。

1. function.phpに追加する

ショートコードを実装するためにfunction.phpを修正します。

function.phpの修正は失敗するとページが真っ白になる可能性があるため、バックアップの取得をお願いします。

function.php
/*************************************************
  アプリ埋め込みのショートコード追加
**************************************************/
// [apps appsname="" appscompany="" appslink_appstore="" appslink_google="" appsimglink=""]
add_shortcode('apps', function( $atts = null ) {
    extract(shortcode_atts(array(
        'appsname' => '',
		'appscompany' => '',
		'appslink_appstore' => '',
		'appslink_google' => '',
		'appsimglink' => ''
    ), $atts));
	
	$output = '<div class="apps-box"><div class="apps-img-box"><img class="apps-img" src="'. esc_attr($appsimglink).  '" alt="' . esc_attr($appsname). '"></div><div class="apps-title-box">' . esc_attr($appsname). '</div><div class="apps-company">'. esc_attr($appscompany).  '</div><div class="apps-button-box"><a href="' . esc_attr($appslink_appstore).  '" class="apps-button-itunes"></a><a href="' . esc_attr($appslink_google).  '" class="apps-button-google"><img alt="Google Play で手に入れよう" src="https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png" width="155px"></a></div></div>';
	
    return $output;
});

こちらを使用することで、記事を書く際に下記ショートコードが追加できます。

ショートコード
[apps appsname="Apps Name" appscompany="Apps Company" appslink_appstore="Appstore Link" appslink_google="Google link" appsimglink="Apps Image Link"]

赤文字を修正することで、記事にアプリ埋め込みを追加できます。

2. style.cssに追加する

CSSに下記を追加します。

style.css
/*-------------------------
     アプリ埋め込みCSS
---------------------------*/
/* PC */
.apps-box {
  max-width: 445px;
  height: 120px;
  border-radius: 5px;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.2);
  background: #fff;
  margin-bottom: 30px;
}

.apps-img-box {
  float: left;
  padding: 15px 20px 0 15px;
  width: 127px;
  height: 127px;
}

.apps-title-box {
  height: 42px;
  font-weight: bold;
  padding: 10px 0 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apps-company {
  color: #808080;
  margin-top: -10px;
  font-size: 14px;
  height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apps-img {
  width: 127px;
  height: 127px;
  border-radius: 10px;
}

.apps-button-itunes {
  float:left;
  overflow:hidden;
  background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2016-06-01&kind=iossoftware&bubble=ios_apps) no-repeat;
  width:135px;
  height:40px;
  margin-top: 10px;
}

/* スマホ */
@media only screen and (max-width: 767px){
	.apps-box {
	  text-align: center;
	  max-width: 100%;
	  height: 100%;
	}

	.apps-img-box {
	  float:none;
	  padding: 20px 20px 0 10px;
	  width: auto;
      height: auto;
	}

	.apps-title-box {
	  font-size: 19px;
      padding: 10px 15px 0;
	}
	
	.apps-company {
	  color: #808080;
	  border-bottom: 1px solid #dcdcdc;
	  margin-bottom: 10px;
	  padding-bottom: 40px;
	  margin-top: -5px;
	}

	.apps-img {
	  width: 100px;
	  height: 100px;
	}
	
	.apps-button-box {
	  padding-bottom: 10px;
	}

	.apps-button-itunes {
	  float:none;
	  display: inline-block;
	  margin-left: 10px;
	  vertical-align: top;
	}
}

これにより、レスポンシブ対応した下記のアプリ埋め込みを作成することができます。

Native Camp
Native Camp
NativeCamp inc.
Google Play で手に入れよう

3. まとめ

CSSの修正を行ったあとは、キャッシュを削除するか、「ctrl + F5」でスーパーリロードをして確認しましょう。

function.phpに対しての修正は大変危険な作業です。

間違えてしまっても大丈夫なように、バックアップは必ず取得するようにしてください。