web-dev-qa-db-ja.com

記事のフッターの共有ボタン

webサイトの場合、ブログページの各記事のフッターセクションにFacebookとTwitterの共有ボタンを配置する必要があります（すべての記事が表示されている箇所）。

私は多くのソーシャルプラグインをテストし、ShareThisを使用した場合にのみこの結果を得ることができました。 （私は運もなくSharebar、社交的、そして社会的なものも試した）。

残念ながらSharethisは私のウェブサイトにボタンから数ピクセルをカットするレイアウトのバグがあります、あなたはこのスクリーンショットでそれを見ることができます：

http://postimg.org/image/gdog4h8nz/

これらのボタンを作成するネストされたスパンタグを制御することはできないため、これを修正する方法についてはわかりません。

誰もがその国境の問題を解決する方法を知っていますか、または同じことをし、よりよく機能する別のソーシャルプラグインを知っていますか？

編集：

これは私がメモ帳++で見たコードです：

    <div class="entry-content">
    <?php 
    $share = "<span class='st_facebook_hcount' displayText='Facebook'></span><span class='st_Twitter_hcount' displayText='Tweet'></span>";
    //the_content( __( $articlefooter, 'twentythirteen' ) );
    the_content( __( '<footer id="sv-align-right" class="entry-meta">'.$share.'<span id="sv-read-article" class="btn btn-default">Continua a leggere <span class="meta-nav">&raquo;</span></span></footer>', 'twentythirteen' ) );
    ?>
    </div><!-- .entry-content -->

$ share変数内のコードは、実行時にShareThisスクリプトによって置き換えられ、たくさんのネストされたスパンタグによってさらに大きくなります。

<footer id="sv-align-right" class="entry-meta">
<span class="st_facebook_hcount" displaytext="Facebook" st_processed="yes">
<span style="text-decoration:none;color:#000000;display:inline-block;cursor:pointer;"     class="stButton">
<span>
<span class="stMainServices st-facebook-counter" style="background-image: url(http://w.sharethis.com/images/facebook_counter.png);">&nbsp;
<img src="http://w.sharethis.com/images/check-big.png" style="position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; max-width: 19px; max-height: 19px; display: none;"></span><span class="stArrow">
<span class="stButton_gradient stHBubble" style="display: inline-block;">
<span class="stBubble_hcount">0
</span></span></span></span></span></span>
<span class="st_Twitter_hcount" displaytext="Tweet" st_processed="yes">
<span style="text-decoration:none;color:#000000;display:inline-block;cursor:pointer;" class="stButton">
<span>
<span class="stMainServices st-Twitter-counter" style="background-image: url(http://w.sharethis.com/images/Twitter_counter.png);">&nbsp;
<img src="http://w.sharethis.com/images/check-big.png" style="position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; max-width: 19px; max-height: 19px; display: none;">
</span>
<span class="stArrow">
<span class="stButton_gradient stHBubble" style="display: inline-block;">
<span class="stBubble_hcount">0
</span></span></span></span></span></span>
<span id="sv-read-article" class="btn btn-default">Continua a leggere <span class="meta-nav">»</span></span>
</footer>

問題を解決するために編集可能なネストされたスパンタグを見つけましたが、それを制御することはできません。私はこのようにstMainservicesクラスに高さを追加することを試みました：

.stMainServices {
    height:24px;
}

しかしChromeから私はスタイルがどういうわけか上書きされるのを見ます。

pluginspostsfootersocial-sharing
1
Terix

これがgenericonsを使った解決策です。オリジナルのコードは この質問から派生したものです 私が尋ね、toschoで答えました。回答。こちらをチェック してください

まず、テーマの genericon pack をダウンロードしてインストールします。 genericonスタイルシートをエンキューする

function enqueue_genericon_style() {
      wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.0.2' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_genericon_style' );

以下をfunctions.phpに追加してください。この関数はshare urlとgenericonsを追加することによってすべての大変な作業を行います。

