バビ
ごきげんよう。バビです。
Amazonのビッグセール、プライムデーとサイバーマンデー。
セール前後に↓こんな感じの記事を書いているブロガーも多いのではないでしょうか。
Aamzonのセール情報の記事なので、できればいつも使っているRinkerの楽天・Yahoo!ショッピングのボタンは非表示にしたいところ。
Rinkerは商品リンク管理の画面で楽天とYahoo!のボタンを消すことができるんですが、それだと、セール記事以外でのボタンも消えてしまいます。
かといって同じ商品で楽天・Yahooボタンあり／なしの登録するのもめんどくさいし。
と思ったので、Amazonのセール記事に使える、楽天・Yhaoo!ショッピングのボタンを非表示にするCSSを作成しました。
Amazonのセール記事だけに適用すれば、商品登録は1回で済むので管理が楽になるはず。
完成サンプル
完成サンプルはこんな感じです。
バビ
ボタンがひとつだとPC表示がちょっと寂しくなるので、少し幅を広げて位置も調整してみました。
サンプルでは、Rinkerのデザイン設定は「スタイルアップ」を選択しています。
他のデザインを選択した場合も適用されるはずです。
CSS
非表示にしたい記事で以下のCSSをコピペして読み込ませるだけです。
ul.yyi-rinker-links li.rakutenlink a{/*楽天のボタンを消す*/
display:none!important;
}
ul.yyi-rinker-links li.rakutenlink:before, li.rakutenlink a.yyi-rinker-link:before {/*楽天キャンペーン表示を消す*/
display:none;
}
ul.yyi-rinker-links li.yahoolink a{/*Yahoo!ショッピングのボタンを消す*/
display:none!important;
}
ul.yyi-rinker-links li.yahoolink:before, li.yahoolink a.yyi-rinker-link:before {/*Yahoo!ショッピングのキャンペーン表示を消す*/
display:none;
}
@media (min-width: 767px){/*PCでのAmazonボタンを広げる*/
div.yyi-rinker-contents div.yyi-rinker-box ul.yyi-rinker-links li {
margin-left: 25px;
margin-right: 25px;
width: 100%;
}}THE SONICなど一部テーマではデフォルトで記事に個別のCSSを追加できますが、それ以外のテーマではCSSを追加できるようにする必要があります。
↓↓昔どこかからコピーして使用しているコードがこちらです。
/*記事ごとにCSSを追加する*/
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
add_meta_box('custom_css', '追加するCSS', 'custom_css_input', 'post', 'normal', 'high');
add_meta_box('custom_css', '追加するCSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
global $post;
echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$custom_css = $_POST['custom_css'];
update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
endwhile; endif;
rewind_posts();
}
}バビ
子テーマにfunction.phpをコピーしてきて、コードを追加するんですが、めんどくさいのでやり方はググってください。
