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カスタマイズ依頼

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

このフォーラムには初心者の方も多く参加されています。質問に不慣れな方も安心して相談できるよう、できるだけ穏やかな言葉でご案内いただけますと幸いです。

Cocoon設定SNSフォローのSNS...
 
通知
すべてクリア

[解決済] Cocoon設定SNSフォローのSNSサービスのURLのリスト部分の改善

9 投稿
2 ユーザー
5 Reactions
160 表示
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4598
トピックスターター  

----------------------------------------------
テーマ名:Cocoon
バージョン:2.9.3.11
カテゴリー数:18
タグ数:123
投稿数:1755
固定ページ数:15
ユーザー数:1
----------------------------------------------

●課題

[Cocoon設定]→[SNSフォロー]のSNSサービスのURLの部分について。
この部分は、[ユーザー]→[プロフィール]の各SNS入力フォームを列挙しているに過ぎない。

https://github.com/xserver-inc/cocoon/blob/0c31dfe470497a719a8570babfc1f1e835355216/lib/page-settings/sns-follow-forms.php#L67-L99


●改善案

以下の関数user_contactmethods_customで各SNS入力フォームを追加している。

https://github.com/xserver-inc/cocoon/blob/0c31dfe470497a719a8570babfc1f1e835355216/lib/sns-follow.php#L133-L162

そこで、この関数からリストを生成するように変更する。

https://notepad.pw/share/qfxyufpy


●補足

以前、SNSシェア、フォローボタンのテンプレート化を提案した。

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

ここでシェア数取得のことが議題となった。
SNSフォローについてはfeedlyのみである。

このため、先述のSNSフォロー入力フォームの配列を拡張し(アイコン、title属性など)、テンプレートと両方で利用可能する。
それにより、SNSボタンの似たようなコードを列挙する必要がなくなる。

ポイントは、点在している、入力フォームの定義、取得関数、HTML生成の部分を1箇所に集約するのが望ましく。
その際、独立した取得関数があり、共通関数化するなど見直しが必要。


このトピックは3週間前 2回から大門未知子に変更されました

   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 9年前
投稿: 18604
 

ご提案いただきありがとうございます。
コードを参考にさせていただいて、リファクタリングを行いました。
https://github.com/xserver-inc/cocoon/commit/f5c8dc3f042d59b8294731e872e3c62788316bc8#diff-cf0afe1675693c91c2528cff9ecc5ca0a1f6a0df02bb3e1d500788ec6cc02ce5



   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4598
トピックスターター  

----------------------------------------------
テーマ名:Cocoon
バージョン:2.9.3.12
カテゴリー数:18
タグ数:123
投稿数:1755
固定ページ数:15
ユーザー数:1
----------------------------------------------
改善されていることを確認しました。
本件をクローズとします。


●今後の改善案

SNSフォロー情報配列を更に拡張し、テンプレートのSNSフォローボタンを配列を元に生成。
get_the_author_metaを用い直接カスタムフィールドからデータを取得しており。
従来の取得関数の必要有無を見直す必要があり。

ここまでやると、配列の追加、削除のみで、SNSフォロー情報を管理でき。

lib/sns-follow.php

https://notepad.pw/share/wtcz18qd

tmp/sns-follow-buttons.php

https://notepad.pw/share/c0mu61sy2



   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4598
トピックスターター  

●ご参考

lib/sns-follow.php

先述のコードはSNSフォロー情報が2つの関数に分かれていたので、1つに統合。(統合版での確認はしていません)

https://notepad.pw/share/7nkb42k39

利点

いずれ、関数get_theme_sns_follow_servicesにfilterフックを追加。
get_theme_sns_follow_servicesからテンプレートに反映する仕組みになれば、フックを用い新設したいSNSフォローを簡単に追加できるようになる。

同様の仕組みをSNSシェアにも取り入れることを検討要。



   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 9年前
投稿: 18604
 

ファクタリングを行ってみました。
関数などは後方互換のため残します。
https://github.com/xserver-inc/cocoon/commit/a2bf64384659a2fcda7772e7f26b836bf42fdedf


この投稿は3週間前ずつわいひらに変更されました

   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4598
トピックスターター  

@yhira さん

----------------------------------------------
テーマ名:Cocoon
バージョン:2.9.3.12
カテゴリー数:18
タグ数:123
投稿数:1755
固定ページ数:15
ユーザー数:1
----------------------------------------------

https://github.com/xserver-inc/cocoon/blob/4df69325508a9c374b46da9090f78396c9223f7a/lib/sns-follow.php#L136-L301

上記の関数にフックを追加したい。
これにより、ユーザーが必要に応じ容易に入力フォームからボタンまで作成できる。
※従来の場合、未使用フォームを流用して、別のSNSフォローボタン(CSSでアイコンを差し替え)を追加する方法だった。

https://notepad.pw/share/lm5zurxh


この投稿は3週間前ずつ大門未知子に変更されました

   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 9年前
投稿: 18604
 

ご提案いただきありがとうございます。
フィルターフックを追加させていただきました。
https://github.com/xserver-inc/cocoon/commit/774e532cff92907a0dfccda0e7ed5d83ab5f4ff6



   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4598
トピックスターター  

----------------------------------------------
テーマ名:Cocoon
バージョン:2.9.3.12
カテゴリー数:18
タグ数:123
投稿数:1755
固定ページ数:15
ユーザー数:1
----------------------------------------------

追加されていることを確認しました。
本件をクローズとします。


●ご参考

このフックによりテンプレートを操作することなく簡単に、Cocoon標準にないSNSフォローボタン例えば「Pixiv」など追加でき。

また、テンプレートファイルを変更する場合、子テーマtmpフォルダーにコピーせず、Cocoon 2.6.8からフックのみで操作可能です。

functions.php

add_filter('cocoon_sns_follow_services', function($services) {
  $services['pixiv_url'] = array(
    'name'  => 'Pixiv',
    'title' => 'Pixivをフォロー',
    'class' => 'pixiv-button pixiv-follow-button-sq',
    'icon'  => 'icon-pixiv-logo',
  );

  return $services;
});

style.css

アイコンは、Fontawesome5にないので、例えば白黒アイコン画像とする。

style.css
.icon-pixiv-logo:before {
  background-color: var(--cocoon-pixiv-color);
  content: '';
  display: block;
  height: 1em;
  mask-image: url('アイコン画像');
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: cover;
  width: 1em;
}

/* プロフィール */
.body .author-box .icon-pixiv-logo:before {
  background-color: #999;
}

/* 本文下 */
.bc-monochrome .icon-pixiv-logo:before,
.bc-brand-color .icon-pixiv-logo:before {
  background-color: #fff;
}

[class*=bc-brand-color] .pixiv-button {
  --cocoon-sns-color: var(--cocoon-pixiv-color);
}

この投稿は3週間前 4回ずつ大門未知子に変更されました

   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 9年前
投稿: 18604
 

ご確認いただきありがとうございます。確かにカスタマイズできる人には便利ですね。



   
共有:

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

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

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

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

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

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

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

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