スポンサーリンク

【Cocoon】記事ごとに異なる画像をサイドバーに追従表示させる

Cocoonカスタマイズ

WordPressブログのCocoonテーマにて、サイドバーに画像を追従表示する例です。

Cocoonテーマではプラグインなどを使用することなく、ウィジェットの標準機能としてサイドバー追従の項目を作ることが可能です。

このCocoon標準のウィジェットでは、記事のアクセスランキングや広告バナーなどブログサイトで共通する情報などを全ページで表示することができますが、ここでは共通の要素以外にそれぞれの記事に対して異なる画像をサイドバーに表示したい場合のカスタマイズの一例をご紹介します。

スポンサーリンク

Cocoonで記事ごとに異なる画像をサイドバーに追従表示させる手順

サイト全体の設定

以下のコードをCocoonの子テーマディレクトリにあるfunctions.phpに追記します。

/* 「side-sticky」クラスがついた画像をサイドバーに追従固定する */
function add_sticky_script_in_wp_footer()
{
  if (!is_single()) return;
  ob_start();
?>
<script>
if($("#sidebar-scroll").size()){
  $(".side-sticky").appendTo("#sidebar-scroll");
}else{
  $(".side-sticky").appendTo("#sidebar");
  var div=$("<div id=\"sidebar-scroll\" class=\"sidebar-scroll\"></div>");
  $(".side-sticky").wrap(div);
  $("body").removeClass("no-scrollable-sidebar");
  $("body").addClass("scrollable-sidebar");
}
</script>
<?php
    $html = ob_get_contents();
    ob_end_clean();
    echo $html;
}
add_action('wp_footer', 'add_sticky_script_in_wp_footer', 1);

サイト全体の設定は以上で終了です。表示したい画像はそれぞれの記事の編集画面で指定します。

各記事での指定

追従表示を行いたい記事を編集画面で開き、表示したいブロックを記事に配置します。

今回の例では画像ブロックを使っていますが、その他のブロックなども指定可能です。また、対象のブロックはページのどこに配置されていても問題ありません。

「設定」バーを開き、[ブロック] をクリックし、[高度な設定] をクリックします。

表示された [追加 CSS クラス] ボックスにside-stickyと入力します。

この状態で記事を更新すれば設定は完了です。

サイドバー固定表示の例

それぞれの投稿ページにアクセスすると、編集画面で指定したブロックがサイドバーの一番下の項目として配置され、スクロールに追従するように表示されます。

WordPress&Cocoonのお悩みにお答えします

クラベルではWordPressのブログサイト構築、Cocoonテーマの導入やカスタマイズに関するご相談を承っております。

お困りの方はぜひ一度お問い合わせください。また、現在ココナラをつかったサービス出品も始めてみました。お悩みおひとつの解決からお手軽にお申込みできますので、こちらもぜひあわせてご覧ください。

ワードプレス&コクーンのお悩み何でもお答えします 現役エンジニアによるWordPress&Cocoon制作支援
Cocoonカスタマイズ WordPress Web開発
お読みいただきありがとうございました。
最後に「いいね!」をいただけると大変励みになります。
最新情報をお届けします。
クラベルをフォローする
スポンサーリンク
この記事を書いた人
クラベル

Webサイト構築、Wordpressのカスタマイズやphpプログラミングなどやってます。ブログは省エネ運営中。Cocoonカスタマイズやゲーム、ガジェットの話題など。

クラベルをフォローする
クラベル

コメント

タイトルとURLをコピーしました