カスタマイズ

Cocoonのテンプレートカスタマイズ情報 カスタマイズ

Cocoonの、テンプレートファイルカスタマイズ用の情報です。

テンプレートカスタマイズなので、基本的にPHPを編集できる人向けの内容になります。

わいひら
わいひら

カスタマイズする際の仕様に関する情報もあります。

カスタマイズ

コメントウィジェットの日時フォーマットを変更する方法

コメント書き込みが多いサイト用の「コメントウィジェット日時」のカスタマイズ方法。
2020.03.29 わいひら わいひら 0
カスタマイズ
カスタマイズ

ボックスメニューで外部リンクの場合は「新しいタブ」で開くカスタマイズ方法

ボックスメニューのリンクの開き方を変更するカスタマイズ方法。
2020.03.29 2022.11.22 わいひら わいひら 0
カスタマイズ
カスタマイズ

Cocoonのリンクマネージャー機能を無効にする方法

WordPress3.5で廃止されたリンクマネージャー機能を使用しないようにするカスタマイズ方法。
2020.02.25 わいひら わいひら 0
カスタマイズ
カスタマイズ

カルーセルの表示をPHPコードで制御する方法

特定ページでカルーセルを表示させたりするPHPコードサンプルです。
2020.02.25 2020.03.21 わいひら わいひら 0
カスタマイズ
カスタマイズ

アピールエリアの表示をPHPコードで制御する方法

特定ページでアピールエリアを表示させたりするPHPコードサンプルです。
2020.02.25 わいひら わいひら 0
カスタマイズ
カスタマイズ

コメント欄のURLをブログカードにするカスタマイズ方法

このカスタマイズは機能化されたことにより不要になりました。コメント欄のURLをブログカード化する方法 | Cocoon投稿ページのコメント欄にある独立したURLを内部・外部リンクに変更するカスタマイズです。こんな感じになります。上記のような...
2020.02.19 2020.02.25 わいひら わいひら 0
カスタマイズ
カスタマイズ

投稿・固定ページの本文上と本文下にfunctions.phpカスタマイズで何かを挿入する方法

Cocoon 2.0.9.1より以下のアクションフックを追加しました。宇 singular_entry_content_before（本文上アクションフック） singular_entry_content_after（本文下アクションフック...
2020.02.19 2020.02.22 わいひら わいひら 0
カスタマイズ
カスタマイズ

投稿・固定ページ・カテゴリ毎に通知エリア表示を制御するカスタマイズサンプル

Cocoon 2.0.8.2より通知エリアの表示を切り替えられるnotice_area_visibleフックを追加しました。このフックを利用した、カスタマイズサンプル例です。通知エリアとはこの部分です。特定の投稿ページで非表示にする投稿ID...
2020.02.11 わいひら わいひら 0
カスタマイズ
カスタマイズ

ブログカードのタイトル文字数が32以上の場合は省略して出力するカスタマイズ例

フィルターフックを用いてCocoonブログカードのタイトル文字列を制御するPHPコード例です。
2020.01.28 わいひら わいひら 0
カスタマイズ
カスタマイズ

ソースコードブロックの「言語」オプションで利用できる言語を指定する方法

プログラミングに関するサイトの場合、よく利用する言語をソースコードブロックのオプションとして登録しておくと、作業がはかどるかと思います。
2020.01.28 わいひら わいひら 0
カスタマイズ
カスタマイズ

本文中広告の場所をH2見出し以外に変更するカスタマイズ方法

フィルターフックを用いて広告表示を判別する正規表現を編集することで、広告の表示場所変更する方法です。
2020.01.21 わいひら わいひら 0
カスタマイズ
カスタマイズ

Cocoon設定のスキン表示を制御するカスタマイズ方法

Cocoonに同梱されている隠れスキンを表示させる方法。任意のスキンを非表示にする方法。
2020.01.07 2022.01.15 わいひら わいひら 0
スキン開発開発者向けカスタマイズ
カスタマイズ

CocoonのサイトロゴURLを任意のものに変更するカスタマイズ方法

サイトロゴから訪問者を別のURLに誘導したい場合のカスタマイズ方法。
2019.09.28 わいひら わいひら 0
カスタマイズ
カスタマイズ

SmartNews用のロゴ画像URLを独自に設定するカスタマイズ方法

