Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

カスタムリンクに対するアイキャッチ画像...
 
共有:
通知
すべてクリア

[解決済] カスタムリンクに対するアイキャッチ画像設定に関する質問です。

24 投稿
4 ユーザー
15 Reactions
754 表示
(@yamamoto-t)
Eminent Member Registered
結合: 1年前
投稿: 21
トピックスターター  

不具合・カスタマイズ対象ページのURL: https://www.turisi-take.com/tag/l-ikadazyoutoire,m-yanetukiikada,n-renntaru/

 

サイトのホームURL: https://www.turisi-take.com/

 

お忙しい中失礼致します。
相談をさせていただきたいです。
よろしくお願い致します。

 

●相談内容:

カスタムリンクに対するアイキャッチ画像設定(新しく設定したい、できないようでしたら現在表示されてしまっているタグのアイキャッチを非表示にしたい。)に関した相談です。または、その他なにか良い方法があれば知りたいです。

 

●具体的な相談内容:

作成しているサイトのヘッダーメニューにある「簡単検索」というメニューのところにマウスカーソルをあわせていただくと、サブカテゴリーが表示されるように設定してあります。※画像1

<新設備で選ぶ>というメニューをクリックした際に、写真の画面("筏上トイレ"のタグが表示されている画面  ※画像2)へ飛びます。

<新設備を選ぶ>は子カテゴリーを3つ(それぞれタグ)をまとめた親カテゴリーをカスタムリンクにて作成しました。
(プラグインの「Search & Filter」を用いたOr検索にてタグ3つをかけ合わせて検索し、そのURLをカスタムURLとして設定しております。)
※<新設備を選ぶ>というカスタムリンクは
タグ3つのうち、1つでも入っているものがしっかり表示できておりそこ自体は問題ありません。

 

●困っている点(不具合):

クリックすると、子カテゴリー(選択した3つのタグ)の一番はじめに来ているタグ名と、そのアイキャッチ画像が表示されてしまう点。

 

●修正としてやりたい事(①ができると嬉しいですが、難しければ②をやりたいです):

①クリックした際に、表示されるカスタムリンクに専用のアイキャッチ画像を設定し、タグ名のようにカスタムリンク名を表示したい。

②「筏上トイレ」というタグ名表示や、表示されるアイキャッチ画像を表示されないようにしたい。

 

 

【上記のように修正をしたい背景】

サイトホームの少し下にスクロールしたところに

かけ合わせ検索はコチラ(レ点チェックを入れての検索)

という部分があります。

そこには「Search & Filter」を用いた、レ点チェックの検索できるところがあり、
その中に表示したくない"カテゴリー"がある。 ※画像3

→調べたところ「Search & Filter」では"カテゴリー”や”タグ”の一部非表示という事ができない様子。

→そもそもの非表示にしたい"カテゴリー"を削除しよう

→非表示にしたい"カテゴリー"を削除したいが、削除するとヘッダーでの検索時に親カテゴリーが無くなってしまう

→それならば、親カテゴリーをカスタムリンクにして検索時の親カテゴリーとしよう

という流れで試行錯誤中で現在の問題にぶつかっております。

 

----------------------------------------------
サイト名:筏.com
サイトURL: https://www.turisi-take.com
ホームURL: https://www.turisi-take.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:6.2.2
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.3.4
カテゴリー数:12
タグ数:19
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:845バイト
functions.phpサイズ:159バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2023/07/saitoaikyattipdf.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
bbPress 2.6.9
Broken Link Checker 2.2.1
ConoHa WING コントロールパネルプラグイン 1.2
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.7.7
Custom Taxonomy Order 3.4.4
EWWW Image Optimizer 7.2.0
Search & Filter 1.2.16
Site Reviews 6.9.5
XML Sitemap Generator for Google 4.1.12
----------------------------------------------

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。


   
(@yamamoto-t)
Eminent Member Registered
結合: 1年前
投稿: 21
トピックスターター  

写真を追加添付させていただきます(画像2)


   
(@yamamoto-t)
Eminent Member Registered
結合: 1年前
投稿: 21
トピックスターター  

写真を追加添付させていただきます(画像3)


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3149
 

@yamamoto-t さん

●注意事項

以前の以下の件は、解決されたのでしょうか?
フォーラムのマナーを遵守願います。

https://wp-cocoon.com/community/postid/72003/

●図3の件

簡単な方法として、不要な項目を、CSSで非表示にしてみては?

.searchandfilter .cat-item-43,
.searchandfilter .cat-item-45,
.searchandfilter .cat-item-44,
.searchandfilter .cat-item-42,
.searchandfilter .cat-item-34{
display:none;
}

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

アイキャッチの件ですが・・・。

