特典機能について

SNSシェアボタンをフロントページとカテゴリーページの2ページ目以降にも表示させる | CSSカスタマイズ相談 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、骨の手術明けのためしばらく体調を優先して運営させていただきます。ですので、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

スポンサーリンク
SNSシェアボタンをフロントページとカ...
 
共有:
通知
すべてクリア

[解決済] SNSシェアボタンをフロントページとカテゴリーページの2ページ目以降にも表示させる


suika10
(@suika10)
New Member
結合: 2か月前
投稿: 3
Topic starter  

SNSシェアボタンを表示するに設定しており、ボタンは表示されているのですが、
フロントページとカテゴリーページのページ送り2ページ目以降にはボタンが表示されない仕様なのでしょうか?
2ページ目以降にもSNSシェアボタン表示させることは可能でしょうか?
もし可能であればどのようにすれば表示させることが出来るのかご教示願えますでしょうか?
宜しくお願い致します。

環境はローカルです。


引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2325
 

suika10さん

以下マニュアルページをご参照ください。

SNSシェア・フォローボタンの表示をページタイプごとに切り替える方法
https://wp-cocoon.com/sns-button-display-switching/

  • フロントページ(サイトトップインデックスの1ページ目のみ)
  • 投稿
  • 固定ページ
  • カテゴリー(1ページ目のみ)
  • タグ(1ページ目のみ)

マニュアルページには上記のように記載がありますので、仕様のようです。

ウィジェットを上手く使えば出来そうな気はしますが、シェアボタンはウィジェットがないようです。

となると、カスタムHTMLウィジェットを使って自前で設置するくらいしか、私には思いつきません。

しかし・・・。

フロントページにしろ、カテゴリーページにしろ。
そのものをシェアというのは分かりますが、2ページ目・3ページ目をシェアはしないような気はします。
(投稿が増えてしまえば、そのページの内容は変わりますし。)

あくまでも個人的な意見ですが。

 


わいひら 件のいいね!
返信引用
さる子
(@saruko)
メンバーサイト Moderator
結合: 2年前
投稿: 423
さる子 - Twitter
 
投稿者:: @mk2_mk2

フロントページにしろ、カテゴリーページにしろ。
そのものをシェアというのは分かりますが、2ページ目・3ページ目をシェアはしないような気はします。
(投稿が増えてしまえば、そのページの内容は変わりますし。)

2ページ目以降をシェアするボタンではなく「カテゴリーページの1ページ目をシェアできるボタン」を2ページ目以降にも表示させたい、とかでしょうか。どちらにしてもCocoonデフォルトにない機能なので、自力でカスタマイズになります。

 

希望するシェアボタンの詳しい仕様を教えていただければカスタマイズのヒントは出せると思います。また、「シェアボタン HTML CSS」などで検索すると参考になる記事が出てきます。

あとはプラグインで表示させる方法もあるかと。ただしプラグインを使う場合はCocoonのシェアボタンと競合する可能性があるので注意が必要になります。


わいひら 件のいいね!
返信引用
suika10
(@suika10)
New Member
結合: 2か月前
投稿: 3
Topic starter  

みなさんお答え頂きありがとうございます。
やはり2ページ目以降には表示されない仕様なのですね。

さる子さんのおっしゃる通り目的は
フロントページ、カテゴリーページの1ページ目をシェアできるボタンを
2ページ目以降にも表示させたいと言う事になると思います。

mk2さんご提案のカスタムHTMLウィジェットを使って設置するのがよさそうだと思いました。

希望するシェアボタンの仕様は1ページ目と同じ様に表示するだけなのですが、
ウィジェットにシェアボタンの項目が無いので、
カスタムHTMLにどのように書けば表示させることが出来るのかご教示願えますでしょうか?
宜しくお願い致します。


返信引用
さる子
(@saruko)
メンバーサイト Moderator
結合: 2年前
投稿: 423
さる子 - Twitter
 
投稿者:: @suika10

希望するシェアボタンの仕様は1ページ目と同じ様に表示するだけ

おそらく1ページ目と同じ場所・デザインにしようと思うと逆に難しいと思います。(同じ場所に表示できるウィジェットがなさそうなので。)

簡単なのは下記の方法だと思います。

  1. シェアボタンを自作
  2. フロントページやカテゴリー1ページ目のシェアボタンを非表示
  3. ウィジェットでシェアボタンを表示

