ソーシャルプラグインボタンの設置場所について

  • 解決済 syrup23

    (@syrup23)


    10年、 11ヶ月前

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

    初心者質問で申し訳ありませんが、どうぞよろしくお願い致します。

    現在Twenty Fourteenを親テーマに、子テーマ内にソーシャルプラグインボタンを設置しようとしております。
    使用WPバージョンと、テーマは以下のものです。
    WordPress のバージョン:WordPress 3.8
    使用テーマ：親テーマとしてTwenty Fourteen1.0　入手先:WordPress.org　

    SNSのボタンを設置したく、プラグインも使用してみましたが、facebookのいいねボタンをクリックしたときの表示をカスタマイズしたかったので、プラグインをやめて、以下の手順で設置しようとしております。

    1.FacebookでOGP取得

    2.子テーマにheader.phpを作成

    3.<head>-</head>内に以下のmetaデータを追記

    <!– Open Graph Tags –>
    <meta property=”og:title” content=”<?php the_title(); ?>” />
    <meta property=”og:type” content=”article” />
    <meta property=”og:url” content=”<?php the_permalink() ?>” />
    <meta property=”og:description” content=”<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>” /><!– 追記したDescription –>
    <!– サムネイル画像に関して –>
    <?php if (has_post_thumbnail()) :?>
    <?php
    $image_id = get_post_thumbnail_id();
    $image_url = wp_get_attachment_image_src($image_id,’medium’);
    ?>
    <meta property=”og:image” content=”<?php echo $image_url[0]; ?>”>
    <?php else: ?>
    <meta property=”og:image” content=”<?php bloginfo(‘stylesheet_directory’); ?>/images/eyecatch.jpg”>
    <?php endif ;?>
    <!– サムネイル画像に関してここまで –>
    <meta property=”og:site_name” content=”サイトタイトルを表記” />
    <meta property=”fb:app_id” content=”5720XXXXXXXXXXX” />

    4.<body>直下にOGP用HTML5用スクリプトタグ

    <!– ここから　OGP設定タグ　–>
    <div id=”fb-root”></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=5720XXXXXXXXXXX”;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));</script>
    <!– ここまで　OGP設定タグ　–>

    5.表示したい場所にボタン用の以下のタグを設置

    /* ここからソーシャルプラグインボタン */
    /* いいね！ボタン */
    <div class=”fb-like” data-href=”<?php the_permalink(); ? data-width=”450″ data-layout=”button_count” data-action=”like” data-show-faces=”true” data-share=”false”></div>
    /* tweetボタン */
    ツイート
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement
    (s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>
    <!– Googleプラスワンボタン –>
    <g:plusone href=”<?php the_permalink(); ?>”></g:plusone>
    /* ここまでソーシャルプラグインボタン */

    PHPがよくわかりませんので、5.の表示したい場所、というと、content.phpだろうか？と思い、<!– .entry-content –>　前に入れてアップしてみました。

    すると、ヘッダーだけは表示されるのですが、その下の部分が読み込まれない状態になってしまいました。

    いろいろ調べてはみたのですが、情報が見つからず、どのPHPのどこにコードを入れたらよいのかが解らず、困りましてこちらで質問させていただきました。

    お解かりになる方がいらっしゃいましたら、どうぞよろしくお願い申し上げます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • ishihara takashi

    (@ishihara-takashi)

    10年、 10ヶ月前

    基本的に、 the_permalink()などは投稿ループ外では呼び出せません。

    方法はいろいろありますが、知識範囲からみるに、

    http://wordpress.org/plugins/wordpress-seo/
    ( OGPを投稿毎に自由に設定可能 )
    上記プラグインを使用し、いいねボタンを普通に設置するのがいいかと思います。

    また、`/* いいね！ボタン */
    <div class=”fb-like” data-href=”<?php the_permalink(); ? data-width=”450″ data-layout=”button_count” data-action=”like” data-show-faces=”true” data-share=”false”></div>
    /* tweetボタン */`
    の<?php the_permalink(); ? data-width=”450″ …….を<?php the_permalink(); ?> data-width=”450″ …..に変更してください。

    トピック投稿者 syrup23

    (@syrup23)

    10年、 10ヶ月前

    ishiharaさん、投稿ありがとうございます。

    「基本的に、・・」の件で、PHPなんだからPHPで書かなくてはダメだという超基本的なことに気づけたことと、「方法はいろいろありますが、」と書いてくださったことで、出来るはずだと確信が持てたおかげで、無事設置できました。

    解決方法としては、タグやスクリプト毎に、新たにそれぞれPHPファイルを作ってheader.phpとcontent.phpに読み込んでもらうという形にしたところ、ほぼ理想どおりの形にすることができました。
    ありがとうございました！

    <?php the_permalink(); ? data-width=”450″ …….を<?php the_permalink(); ?> data-width=”450″ …..に変更、というご指摘も本当にありがとうございます。
    助かりました！

    解決済みとさせていただきます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「ソーシャルプラグインボタンの設置場所について」には新たに返信することはできません。