Underscoresでカスタムテーマを作る：ソーシャルボタン対応編

Underscores で魔改造したメモその５。
シェアボタンとかつぶやくボタンとかを自力でやっつける。

Compass導入編
ナビゲーションメニュー改造編
Bootstrap(Sass)導入編
ウィジェット作成編
ソーシャルボタン対応編 ←今ここ

対応を求められたのは「Facebookのシェアボタン」「Twitterのつぶやくボタン」「LINEの送るボタン」の３つで、
LINEのボタンはモバイルで表示しているときだけ表示する。
共有するテキストはページタイトル＋URLとする。

Facebook

詳細は公式ページに書いてある。
公式のAPIそのまま使ってもいいが、ボタンデザインを変えたいとなるとそのまま使う事はできない。

スキーム	`fb:`
URL	`http://www.facebook.com/share.php?u=共有したいＵＲＬ`

OG

タイトルやdescriptionなどはhdead内のogメタデータから取得する。
デバッグツールで確認すること。

このmetaタグをテンプレートに入れればよい：

<meta property="og:type" content="website">
<meta property="og:url" content="ページのURL">
<meta property="og:image:url" content="ページ画像へのURL">
<meta property="og:title" content="ページタイトル">
<meta property="og:site_name" content="サイトタイトル">
<meta property="og:description" content="ページのサマリー">

フォームに関する注意

公式APIそのまま使っている状況でボタン押した時に表示されるコメント入力フォームは、
クリック対象にした要素内に生成されたiFrameであるためoverflow:hiddenやz-indexの影響で消える事が稀によくある。

タイムライン用サムネイル