ただし、フロントページやカテゴリー別で違うURLをシェアさせたい場合は別々でシェアボタンを作ってウィジェットに設定する必要があります。

 

シェアボタンのコード参考

【Cocoon】コピペで簡単!シェアボタンデザイン4選 - Nomad Code https://code.nomad.inc/wordpress/cocoon/share/

コピペで使えるCSS!シェアデザインサンプル10選 - See-SS https://see-ss.com/posts/p29wgx8uh/share/

 

自動でURLを取得させようと思うとPHPでのカスタマイズになると思います。

 

これ以上のアドバイス実物を見ないと難しいので、必要でしたら案内にある通り実際のURLの提示をお願いします。ただし大掛かりなカスタマイズになるとフォーラムのサポート範囲外になりますことをご留意ください。

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

わいひら 件のいいね!
返信引用
さる子
(@saruko)
メンバーサイト Moderator
結合: 2年前
投稿: 423
さる子 - Twitter
 
投稿者:: @saruko

自動でURLを取得させようと思うとPHPでのカスタマイズになると思います。

よくよく考えると、自動取得させようと思うと2ページ目からは2ページ目のURLになってしまいますね…。

カテゴリーページの2ページ目からカテゴリーページ1ページ目のURLを自動取得がPHPで可能かどうか、私自身PHPには疎いのでちょっとわかりません。

カテゴリーの数が膨大でなければ、フロントページ(新着記事)とカテゴリーページだけならカスタムHTMLとCSSのカスタマイズでできる範囲だと思います。


わいひら 件のいいね!
返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2325
 

カスタムHTMLウィジェットを使う方法では、あくまでもウィジェットエリアがある場所にしかできないという前提ですが・・・。

超ローテクですのですし、詳しく説明するのは大変ですので、簡単に。

図などのご提示もありませんし、suika10さんのご希望通りかは分かりません。

 

とりあえず、インデックスリストのトップを例にあげます。


まずは、「Cocoon設定」-「SNSシェア」で、トップページのトップの位置にSNSシェアボタンを表示させます。

 


このページのHTMLソースを表示させて、SNSシェアボタン部分のソースを丸々コピーします。

 

上記でコピーしたソースを「カスタムHTMLウィジェット」に貼り付けて、インデックスリストトップに設置します。

すると、トップページは、以下のようになります。

 
2ページ目以降にも、SNSシェアボタンが表示されます。

 


ウィジェットのSNSシェアボタンには、外部リンクであることを示すアイコンフォントが表示されていますので、CSSでこのアイコンフォントを消します。
(表示させていない場合は不要。Cocoon設定からも非表示にできます、外部リンク全部消えてしまいますが。)

トップページ
 
2ページ目以降
 

 


 
最後に、「Cocoon設定」-「SNSシェアボタン」でフロントページの表示を外します。
すると、ウィジェットのボタンのみ残ります。
 
トップページ
 
2ページ目以降
 

 
超ローテクですが、おそらくこんな感じでできるのではないと。
 
トップページのHTMLソースをコピーしていますので、シェアするURKもトップページになっていると思います。(キチンと確認はしていませんが。)
 
 
ボトムの位置のシェアボタンや、カテゴリーページについても同じような感じで、できないことはないのかな・・・と思います。
 
ただ、カテゴリーページはカテゴリー毎に設定する必要がありそうですが・・・。
(ウィジェット表示のコントロールが上手くできるのかも確認してしません。)
 

さる子わいひら 件のいいね!
返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2325
 
投稿者:: @mk2_mk2

シェアするURK

誤字訂正です。

最後の方の上記部分は、「シェアするURL」です

他にも誤字が・・・
急いで書きましたので、ご容赦ください。

とりあえずやってみましたが、動作などは確認しておりません。

(簡単な確認しかしていませんが、カテゴリーページのウィジェット表示コントロールはできそうな感じでした。)


返信引用
Akira
(@akira)
Prominent Memberサイト
結合: 4年前
投稿: 787
Akira - FacebookAkira - Twitter
 

フロントページ、カテゴリーページの1ページ目をシェアできるボタン

この条件が面倒ですね。この条件がなければ、下記コードを子テーマの functions.php に追加すればできるのですが。

※「メインカラムトップシェアボタンを表示」の場合のコードです。