プラグインで合成?した以下のページと。
https://www.turisi-take.com/tag/l-ikadazyoutoire,m-yanetukiikada,n-renntaru/

 
タグ「筏上トイレ」アーカイブページ
https://www.turisi-take.com/tag/l-ikadazyoutoire/
 
URLや中身は違うのでしょうけれど。
 
タグ「筏上トイレ」アーカイブページに、プラグインで合成?して表示しているように見えるんですよね。
(各画像の青い背景の部分)
 
実態としては、同じページ?(両ページを区別するようなセレクタの組み合わせが今のところ・・・?)
プラグイン側の仕様が良く分からず・・・。

   
わいひら reacted
(@yamamoto-t)
Eminent Member Registered
結合: 1年前
投稿: 21
トピックスターター  

@chu-ya

申し訳ありません。
以前のフォーラムは解決済みを押したつもりで押せていなかったようです。。。

先程、押したのですがちゃんと押せてますでしょうか?

 

CCSの件ありがとうございます。
追加CCSのところに教えて頂いたコードをコピーアンドペーストしたところ、うまく非表示になっておりました。
ありがとうございます。


   
わいひら reacted
(@yamamoto-t)
Eminent Member Registered
結合: 1年前
投稿: 21
トピックスターター  

@mk2_mk2

プラグインの「Search & Filter」の検索機能で表示したURLをカスタムURLとして入力いたしました。

なるほど、
タグ「筏上トイレ」アーカイブページをベースに、合成されているんですね。
だから、タグ名とアイキャッチ画像が表示されたのですか。。。

ありがとうございます。

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

質問を重ねて申し訳ありません。

今回の自分の根本の困りごとに関しては、chu-ya様が教えてくださったCCS追加にて無事解決できました。
今後のサイト運営にあたって知識として勉強させて頂きたく、質問を以下の2点させていただきたいです。

 

①タグを複数まとめて(and検索、or検索のようなイメージ)カスタムリンクを作るのはどのように行うのが良いのでしょうか?プラグインを用いた上記のやり方しか分からず、なにか良い方法を教えていただけましたら幸いです。

②その際、カスタムリンクの名称や、カスタムリンクに専用のアイキャッチ画像を表示させることは可能なのでしょうか?そもそもそのような事は行えない仕組みでしたでしょうか?

 

お忙しい中質問を重ね申し訳ありません。
よろしくお願い致します。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

子テーマのjavascript.jsに書けば、アイキャッチ消えますか?

(function ($) {
    if (location.pathname =='/tag/l-ikadazyoutoire,m-yanetukiikada,n-renntaru/') {
        $('.eye-catch-wrap').hide();
    }
})(jQuery);

上記で消えるであれば、同じようにjavascript(jQuery)でアイキャッチの置換もできるとは思います。
(src属性を置換、srcsetも。srcsetは面倒な気がします、他に良い方法があれば)

 

そもそもタグをまとめるという機能はWordPressにはないと思いますし、考えたこともないので、ちょっと良く分からないです。
(カテゴリーを作った方が早そうな・・・まとめるタグが決まっているのであれば)

 

【追記】

少し書き換えました。


   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3149
 

投稿者:: @yamamoto-t

以前のフォーラムは解決済みを押したつもりで押せていなかったようです。。。

先程、押したのですがちゃんと押せてますでしょうか?


[解決済]にはなっていないようです。
依頼した件について、今後、解決済ボタンを押すだけなく、ご自身で確認して、OKなのか、NGなのか一言結論を入力願えたらとます。
書いてあれば、管理者が判断し「解決済」としてくれます。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamamoto.tさん

以下のトピックについては、ただ「解決済」にするのではなく、結果を書いていただくようお願い致します。

おすすめカードの画像が表示されず、「No IMAGE」表示となってしまいます。
https://wp-cocoon.com/community/postid/72003/

 

「解決済」にしていただきたいとは思いますが、それよりも結果を書いていただきたいです。

フォーラムの上部の案内には以下のようにあります。

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

結果も何もなく、ただ「解決済」にしてしまっては、上記を満たしません。

 

結果さえ書いていただければ、「解決済」にはこちらでしておきます。
(こちらで解決済であると判断できれば、「解決済」にしておきます)

ボタンが分かりにくいのは否めないですし。
(フォーラムプラグインの仕様ですので、致し方ないです)


   
わいひら reacted
(@yamamoto-t)
Eminent Member Registered
結合: 1年前
投稿: 21
トピックスターター  

@mk2_mk2

申し訳ありません。
以前のフォーラム、結果を記載いたしました。おそくなり申し訳ありません。

お返事ありがとうございます。
すごいです。
ご提示頂きましたコードをコピーアンドペーストしましたところ、アイキャッチ画像の表示は無くなりました。
「筏上トイレ」というタグ名は表示されております。

