サムネイルカードにソーシャルボタンを設置したいです。

Simplicityの特徴 › フォーラム › 要望・機能追加など › サムネイルカードにソーシャルボタンを設置したいです。

  • このトピックには5件の返信、2人の参加者があり、最後にmsにより11年、 5ヶ月前に更新されました。
5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #26865
      ms
      ゲスト

      いつもお世話になっております。

      サムネイルカード(記事一覧)の下に
      ソーシャルボタンを追加したいのですが、どのようにすれば可能でしょうか?

      【通常のサムネイルカードの並び】
      ・タイトル
      ・日付など
      ・本文の抜粋

      【希望のサムネイルカードの並び】
      ・タイトル
      ・日付など
      ・ソーシャルボタン(シェア、ツイート、シェアなど)
      ・本文の抜粋

      上記のイメージです。

      お手数ですが、よろしくお願いします。

    • #26872
      hidekichi
      ゲスト

      該当phpを改造しても良いのですが、jQueryでお手軽にどうでしょうか?
      昨日、「某掲示板のレスに何かしらの広告プラグインを入れて、それはわかったけれどもSNSボタンを入れる方法はないでしょうか?」というようなトピックが立ちまして、それに対応すべく書いていたものの、書いてる間にトピックが閉じられたので、「うぉぉぉ、これどないしよう…」と思ってたのがあったので紹介します。

      参考: jQueryでcloneして貼っつける | jsfiddle

      しょーもない部分で手を入れてしまったりして時間がかかってしまったんですけど、まぁやってることは記事中の何かしらのセレクタ(ブロック)をclone(複製)して、ターゲット(該当部分)の手前に貼っつけると言う感じです。

      var sns = $("#sns").clone();
      $("#test").children().before(sns);

      どの部分を複製するかでちょっと内容が変わるかも知れませんが、

      変数snsに、元のSNS部分のブロックをクローンします。上記fiddleのリンクでhtmlの部分(左上)を見てもらったらhtmlの構造がわかってもらえると思うんですけれども、#testはsnsの部分を囲むブロックになります。もしこれが、.sns-button-なんちゃらとかの場合はそれが複製する元のブロックになります。
      仮にバイラルボタンでタイトル下のものであれば#sns-group-topになるでしょうか。

      var sns = $(“#sns-group-top”).clone(); と言う感じです。

      次に貼り付けたい部分ですけれども、fiddleのhtmlで、

      <div id="test">
        <div class="res1"></div>
        <div class="res2"></div>
        <div class="res3"></div>
        <div class="res4"></div>
      </div>

      このような構造になっています。$(“#test”).children()と言うのは、#testの子要素全部にあたりますので、各res*の子要素には該当せず、各res*が該当します。その手前(.before())に入れるわけですから、上記のjQueryが動作すると、

      <div id="test">
        // ここ
        <div class="res1"></div>
        // ここ
        <div class="res2"></div>
        // ここ
        <div class="res3"></div>
        // ここ
        <div class="res4"></div>
      </div>

      のように、各res*の手前にsnsでクローンしたものが入ることになります。もし、これがトップページ(デフォルト)の記事一覧の場合は、該当するオリジナルのSNS部分がないので利用できません。フォローのボタンでしたらヘッダ右上にあったりすると思うんですけれども…。

      (ここからphpの方を何とか)

      entry-body.php(トップページの記事一覧から各タイトルをクリックして表示される各ページ)を見ると、該当部分には、

      <?php if ( is_single() ) get_template_part('sns-buttons-top');//タイトル下の小さなシェアボタン?>

      このようなスクリプトが入っています。トップページの記事一覧はlist.phpに当たるので、それを見ると記事一覧のリストはentry-card.phpで設定されているようです。なので、entry-card.phpの最後あたり

        </p><!-- /.post-meta -->
      
          //ここらに挿入
          <?php echo get_template_part('sns-buttons-top'); ?>
          //あるいはechoはいらないかも
      
        <p class="entry-snippet"><?php echo get_the_custom_excerpt( get_the_content(''), get_excerpt_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?></p>

      ただし、上記の場合sns-button-top.phpを読み込むのでentry-card.phpが読み込まれた際、追記したボタンの部分でレイアウトが崩れるかも知れません。そういった場合は、<?php echo get_template_part(‘sns-buttons-top’); ?>を囲むようにして、何かしらのブロック(div class=”test”のようなもの)を入れておいて、それでスタイルが崩れないようにしておき、その中にボタンを読み込むというようなひと手間が必要になるかも知れません。

      <div class="test">
        <?php echo get_template_part('sns-buttons-top'); ?>
      </div>

      こんな感じです。
      またphpはすべて親テーマを触ることになるだろうと思うので、アップデートの際に上書きしてしまったりして泣かないように、必ずカスタマイズ後は手を入れた部分のファイルをバックアップしておくようにして下さい。

    • #26877
      ms
      ゲスト

      返信ありがとうございます。
      むつかしいですね。理解に時間がかかります。頑張ってみます。^^

    • #26887
      アバター画像わいひら
      キーマスター

      今一番よく使われている方法なら、以下のトピックに書き込んだSNSカウント数キャッシュプラグインを使用した方法かもしれません。
      トピック: 一覧ページにシェア数を表示するカスタマイズについて

    • #26906
      hidekichi
      ゲスト

      しばらくテスト用に公開しておきますが、うちの海外サーバーの方で、サイトトップページの記事一覧にSNSボタンを突っ込むと言う内容でのボタンの設置はできました。

      が、バイラルボタン等で数値が取得できないようです。デフォルトのものは直接読みに行っているのでイケてるっぽいのですが、なぜ数値が取得できないのか、理由はわかっているんですけど解決方法を模索してます。

      Simplicityでは、javascript.jsにある function get_social_count_***の部分に、アドレスと数値部分のセレクターを指定してやれば数値が取得できるんです。

      javascript.jsの上記functionのやや下辺りに、

      get_social_count_twitter(social_count_config.permalink, '.twitter-count');

      等の部分があるので、ここがfunction get_social_count_***に対してアドレスとセレクタを指定している部分かと思います。ただ、social_count_config.permalink←こやつがどこから来てるのかがわからないんです(汗)

      つまり、この部分に各記事タイトル部分辺りのアドレスを抽出して入れれば動作するとは思うんですけれども…。
      と、結構面倒な感じになってきたのでプラグインでイケるならプラグインを利用される方がお手軽だろうと思います。

    • #26914
      ms
      ゲスト

      hidekichiさん
      わいひらさん

      お世話になっております。
      丁寧な返答をいただきありがとうございます。

      プラグインなど試してみます。
      自分では手に負えないところは外注したほうがよさそうですね。(^^;

      ありがとうございます!

5件の返信スレッドを表示中
  • トピック「サムネイルカードにソーシャルボタンを設置したいです。」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)