add_action( 'get_template_part_tmp/list-tab-index', 'my_paged_sns_share');
add_action( 'get_template_part_tmp/list-category', 'my_paged_sns_share');
add_action( 'get_template_part_tmp/list-category-columns', 'my_paged_sns_share');
add_action( 'get_template_part_tmp/list-index', 'my_paged_sns_share');

function my_paged_sns_share() {
  if ( is_paged() && (
    ( is_front_page() && is_sns_front_page_top_share_buttons_visible() ) ||
    ( is_category() && is_sns_category_top_share_buttons_visible() ) ||
    ( is_tag() && is_sns_tag_top_share_buttons_visible() )
  ) ) {
    get_template_part_with_option( 'tmp/sns-share-buttons', SS_TOP );
  }
}

上記コードは、2 ページ目でボタンを押すと 2 ページ目をシェアします。

フロントページ、カテゴリーページの1ページ目をシェアできるボタン」の条件を満たすには、上記コードに置換処理を追加しないといけません。その置換処理が面倒に感じ、試しませんでした。

This post was modified 2か月前 2回 by Akira

わいひら 件のいいね!
返信引用
Akira
(@akira)
Prominent Memberサイト
結合: 4年前
投稿: 787
Akira - FacebookAkira - Twitter
 

ごめんなさい。コードを訂正します。余計な 3 行が含まれていました。

訂正後のコード

add_action( 'get_template_part_tmp/list-index', 'my_paged_sns_share');

function my_paged_sns_share() {
  if ( is_paged() && (
    ( is_front_page() && is_sns_front_page_top_share_buttons_visible() ) ||
    ( is_category() && is_sns_category_top_share_buttons_visible() ) ||
    ( is_tag() && is_sns_tag_top_share_buttons_visible() )
  ) ) {
    get_template_part_with_option( 'tmp/sns-share-buttons', SS_TOP );
  }
}

わいひら 件のいいね!
返信引用
suika10
(@suika10)
New Member
結合: 2か月前
投稿: 3
Topic starter  

みなさんお答え頂きありがとうございます。

mk2さんご提案のカスタムHTMLウィジェットにコードを貼り付ける方法で目的はほぼ達成できたと思っています。
ありがとうございました。

mk2さんご指摘の通りウィジェットで作ったボタンからSNSに投稿時はカテゴリーページのカテゴリー名は自動入力はされない様です。
各カテゴリー名が自動入力される様にする事が出来れば完璧なのですが、
その方法がお分かりになられる方がおられましたらご教示願えますでしょうか?
宜しくお願い致します。

もし無理そうであればこれで解決済みとさせて頂こうと思います。


返信引用
mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2325
 

suika10さん

今回の例は、トップページですから、各SNSへトップページのURLをパラメーターとして渡しています。

ウィジェットに貼り付けたソースを見ていただければ、お分かりいただけると思いますが、トップページのURLが書かれているはずです。

トップページのURLを自動取得している訳ではなく、HTMLソースにベタ打ちされているだけです。
(自動取得すると2ページ目、3ページ目のURLになってしまう。そして自動取得にはPHPなど処理する必要があり、HTMLだけではできない。)

そのURLをカテゴリーページのものに書き換えれば良いだけです。

ただ、1つ1つ書き換えるのは面倒です。

 

ですから、先に書いた手順と同じことをカテゴリーページでも行います。

複数の例をつくるのは正直手間と時間がかかり大変ですし、ご提示は致しません。

トップページと同じことをカテゴリーページでもするだけだと思うのですが・・・。
(ただし、カテゴリー毎に設定する必要がある。カテゴリー毎にURLが変わりますので。)


わいひら 件のいいね!
返信引用
さる子
(@saruko)
メンバーサイト Moderator
結合: 2年前
投稿: 423
さる子 - Twitter
 
投稿者:: @suika10

mk2さんご指摘の通りウィジェットで作ったボタンからSNSに投稿時はカテゴリーページのカテゴリー名は自動入力はされない様です。
各カテゴリー名が自動入力される様にする事が出来れば完璧なのですが、

カテゴリーを自動取得しようとすると、PHPでのカスタマイズになります。カスタムHTMLウィジェットではできません。また、PHPで取得するにしてもAkiraさんがおっしゃっるには複雑なものになようです。

ご自身でカスタマイズが難しい場合は有償でプロに依頼するという手もあります。

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


わいひら 件のいいね!
返信引用
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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