昔流行したバイラルメディア風フォローボックスのインスタグラム用を自作しましたので共有します。
こんな感じのやつです。↓
以下は、フォローボックスの構造をthe_contentにフックさせた例です。
function add_instagram_follow_box($content) {
if (is_single()) { // 単一記事ページでのみ表示
global $post;
$thumbnail_url = has_post_thumbnail($post->ID) ? wp_get_attachment_url(get_post_thumbnail_id($post->ID)) : 'デフォルトの背景画像のURL';
$instagram_box = '<div class="viral-media-instagram-box ' . (has_post_thumbnail($post->ID) ? 'has-thumbnail' : '') . '" style="background-image: url(\'' . esc_url($thumbnail_url) . '\');">';
$instagram_box .= '<div class="viral-media-instagram-box__content">';
$instagram_box .= '<div class="viral-media-instagram-box__text">';
$instagram_box .= '<p>この記事が気に入ったらフォロー！</p>';
$instagram_box .= '<p class="viral-media-instagram-box__note">Instagramで最新情報をお届けします</p>';
$instagram_box .= '</div>';
$instagram_box .= '</div>';
$instagram_box .= '<div class="viral-media-instagram-box__follow">';
$instagram_box .= '<a href="https://www.instagram.com/your_instagram_profile/" target="_blank" class="instagram-follow-button">Instagramをフォロー</a>';
$instagram_box .= '</div>';
$instagram_box .= '</div>';
$content .= $instagram_box; // 記事の内容の後にフォローボックスを追加
}
return $content;
}
add_filter('the_content', 'add_instagram_follow_box');
以下はCSSです。
グラデーションはこちらのサイト様から引用させていただきました。ありがとうございます。
https://migi.me/css/instagram-gradation-button/#google_vignette
.viral-media-instagram-box {
max-width: 600px;
margin: 20px auto;
background: #333;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 0;
overflow: hidden;
}
.viral-media-instagram-box.has-thumbnail::before {
content: '';
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.viral-media-instagram-box__content {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
position: relative;
}
.viral-media-instagram-box__text {
flex-grow: 1;
text-align: center;
margin: 0;
}
.viral-media-instagram-box__note {
font-size: 16px;
color: #eee;
margin-top: 5px;
}
.viral-media-instagram-box__follow {
text-align: center;
padding: 15px;
}
.instagram-follow-button {
display: inline-block;
padding: 1em 2em;
border-radius: 10em;
background: linear-gradient(to right,
rgba(247, 207, 0, 0.7),
rgba(246, 37, 2, 0.7) 45%,
rgba(182, 47, 82, 0.7) 75%,
rgba(113, 58, 166, 0.7));
color: #fff;
text-decoration: none;
line-height: 1;
}
.instagram-follow-button:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}CSSは好みの問題になってくるのですが、例としてあげました。
ちなみにただのHTMLにするとこうなります。
<div class="viral-media-instagram-box has-thumbnail" style="background-image: url('デフォルトの背景画像のURL');">
<div class="viral-media-instagram-box__content">
<div class="viral-media-instagram-box__text">
<p>この記事が気に入ったらフォロー！</p>
<p class="viral-media-instagram-box__note">Instagramで最新情報をお届けします</p>
</div>
</div>
<div class="viral-media-instagram-box__follow">
<a href="https://www.instagram.com/mitamurahiro/" target="_blank" class="instagram-follow-button">Instagramをフォロー</a>
</div>
</div>
よろしくー。