子テーマのfunctions.phpをにフィルターフックを用いて、SmartNews用のロゴ画像URLを指定する方法です。
2019.09.14 わいひら わいひら 0
カスタマイズ
カスタマイズ

Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】

Cocoonのカスタマイズを有料で請け負っておられる方々の紹介です。Cocoonを大きくカスタマイズして、思い通りの表示にしたい場合にご依頼ください。
2019.09.09 2024.04.24 わいひら わいひら 0
カスタマイズ
Tips

パンくずリストのルートテキストを変更するカスタマイズサンプル集

パンくずリストの「ホーム」部分のテキストを変更する方法。
2019.06.20 2019.06.27 わいひら わいひら 2
Tipsカスタマイズ
Tips

Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集

Cocoonのサムネイルサイズを制御するサンプルコード集。
2019.06.20 2023.02.19 わいひら わいひら 0
Tipsカスタマイズ
Tips

ランダムな投稿にリンクされるボタンショートコードのつくり方

どの記事に飛ぶかわからないランダムリンクボタンの生成方法です。
2019.06.19 2021.09.12 わいひら わいひら 0
Tipsカスタマイズ
Tips

サムネイル上のカテゴリーラベルの表示を切り替えるカスタマイズ方法

サムネイルやアイキャッチの上に重なっているカテゴリーラベルの表示切替フックの利用方法です。
2019.06.04 2024.01.16 わいひら わいひら 0
Tips
カスタマイズ

Cocoonテーマのスキン切り換えデモを実装する方法

スキンの切り替えドロップダウンを実装する方法です。
2019.04.27 2019.04.30 わいひら わいひら 0
カスタマイズ
シェアする
わいひらをフォローする
次のページ
タイトルとURLをコピーしました
'); /* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': `${threashold}px`, }); /* トップメニュータイプに変更する */ $("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap"); $("#header-container").addClass("fixed-header"); $("#header-container").css({ 'position': 'fixed', 'top': '-100px', 'left': '0', 'width': '100%', }); const wpadminbar = document.getElementById('wpadminbar'); const headerContainerTop = wpadminbar ? wpadminbar.clientHeight : 0; $('#header-container').animate( { top: headerContainerTop, }, 500 ); } } /*固定ヘッダーの解除*/ function staticHeader() { if ($("#header-container").hasClass("fixed-header")) { /*センターロゴタイプに戻す*/ $("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-center-logo"); $("#header-container").removeClass("fixed-header"); $("#header-container").css({ 'position': 'static', 'top': 'auto', 'left': 'auto', 'width': 'auto', }); /* ヘッダーの高さの戻る分、padding削除しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': '0', }); $("#header-fixed").remove(); } } /* 境界値をヘッダーコンテナに設定 */ var threashold = $('#header-container').height(); var prevScrollTop = -1; var $window = $(window); var mobileWidth = 1023; $window.scroll(function() { var scrollTop = $window.scrollTop(); var s1 = (prevScrollTop > threashold); var s2 = (scrollTop > threashold); var w = $window.width(); /*スクロールエリアの位置調整*/ function adjustScrollArea(selector) { if ($(selector) && $(selector).offset()) { offset = $(selector).offset().top; h = $("#header-container").height(); pt = $(selector).css('padding-top'); if (pt) { pt = pt.replace('px', ''); } else { pt = 0; } if ((scrollTop >= offset - h) && (w > mobileWidth)) { if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) { $(selector).css({ 'padding-top': h + 'px', }); } } else { if (pt > 0) { $(selector).css({ 'padding-top': 0, }); } } } } /*スクロール追従エリアの調整*/ function adjustScrollAreas() { adjustScrollArea('#sidebar-scroll'); adjustScrollArea('#main-scroll'); } /*固定ヘッダーのスタイル決め*/ function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) { if (s1 ^ s2) { if (s2 && (w > mobileWidth)) { stickyHeader(); } } /* 境界値に達したら固定化 */ if (scrollTop <= threashold || w <= mobileWidth) { staticHeader(); } } adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth); adjustScrollAreas(); prevScrollTop = scrollTop; }); /*ウインドウがリサイズされたら発動*/ $window.resize(function () { /*ウインドウの幅を変数に格納*/ var w = $window.width(); if (w <= mobileWidth) { /*モバイル端末の場合*/ staticHeader(); } else { /*パソコン端末の場合*/ var scrollTop = $window.scrollTop(); if (scrollTop >= 50) { stickyHeader(); } } }); })(jQuery);