javascript(jQuery)にてアイキャッチ画像の指定ができる可能性があるということなのですね。

 

確かにタグをまとめるならカテゴリーにしたほうが良いですもんね。
CCSにてカテゴリー名の表示を指定して消せるのであれば、自分の中でもカテゴリーでまとめたほうが良い気が致しました。ありがとうございます。

 

 


   
(@yamamoto-t)
Eminent Member Registered
結合: 1年前
投稿: 21
トピックスターター  

@chu-ya

承知いたしました。
教えて頂きましてありがとうございます。

申し訳ありませんでした。

この投稿は1年前ずつyamamoto.tに変更されました

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamamoto.tさん

投稿者:: @yamamoto-t

以前のフォーラム、結果を記載いたしました。

ありがとうございます。
「解決済」にしておきました。

投稿者:: @yamamoto-t

「筏上トイレ」というタグ名は表示されております。

先程のものに、ちょっと追加しました。

(function ($) {
  if (location.pathname =='/tag/l-ikadazyoutoire,m-yanetukiikada,n-renntaru/') {
    $('.archive-title, .eye-catch-wrap').hide();
  }
})(jQuery);

あまり本筋ではない気はするのですけど。
(h1って、消して良いんでしたっけ・・・JavaScriptではありますけど)

すみません、時間切れですので外します。


   
わいひら reacted
(@yamamoto-t)
Eminent Member Registered
結合: 1年前
投稿: 21
トピックスターター  

@mk2_mk2

ありがとうございます。
記載頂いたコードを貼り付けたところ「アイキャッチ画像表示なし+タグ名表示なし」の状態となりました。

今回ご相談させて頂きました内容に関して、無事解決できました。
お忙しい中、ご回答下さりありがとうございました。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3149
 

●補足

bodyにタグID、カテゴリーIDなどの情報が付いています。
この為、どこのページなのかCSSで判別できます。

.tag-12 .archive-title,
.tag-12 .eye-catch-wrap {
display:none;
}

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

chu-yaさん

それだと、両方消えませんか?

①プラグインで合成?した以下のページ。
https://www.turisi-take.com/tag/l-ikadazyoutoire,m-yanetukiikada,n-renntaru/

②タグ「筏上トイレ」アーカイブページ
https://www.turisi-take.com/tag/l-ikadazyoutoire/

 

①だけ、消すのかと思ったのですが。
ここを先に、確認しておけば良かったですね。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3149
 

投稿者:: @mk2_mk2

①だけ、消すのかと思ったのですが。
ここを先に、確認しておけば良かったですね。

言われた通り、検索した場合のみ除外したいようですね。
通常のアーカイブと異なり、複数条件、カテゴリー+タグのように混在し、アーカイブ表示され
結果、CSSでは不可能でした。

●余談

少し調べたら、WordPressのURLで、カンマとかで区切れば、複数タグ表示できるのですね。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

投稿者:: @chu-ya

WordPressのURLで、カンマとかで区切れば、複数タグ表示できるのですね。

WordPressの標準機能だったとは。
(初めて知りました)

確かに、私の環境で、URLを手入力で複数タグ指定してみると、複数タグの一覧が表示されました。

そして、セレクタ的には、1つめのタグのアーカイブページと同じで、区別がつかないのが悩ましいです。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8089
 

yamamoto.tさん

只今スマホなもので、細かいことや、詳しくは書けません。

複数タグなどで検索した一覧ページを表示させるということですよね。

そして、そういう一覧ページでは、アイキャッチ等は非表示にしたい。(WordPressの仕様で、最初のタグなどのものが表示されてしまうので)

そうだとすると、タグなどの指定は特定のものではなく、任意のものがある。むしろその方が多い。

そうだとすると、URLに「,」(or条件)や「+」(and条件)を含む場合と判定すれば、できるかもしれないです。

ただ、それで良いものかどうか、分からないですけれど。(本当にそれで良いものか、カテゴリー・タグ混在で、共に1つずつ指定の場合等の際の条件も必要かも)

CSSではできませんので、JavaScript(jQuery)等で対応する感じだと思います。

任意のタグとなると、アイキャッチを置換する場合は、何を条件にして良いのは難しい気がします。

それに今はスマホなもので、試すこともできないです。

何か妙案があれば良いですが、他の詳しい方の案もあればと思います。

流石にそろそろ寝ます。


   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3149
 

少し考えてみました。

ページ構成が悪いように思え。
カテゴリーは地域のみで、えば「よく釣れている魚種で探す」とかは不要かと思います。
理由は「よく釣れている魚種で探す」をクリックしても、表示される一覧ページから「魚種」は分からない。

