ここでの実装は閲覧率・クリック率確認のツールが実装されていることが条件です
目次
SCFで投稿にアフィリエイトリンク入力項目を実装
既存実装
| タイプ | ラベル | 名前 |
| テキスト | 学校名 | salon_name |
追加実装
| タイプ | ラベル | 名前 |
| テキストエリア | アフィリエイトボタン | custom_button_html |
Code Snipetの内容
左側のボタンは固定
右側のボタンはSCFの値から取得
function display_custom_mobile_footer_buttons() {
if ( is_single() && !is_admin() && wp_is_mobile() ) {
$post_id = get_the_ID();
$raw_html = SCF::get('custom_button_html', $post_id);
$school_name = SCF::get('salon_name', $post_id);
$views = get_post_meta($post_id, 'page_views', true);
if ( empty(trim($raw_html)) || empty(trim($school_name)) || empty($views) ) return;
// aタグだけを抽出、imgなどは除去
$raw_html_clean = strip_tags($raw_html, '<a>');
if ( preg_match('/<a[^>]+href=["\']([^"\']+)["\']/', $raw_html_clean, $matches) ) {
$link_url = esc_url($matches[1]);
?>
<style>
.sp-footer-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
width: 100%;
overflow: hidden;
}
.sp-footer-message {
background-color: #8C8C8C;
color: #fff;
text-align: center;
font-size: 13px;
padding: 6px 8px;
font-weight: bold;
}
.sp-footer-message .highlight {
color: #F5BC55; /* ← 修正箇所 */
font-weight: bold;
}
.sp-footer-btns {
display: flex;
width: 100%;
text-align: center;
}
.sp-footer-btn-left-wrap,
.sp-footer-btn-right-wrap {
flex: 1;
}
.sp-footer-btn-left,
.sp-footer-btn-right {
display: block;
width: 100%;
padding: 12px 8px;
font-size: 13px;
font-weight: bold;
line-height: 1.4;
color: #fff;
text-decoration: none;
position: relative;
z-index: 2;
pointer-events: auto;
cursor: pointer;
}
.sp-footer-btn-left {
background-color: #0CB1A5;
}
.sp-footer-btn-right {
background-color: #FBA437;
}
@media screen and (min-width: 769px) {
.sp-footer-container {
display: none;
}
}
</style>
<div class="sp-footer-container">
<div class="sp-footer-message">
直近で <span class="highlight"><?php echo esc_html($views); ?>人</span> がこの学校を検討しています。
</div>
<div class="sp-footer-btns track-click">
<div class="sp-footer-btn-left-wrap">
<div class="sp-footer-btn-left" data-url="https://www.rentracks.jp/adx/r.html?idx=0.36381.329198.570.941&dna=18436">
【カンタン30秒】<br/>学校の無料診断ツール
</div>
</div>
<div class="sp-footer-btn-right-wrap">
<div class="sp-footer-btn-right" data-url="<?php echo $link_url; ?>">
<?php echo esc_html($school_name); ?>の<br/>パンフを無料で見る
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.sp-footer-btn-left').forEach(function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
const url = el.dataset.url;
if (url) window.open(url, '_blank');
});
});
document.querySelectorAll('.sp-footer-btn-right').forEach(function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
const url = el.dataset.url;
if (url) window.open(url, '_blank');
});
});
});
</script>
<?php
}
}
}
add_action('wp_footer', 'display_custom_mobile_footer_buttons');
コメント