function pietergoosen_social_share_buttons() {
    $services = array (
        'facebook' => array (
            'url'  => 'https://www.facebook.com/sharer/sharer.php?u=%1$s',
            'text' => esc_attr(__('Share on Facebook.', 'pietergoosen' )),
            'icon' => '<span class="genericon genericon-facebook"></span>'
        ),
        'Twitter' => array (
            'url'  => 'http://Twitter.com/home/?status=%1$s%%20-%%20%2$s',
            'text' => esc_attr(__('Tweet this post!', 'pietergoosen' )),
            'icon' => '<span class="genericon genericon-Twitter"></span>'
        ),
        'googleplus' => array (
            'url'  => 'https://plus.google.com/share?url=%1$s',
            'text' => esc_attr(__('Google+1.', 'pietergoosen' )),
            'icon' => '<span class="genericon genericon-googleplus"></span>'
        ),
        'linkedin' => array (
            'url'  => 'https://www.linkedin.com/shareArticle?mini=true&url=%1$s&amp;title=%2$s&amp;summary=%3$s&amp;source=%4$s',
            'text' => esc_attr(__('linkedin.', 'pietergoosen' )),
            'icon' => '<span class="genericon genericon-linkedin"></span>'
        ),
        'reddit' => array (
            'url'  => 'http://reddit.com/submit?url=%1$s&amp;title=%2$s',
            'text' => esc_attr(__('Reddit.', 'pietergoosen' )),
            'icon' => '<span class="genericon genericon-reddit"></span>'
        ),
        'stumbleupon' => array (
            'url'  => 'http://www.stumbleupon.com/submit?url=%1$s&amp;title=%2$s',
            'text' => esc_attr(__('StumbleUpon.', 'pietergoosen' )),
            'icon' => '<span class="genericon genericon-stumbleupon"></span>'
        ),
        'digg' => array (
            'url'  => 'http://digg.com/submit?phase=2&amp;url=%1$s&amp;title=%2$s',
            'text' => esc_attr(__('Digg this post!', 'pietergoosen' )),
            'icon' => '<span class="genericon genericon-digg"></span>'
        ),
        'gmail' => array (
            'url'  => 'https://mail.google.com/mail/?view=cm&amp;fs=1&amp;to&amp;su=%1$s&amp;t=%2$s',
            'text' => esc_attr(__('Share with Gmail', 'pietergoosen' )),
            'icon' => '<span class="genericon genericon-mail"></span>'
        )
    );

    $title    = the_title_attribute( array ( 'echo' => FALSE ) );
    $url      = urlencode( get_permalink() );
    $summary  = the_excerpt();
    $source   = '';

    print '<h4>' . __( 'Share this post with others', 'pietergoosen' ) . '</h4>';

    echo '<div class="socialgenericons service">';

        foreach ( $services as $name  => $service )
        {
            $href = sprintf( $service['url'], $url, urlencode( $title ), urlencode( $summary ), urlencode( $source ) );
            $genericon = $service['icon'];

            printf(
                '<a href="%1$s" title="%2$s" alt="%2$s">%3$s</a>',
                $href,
                $service['text'],
                $genericon
            );
        }

    echo '</div>';  
}

ボタンを表示する必要があるところに、content.phpの<?php pietergoosen_social_share_buttons(); ?>を追加します。

リンクがクリックされたときにポップアップを開くには、enqueue_genericon_style()関数に以下を追加してください。

wp_enqueue_script( 'pietergoosen-socialshare', get_template_directory_uri() . '/js/socialshare.popup.js', array( 'jquery' ), '' , true );

あなたが持っていない場合は、今あなたのテーマにjsフォルダを作成します。 jsフォルダーにsocialshare.popup.jsというファイルを作成します。そのファイルに次の行を追加します。

jQuery(document).ready(function($) {

    jQuery('.socialgenericons.service a').live('click', function(){

        newwindow=window.open($(this).attr('href'),'','height=450,width=700');

        if (window.focus) {newwindow.focus()}

        return false;

    });

});

これでうまくいくはずです。あなたのボタンはこのようになります。それに応じてgenericonsをスタイルする必要があります。

Social buttons

編集

私はカスタムの抜粋を使用しているので、この回答の目的でそれをthe_excerpt()に変更しました。そうしないと致命的なエラーが発生します。

1
Pieter Goosen

私の知る限りでは、テーマファイルのどこかに次のコードを含めることができるはずです。適切なアイコンをアップロードする必要があります。

//Facebook Share
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php echo get_permalink() . '&p[title]=' . get_the_title(); ?>"><img src="[facebook icon url]" /></a>

//Twitter Share
<a href="https://Twitter.com/intent/tweet?url=<?php echo get_permalink() . '&text=' . get_the_title(); ?>"><img src="[Twitter icon url]" /></a>

//Google+ Share
<a href="https://plus.google.com/share?url=<?php echo get_permalink(); ?>"><img src="[google+ icon url]" /></a>

共有に標準のURLを使用するものが他にあると確信していますが、あなたは要点を得ます。誤字のため事前に申し訳ありません。

2
unifiedac

これが解決策です。私は私のエレガントテーマ「Divi」でも同じ問題を抱えていましたが、他のテーマではそうではありませんでした。私は尋ねました、そしてサポートフォーラムで答えはCSSにあります：

.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {
    height: 28px !important;
}

また、カウントバブルの場合：

.stHBubble {
    height: 22px !important;
}
1
ConnectSheep