以下をすれば、言われている問題も少しは解消されるかと思います。

  • アイキャッチですが、エントリーカードのサムネイルとしか意味がない為、投稿ページ上のアイキャッチを非表示。
  • アーカイブページのアイキャッチも合わせCSSで非表示。

先述の通り、アーカイブタイトルは、複数選択した場合、何の結果を指すのか分かりません。
自作で検索作った場合でも、複数条件の時、いずれかの1つがタイトル表示されます。
ただ、ページは検索結果(CSSクラスsearch)となるので、判別でき。

ページ構成も含め、工夫が要るかと思います。


   
わいひら reacted
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

@yamamoto-t さん

複数のタグがある。それらのタグが 1 つでも付いている記事を全部表示したいということですよね?

カテゴリーで分類されたようですが、タグを使った方法もあります。一応書いておきます。

① まとめて表示するためのタグを新規作成

他のタグをまとめて表示するためのタグを作ります。

タグの名前は「設備で探す」、スラッグは「setubidesagasu」にするとします。

また、アイキャッチ画像は、この「設備で探す」タグで設定します。設定しなければ、アイキャッチ画像は表示されません。

コードを追加

子テーマの functions.php にコードを追加します。「筏上トイレ」「屋根付き筏」「レンタル」の 3 つのタグを「設備で探す」にまとめて表示する内容です。

add_action( 'pre_get_posts', function( $query ) {
  if ( is_admin() || !$query->is_main_query() ) {
    return;
  }

  // タグ「設備で探す」のクエリを変更
  if ( $query->is_tag( 'setubidesagasu' ) ) {
    $query->set(
      'tax_query',
      [
        'relation' => 'OR',
        [
          'taxonomy' => 'post_tag',
          'field' => 'slug',
          'terms' => [
            // タグ「設備で探す」に表示するタグのスラッグを , 区切りで書きます
            'l-ikadazyoutoire',
            'm-yanetukiikada',
            'n-renntaru',
          ],
        ],
      ],
    );
  }
});

これで「設備で探す」タグを表示すれば、「筏上トイレ」「屋根付き筏」「レンタル」の 3 つのタグに属する記事の一覧が表示されます。

この投稿は1年前ずつAkiraに変更されました

   
わいひら reacted
(@yamamoto-t)
Eminent Member Registered
結合: 1年前
投稿: 21
トピックスターター  

@chu-ya

構成についてはおっしゃるとおりで、カテゴリーは地域のみ、その他はタグという使い分けが理想であります。

 

カテゴリーとして「よく釣れている魚を探す」(一例)を作った目的としては、ヘッダーメニューの中で親-子の階層になるように表示したかったため作成致しました(階層でないと、数が多く見た目が悪い・分かりづらく使い勝手が悪そうであったため。)
階層表示があるが親側はクリックはできないような表示方法などがあれば良いのですが。。。

 

また、タグのアイキャッチ画像をつけた目的としましては、おすすめカードでの画像表示をしたかっただけでありますため、

投稿ページ上のアイキャッチを非表示/アーカイブページのアイキャッチも合わせCSSで非表示。

というのは良い手段だと感じました。

 

教えて頂きありがとうございます。


   
わいひら reacted
(@yamamoto-t)
Eminent Member Registered
結合: 1年前
投稿: 21
トピックスターター  

@mk2_mk2

複数タグなどで検索した一覧ページを表示させるということですよね。

そして、そういう一覧ページでは、アイキャッチ等は非表示にしたい。(WordPressの仕様で、最初のタグなどのものが表示されてしまうので)

そうなのです。。。。
私の分かりづらい文章から汲み取って頂きありがとうございます。

なるほど。JavaScript(jQuery)であれば可能性はあるのですね。
教えてくださりありがとうございます。


   
わいひら reacted
(@yamamoto-t)
Eminent Member Registered
結合: 1年前
投稿: 21
トピックスターター  

@akira

複数のタグがある。それらのタグが 1 つでも付いている記事を全部表示したいということですよね?

そうなのです。

タグをタグでまとめるという事ができるのですね!?

皆さまの知識量がすごすぎて、、、、大変勉強になります!
コードを使うとそんなことまでできるんですね。

 

①「設備でさがす」を新規タグで作成し②コードを入力
行いましたところ、ちゃんと機能しておりました。
ありがとうございます。

”施設で探す”というタグ名の表示もあり、アイキャッチも個別設定ができそうでありとても良さそうでありました。

また、そのタグを各記事でチェックを入れなければ、【タグ使用0個】という認識になるのか、プラグイン「Search & Filter」のレ点でチェックをしての検索機能のタグ欄にも表示されない(私にとってとても都合がよい)状態でありました。

 

そのため、当初の質問で修正したかった点はこの方法で解決できそうです。
教えてくださりありがとうございました。

 

 


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

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