200x200px以上の画像(1500x1500px推奨）を用意しておく。

Twitter

詳細は公式ページに書いてある。
こちらもボタンをカスタマイズしたいとなるとそのまま使えない。

スキーム	`twitter:`
URL	`http://twitter.com/share?url=共有したいＵＲＬ&text=ツイート内に含める文字 &via=ツイート内に含まれるユーザー名&related=関連アカウント&hashtags=ハッシュタグ`
URL	`twitter://post?message=`

LINE

詳細は公式ページに。

スキーム	`line:`
URL	`line://msg/text/送りたいテキスト`

LINEはアプリを使う事が前提なので、スキームを指定しておく。

テンプレートの対応

OGメタタグ

header.phpに追加する。

トップページ、アーカイブ、404、検索、単一ページで条件分けして出力を変更する。
URLを取得する関数がWPに存在してないアーカイブと検索結果は $_SERVER の値を使用する。

    <meta property="og:type" content="website">
    <meta property="og:site_name" content="<?php bloginfo( 'title' ); ?>">
<?php if ( (is_front_page() && is_home()) || is_front_page()): //デフォルトホームページ or 固定ページを使ったホームページ ?>
    <meta property="og:description" content="<?php bloginfo( 'description' ); ?>">
    <meta property="og:title" content="<?php bloginfo( 'title' ); ?>">
    <meta property="og:url" content="<?php bloginfo('url'); ?>">
<?php elseif (is_archive()): ?>
    <meta property="og:title" content="<?php echo single_cat_title() ?>">
    <meta property="og:description" content="<?php echo wp_trim_words(category_description(), 200); ?>">
    <meta property="og:url" content="<?php echo(my_get_url()); ?>">
<?php elseif (is_404()) :?>
    <meta property="og:description" content="<?php bloginfo( 'description' ); ?>">
    <meta property="og:url" content="<?php bloginfo('url'); ?>">
<?php elseif (is_search()) :?>
    <meta property="og:title" content="『<?php the_title(); ?>』の検索結果">
    <meta property="og:description" content="サイト内で『<?php the_title(); ?>』を検索した結果のページです">
    <meta property="og:url" content="<?php echo(my_get_url()); ?>">
<?php elseif (is_page()): ?>
    <meta property="og:description" content="<?php echo wp_trim_words(get_post_field('post_content', get_the_ID()), 200) ?>">
    <meta property="og:url" content="<?php the_permalink(); ?>">
    <meta property="og:title" content="<?php the_title(); ?>">
<?php elseif (is_single()): ?>
    <meta property="og:description" content="<?php echo wp_trim_words(get_the_excerpt(), 200); ?>">
    <meta property="og:url" content="<?php the_permalink(); ?>">
    <meta property="og:title" content="<?php the_title(); ?>">
<?php else : ?>
    <meta property="og:description" content="<?php bloginfo( 'description' ); ?>">
    <meta property="og:title" content="<?php the_title(); ?>">
    <meta property="og:url" content="<?php bloginfo('url'); ?>">
<?php endif ?>

og:imageは投稿サムネイルがあるときはそれを指定して、ないときはデフォルトにしておく。

    <?php if (is_singular() && has_post_thumbnail()):?>
        <meta property="og:image" content="<?php echo wp_get_attachment_url(get_post_thumbnail_id()) ?>">
        <link rel="image_src" href="<?php echo wp_get_attachment_url(get_post_thumbnail_id()) ?>">
    <?php else : ?>
        <meta property="og:image" content="<?php echo get_template_directory_uri() ?>/assets/images/common/facebook.jpg?<?php echo(MY_VERSION) ?>">
        <link rel="image_src" href="<?php echo get_template_directory_uri() ?>/assets/images/common/facebook.jpg?<?php echo(MY_VERSION) ?>">
    <?php endif; ?>

<?php
define( 'MY_VERSION', '0.1.0' );

//functions.php
function my_get_url() {
   return ((empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]);
}
?>

シェアボタン

inc/template-tags.phpにボタン表示用の関数を追加

<?php
/**
 * シェアボタン
 */
function my_share_btn($type = 'pc') {
?>

<?php if (wp_is_mobile()): ?> 
<ul>
    <li>
        <a href="<?php my_the_share_url() ?>" target="_blank" rel="nofollow">
            シェア
        </a>
    </li>
    <li>
        <a target="_blank" href="<?php my_the_share_url('twitter') ?>" rel="nofollow">
            ツイート
        </a>
    </li>
    <li>
        <a target="_blank" href="<?php my_the_share_url('line') ?>" rel="nofollow">
        送る
      </a>
    </li>
</ul>
<?php else: ?>
<ul>
    <li>
        <a href="<?php my_the_share_url() ?>" onclick="window.open(this.href, 'facebook', 'width=600, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" rel="nofollow">
            Facebookでシェア
        </a>
    </li>
    <li>
        <a target="_blank" href="<?php my_the_share_url('twitter') ?>" rel="nofollow">
            Twitterでシェア
        </a>
    </li>
</ul>
<?php endif; ?>
<?php
} 
?>

テキスト生成関数

ページタイトルを返す関数はtitleタグでもつかえます
（詳しくは→あれこれ編）


/**
 * URLを返す
 * @return string
 */
function my_get_url() {
   return ((empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]);
}

/**
 * 親カテゴリのオブジェクトを返す
 * @return Object
 */
function my_get_the_parent_category() {
    $categories = get_the_category();
    
    foreach ($categories as $category) {
     if ( $category->parent === 0 ) {
        return $category;
     }
    }
}

/**
 * ページタイトルを返す（wp_titleの代用）
 * @return string
 */
function my_get_page_title() {
    global $post;
    $blogtitle = trim(str_replace(get_bloginfo('title'), '', wp_title( '', false )));

    if ((is_front_page() && is_home()) || is_front_page()) {

    } elseif(is_archive()) {
        $term = get_queried_object();
        if (is_object($term) && $term->category_parent !== 0) {
            $blogtitle .= ' | ' . get_cat_name($term->category_parent);
        }

    } elseif(is_tag()) {
        $blogtitle = 'タグ『' . single_cat_title('', false) . '』が登録されている記事 | ' . get_bloginfo('title');

    } elseif(is_search()) {
        $blogtitle = '『' . single_cat_title('', false) . ' 』の検索結果 | ' . get_bloginfo('title');

    } elseif(is_page()) {
        if ($post->post_parent > 0) {
            $parent =  get_post_field('post_title', $post->post_parent);
            $blogtitle .= ' | ' . $parent;
        }

    } elseif (is_single()) {
        $category = my_get_the_parent_category();

        $blogtitle .=   ' | ' . $category->name;

    }
    if ((is_front_page() && is_home()) || is_front_page()) {

        return get_bloginfo('title');

    }

    return $blogtitle . ' | ' . get_bloginfo('title');
}

/**
 * シェアボタン用のURLを返す
 * @param null $type ソーシャルボタンのタイプ(twitter|line|facebook)
 */
function my_the_share_url($type = null) {

    $content_title = gf_get_page_title();
    
    if ((is_front_page() && is_home()) || is_front_page()) {
        $content_url = get_bloginfo('url');

    } elseif(is_tag()) {
        $content_url = my_get_url();
        
    } elseif(is_search()) {
        $content_url = my_get_url();

    } elseif (is_singular()) {
        $content_url = get_the_permalink();
        
    } else {
        $content_url = get_bloginfo('url');
    }

    switch ($type) {
        
        case 'twitter':
            echo '//twitter.com/share?url=' . urlencode($content_url) . '&text=' . urlencode($content_title);
            break;
        
        case 'line':
            echo 'line://msg/text/'. urlencode(str_replace(array(" ", "|"), array("", "\r\n"), $content_title)) . '%0D%0A' . urlencode($content_url);
            break;
        
        default: //facebook
            echo '//www.facebook.com/sharer.php?u=' . urlencode($content_url);
            break;
            
    }
    
}
?>

表示したいところで使う：

<?php my_share_btn(); //シェアボタン ?>